Building great UX

I am not the typical “UX” guy. I am a developer at core. It is my opinion that in software development, one should not restrict themselves to a job description, but try their hands out on everything that adds value to users of the software. Doing so is much more fun.

This post is inspired from a post that I found on hacker news on building great UIs. UI is a huge part of UX, takes more than just good UI for a great UX.

UX has a very loose definition. In this post I am going to talk about UX for a typical web application.

  1. Light comes from the sky. Use light to project depth.  A great description of this is present in the post which I linked earlier.
  2. Display content horizontally only after capturing user’s attention (eg: forms with label and input control displayed side by side).
  3. Do not display content vertically if the user has to pay attention to more than one line (eg: forms with label on one line and input on the next).
  4. Browsing (look for interesting content) should be vertical and not horizontal.
  5. Keep the user’s eyes in the general area of top left of the screen.
  6. Content outside user’s range of vision blur into the background gradually and should not have sharp features.
  7. Content to which the user is paying attention should be slightly elevated (using light) from the rest if there are borders around it.
  8. Menus should be vertical as they are browse-able (eg Amazon). Horizontal menus are a legacy non-scroll-able desktop applications.
  9. Ads are not special enough to break point #6.
  10. Content with focus has bold text (of different color if needed) but the content should not expand.
  11. Focused content has sharper borders than non focused content.
  12. If it is necessary that the user has to move their eyes, it better be for a good reason. Try to group subsequent actions in the new region.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s