user interface design phase i

7/30/2019 User Interface Design Phase i

1/63

User Interface Design

- An experience Sharing Session

By

P. ILANGO,

Asst. Professor & Division Leader,

Systems Architecture Division,

Programme Manager M.Tech.,

School of Computer Science & Engineering,

VIT University, Vellore 632014.

Mobile No.: 98 940 38 720

e-mail : [email protected]


2/63

P. ILANGO, Asst. Professor & Division Leader, System Architectur Division, School of Computer Sc. & Engg., VIT University

Roadmap

Introduction and Importance

Human-Computer Interface

Characteristics of Graphics Interface

Direct Manipulation Graphical System

Web User Interface

Popularity

Characteristics and Principles


3/63

May I screw your mind, please?

Are we comfortable with ATMs with touch screen?

Are we comfortable in using Internet Banking ?

Are we able to book tickets successfully always using irctc.co.in?

How many of you are happy with the Anna University website?

Ramco Marshal has been named as failure ERP? Why?


4/63

May I screw your mind, for another minute please?

Why is it important to offer keyboard short-cuts forequivalent mouse actions?

How would you present the current load on the system?Over time?

What is the worst UI you every used? Which designprinciples did it violate?

Whats the worst web site youve used recently? Howwould you fix it?

Whats good or bad about the MS-Word help system?


5/63

A fate of innocent boy -

> A boy has affair with a girl in a college.

> He was keep on proposing her.

> He was taking all efforts to impress her.

> Finally, She got impressed and they started enjoyingtheir life.

> The boy wants to present gifts to her and he alwaystakes her for shopping.

> She used to buy whatever she wants.

> She started influence him to go for shopping.

> But, her parents want to fix up another boy for her.

> She also felt that the new boy is better than the old oneand accepted for marriage.

5


6/63

> The innocent old boy understood all these things.

> He wrote a letter and gave it her in the corridor.

> The principal caught him and filed an enquiry.

> After the enquiry, the Principal asked his Secretary to

type the enquiry report.

> She typed like the following,

Terminate him, not leave him

but, actually the Principal dictated as

Terminate him not, leave him

6


7/63

Why study user interfaces?

Good UIs are critical to success

UI programming is

easy (sophisticated algorithms not required)

straightforward (can immediately correct mistakes)

fun (results are immediately visible)

rational (apply simple rules)

UI design is not graphic design


8/63

Cardinal axiom

A user interface is well-designed when theprogram behaves exactly how the user thoughtit would.

user is happy = user in control = S/W correctlyinterprets users actions

X loss of control depression, frustration(Learned Helplessness [Seligman])

Golden rules: place user in control,

reduce users memory load,

make interface consistent


9/63

Characteristics of Graphical User Interface

> Sophisticated Visual Presentation

> Pick-and-Click Interaction

> Restricted Set of Interface Options

> Visualization

> Object Orientation

> Use of Recognition Memory

> Concurrent Performance of Functions


10/63

GUI Characteristics

Characteristic Description

WindowsMultiple windows allow different information to bedisplayed simultaneouslyon the users screen.

IconsUsually icons represent files(including folders andapplications), but they may also stand for processes(e.g., printer drivers).

MenusMenus bundle and organize commands(eliminating theneed for a command language).

Pointing A pointing device such as a mouse is used forcommand choicesfrom a menu or indicating items ofinterest in a window.

GraphicsGraphical elements can be commandson the samedisplay.


11/63

GUIs

Advantages> They are easy to learnand use.

Users without experience can learn to use the system quickly.

> The user may switch attentionbetween tasks and applications.> Fast, full-screen interactionis possible with immediate access to the

entire screen

Problems

> A GUI is not automatically a good interface

Many software systems are never useddue to poor UI design

A poorly designed UI can cause a user to make catastrophic errors


12/63

Web-based interfaces

> Many web-based systems have interfaces based on web

forms.

> Form field can be menus, free text input, radio buttons, etc.

> In many products unknowingly users make a choice of

where to search from a menu and type the search phrase

