c




  |
|
|| u
   u|

Objectives:
0 Design should organize the user interface purposefully, in meaningful and
useful ways
0 The design should make simple, common tasks easy, communicating clearly
and simply in the user's own language, and providing good shortcuts that are
meaningfully related to longer procedures
0 The design should make all needed options and materials for a given task
visible without distracting the user with extraneous or redundant information
0 The design should keep users informed of actions or interpretations, changes
of state or condition, and errors or exceptions
0 The design should be flexible and tolerant, reducing the cost of mistakes and
misuse by allowing undoing and redoing
0 The design should reuse internal and external components and behaviors,
maintaining consistency with purpose rather than merely arbitrary consistency

c



 

Interaction between users and computers occurs at the user interface (or simply
a
[, which includes both software and hardware; for example, characters or
objects displayed by software on a personal computer's monitor, input received from
users via hardware peripherals such as keyboards and mouse, and other user
interactions with large-scale computerized systems such as aircraft and power plants.

  

  

a. Before we can answer the question "How do we make our user-interfaces
better", we must first answer the question: Better for º
å A design that
is better for a technically skilled user might not be better for a non-
technical businessman or an artist.
b. One way around this problem is to create user models. [TOG91] has an
excellent chapter on brainstorming towards creating "profiles" of possible

p

 | |  
||½|
c



  |
|
|| u
   u|

users. The result of this process is a detailed description of one or more

"average" users, with specific details such as:
i. What are the user's goalså
ii. What are the user's skills and experienceå
iii. What are the user's needså
c. Armed with this information, we can then proceed to answer the question:
How do we leverage the user's strengths and create an interface that
helps them achieve their goalså
d. In the case of a large general-purpose piece of software such as an
operating system, there may be many different kinds of potential users. In
this case it may be more useful to come up with a list of ‘ a


a ,
such as "skilled vs. unskilled", "young vs. old", etc., or some other means
of specifying a continuum or collection of user types.
e. Another way of answering this question is to talk to some real users.
Direct contact between end-users and developers has often radically
transformed the development process.

u !! " !#$!!%


0 Identify the user of your proposed HCI application.
0 List down the goals and objectives.
0 List down the needs of the user.

2  !& !& !

a. The most important thing you can possibly do is ensure your user
interface works consistently. If you can double-click on items in one list
and have something happen, then you should be able to double-click on
items in any other list and have the same sort of thing happen.
b. Put your buttons in consistent places on all your windows, use the same
wording in labels and messages, and use a consistent color scheme
throughout.

p

 | |  
||2|
c



  |
|
|| u
   u|

c. Consistency in your user interface enables your users to build an accurate

mental model of the way it works, and accurate mental models lead to
lower training and support costs.
o '!!! (!!)
a. The only way you can ensure consistency within your application is to set
user interface design standards, and then stick to them. You should follow
Agile Modeling (AM[ s Apply Modeling Standards practice in all aspects of
software development, including user interface design.

u !! " !2#$!!%


0 Create a prototype design of your proposed application.

´ " *!  !)+ !, !)  )!!

a. If it is difficult to get from one screen to another, then your users will
quickly become frustrated and give up. When the flow between screens
matches the flow of the work the user is trying to accomplish, then your
application will make sense to your users. Because different users work in
different ways, your system needs to be flexible enough to support their
various approaches.
b. User interface-flow diagrams should optionally be developed to further
your understanding of the flow of your user interface.
- " *!  !   )!!
a. In Western societies, people read left to right and top to bottom. Because
people are used to this, should you design screens that are also organized
left to right and top to bottom when designing a user interface for people
from this cultureå
b. You want to organize navigation between widgets on your screen in a
manner users will find familiar to them.

p

 | |  
||o|
c



  |
|
|| u
   u|

â $)*. .,,! ".

a. The text you display on your screens is a primary source of information for
your users. If your text is worded poorly, then your interface will be
perceived poorly by your users.
b. Using full words and sentences, as opposed to abbreviations and codes,
makes your text easier to understand. Your messages should be worded
positively, imply that the user is in control, and provide insight into how to
use the application properly.
c. For example, which message do you find more appealing ³You have input
the wrong information´ or ³An account number should be eight digits in
length.´
d. Furthermore, your messages should be worded consistently and displayed
in a consistent place on the screen.
e. Although the messages ³The person s first name must be input´ and ³An
account number should be input´ are separately worded well, together
they are inconsistent.
f. In light of the first message, a better wording of the second message
would be ³The account number must be input´ to make the two messages
consistent.

u !! " !o#$!!%


0 Choose a programming language of your own expertise ( for stand-alone or web-
based application[
0 Transform your prototype design into a programmable design
? Create forms (menu, sub-menu, buttons, labels, textboxes[

 !!  *!

a. You should use the right widget for the right task, helping to increase the
consistency in your application and probably making it easier to build the
application in the first place.

p

 | |  
||´|
c



  |
|
|| u
   u|

b. The only way you can learn how to use widgets properly is to read and
understand the user-interface standards and guidelines your organization
has adopted.
 * $ *!/ . 

0 u(!!. !  !* ,.!
a. Unless you know another application has been verified to follow the user
interface-standards and guidelines of your organization, don t assume the
application is doing things right.
b. Although looking at the work of others to get ideas is always a good idea,
until you know how to distinguish between good user interface design and
bad user interface design, you must be careful.
c. Too many developers make the mistake of imitating the user interface of
poorly designed software.
1 . !.
 Color should be used sparingly in your applications and, if you do use it,
you must also use a secondary indicator. The problem is that some of
your users may be color blind and if you are using color to highlight
something on a screen, then you need to do something else to make it
stand out if you want these people to notice it. 
b. You also want to use colors in your application consistently, so you have a
common look and feel throughout your application.
,./ . 

23..!!!.
a. If you are going to use color in your application, you need to ensure that
your screens are still readable. The best way to do this is to follow the
contrast rule: Use dark text on light backgrounds and light text on dark
backgrounds.
b. Reading blue text on a white background is easy, but reading blue text on
a red background is difficult. The problem is not enough contrast exists

p

 | |  
||Ë|
c



  |
|
|| u
   u|

between blue and red to make it easy to read, whereas there is a lot of
contrast between blue and white.
. *, .,,! ".
a. When a screen has more than one editing field, you want to organize the
fields in a way that is both visually appealing and efficient. I have always
found the best way to do so is to left-justify edit fields: in other words,
make the left-hand side of each edit field line up in a straight line, one over
the other. The corresponding labels should be right-justified and placed
immediately beside the field.
b. This is a clean and efficient way to organize the fields on a screen.
2
4!!)() !(
a. How many times have you accidentally deleted some text in one of your
files or deleted the file itselfå Were you able to recover from these
mistakes or were you forced to redo hours, or even days, of workå
b. The reality is that to err is human, so you should design your user
interface to recover from mistakes made by your users.
o5! ,! !.
a. For columns of data, common practice is to right-justify integers, decimal
align floating-point numbers, and to left-justify strings.

u !! " !´#$!!%


0 Add colors for your buttons and textboxes
0 Add background for your forms (menu, sub-menu[
0 Add also widgets in line with the user s specifications

´6 *.  ! ! .

a. In other words, if your users don t know how to use your software, they
should be able to determine how to use it by making educated guesses.
b. Even when the guesses are wrong, your system should provide
reasonable results from which your users can readily understand and
ideally learn.

p

 | |  
||â|
c



  |
|
|| u
   u|

-7!!  !,

a. Crowded screens are difficult to understand and, hence, are difficult to
use. Experimental results show that the overall density of the screen
should not exceed 40 percent, whereas local density within groupings
should not exceed 62 percent.
â/! *,,! ".
a. Items that are logically connected should be grouped together on the
screen to communicate they are connected, whereas items that have
nothing to do with each other should be separated.
b. You can use white space between collections of items to group them
and/or you can put boxes around them to accomplish the same thing.

u !! " !-#$!!%


0 Add frames to group similar contents
0 Add also list boxes if applicable
0 Menu and sub-menus must be functional (navigability[

 (".! 

a. Techniques such as user interface prototyping and Agile Model Driven
Development (AMDD[ are critical to your success as a developer.
08!.!. 
a. When you are developing the user interface for your system you will
discover that your stakeholders often have some unusual ideas as to how
the user interface should be developed. You should definitely listen to
these ideas but you also need to make your stakeholders aware of your
corporate UI standards and the need to conform to them.
1
4. !.
a. Your users need to know how to work with the application you built for
them. When an application works consistently, it means you only have to

p

 | |  
|||
c



  |
|
|| u
   u|

explain the rules once. This is a lot easier than explaining in detail exactly
how to use each feature in an application step-by-step.

u !! " !â#$!!%


0 Make your buttons functional (e.g. compute/calculate, save, add, edit[
0 Add tool tip text or message box to guide your user
0 Make sure your application is dynamic (ready for any changes from the user[

u !! " !â#$!!%
0 Conduct testing process within your application
0 Present your finished application

p

 | |  
||V|