Responsive Layouts & Information Visualizations

As a web/UI designer, I have been asked to specifically design to fixed width and sometimes flexible/liquid layouts. When there is no specific direction, depending on the amount of information to be displayed on each page, I would either choose fixed width or flexible layout.

About six months ago, I received an email with the subject ‘Responsive Layout’ from my boss. The body of the email had few links, videos, and podcasts about the responsive layout. I was very curious to find out what it really is, so I clicked all the links that opened in my default Chrome browser with separate tabs. I went back to finish reading the rest of my email and in short, my boss had asked me to start thinking about converting our products to responsive layout. Here are the links that my boss had sent me:

http://adactio.com/journal/1696/

http://www.alistapart.com/articles/responsive-web-design/

After that day, I started googling and came across: http://bit.ly/m51JoB and http://www.hicksdesign.co.uk/

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

You might find many other sites that are adapting to the responsive layout design…

So, basically responsive layout design is a technique using flexible grids, images, css, and media queries to adjust layouts. Initially, I misunderstood and thought that this technique is not new. Well, it’s not new. But, how you do it—is, what’s new. Responsive layout adjusts to the size of a browser window, whereas the traditional way of supporting multiple devices would be to detect if a device is a desktop or mobile. For example, go to about.com on your desktop browser and resize the window, and notice the layout adjusts to fit perfectly to your viewing preference. Do the same with cnn.com. You might want to try this in your mobile browser; about.com would adjust to fit, whereas cnn.com would detect if the platform is desktop or mobile.

If I were to design a brand new site or redesign an existing site, I would prefer responsive layout over the platform detection technique. But, if an organization just wants their site to be on a mobile device and does not want to edit their existing source code, then I would choose the platform detection technique. I believe both of these techniques can be very effective if applied properly. But, the responsive layout adds to the list of choices for web/UI designers and probably stacks additional work to be done.

Social Features?

I found this link while doing research for my Craigslist redesign project: http://uxmovement.com/resources/poll-results-users-want-speed-over-social-features/

The survey was said to have found that speed of loading (Visibility of system status), simple design (Aesthetic and minimalist design), fewer clicks (Flexibility and efficiency of use) and a preference for text searching and intuitive navigation (User control and freedom & Consistency and standards) were important traits in web applications. This said, I think we've all heard that before in Nielsen's Heuristics and Shneiderman's "Eight Golden Rules of Interface Design".

Social Features, like a Tweet or Facebook "Like" button, seem to take the backseat to the basic usability of the site, which once typed out, seems to be common sense. To me, Social Features are just the modern version of the web Stat Counter - popular circa 1993 (and hopefully gone the way of everyone having angelfire websites). Everyone wants them on their site with the assumption that they will drive more traffic or interest - not to say, this doesn't happen or isn't at least somewhat effective for sharing information.

While an interesting article, the first thing that strikes me is how poorly the visual design of the pie chart is, specifically on a UX topic website. The use of color for the pie slices is the first thing that sticks out as a terrible mistake – the range of colors are too close to be readable and the legend perhaps would have been better as tailed text boxes pointing to each section. Secondly, the chart may have served better as a bar graph enabling the user to read the information quickly.