User Interface Design Best Practices

User Interface Design: Best Practices

Design Language Comics

© 2007, Stacie Gomm, Utah State University

Imbedded User Languages

Stacie GommUtah State UniversityMay 2007


How do these relate?

How do you know that?© 2007, Stacie Gomm, Utah State University

The design of the key and keyhole concept is implicit

and it is has a languagewhich “speaks” to users

and let’s users know what they are supposed to do.


Does this “speak” to you?



This imbedded language is often overlooked or its

existence is not realized as users develop products which are used in our everyday lives.



The user language imbedded in every designed product

communicates to the users the use for/of that product.


Design of Everyday Things

The human mind is exquisitely tailored to make sense of the world. Give it the slightest clue and off it goes, providing explanation, rationalization, understanding. Consider the objects – nooks, radios, kitchen, appliances, office machines, and light switches – that make up our everyday lives. Well-designed objects are easy to interpret and understand. They contain visible clues to their operation. Poorly designed objects can be difficult and frustrating to use. They provide no clues –or sometimes false clues. They trap the user and thwart the normal processing interpretation and understanding (Norman, p. 2, italics added).

by Donald Norman



Included in every design are the affordances, mappings, visibility, and feedback and each of these

has it own implicit language which speaks to the user.

by Donald Norman



Affordances are the “perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be

used” (Norman, p. 9).

by Donald Norman

Mapping is a technical term meaning the “relationship between two things, in this case

between the controls and their movements and the results in the world. … Natural mapping … leads to

immediate understanding” (Norman, p. 23). © 2007, Stacie Gomm, Utah State University


In good design things are visible. “There are good mappings, natural relationships, between the controls and

the things that are controlled” (Norman, p. 22).

Feedback is the notion of sending back to the user information about what action has actually been done --

what result has been accomplished (Norman, p. 27).

by Donald Norman



Norman suggests that when developing a product ALL of the following should be included in its user language:

•Visibility – By looking the user can tell the state of the device and the alternatives for action.

•Affordances – The designer provides a good conceptual model for the user, with consistency in the presentation of operations and results and a coherent, consistent system image.

•Good mappings – It is possible to determine the relationship between actions and results, between the controls and their effects, and between the system state and what is visible.

•Feedback – The user receives full and continuous feedback about the results of actions. (Norman, p.53)

by Donald Norman


NetestA testing system developed at Utah State University that is used to administer the Computer and Information Literacy (CIL) tests.

Lack of communication could interfere with the user being able to pass a test.


Netest – Trainee Interface

Visibility

This screen shows all of the options available to trainees.



Affordances

It is obvious which buttons perform which tasks.



Mappings

Mapping buttons to their action is done well in this program.



Feedback

The buttons actually do what is expected.


Netest – Testing Interface

Norman contends that when simple things need pictures, labels, or instructions, the design has failed (p.9).


Implications for Portal Design

When building a portal there exists a language that communicates to the user the actions which are expected by the user. When a designer designs the portal, there is a built in user language. The designer must realize this fact in order for his design to be able to communicate effectively with its users. This language is used by the user to communicate with the portal system.


Implications for Portal

Show sample Portals

Identify commonalities and what the user expects



When developing instructional products, according to Norman, this is what instructional designers should do:

1. Understand the causes of error and design and to minimize those causes.

by Donald Norman



2. Make it possible to reverse actions –to “undo” them – or to make it harder to do what cannot be reversed.

3. Make it easier to discover the errors that do occur, and make them easier to correct.

by Donald Norman



4. Change the attitude toward errors. Think of an object’s user as attempting to do a task, getting there by imperfect approximations. Don’t think of the user as making errors; think of the actions as approximations of what is desired. (p. 131)

by Donald Norman



“Good” designers have a realization and understanding of

the user language contained within their products and insure complete communication takes place between the product and

user.© 2007, Stacie Gomm, Utah State University


Questions / Comments?

Contact Info:

[email protected]


User Interface Design Best Practices

Business

Transcript of User Interface Design Best Practices