Software Engineering Chapter 16 User Interface Design Ku-Yaw Chang [email protected] Assistant...

Software EngineeringSoftware Engineering

Chapter 16Chapter 16User Interface DesignUser Interface Design

Ku-Yaw ChangKu-Yaw [email protected]@mail.dyu.edu.tw

Assistant ProfessorAssistant ProfessorDepartment of Computer Science and Information EngineeringDepartment of Computer Science and Information Engineering

Da-Yeh UniversityDa-Yeh University

22Ku-Yaw ChangKu-Yaw Chang User Interface DesignUser Interface Design

ObjectivesObjectives

Understand a number of user interface design principlesUnderstand a number of user interface design principles

Have been introduced to several interaction styles and Have been introduced to several interaction styles and

understand when these are most appropriateunderstand when these are most appropriate

Understand when to use graphical and textural Understand when to use graphical and textural

presentation of informationpresentation of information

Know what is involved in the principal activities in the Know what is involved in the principal activities in the

user interface design processuser interface design process

Understand usability attributes and have been introduced Understand usability attributes and have been introduced

to different approaches to interface evaluationto different approaches to interface evaluation


PreamblePreamble

Software engineers often take responsibility for Software engineers often take responsibility for user interface designuser interface design Only large organizations employ specialist interface Only large organizations employ specialist interface

designersdesigners

Focus on the design process for user interfacesFocus on the design process for user interfaces Graphical user interfacesGraphical user interfaces


PreamblePreamble

Take into account the physical and mental Take into account the physical and mental capabilities of the peoplecapabilities of the people People have a limited short-term memoryPeople have a limited short-term memory

Seven items of informationSeven items of information People make mistakesPeople make mistakes

Warning messages and alarms put more stress on usersWarning messages and alarms put more stress on users People have a diverse range of physical capabilitiesPeople have a diverse range of physical capabilities

See better / color-blindSee better / color-blind People have different interaction preferencesPeople have different interaction preferences

Pictures or textPictures or text


User Interface Design PrinciplesUser Interface Design Principles

Principle Description

User familiarity The interface should use terms and concepts which are drawnfrom the experience of the people who will make most use of thesystem.

Consistency The interface should be consistent in that, wherever possible,comparable operations should be activated in the same way.

Minimal surprise Users should never be surprised by the behaviour of a system.

Recoverability The interface should include mechanisms to allow users torecover from errors.

User guidance The interface should provide meaningful feedback when errorsoccur and provide context-sensitive user help facilities.

User diversity The interface should provide appropriate interaction facilities fordifferent types of system user.


ContentsContents

16.1 Design issues16.1 Design issues

16.2 The UI design process16.2 The UI design process

16.3 User analysis16.3 User analysis

16.4 User interface prototyping16.4 User interface prototyping

16.5 Interface evaluation16.5 Interface evaluation


Design IssuesDesign Issues

Two key questionsTwo key questions How should the user interact with the computer How should the user interact with the computer

system?system? How should information from the computer system be How should information from the computer system be

presented to the user?presented to the user?


User InteractionUser Interaction

User interactionUser interaction Issue commands and associated data to the Issue commands and associated data to the

computer systemcomputer system

Five primary stylesFive primary styles Direct manipulationDirect manipulation Menu selectionMenu selection Form fill-inForm fill-in Command languageCommand language Natural languageNatural language


Interaction StylesInteraction Styles

Interactionstyle

Main advantages Main disadvantages Applicationexamples

Directmanipulation

Fast and intuitiveinteractionEasy to learn

May be hard to implement.Only suitable where there is avisual metaphor for tasks andobjects.

Video gamesCAD systems

Menuselection

Avoids user errorLittle typing required

Slow for experienced users.Can become complex if manymenu options.

Most general-purpose systems

Form fill-in Simple data entryEasy to learnCheckable

Takes up a lot of screen space.Causes problems where useroptions do not match the formfields.

Stock control,Personal loanprocessing

Commandlanguage

Powerful and flexible Hard to learn.Poor error management.

Operating systems,Command andcontrol systems

Naturallanguage

Accessible to casualusersEasily extended

Requires more typing.Natural language understandingsystems are unreliable.

Informationretrieval systems


Multiple User InterfacesMultiple User Interfaces

Linux operating system

X-windows GUImanager

Graphical userinterface

(Gnome/KDE)

Commandlanguageinterpreter

Unix shellinterface(ksh/csh)


LIBSYS Search FormLIBSYS Search Form

LIBSYS: Search

Choose collection

Keyword or phrase

Search using

Adjacent words

Search Reset Cancel

All

Title

Yes No


Information PresentationInformation Presentation

A good design guidelineA good design guideline To keep the software required for information To keep the software required for information

presentation separate from the information presentation separate from the information itselfitself


Information PresentationInformation Presentation

Information tobe displayed

Presentationsoftware

Display


Model-View-ControllerModel-View-Controller

Model methods

Controller methods View methods

Userinputs

view modificationmessages

Model edits

Model queriesand updates

Controller state View state

Model state


Alternative Information PresentationsAlternative Information Presentations

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar3164

April2789

May1273

June2835


Presentation MethodsPresentation Methods

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar


Displaying Relative ValuesDisplaying Relative Values

0 100 200 300 400 0 25 50 75 100

Pressure Temperature


