User Interface Design - IOE Notes

User interface design

Obj tiObjectives To suggest some general design principles for user interface design To explain different interaction styles and their use To explain when to use graphical and textual informationpresentation To explain the principal activities in the user interface designprocess To introduce usability attributes and approaches to systemevaluation

T i coveredTopicsd Design issues The user interface design process User analysis User interface prototyping Interface evaluation

Th user iinterfaceThet f User interfaces should be designed to match the skills,experienceiandd expectationst ti off itits anticipatedti i t d users. System users often judge a system by itsinterface rather than its functionality.y A poorly designed interface can cause a user to makecatastrophic errors. Poor user interfacef designdis theh reason whyh so manysoftware systems are never used.

HHumanfactorsf tini interfacei t fdesignd ig Limited short-term memory PeopleP l can iinstantaneouslyt tl rememberb aboutb t 7 ititems off iinformation.fti If youpresent more than this, they are more liable to make mistakes. People make mistakes WhenWh peoplel makek mistakesi k andd systems go wrong, iinappropriatei alarmsland messages can increase stress and hence the likelihood of more mistakes. People are different People have a wide range of physical capabilities. Designers should not justdesign for their own capabilities. People have different interaction preferences Some like pictures, some like text.

UI designd ig principlesi i l UI design must take account of the needs, experience andcapabilitiesbiliti off ththe systemt users. Designers should be aware of people’s physical and mentallimitations ((e.g.g limited short-term memory)y) and shouldrecognise that people make mistakes. UI design principles underlie interface designs although notallll principlesi i l are applicableli bl tot allll designs.d i

UUseriinterfacet fdesignd ig principlesi i lPrincipleDescriptionUser familiarityThe interface should use terms and concepts which are drawnfrom the experience of the people who will make most use of thesystem.systemConsistencyThe interface should be consistent in that, wherever possible,comparable operations should be activated in the same way.pMinimal surpriseUsers should never be surprisedpbyy the behaviour of a system.yRecoverabilityThe interface should include mechanisms to allow users torecover from errors.User guidanceThe interface should provide meaningful feedback when errorsoccur andd provideid context-sensitivet titi user helph l facilities.f ilitiUser diversityThe interface should provide appropriate interaction facilities fordifferent types of system user.

D ig principlesDesigni i l User familiarity TheTh interfacei t f shouldh ld beb basedb d on user-orientedi t dterms and concepts rather than computer concepts. For example, an officesystem should use concepts such as letters, documents, folders etc. ratherthan directories, file identifiers, etc. Consistency The system should display an appropriate levely Commands and menus should have the same format,,of consistency.command punctuation should be similar, etc. Minimal surprise If a command operates in a known way, the user should beable to predict the operation of comparable commands

D ig principlesDesigni i l Recoverability TheTh systemt shouldh ld provideid some resilienceilittouser errors and allow the user to recover from errors. This might include anundo facility, confirmation of destructive actions, 'soft' deletes, etc. User guidance Some user guidance such as help systems, on-line manuals, etc. should besupplied User diversity Interaction facilities for different types of user should be supported. Forexample, some users have seeing difficulties and so larger text should beavailable

D ig issuesDesigniiin UIUIs Two problems must be addressed in interactive systems design How should information from the user be provided to the computer system? How should information from the computer system be presented to theuser? User interaction and information presentation may be integratedthrough a coherent framework such as a user interface metaphor.

I tInteractionti stylest l Direct manipulation Menu selection Form fill-in Command language Natural language

Interaction stylesInteractionstyleMain advantagesMain Fast and intuitiveinteractionEasy to learnMay be hard to implement.Only suitable where there is avisual metaphor for tasks andobjectsobjects.Video gamesCAD systemsMenuselectionAvoids user errorLittle typing requiredSlow for experienced users.Can become complex if manymenu options.Most generalpurpose systemsForm fill-infill inSimple data entryEasy to learnCheckableTakes up a lot of screen space.spaceCauses problems where useroptions do not match the formfields.Stock control,controlPersonal loanprocessingCommandlanguagePowerful and flexibleHard to learn.Poor error management.Operatingpg systems,y,Command andcontrol systemsNaturallanguageAccessible to casualusersE il extendedEasilyt d dRequires more typing.Natural language und erstandingsystemstare unreliable.li blInformationretrieval systems

M lti l user interfacesMultiplei t f

LIBSYS interaction Document search Users need to be able to use the search facilities to find thedocuments that they need. Document request Users request that a document be delivered to their machine orto a server for printing.

Web based interfacesWeb-based Many web-based systems have interfaces based on webforms. Form field can be menus, free text input, radio buttons, etc. InI theh LIBSYS example,l users makek a choicehoff whereh tosearch from a menu and type the search phrase into a freetext field.

LIBSYS search form