into a free text field.


13/63

Web User Interface

> The Popularity of the Web> Characteristics of a Web Interface

> GUI Versus Web Page Design

> Printed Pages Versus Web Pages Page Size Page Rendering

Page Layout

Page Resolution User Focus Page Navigation Sense of Place

Page Independence


14/63

User s Requirements Analysis

> If you dont understand what the users want to do with a

system, you have no realistic prospect of designing an

effective interface.

> User analyses have to be described in terms that users

and other designers can understand.

> Scenarios where you describe typical episodes of use,

are one way of describing these analyses.


15/63

User interaction scenario

Jane is a student of Religious Studies and is working on an essay

on Indian architecture and how it has been influenced by religious

practices. To help her understand this, she would like to access

some pictures of details on notable buildings but cant findanything in her local library.

She approaches the subject librarian to discuss her needs and he

suggests some search terms that might be used. He also suggests

some libraries in New Delhi and London that might have this

material so they log on to the library catalogues and do somesearching using these terms. They find some source material and

place a request for photocopies of the pictures with architectural

detail to be posted directly to Jane.


16/63

Requirements from the scenario

> Users may not be aware of appropriate search terms so

need a way of helping them choose terms.

> Users have to be able to select collections to search.

> Users need to be able to carry out searches and request

copies of relevant material.


17/63

Analysis techniques

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

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

> Ethnography

Observes the user at work.


18/63

Hierarchical task analysis

Retrieve pictures

fro m remo te

libraries

Discover

possiblesources

Establish

searchterms

Search forpictures

Request

photocopiesoffound items

1 2 3 4.

Select

library

Log i n to

catalogue

Search for

pictures

Modify

search terms

Record

relevant

i tems

3.1 3.2 3.3 3.4 3.5

Entersearch

termsInitiate

search

Review

results

3.3 .1 3.3 .2 3.3 .3

do 1, 2,

3 unt il pictures found, 4

do 3.1, 3.2,

3.3 u ntil pictu res found ,

3.4 if necessary , 3.5

do 3.3.1, 3.3.2, 3.3.3


19/63

Interviewing

> Design semi-structured interviews based on open-ended

questions.> Users can then provide information that they think is

essential; not just information that you have thought ofcollecting.

> Group interviews or focus groups allow users to discusswith each other what they do.


20/63

Ethnography

> Involves an external observer watching users at work

and questioning them in an unscripted way about theirwork.

> Valuable because many user tasks are intuitive and theyfind these very difficult to describe and explain.

> Also helps understand the role of social andorganisational influences on work.


21/63

Ethnographic records

Air traffic control involves a number of control suites where the suites

controlling adjacent sectors of airspace are physically located next to

each other. Flights in a sector are represented by paper strips that are

fitted into wooden racks in an order that reflects their position in the

sector. If there are not enough slots in the rack (i.e. when the airspace

is very busy), controllers spread the strips out on the desk in front of the

rack.

When we were observing controllers, we noticed that controllers

regularly glanced at the strip racks in the adjacent sector. We pointed

this out to them and asked them why they did this. They replied that, ifthe adjacent controller has strips on their desk, then this meant that

they would have a lot of flights entering their sector. They therefore tried

to increase the speed of aircraft in the sector to clear space for the

incoming aircraft.


22/63

Human factors in interface design

> Limited short-term memory People can instantaneously remember about 7 items of

information. If you present more than this, they are more liableto make mistakes.

> People make mistakes When people make mistakes and systems go wrong,

inappropriate alarms and messages can increase stress andhence the likelihood of more mistakes.

> People are different

People have a wide range of physical capabilities. Designersshould not just design for their own capabilities.

> People have different interaction preferences Some like pictures, some like text.


23/63

The User Interface Design Process

Step 1 - Know Your User or Client

Step 2 - Understand the Business Function

Step 3 - Understand the Principles of Good Interface and Screen Design

Step 4 - Develop System Menus and Navigation Schemes

Step 5 - Select the Proper Kinds of Windows

