Designing a user interface is hard, and even harder when on a string budget for a web application.
Luckily, there are a number of great resources on the net, and some great sites to gather inspiration from.
For this article, we’re going to look at the user interface for Vox.com Vox is a social blogging community created by Six Apart LTD.
In my opinion, Vox is one of the best UI designs on a social service. The design is crisp, easy to understand, and conveys all the major aspects of the site to user in a matter of seconds.
1. Grouped Task Bar
While others may disagree, I believe that the most important aspect of UI design is the task bar. Usually implemented as the top menu bar on a website or web application, Vox’s task bar stands out by using a distinct two-tone graphic to define the actions, as well as using large text so that the user notices the bar first.
The top portion of the task bar is reserved for user centric actions, such as your messenger, link to your profile, a help bar or search function, and so on. The bottom bar contains the most commonly used functions on the site, namely creating content, checking your profile, and checking on your friends.
2. Page Header & Description
Although it should go without saying, a well defined page header and description should always be near the top of your user’s perspective. When developing web applications, the general rule of thumb is to make sure that an adequate description of the current page and it’s purpose should appear within the first 200 pixels of the browser viewport. Another good rule of thumb is to avoid WTHAI, aka Where The Hell Am I? If this is the first thing your user utters when visiting your app or page, then you’ve failed.
3. Alternate Actions
A common development approach is to group actions into single sections or pages, which leads to a common UI approach: The Settings Menu. By grouping the page’s alternate actions into a left or right hand menu, you’re able to make your application more concise and easy to navigate. In my opinion, grouped menus should always be on the left, with a defined color seperator, but I have seen excellent right hand implementations ( Wordpress is one example ).
As a rule, you should avoid going any deeper than two on nested settings, otherwise the grouping will become confusing.
4. User Actions
And of course, one of the most common, and annoying, aspects of user design is accepting or prompting the end user for input or action. Vox does a great job of clearly breaking up multiple actions on the page into simple boxed groups, using a dashed border to separate them. Other ways to implement the groups would be colored backgrounds, or even a header & description box for each action. If you go the Header route, make sure to use a font size that is a few pixels smaller than your Page Header, otherwise it will cause confusion.
As seen in other Six Apart products, the designers at SA know what they are doing when it comes to user centric design.
Next article I’ll take a look at the Wordpress 2.5 UI changes and how they streamline the WP experience.
Subscribe to TehDevs!