UI Design Patterns: Exploration of Data and Visual Imagery in Application Design

I was recently examining some interesting articles on Engadget and noticed  how the web site has been experimenting with different visual representations of data. As many know, Engadget is a high traffic tech blog. While it has not been special outside of the tech domain of knowledge. My eye caught something that was neat when trying to find popular articles and a little bit different. Next thing I knew I was no longer looking at the articles and instead was focusing on the interface design.

Engadget Uses A Visual Scatter Gram To Display Articles by Comment Posts

To begin with study the image to left or visit engadget.com. If you notice “the daily roundup” consists of  a dot representation by hour and volume of comments per article. In this interesting approach a large volume of data is depicted with minimal space. To an avid reader of the site it may not be of much use, but to a casual reader it can help them quickly pinpoint hot topics of the day. And for us multi-tasking tech geeks that is a time saver.

As your move your mouse over the dots a hover tool tip displays revealing  the article name, date, and number of comments.  As it is difficult to pinpoint a single dot on the screen a larger transparent circle displays around an area if the mouse pointer is on top of dot. This is important because a large cluster of data points can really cause usability issues with data overlapping.

Are there problems with this experience?

B. My design revision: includes a further display that gives each post a popularity index rating.

Based upon my own experience this type of interactive info-graphic can be misleading if you are using it solely to gauge what topics are the most important. Certainly there is something to say that the more a topic is commented upon the more people that have seen / will see the topic.

As my mind is constantly analyzing and investigating anything UI related  I started conjuring up a different  solution that could balance both popularity of comments versus the actual views to better depict important stories.  One possible implementation I arrived at involves adding some more visual data representations to the mouse-over event to form another type of chart. [ See my design idea illustration B.] In this design thee comments of an article are correlated with the page views to arrive at a popularity index. This could further be refined by defining page views as the click + total duration greater than 1:00 minute on a page.  This way we can eliminate any false data due to users visiting and leaving the page quick.

There are a lot of different ways this could be designed and developed and expanded. Most of the decision is going to depend on the audience your design is aimed at. When we look at this designing a complex UI to be simple  you really have to ask yourself  ”Is this just neat or is it providing benefit to my user base.?”  Neat is great and cool if your audience appreciates the cool factor,  but don’t get carried away or you might end up loosing users as opposed to gaining them.

Related articles:

1. Book Review: “The Visual Miscellaneum” – Explore The Design World of Infographics In Only A Few Moments
2. UI Design Challenge: Redesign A Filter Widget
3. UI Design Challenge: A Table or Grid With Too Much Information
4. UI Design Lessons: Are You Driving Your Application Usability Off A Cliff?
5. How Can I Speed up Proto-typing & Visual Design Mocks with Hybrid Design Proto-typing?