Step 6 - Select the Proper Interaction Devices

Step 7 - Choose the Proper Screen-Based Controls

Step 8 - Write Clear Text and Messages

Step 9 - Provide Effective Feedback and Guidance and Assistance

Step 10 - Provide Effective Internationalization and Accessibility

Step 11 - Create Meaningful Graphics, Icons and Images

Step 12 - Choose the Proper Colors

Step 13 - Organize and Layout Windows and Pages

Ste 14 - Test Test and Retest


24/63

The UI design process - Definition

> UI design is an iterative processinvolving close liaisons

between users and designers.

> The 3 core activities in this process are:

User analysis. Understand what the users will do with the

system;

System prototyping. Develop a series of prototypes for

experiment;

Interface evaluation. Experiment with these prototypes with

users.


25/63

ESE 8.25

The design process


26/63

Interface Design Models

Four different models occur in design:

1. The design model expresses the software design.

2. The user model describes the profile of the end users. (i.e.,novices vs. experts, cultural background, etc.)

3. The users modelis the end users perception of the system.

4. The system image is the external manifestationof the system (lookand feel + documentation etc.)


27/63

UI Models

ImplementationModel

MentalModel

Manifest Models BetterWorse


28/63

User Interface Design Principles

Principle Description

User familiarityUse terms and concepts familiarto the user.

ConsistencyComparable operations should be activated in thesame way. Commands and menus should have thesame format, etc.

Minimal surpriseIf a command operates in a known way, the usershould be able to predictthe operation of comparable

commands.

FeedbackProvide the user with visual and auditory feedback,maintaining two-way communication.


29/63

Principle Description

Memory loadReduce the amount of information that must beremembered between actions. Minimizethe memory

load.

EfficiencySeek efficiency in dialogue, motion and thought.Minimize keystrokes and mouse movements.

RecoverabilityAllow users to recover from their errors. Include undofacilities, confirmation of destructive actions, 'soft'deletes, etc.

User guidanceIncorporate some form of context-sensitive userguidanceand assistance.


30/63

Direct Manipulation

Advantages

> Users feel in controland are less likely to be intimidated by thesystem

> User learning timeis relatively short> Users get immediate feedbackon their actions

> mistakes can be quickly detected and corrected

Problems

> Finding the right user metaphormay be difficult> It can be hard to navigateefficiently in a large information space.

> It can be complex to programand demanding to execute


31/63

Menu Systems

Advantages> Users dont need to remember

command names> Typing effort is minimal> User errors are trapped by the

interface> Context-dependent help can be

provided (based on the currentmenu selection)

Problems> Actions involving logical conjunction(and) or disjunction (or) are

awkwardto represent> If there are many choices, some menu structuringfacility must be

used> Experienced users find menus slowerthan command language


32/63

Menu Structuring

Scrolling menus

> The menu can be scrolled to reveal additional choices

> Not practical if there is a very large number of choices

Hierarchical menus> Selecting a menu item causes the menu to be replaced by a sub-menu

Walking menus

> A menu selection causes another menu to be revealed

Associated control panels

> When a menu item is selected, a control panel pops-up with furtheroptions


33/63

Command Interfaces

With a command language, the user types commands to giveinstructions to the system

> May be implemented using cheap terminals

> Easy to processusing compiler techniques

> Commands of arbitrary complexitycan be created by commandcombination

> Concise interfacesrequiring minimal typing can be created


34/63

Command Interfaces

Advantages

> Allow experienced users to interact quicklywith the system

> Commands can be scripted(!)

Problems

> Users have to learn and remembera command language

> Not suitable for occasionalor inexperienced users

> An error detectionand recovery system is required> Typing abilityis required (!)


35/63

Analogue vs. Digital Presentation

Digital presentation

> Compact takes up little screen space

> Precise valuescan be communicated

Analogue presentation> Easier to get an 'at a glance' impressionof a value

> Possible to show relative values

> Easier to see exceptionaldata values


36/63

Colour Use Guidelines

