UI Design Basics

Source: UX Booth

User Interface Design, Getting the Basics Right.

Visual chunking:

  • it allows users to associate a kind of task with a particular area of their screen.
  • The four, basic groups are: Edit, Navigate, Share, and Display. Productivity applications, for example, usually consist of three chunks
  • A sidebar allows users to navigate to a certain point within their project, usually via thumbnails or sections.
  • A toolbar allows users to edit their project, and
  • A canvas displays the current state of a project.
  • To navigate, we often click links in the header or sidebar.
  • The largest portion of the page is used to display content.
  • Comment/feedback forms are used to edit the site, and
  • Social media buttons are used to share information.

While this rule is pretty straightforward, there’s one thing to avoid: mixing areas

Another rule of thumb: Group areas, but don’t mix them. For example, navigational buttons and social media buttons serve different purposes and should therefore bear little resemblance to one another.

Respect the Device

  • Users employ a myriad of devices to create, browse, share, and consume content – each with its own shape, size, and input method.
  • When designing for a horizontal device, we should capitalize on the horizontal space it affords, placing elements next to each other rather than on top of one another.

Remove Clutter, Not Features

  • users don’t choose applications because they are simple or easy to use. They choose based on whether or not they can accomplish a certain task.
  • Designers should integrate as many useful features as possible without cluttering the interface. To achieve this, they might employ tabs, dropdown menus, or other intelligent, context-sensitive solutions.
  • As a rule of thumb, be context-sensitive.
  • If a command or content category is likely to be accessed frequently, make it a button/link, otherwise make it a dropdown entry. If groups of commands are likely to be accessed frequently, store them in tabs, otherwise store the group categories in a dropdown. When offering mutually exclusive options, use radio buttons. And when offering independent choices, use check boxes.

Emphasizing with the end user. Be aware that even the smallest design decisions can affect users on a very deep, subconscious level. Put yourself in their position and try to create an interface that is not just visually slick but also usable and convenient in the long run.

Tagged with: , ,
Posted in UI

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

%d bloggers like this: