User interface design

The user interface User interface design is an essential part of the overall software design process User interfaces should be designed to match the skills, experience and expectations of its anticipated users. System users often judge a system by its interface rather than its functionality.

The user interface A poorly designed interface can cause a user to make catastrophic errors because UI does not consider their capabilities and their environments Poor user interface design is the reason why so many software systems are never used because Users feel that the system is not helping them to do what they should.

Human factors in interface design Take physical and mental capabilities of people who use the software Limited short-term memory People can instantaneously remember about 7 items of information. If you present more than this, they are more liable to make mistakes. People make mistakes When people make mistakes and systems go wrong, inappropriate alarms and messages can increase stress and hence the likelihood of more mistakes.

Human factors in interface design People are different People have a wide range of physical capabilities. Designers should not just design for their own capabilities.( some are colour blind, some better in physical manipulation see and hear better than others) People have different interaction preferences Some like pictures, some like text.

UI design principles UI design must take account of the needs, experience and capabilities of the system users. Designers should be aware of people’s physical and mental limitations (e.g. limited short-term memory) and should recognise that people make mistakes. These human factors are the basis for the design principles and guidelines shown below:

User interface design principles

Design principles User familiarity The interface should be based on user-oriented terms and concepts (related to the user environment , it should not force the user to adapt to it) rather than computer concepts. For example, an office system should use concepts such as letters, documents, folders etc. rather than directories, file identifiers, etc. Consistency The system should display an appropriate level of consistency. Commands and menus should have the same format, command punctuation should be similar, etc.(this reduce user learning time because knowledge learned in one commnad is applicable to other parts)

Design principles Minimal surprise Recoverability As the system is used , people build a mental model on how the system works. If a command operates in a known way, the user should be able to predict the operation of comparable commands. But if something different happens then the user is confused. Be sure that comparable actions have comparable effects. Recoverability Users inevitably make mistakes The system should provide some resilience to user errors and allow the user to recover from errors. This might include : Undo facility : restore the system to a state before the action Confirmation of destructive actions : is really what you want ? Checkpoints : save state of the system at periodic intervals

Design principles User guidance User diversity . User guidance Some user guidance such as help systems, on-line manuals, etc. should be supplied User diversity Interaction facilities for different types of user should be supported. For example, some users have seeing difficulties and so larger text should be available. For example casual users need interfaces that provide guidance , but power users require shortcuts so that they can interact as quickly as possible

Design issues in UIs Designer of a user interface is faced with some design issues to be considered when designing Two problems must be addressed in interactive systems design How should information from the user be provided to the computer system?(how user interaction with the system?) How should information from the computer system be presented to the user?

Interaction styles Direct manipulation Menu selection Form fill-in Command language Natural language

Direct manipulation Select a command from a menu Direct Interaction Direct interaction with objects Involves a device (mouse, touch screen , finger…etc). Ex: delete a file by clicking on an icon representing that file and drag it to a trash can icon. Menu selection Select a command from a menu Ex: file deletion by selecting a delete command

User fills in the fields of a form Form fill-in User fills in the fields of a form Command language User issue special command to the system. Ex: delete command with filename to delete a file Natural Language User issues a command in natural language Natura l command is translated into system commands Ex: type ”delete file xxx” to delete a file Each one has advantages and drawbacks

Interaction styles

Information presentation Information presentation is concerned with presenting system information to system users. The information may be presented directly (e.g. text in a word processor) Information may be transformed in some way for presentation (e.g. in some graphical form).

Information presentation Good Design should keep the software required for information presentation separate from from the information itself

Model-view-controller The Model-View-Controller approach is a way of supporting multiple presentations of data. The user can interact with each presentation in a style that is appropriate to the presentation . Data to be displayed is encapsulated in a model object. Each model object could have a number of separated view objects associated with it. Each view has an associated controller object that handles user input and device interaction.

Information display factors You should when designing UI take into account Is the user interested in precise information or data relationships? How quickly do information values change? Must the change be indicated immediately? Must the user take some action in response to a change? Is there a direct manipulation interface? Is the information textual or numeric? Are relative values important?

Information presentation Static information Initialised at the beginning of a session. It does not change during the session. May be either numeric or textual . (takes up less space screen but cannot be read at glance). Text if data change relatively slowly and precise info required Dynamic information Changes during a session and the changes must be communicated to the system user. May be either numeric or textual. NB : Try to distinguish static from dynamic by putting some “Static” flag.

Alternative information presentations Interested in the relationship between info rather than the precise values→Graphical presentation

Presentation methods

Displaying relative values Some presentation give the viewer some sense of the relative values T and P have the same value but T has almost reached its max while pressure is about 25%.

How Colours are used in the interface? Colour adds an extra dimension to an interface and can help the user understand complex information structures. Colour can be used to highlight exceptional events. But misuse of colours could lead to unattractive UI. Common mistakes in colour use in interface design include: The use of colour to communicate meaning; because a colour blind person may misinterpret the meaning The over-use of colour in the display.

Colour use guidelines Limit the number of colours used and be conservative in their use. Use colour change to show a change in system status. Use colour coding to support the task that users are trying to perform. Use colour coding in a thoughtful and consistent way. Be careful about colour pairings.

Error messages System also communicate with the user through messages that give information about errors and the system state. Error message design is critically important. Poor error messages can mean that a user rejects rather than accepts a system. Messages should be polite, concise, consistent and constructive. The background and experience of users should be the determining factor in message design. Users start working , then make mistakes . Impossible for unexperinced/casual users to understand the system messages. So Factors should be taken into account when designing system messages

Design factors in message wording

User error Assume that a nurse misspells the name of a patient whose records he is trying to retrieve.

Good and bad message design Bad design Not tailored to the user skills and experience level. No suggestion on how to solve the problem. Better design Positive Proposition for correcting the mistake