Design Factors in Message WordingDesign Factors in Message Wording

Factor Description

Context Wherever 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.

Experience As u sers become familiar with a s ystem they become irritated by 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 level Messages should be tailored to the userÕs skills as well as their experience. Messagesfor the different classes of user may be expressed in different ways depending on theterminology that is familiar to the reader.

Style Messages 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.

Culture Wherever 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.


Color DisplaysColor Displays

Color adds an extra dimension to an Color adds an extra dimension to an interface and can help the user understand interface and can help the user understand complex information structures.complex information structures.Color can be used to highlight exceptional Color can be used to highlight exceptional events.events.Common mistakes in the use of color in Common mistakes in the use of color in interface design include:interface design include: The use of color to communicate meaning;The use of color to communicate meaning; The over-use of color in the display.The over-use of color in the display.


Color Use GuidelinesColor Use Guidelines

Limit the number of colors used and be conservative in Limit the number of colors used and be conservative in their use.their use.

4 to 5 in a window4 to 5 in a window 7 in a system interface7 in a system interface

Use color change to show a change in system status.Use color change to show a change in system status.Use color coding to support the task that users are trying Use color coding to support the task that users are trying to perform.to perform.Use color coding in a thoughtful and consistent way.Use color coding in a thoughtful and consistent way.Be careful about color pairings.Be careful about color pairings.

Red and blueRed and blue


User ErrorUser Error

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

Please type the patient’s name in the box then click on OK

MacDonald, R.

OK Cancel

Patient’s name


Good and Bad Message DesignGood and Bad Message Design

Error #27

Invalid patient id

OK Cancel

System-oriented error messageUser-oriented error message

R. MacDonald is not a reg istered patient

Click on Patients for a list of patientsClick on Retry to re-input the patient’s nameClick on Help for more information

Patients Help Retry Cancel


ContentsContents







The UI Design ProcessThe UI Design Process

An interactive processAn interactive process User interact with designers and interface prototypesUser interact with designers and interface prototypes

Three core activitiesThree core activities User analysisUser analysis

An understanding of the tasks that users do, their working An understanding of the tasks that users do, their working environment, how they interact with other people and so onenvironment, how they interact with other people and so on

System prototypingSystem prototypingThe evolution of the interfaceThe evolution of the interface

Interface evaluationInterface evaluationCollect information about users’ actual experience Collect information about users’ actual experience


UI Design ProcessUI Design Process

Executableprototype

Designprototype

Produce paper-based design

prototype

Producedynamic design

prototype

Evaluate designwith end-users

Implementfinal userinterface

Evaluate designwith end-users

Analyse andunderstand

user activities


ContentsContents







Analysis TechniquesAnalysis Techniques

Task analysisTask analysis Models the steps involved in completing a task.Models the steps involved in completing a task.

Interviewing and questionnairesInterviewing and questionnaires Asks the users about the work they do.Asks the users about the work they do.

EthnographyEthnography Observes the user at workObserves the user at work


Hierarchical Task AnalysisHierarchical Task Analysis

Retrieve picturesfrom remote

libraries

Discoverpossiblesources

Establishsearchterms

Search forpictures

Requestphotocopies

of found items

1 2 3 4.

Selectlibrary

Log in tocatalogue

Search forpictures

Modifysearch terms

Recordrelevantitems

3.1 3.2 3.3 3.4 3.5

Enter searchterms

Initiatesearch

Reviewresults

3.3.1 3.3.2 3.3.3

do 1, 2,3 until pictures found, 4

do 3.1, 3.2,3.3 until pictures found,3.4 if necessary, 3.5

do 3.3.1, 3.3.2, 3.3.3


Hierarchical Task AnalysisHierarchical Task Analysis

A high-level task is broken down into subtasksA high-level task is broken down into subtasks

AdvantageAdvantage Force you to consider each of the tasks and to decide Force you to consider each of the tasks and to decide

whether these should be decomposedwhether these should be decomposed

ProblemProblem Best suited to sequential processes onlyBest suited to sequential processes only


ContentsContents







User Interface PrototypingUser Interface Prototyping

AimAim Allow users to gain direct experience with the Allow users to gain direct experience with the

interfaceinterface Judge the usability of an interfaceJudge the usability of an interface

A two-stage processA two-stage process Early in the process, paper prototypes may be used;Early in the process, paper prototypes may be used; The design is then refined and increasingly The design is then refined and increasingly

sophisticated automated prototypes are then sophisticated automated prototypes are then developed.developed.


Prototyping TechniquesPrototyping Techniques

Script-driven approachScript-driven approach Develop a set of scripts and screens using a tool such Develop a set of scripts and screens using a tool such

as Macromedia Director. When the user interacts with as Macromedia Director. When the user interacts with these, the screen changes to the next display.these, the screen changes to the next display.

Visual programming languagesVisual programming languages Use a language designed for rapid development such Use a language designed for rapid development such

as Visual Basicas Visual Basic

Internet-based prototypingInternet-based prototyping Use a web browser and associated scripts.Use a web browser and associated scripts.


ContentsContents







Usability attributesUsability attributes

The EndThe End

Date post:	12-Jan-2016
Category:	Documents
Upload:	joan-owens
View:	221 times
Download:	0 times

Software Engineering Chapter 16 User Interface Design Ku-Yaw Chang [email protected] Assistant...

Documents