graphic_for_wiki.png


1.png
User Interface (UI) Design is the interaction the user has with the technology be it a software program, a website, a kitchen appliance, or even a cell phone. UI design is the interaction experience that the user has with their technology. Take this website for example-- how was it designed so that you can navigate, interact, and extract information from it? Meyers (1994) defines UI design as, “the part that handles the output to the display and the input from the person using the program" (3). In his study, Meyers (1994) explains that 48% of time and money is spent on creating the UI design of a software program (3). We can see from this study that UI design an extremely important aspect to software creation and usefulness.

2.png
Let’s start with the basics. What is interface and what is design? Alessi & trollip (2001) define interface to be interaction or communication from the program to the user (423). Google defines deign as a “blueprint: something intended as a guide...” When we put these two definitions together we have User Interface (UI) design: the design or blue print to a software program that communicates with the user. Blair-Early & Zender, like many articles and websites express, state that UI design must be intuitive and easy to use. In the Maryland Youtube video broadcast (1997) three basic norms were established for creating a cognitive UI design for users: predictable, comprehensible and controllable. Predictability, comprehensibility and controllability are all factors that contribute to a transparent UI design that allow users to freely and comfortably interact with the software.


The_three_norms_pictorial_image.png
tip_and_tech.png

Ambler’s website, Ambysoft, generated 18 different tip and techniques for creating an effective and transparent user interface. The following are four that I chose to summarize in hopes of presenting a simplified version of the website. You can visit the website at: www.ambysoft.com/essays/userInterfaceDesign.html.
  1. Explain the rules. State the rules of the software at the start. Make the software consistent throughout. This way the rules and procedures of the software will not have to be explained repeatedly.
  2. Navigation between major user interface items is important. When navigation from screen to screen is consistent with the flow of the work the user will be more comfortable with the flow of the software. Making the navigation from screen to screen unpredictable will make the experience frustrating for the user.
  3. Word your messages and labels effectively. Text displayed throughout your software should be relevant and necessary. Text that is relevant should be placed where the user can view it instantly and without trouble. Avoid using abbreviations, short writing, or anything that might be misinterpreted by the user.
  4. Don’t create busy user interfaces. Busy screen displays are distracting and misleading. Avoid overusing text, graphics, and other distracting media that is not necessary. It is hard to identify the necessary elements in a busy screen.

To create UI design for software that is predictable, comprehensible, and controllable, Ambysofts website http://www.ambysoft.com/essays/userInterfaceDesign.html#Principles, lists six principles. When creating interface design, these principals should be kept in mind in order to create one that is user centered.

3a.png
This design is used by elementary school students. Keeping the audience in mind, the UI design is simple and gives only one option to continue with the software. It is simple, comprehensible, predictable and controllable.
JIJ_UI.png
In this video, Google discusses the approaches they used to create simple and minimal UI design for their Chrome browser. This UI design is web based rather than software based, but it is a great example of the thinking process needed when creating a user friendly interface design.

If your UI design makes a user feel this way, you should rethink the design of your software so that it is more predictable, comprehensiable and controllable.

4.png
The future of interface design: http://www.youtube.com/watch?v=6Cf7IL_eZ38
How to create buttons for a clean and simple UI design in Photoshop: http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/
How to create a web application for your software UI design using Photoshop: http://www.webappers.com/2009/07/05/create-a-web-app-admin-user-interface-in-photoshop/
Tips & Techniques for created a comprehensible UI: http://www.ambysoft.com/essays/userInterfaceDesign.html
UI design prototypes: http://www.agilemodeling.com/artifacts/uiFlowDiagram.htm

Resources:
___
Author: Stephanie Valenzuela Ibarra
Last update:4/12/2011