Exploring Principles of User Interface Design

Structure

The structure principle has to do with the overall architecture of your interface and how objects are grouped together.

  • Group Objects effectively
  • Navigation within the screen is important
  • Look at other applications with a grain of salt

Microsoft Word is structured in a way so that similar tools are grouped into tabs, and further organized into sections within the tabs reducing the time required to find a specific tool. Navigation is quite simple as Word provides you with several methods to perform a single task, letting the user utilize the software in their own working style.

Simplicity

Simplicity in UI design refers to how understandable the interface is when users perform common tasks, such as providing shortcuts or hotkeys.

  • Consistency
  • Don’t create busy interfaces
  • Align Fields effectively

Adobe Reader keeps things incomplex as one toolbar gives you access to all the common tools, while advanced options can be accessed from the menu bar. It keeps the ‘page thumbnails’ panel minimized to the left providing the user with an option on how to scroll through the pages.

Visibility

Users should not be confused or distracted by unnecessary options or information, and options/items should be clearly visible.

  • Don’t create busy interfaces
  • Word your messages and labels effectively
  • Follow the Contrast Rule

FIFA 2012 (PS3) gives you a concise start menu which lets you instantly access any gameplay modes and displays your profile on the top. Current soccer news is also mentioned at the bottom in a marquee, but it’s small enough that it doesn’t distract you from the menu itself. Menu labels light up as you hover over them, and advanced options are present in submenus under each menu so you’re only exposed to the information needed.

Feedback

The interface needs to provide user feedback in a clear, concise manner which is easy to understand. It needs to keep the user aware of any actions, changes of state, exceptions or errors that occur as a result of interaction

  • Expect your users to make mistakes
  • Your design must be intuitable
  • Word your messages and labels effectively

Skype makes clever use of balloon-like alerts within the interface as well as several variations of ‘popping’ sounds to notify the user about the changes of state. The user is notified when they receive a message, a call or if another user goes offline or comes online.

Tolerance

Tolerance is concerned with the flexibility of the interface. The interface should allow for the cost of mistakes to be minimal, providing features such as undo and redo.

  • Expect your users to make mistakes
  • Justify Data appropriately
  • Your design must be intuitable

Notepad keeps things manageable for note-taking users concurrently providing undo and redo options. Users are also able to utilize the ‘word wrap’ feature to save on desktop space allowing you to multi-task while taking notes.

Reuse

The reuse principle is critical in how the internal and external components of your design are reused, reducing the need for user reconsideration.

  • Explain the Rules
  • Set Project Standards
  • Don’t create busy interfaces

Windows Media Player consists of a linear interface as it stays consistent to its purpose letting you play media without cluttering application space. The simple design and recurring functions for media files reduces user reconsideration on how to use the software.

[assignment partner: Ehsan Ramezani]
Advertisements

About Aamir Raza

VFX enthusiast and Digital Media Artist living in Toronto. // www.digitaleffectx.wordpress.com

Posted on February 24, 2012, in Interactivity and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink. Leave a comment.

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: