irmeli sinkkonen tkl, tutkija [email protected] ... · • build the navigation model ......

Irmeli Sinkkonen, TKK; Käytettävyys, Arkipäivän tuotteet

Usability GUI

Käyttöliittymät / GUI 1

GUI-developm entGUI-designIrmeli Sinkkonen

TkL, tutkija

[email protected]

[email protected]


Usability GUI


GUI-developm entGUI types

Almost GUI

One-time GUI

Standard GUIGUIsApple Windows 3.1Windows 95 OS/2 Motif


Usability GUI


GUI-developm entToday / Building GUIs

• (Select the applicationstructure)

• Build the navigation modeland evaluate

• Design the screens– Build the menus, evaluate– select the command

buttons– select the metaphors– select representations– create the fields, labels

and other controls– create the layout

– add the shortcuts andicons, evaluate

– check the colours,visibility, restrictions,conceptual model,mappings, symbollanguage, exits, andfeedback

• build the dialog boxesaccordingly

• build the helps• evaluate


Usability GUI


GUI-developm entDesigning windows• A typical mistake doing the windows looking

database windows when it should look likethe tasks

• ask always:– why the user looks at this window?

– Can this window somehow make it easier todecide what to do…

• what they actually want is ...


Usability GUI


GUI-developm entSummary• GUI- design is a creative process, with many

options

• Your design should reflect– the results of the interviews, task analysis

– existing conventions when applicable

– design guidelines when applicable

• Usability testing helps you decide which ofseveral options to pursue


Usability GUI


GUI-developm ent(Select the application structure)Build the navigation model and evaluateDesign the screens

Build the menus, evaluateSelect the command buttonsSelect the metaphorsSelect representationsCreate the layoutCreate the fields, labels and other controlsAdd the shortcuts and icons, evaluateCheck the colours, visibility, restrictions,conceptual model, mappings, symbol language, exits, and feedback

Build the dialog boxes accordinglyBuild the helpsEvaluate


Usability GUI


GUI-developm entProductdevelopment

RequirementsRequirements

Initial designInitial design

Interactivedesign

andtesting

Interactivedesign

andtesting

Design the navigation model

Design the navigation model

Design the windows

Design the windows

TestTest

UseUse

User descriptions-identification and categorisationTask analysisContext analysisiUsability requirements

User descriptions-identification and categorisationTask analysisContext analysisiUsability requirements

PrototypesUnfinished parts ofthe productUser interfaces

PrototypesUnfinished parts ofthe productUser interfaces

Navigation maps(Interaction models etc.)

Navigation maps(Interaction models etc.)

Interviews, meetingsquestionaires,observationlogs, usability tests

Interviews, meetingsquestionaires,observationlogs, usability tests

Iteration,usability tests,walktroughs with use scenarios,heuristic walktroughscognitive walktroughguidelines, principleschecklists

Iteration,usability tests,walktroughs with use scenarios,heuristic walktroughscognitive walktroughguidelines, principleschecklists

usability tests(validating)

usability tests(validating)

interviewsquestionairesobservationlogs

interviewsquestionairesobservationlogs

Product+manuals

Product+manualsImplementing

and training

Implementing and training

Implementedproduct

Implementedproduct

Add the code here


Usability GUI


GUI-developm ent2 important strategies

IterationTransforming

Analyse

Design Build

Evaluate

Scenarios

Mock-ups

Prototypes

Checking theusability

A product


Usability GUI


GUI-developm entFrom scenarios (use cases)

to prototypes

Is it in loan?no

yes

Check the selves

Does he insist?

Change state of the book= seeking

Add the book of the seeking list of the customer

Result:...yes

Trigger:the borrower says that

he has returned a book that he seems

to have in loan

Check the book

Is it in loan?no

yes

Check the selves

Does he insist?

Change state of the book= seeking

Add the book of the seeking list of the customer

Result:...yes

1.1. Draw the flowcharts from the scenarios (Remember the PROBLEM SITUATIONS)

2. Search the (User’s)TASKobjects from the task-flows and scenarios

3. Search and describe objects, their functions, attributes, identifications, fathers and childs

Open Save Print Add new

edit

Borrower child or adult

customer of library, who has the card

name phonesaddress information in cardstreet address number postal address datum

I am in In me loansordersbooks in search

Identifies of task object

attributes of task object

action on task objects

containment relations among task objects

2, 3.


Usability GUI


GUI-developm ent

s

4.

s

5.

Result:...yes

4.Build the navigation model Tell the use-scenarios, TEST THE MODEL AGAINST IT and MAKE CORRECTIONS

5. Transform the objects as GUI-objects, TEST!

…from scenarios (usecases) to prototypes


Usability GUI


GUI-developm entObjects and user interface

Open Save Print Add new

edit

Borrower child or adult

customer of library, who has the card

name phonesaddress information in cardstreet address number postal address datum(Loans, orders, disappeared books) I am in In me

loansordersdisappeared books

Borrower

views

commands

identification

attributes


Usability GUI


GUI-developm entLibrary system: navigationmap (partly)

Borrower

title (look only)

Borrowedbooks

Books in searchOrders

Fines

Guardian/ward

Borrower list or card number or

social security number

selectionselection

selection


Usability GUI


GUI-developm ent Taking care of the usabilityIn step 4

Describe and test in details how the scenarios andtasks proceed using the new user interface.

Correct the (especially the critical / much used parts)tasks fluent

Those functions that must be easy, should also be checked here. (Check for instance all function names, are they comprehensable for novices

You can make a usability test using these charts!

s

4.


Usability GUI


GUI-developm entAn exampleThe user searches for the customer,Alain Borrower, while mr. Borrower tells his problem: he has returned the book of which he has got a reminder

Mr Borrower ( in the customer object window) is found. The the user clicks“Loans” button on the screen to get to know his loans. There is the reminded book in loan list alright, but mr Borrower insists that he had returned the book 4 weeks ago...

…..

Search

BorrowerAlain Borrower

Loans

List of loansOK


Usability GUI


GUI-developm entBuild the navigation model and evaluate(Select the application structure)Design the screens

Build the menus, evaluateSelect the command buttonsSelect the metaphorsSelect representationsCreate the layoutCreate the fields, labels and other controlsAdd the shortcuts and icons, evaluateCheck the colours, visibility, restrictions,conceptual model, mappings, symbol language, exits, and feedback


ViewsWindows structuresWindows typesTitlesModes


Usability GUI


GUI-developm entApplication structures, (Arlov,1997)

Multiwindowinterfaces:

consist of many mainwindows. A main windowmay launch dialog boxes,usually modal. Eachnonmodal window mayhave its own pull-downmenu.


Usability GUI


GUI-developm ent..applicationstructures Multidocument

interfaces (MDI):

one main window thatdisplays one menu. Closeor minimising of the mainwindow will close also thechild windows of that mainwindows. If you need tocontrol somehow the dialog,the MDI or if the user usesmany application at the sametime, or if the child windowshave very different menus, aMDI is not the solution. But ifyour application is builtaround documents, it is good.


Usability GUI


GUI-developm ent..application structures

Multipane interfaces:

has a single main windowdivided into smaller panes,like Netscape mail. In it,some of the panes bossthe others around forinstance so that theselection it effects to whatis hown in the othes andso on. Good one, if you knowexactly which windows mustbe open at the same time.


Usability GUI


GUI-developm ent..application structures

Multiscreen interfaces:

in this alternative, you designthe program to take care of allresponsibility for changing thedisplay. Old character-basedapplications was of this type.

This is not a real multiscreen window, buta wizard. The logic of multiscreen interface is however thesame as in typical multiscreen windows: a new window doesnot open until the old is put away. Windows are modal.


Usability GUI


GUI-developm entA tiny window dictionary

• Main window: User can minimise it. May have ownmenus. Typically launches other windows.

• Child window: Always launched from a main window(or other parent window)

• Dialog box asks response from a user. In WindowsGuide: any form window.

• Modal window / Modeless (or nonmodal) window:window that insists response by locking other part ofa system/ Windows that asks for response, butpermits the work go on in other windows


Usability GUI


GUI-developm ent… a tiny window dictionary

• Home window: usually a main window, which startsa task and where a user comes a again in the end ofa task

• Primary window, secondary window: technicalnames for a main or object window, child oradditional window.

• Object window, Search window, Feedback box,windows for additional information: Semantic orlogical names that I like to use.s


Usability GUI


GUI-developm entWindowsand titles

Primary window

Secondary Window

”Object window”

Dialog box

Titles:

The name of object maybe also the name of instance(Customer, book)

What happens(selection of customer)

Identification of the object

Whenever possible, name in the title bar should match the name of the menu option or bush button


Usability GUI


GUI-developm entDialog boxes

• Transactional gathering the details heeded tocomplete a command for instance, whichbook to open

• tools like numbering the book, property boxesetc.

• messages delivering messages and providingfeedback


Usability GUI


GUI-developm entOne well-workingstructure

A spider or a star:

A home window

An additional window




Design dialogs to yield closure. Sequences of actions should be organised into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives operators the satisfaction of accomplishment, a sense of relief, the signalto drop contingency plans and options from their minds, and an indication that the way isclear to prepare for the next group of actions.


Usability GUI


GUI-developm entExample: An object windowwith additional windows

A borrower His loans, orders and unpaid bills


Usability GUI


GUI-developm entModal and modeless dialogboxes

Modeless Modal

(Modaalinen, mooditon)


Usability GUI


GUI-developm entModes

EJECTSTOP

VCR: STOP mode/Play mode

Photoshop draw with brush mode

Use modes only when needed

Insert/replacemodes in wordprocessor

In phones: callmode

(Toimintatilat)


Usability GUI


GUI-developm ent…modes• Use modes consistently and do not initiate

modes unexpectedly. Do not trap the user ina required field.

• Make it clear how to escape

• Make the user very clear that he has entereda mode. Offer very visible feedback, colour orchanged cursor

Change Enter

Search Search

Enter


Usability GUI



Build the menus, evaluateSelect the command buttonsSelect the metaphorsSelect representationsCreate the fields, labels and other controlsCreate the layoutAdd the shortcuts and icons, evaluateCheck the colours, visibility, restrictions,conceptual model, mappings, symbol languageexits, and feedback



Usability GUI


GUI-developm ent Menus

Users should be able to see the conceptual model of the system from menus

The terminology is important !!!!!

Label-followingLabel-avoidance


Usability GUI


GUI-developm entBuild the menus

Irmeli Sinkkonen, TKK, TAI-tutk imuslaitos/ Käytettävyys laborator io,

Usability GUI

Commands and subobjects tomenus

...

Do at first very rough menu, tune it laterput the names of subobjects (names, the users use)

and commands to menus,

Menus to first mockups (prototypes), evaluate!

Menu is a map, command buttons have best visibility andefficiency; tool buttons are shortcuts

Every command should be in the menu

Best for beginners

for experienced users


Usability GUI


GUI-developm entMenus• A pull-down menu is a map,

A good map is complete

every function, feature and window should beaccessible via the menu bar

different places have different names

keep the menus stable, only disable (grayout) commands that do not work

group the commands semantically


Usability GUI


GUI-developm entMenu selection Guidelines(Schneiderman 1998)

• Use task semantics to organise menus• prefer broad-shallow to narrow-deep• show position by graphics, numbers and titles• use items as titles for sub trees• group and sequence items meaningfully• use brief items, begin with keyword• use consistent grammar, layout, terminology• allow type ahead, jump ahead, or other shortcuts• enable jumps to previous and main menu• consider online help, novel selection mechanism, and

optimal response time, display rate screen size


Usability GUI


GUI-developm ent..menu• Use instructions

identical to buttons,titles, other menus

• use consistentterminology

• ensure that items aredistinct from another

• transparency (wording)• keyword first

Size of type Set the type size

3 spaces ⌦Ruler

Menus are modalOnly one selection

Short, only one word

Maybe longer, 2 words

Header...


Usability GUI


GUI-developm entMenus: ISO 9241-14/ grouping and order

• Conventional categories• if there is no order and groups that are easy to learn

(Logical order)• if it is not possible use some consistent grouping

(arbitrary groups) in groups g= ∂n where g is numberof groups and n is number of options in panel

• order:– Consistency– importance– conventional order– existing order

- order of use- frequency of use- alphabetical order


Usability GUI


GUI-developm entSelect the command buttons

OKOK

CancelCancel

LoansLoans

Borrower

ID number:


Usability GUI


GUI-developm entSelect the metaphora• In most GUI windows the metaphor is a form

• But there are other

possibilities


Usability GUI


GUI-developm entSelect the representation


Usability GUI



Build the menus, evaluateSelect the command buttonsSelect the metaphorsSelect representationsCreate the fields, labels and other controlsCreate the layoutAdd the shortcuts and icons, evaluateCheck the colours, visibility, restrictions,conceptual model, mappings, symbol language, exits, and feedback



Usability GUI


GUI-developm entCreate the widgetsFieldsCombo-boxesListsDrop-down listsRadio-buttonsCheck-boxesCommand-buttonsTables and GridsSpin boxesSlidersTree views

Group boxesPanelsTabs


Usability GUI


GUI-developm ent…or


Usability GUI


GUI-developm entThe transformation of windows

Something Something

Tests between transformations


Usability GUI


GUI-developm entA library customer


Usability GUI


GUI-developm entAnd how much you can put...• How much information on a window?

– Early guidelines 25% density– Nasa 70% 5 sec to scan– 30% 3.4 sec to scan– but by improving labeling, grouping, using

indentation, task time reduced 31%– expert users prefer denser displays (up to 88-

90%), if data is familiar (traffic controllers,stock brokers etc.)

• If it is possible to see the grouping easily


Usability GUI


GUI-developm entIf there is not enough room..?

• Try first grouping, ordering, then Childwindows or Tabs sometimes also Scrolling

• Leave empty space


Usability GUI


GUI-developm entTask oriented or implementoriented (Arlov, 1998)

Pizza

Cheese: Mozzarella

Ham

Salami

Anchovie

Mushroom

Garlic

Visa-card


Usability GUI



Build the menus, evaluateSelect the command buttonsSelect the metaphorsSelect representationsCreate the fields, labels and other controlsCreate the layoutAdd the shortcuts and icons, evaluateCheck the colours, visibility, restrictions,conceptual model, mappings, symbol language, exits, and feedback


Goal:

Effective VisualCommunication


Usability GUI


GUI-developm entSelect the representations

Representation matters


Usability GUI


GUI-developm entPlease, don’tSometimes designers invent something that they think is very sexy

Original: Saul Greenberg


Usability GUI


GUI-developm ent…orJust unpleasant and difficult to interact

From Mullet and Sano


Usability GUI


GUI-developm entSymbols and symbol language• Can work (depending on users skills) as:

– symbols

– signs

– signals

in reasoning how to act

to find proper rules

to control the automated acting

Note : Cultural Associations -Groups of people learn idioms red = danger, green = go


Usability GUI


GUI-developm ent..writing symbol language


Usability GUI


GUI-developm ent…symbol language


Usability GUI


GUI-developm entLayout design in windows• Amount of data

– too little is notenough to múch istoo much

• Order– locig and serial– rhytmic, guiding the

eyes of the user– natural sequences

• Navigating (inside window)

• Control– from top left corner to

bottom right corner

• Aestetics– leave empty space

– balance, grouping

• What is the mostimportant


Usability GUI


GUI-developm entScreen design elements (Mandel 1997)

5

1 3

Every line, every control, box piece of text,colour, and graphic on the screen impacts user not only singly, but also in combinationwith everything else on the screen T Mandel 1997


Usability GUI


GUI-developm entVisual aestetics• balace

• regularity

• symmetry

• predictability

• serial

• economy

• grouping

• simplicity

In anything at all, perfection isfinally attained not when thereis no longer anything to add,but when there is no longeranythingto take away

- Antoine de Saint Exupery


Usability GUI


GUI-developm entLayout

• Organization– contrast to bring out dominant elements

– grouping of elements by proximity

– show organizational structure

– alignment


Usability GUI


GUI-developm entLayout

Two levelhierarchy:-indentation depth: M-letter

Semantic grouping to show relationshipsbetween screen elements

Logic of organisationalflow


Usability GUI


GUI-developm entMapping: hierarchy and order in layout

Not like this

like this


Usability GUI


GUI-developm entUse of grid


Usability GUI


GUI-developm ent…use of grid

Ok No

Text 1:

Text 2:

Text 3:

Text 4:

Do not use vertical grids, they are toorestricting=> “ladders”


Usability GUI


GUI-developm entExampleIBM's Aptiva Communication Center

No organisation,no order


Usability GUI


GUI-developm entNavigating in window• Provide initial focus• direct attention to important, secondary, or

peripheral items as appropriate• assist in navigation through material

– Alignment to left– order of elements– grouping of elements– large initials– lines

• order should follow a user’s conceptual model ofsequences

• from top left corner to bottom right one

Form rivers


Usability GUI


GUI-developm ent…navigating example


Usability GUI


GUI-developm entA better layout

Label:

Label:

Label:

Label:

Label:

Label: Label:

Label:

Label: Label:


Usability GUI


GUI-developm entBUT: the right navigation dependson the work


Usability GUI


GUI-developm ent…BUT: ...(Layout design for efficiency)


Usability GUI


GUI-developm entSemantic grouping


Usability GUI


GUI-developm entX-test

Others: Squint-test

Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxx xxxxxx xxxxxx xxxxxx


Usability GUI


GUI-developm entSmall differencies are difficult tonotice

hfhffgfgfghj

From:

To:

Subject:

ghjjhghjhghg

ghjjhghjhghg

Ghjjhghjhghgyiuyiuyiyuyiiu

Attachments 1 files

hhghg

khjkhjjjjh


Usability GUI


GUI-developm entEmpty space


Usability GUI


GUI-developm entExample

This field is difficult tonotice. If it is in “a wrongplace, it is more conspicuous


Usability GUI


GUI-developm entMeaningfulness(for a user!)

is an important prerequisiteof learning

irmeli sinkkonen tkl, tutkija [email protected] ... · • build the navigation model ......

Documents