Colour can help the user understand complex informationstructures.

> Dont use (only) colour to communicate meaning!

Open to misinterpretation(colour-blindness, cultural differences ...)

Design for monochrome then add colour

> Use colour coding to support user tasks

highlight exceptional events

allow users to control colour coding

> Use colour changeto show status change

> Don't use toomany colours

Avoid colour pairings which clash

> Use colour coding consistently

which clash


37/63

User Guidance

The user guidance system is integrated with the userinterface to help users when they need informationabout

the system or when they make some kind of error.

Includes

> System messages, including error messages

> Documentation provided for users> On-line help


38/63

Help system use

> Multiple entry pointsshould be provided the user should be able to get help from different places

> The help system should indicate where the user ispositioned

> Navigation and traversalfacilities must be provided


39/63

Error Message Guidelines

> Speak the users language

> Give constructive advicefor recovering from the error

> Indicate negative consequencesof the error (e.g., possibly corruptedfiles)

> Give an audible or visual cue

> Dont make the user feel guilty!


40/63

Usability Testing

> Observe a group of test subjects performing a pre-

defined scenario

Which test subjects?

How many test subjects?

Which scenarios?

What to observe?


41/63

User interface evaluation

> Some evaluation of a user interface design

should be carried out to assess its usability.

> Full scale evaluation is very expensiveand

impracticalfor most systems.

> Ideally, an interface should be evaluated against a

usability specification. However, it is rare for such

specifications to be produced.


42/63

Simple evaluation techniques

> Questionnairesfor user feedback.

> Video recordingof system use and subsequent tape

evaluation.

> Instrumentationof code to collect information about

facility use and user errors.

> The provision of code in the software to collect on-line

user feedback.


43/63

Hints

> Establish concrete goals what do you want to achieve?

What criteria will you use to establish success?

What data will you collect?

Choose representative test tasks.

> Carry out a pilot test first.

> Test users should truly represent the intended users.

> Use experienced experimenters. (Get trained!)

Make the test subjects feel comfortable.

Dont bias the results.


44/63

Usability Attributes

Attribute Description

LearnabilityHow long does it take a new user tobecome productivewith the system?

Speed ofoperation

How well does the system responsematch the users work practice?

RobustnessHow tolerantis the system of usererror?

RecoverabilityHow good is the system at recoveringfrom user errors?

AdaptabilityHow closely is the system tied to asingle modelof work?


45/63

Is there progress?


46/63

Now, thats progress!


47/63

I want them all!


48/63

Yes, I want that print thing too


49/63

In Excel, cut doesnt mean cut


50/63

Fun with scrolling!


51/63

More tabs please!


52/63

Without tabs


53/63

Helpful tips


54/63

Stop, please


55/63

I cant make up my mind


56/63

Green good red bad


57/63

Was that an error?


58/63

Uh ok


59/63

Yes I mean, no


60/63

No, I dont want to trash my disk!


61/63

Key points

> The user interface design process involves user analysis, systemprototypingand prototype evaluation.

> User interfacedesign principlesshould help guide the design ofuser interfaces.

> Interaction stylesinclude direct manipulation, menu systems formfill-in, command languages and natural language.

> Graphical displaysshould be used to present trends andapproximate values. Digital displayswhen precision is required.

> Colourshould be used sparingly and consistently.

> The goals of UI evaluationare to obtain feedbackon how toimprove the interface design and to assess if the interface meets itsusability requirements.


62/63

What you should know!

> What models are important to keep in mind in UIdesign?

> What is the principle of minimal surprise?

> What problems arise in designing a good directmanipulation interface?

> What are the trade-offs between menu systems andcommand languages?

> How can you use colour to improve a UI?

> In what way can a help system be context sensitive?


63/63

Phase II

> Direct-Indirect methods-> Basic business functions-

> Design standards-system timings

> Unit III

> Unit IV> Unit V

Finally, Review of the progress

P. ILANGO,

Mobile No.: 98 940 38 720

e-mail : [email protected]

user interface design phase i

Documents