Information presentation Information presentation is concerned with presentingsystemt iinformationfti tot systemt users. The information may be presented directly (e.g. text in aword pprocessor)) or mayy be transformed in some wayy forpresentation (e.g. in some graphical form). The Model-View-Controller approach is a way of supportingmultiplelti l presentationst ti off ddata.t

I fInformationti presentationt ti

Model view controllerModel-view-controller

I fInformationti presentationt ti Static information Initialised at the beginning of a session. It does not changeduring the session. May be either numeric or textual.textual Dynamic information Changesg duringg a session and the changesg must becommunicated to the system user. May be either numeric or textual.

I fInformationti displaydi l factorsf t Is the user interested in precise information or ddata relationships?l i hi ?How quickly do information values change?Must the changeg be indicated immediately?yMust the user take some action in response toa change?Is there a direct manipulation interface?Is the information textual or numeric? Are relative valuesimportant?

AltAlternativeti informationi fti presentationst ti

Analogue or digital presentation? Digital presentation Compact - takes up little screen space; Precise values can be communicated. AnalogueA lpresentationt ti Easier to get an 'at a glance' impression of a value; Possible to show relative values; Easier to see exceptional data values.

PPresentationt ti methodsth d

Di l i g relativeDisplayingl ti valuesl

D t visualisationDataili ti Concerned with techniques for displaying large amounts ofinformationinformation. Visualisation can reveal relationships between entities and trendsin the data. Possible data visualisations are: Weather information collected from a number of sources; The state of a telephonepnetwork as a linked set of nodes; Chemical plant visualised by showing pressures and temperatures in a linkedset of tanks and pipes; A model of a molecule displayed in 3 dimensions; Web pages displayed as a hyperbolic tree.

C lColourdidisplaysl Colour adds an extra dimension to an interface and can helpthe user understand complex information structures. Colour can be used to highlight exceptional events. CommonCmistakesi k iin theh use off colourl iininterface design include: The use of colour to communicate meaning; The over-use of colour in the display.

C lColouruse gguidelinesid li Limit the number of colours used and be conservative in theirthi use.Use colour change to show a change in system status.Use colour coding to support the task that users are trying toperform.Use colour coding in a thoughtful and consistent way.Be careful about colour pairings.

EErrormessagesg Error message design is critically important.Poor error messages can mean that a userrejects rather than accepts a system. Messages should be polite,polite concise,concise consistent andconstructive. The backgroundgand experiencepof usersshould be the determining factor in messagedesign.

Design factors in message wordingFactorDescriptionContextWherever possible, the messages generated by the system should reflect the currentuser context. As far as is possible, the system should be aware of what the user is doingand should generate messages that are relevant to their current activity.ExperienceAs u sers become familiar with a s ystem they become irritated by long,long ÔmeaningfulÕmessages. However, beginners find it difficult to understand short terse statements of aproblem. You should provide both types of message and allow the user to controlmessage conciseness.Skill levelMessagesg should be tailored to the userÕsskills as well as t heir experience.pMessagesgfor the different classes of user may be ex pressed in d ifferent ways depending on theterminology that is familiar to the reader.StyleMessages should be positive rather than negative. They should use the active ratherthan the passive mode of address. They should never be insulting or try to be funny.CultureWherever possible, the designer of messages should be familiar with the culture of thecountry where the system is sold. There are distinct cultural differences betweenEurope, Asia and America. A su itable message for one culture might be unacceptablein another.

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

Good and bad message design

The UI design process UI design is an iterative process involving close liaisonsbbetweentusers andd designers.d i The 3 core activities in this process are: User analysis.y Understand what the users will do with thesystem; System prototyping. Develop a series of prototypes forexperiment; Interface evaluation. Experiment with these prototypes withusers.

The design process

User analysis If you don’t understand what the users want to do with asystem, you have no realistic prospect of designing aneffective interface. User analyses have to be described in terms that users andother designers can understand. Scenarios where yyou describe typicalyp episodespof use,, are oneway of describing these analyses.

User interaction scenarioJane is a student of Religious Studies and is working on an essayon Indian architecture and how it has been influenced by religiouspractices To help her understand thispractices.this, she would like to accesssome pictures of details on notable buildings but can’t findanything in her local library.She approaches the subject librarian to discuss her needs and hesuggests some search terms that might be used. He also suggestssome libraries in New Delhi and London that might have thismaterial so they log on to the library catalogues and do somesearching using these terms. They find some source material andplace a request for photocopies of the pictures with architecturaldetail to be posted directly to Jane.

Requirements from the scenario Users may not be aware of appropriate search terms so needa way of helping them choose terms. Users have to be able to select collections to search. UsersUneedd to beb ablebl to carry out searchesh andd requestcopies of relevant material.

Analysis techniques Task analysis Models the steps involved in completing a task. Interviewing and questionnaires AsksA k theh users aboutb theh workk theyh ddo. Ethnography Observes the user at work.work