T-121.5300Käyttöliittymäsuunnittelu

Luento 4. Suunnitteluohjeistot käyttöliittymäsuunnittelun tukena

Marko Nieminen

Teknillinen korkeakouluKäytettävyys ja käyttöliittymät

Marko.Nieminen@tkk.fihttp://www.soberit.hut.fi/T-121/T-121.5300

“Keep it simple” *

* Slogans by Myers (1997) from http://www-2.cs.cmu.edu/~bam/uicourse/1997spring/lect03moreslogalsbig.html

Marko Nieminen

Millainen on hyvä käyttöliittymä?

1. Näkymätön, huomaamaton

2. Ei vaadi koulutusta, helppo oppia

3. Yhdessä tilanteessa opittua voidaan soveltaa toiseen

4. Ennustettava

5. Virheetön: käytön yhteydessä tapahtuu vähän virheitä –ja jos tapahtuukin, niistä toipuminen on yksinkertaista

6. ”Oikeiden tehtävien” suorittaminen onnistuu hyvin

7. On joustava – ja älykäs (?)

8. Käyttäjät pitävät siitä

9. ... ja paljon muutakin

[Myers 1997]

“The best user interface is one the user doesn't notice.”

Marko Nieminen

Miksi tarvitaan suunnitteluohjeistoja?

� Arvaus, paraskaan, ei ole riittävä suunnitteluperusteeksi

� Käyttäjä on aina oikeassa

� Käyttäjä EI OLE aina oikeassa

� Käyttäjät eivät ole suunnittelijoita

� Suunnittelijat eivät ole käyttäjiä

� Toimitusjohtajat eivät ole käyttäjiä

� Vähemmän on enemmän

� Yksityiskohdat ovat kompastuskiviä, suurimerkityksisiä

� Aputoiminnot eivät itse asiassa auta ratkaisemaanongelmia

� Käytettävyyssuunnittelu on prosessi

[Nielsen 1993]“Whadya mean, they're not all computer scientists?”

Marko Nieminen

Suunnitteluperiaatteet

� Yleisiä sääntöjä, peukalosääntöjä, jotka ovat muistettavissa helpohkosti

� Eivät kuitenkaan tarjoa tarkkaa ohjetta siitä, miten tietyssä suunnittelutilanteessa toimitaan käytännössä

� Vaativat soveltamista

� Suunnitteluperiaatteita esitellään monissa oppikirjoissa, mm. Shneiderman, Nielsen

“The idea is to empower the user, not speed up the system.”

Marko Nieminen

Suunnitteluperiaatteet: Shneiderman (1/2)

1. Pyri yhdenmukaisuuteen

2. Tarjoa tehokäyttäjille oikopolkuja; auta käyttäjiäoppimaan

3. Tajoa käyttäjille informatiivista palautetta

4. Suunnittele toimenpideketjut selkeästi päättyviksi

5. Älä mahdollista virheiden tekemistä� ... ja kun niitä joka tapauksessa tapahtuu, mahdollista

helppo toipuminen

� ...

“Make it easy for a beginner to become an expert.”

Marko Nieminen

Suunnitteluperiaatteet: Shneiderman (2/2)

6. Mahdollista toimenpiteiden helppo peruminen

7. Käyttäjä kontrolloi ja ohjaa toimintaa, ei järjestelmä

8. Vähennä, minimoi, lyhytaikaisen muistin kuormittaminen

“Minimize the need for a mighty memory.”

Marko Nieminen

Nielsen’s Ten Heuristic Rules (1993)

� Simple and natural dialog� Speak the user’s language� Minimize user’s memory load� Consistency� Feedback� Clearly marked exits� Shortcuts� Good error messages� Prevent errors� Help and documentation

“No -- you can't just explain it in the manual.”

Marko Nieminen

Nielsen’s Ten (reformed 1999) Heuristics

� Visibility of system status � Match between system and the real world � User control and freedom� Consistency and standards� Error prevention� Recognition rather than recall� Flexibility and efficiency of use � Aesthetic and minimalist design � Help users recognize, diagnose, and recover from errors � Help and documentation

[Nielsen: http://www.useit.com/papers/heuristic/heuristic_list.html]

[Web evaluation form: http://www.acm.org/~perlman/question.cgi?form=PHUE]

“The user should always know what is happening.”

Marko Nieminen

Tog’s Principles (”checklist”)

� Anticipation

� Autonomy

� Color Blindness

� Consistency

� Defaults

� Efficiency of the User

� Explorable Interfaces

� Fitts's Law

� Human Interface Objects

� Latency Reduction

� Learnability

� Metaphors, Use of

� Protect Users' Work

� Readability

� Track State

� Visible navigation

[Tognazzini: http://www.asktog.com/basics/firstPrinciples.html]

“Color is information.”

Marko Nieminen

Fitts’s Law (1954)

� Prediction of human movement and human motion based on rapid, aimed movement

� MT = a + b log2(2A/W)

� MT = movement time

� a,b = regression coefficients

� A = distance of movement from start to target center

� W = width of the target

[See e.g. http://ei.cs.vt.edu/~cs5724/g1/]

Marko Nieminen

Suunnitteluohjeet (Guidelines)

� Suunnitteluohjeet ovat periaatteita konkreettisempia ja yksilöivämpiä lauseita siitä, miten käyttöliittymä tulee suunnitella

� Suunnitteluohjeet eivät kuitenkaan ota huomioon käyttöliittymäympäristökohtaisia erityispiirteitä vaan tarkastelevat asioita yleisemmällä tasolla

� Esim. Smith & Mosier (1986); lähtökohtaisesti tekstipohjaisten näyttöjen ohjeistusta, mutta soveltuu monilta osin myös graafisiin käyttöliittymäympäristöihin

“Everything in its place, and a place for everything.”

Marko Nieminen

Smith & Mosier: Categorieshttp://www.hcibib.org/sam/

1. Data Entry� user actions involving input of data to a computer, and computer responses to such

inputs

2. Data Display� computer output of data to a user, and assimilation of information from such outputs

3. Sequence Control� user actions and computer logic that initiate, interrupt, or terminate transactions

4. User Guidance� error messages, alarms, prompts, and labels, as well as to more formal instructional

material provided to help guide a user's interaction with a computer

5. Data Transmission� computer-mediated communication among system users, and also with other systems

6. Data Protection� attempts to ensure the security of computer-processed data from unauthorized

access, from destructive user actions, and from computer failure

Not all of the guidelines can be applied in designing any particular system. Some of the guidelines will be relevant and some will not.

“Things that look the same should act the same.”

Marko Nieminen

SaM Examples: Data Display

� 2.0/1 Necessary Data Displayed

� 2.0/2 + Only Necessary Data Displayed

� 2.0/3 Data Displayed in Usable Form� | Error 459 in column 64. | � ??

� Also: do not make users convert displayed data

� 2.0/4 Data Display Consistent with User Conventions� am/pm ; date formats

� 2.0/6 Consistent Display Format � consistent format from one display to another

� 2.0/8 User Control of Data Display � flexibility

� 2.0/12 Familiar Wording [http://www.hcibib.org/sam/]

“Dialogues should not contain information that is irrelevant or rarely needed.”

Marko Nieminen

SaM Example: Lists

2.1/19 Lists for Related Items

For a series of related items

(words, phrases, instructions,

etc.), display those items in

a list rather than as

continuous text.

Comment

A list format will facilitate

rapid, accurate scanning.

2.1/24 + Vertical Ordering in Multiple Columns

If a list is displayed in multiple columns, order

the items vertically within each column.

Example

(Good)

| S.R. Abbott B.M. Drake |

| C.N. Abernethy S.M. Dray |

| C.A. Adams M.G. Dumoff |

| H.L. Ammerman R.C. Eakins |

| C.J. Arbak S.L. Ehrenreich |

| etc. |

(Bad)

| S.R. Abbott C.N. Abernethy |

| C.A. Adams H.L. Ammerman |

| C.J. Arbak A.J. Aretz |

| A.F. Aucella J.A. Ballas |

| M.C. Bardales S.H. Barry |

| etc. |[http://www.hcibib.org/sam/]

“Keep it neat. Keep it organized.”

Marko Nieminen

Florida Ballot

Marko Nieminen

|----------------------------------------------------------|

| -- System Broadcast Messages -- |

| SYSTEM #22 - WPS 27 March 1984 |

| |

| **** NOTICE **** |

| |

| WPS USERS ARE REMINDED NOT TO PRINT MULTIPLE |

| COPIES OF LARGE SIZE DOCUMENTS (100 PAGES OR |

| MORE) TO THE 6670 PRINTER OR LINEPRINTER SINCE IT |

| CAUSES LONG DELAYS ON THOSE PRINTERS. |

| IF YOU NEED MULTIPLE COPIES, PLEASE SUBMIT |

| YOUR REQUEST BEFORE LEAVING AT 4:30 P.M. THANK |

| YOU. |

| |

| NETWORK USERS -- Please report any network |

| related problems to the User Support Center, |

| X2222. |

| |

| Questions or problems should be referred to the |

| USC, X2222. |

| |

| Press the RETURN key to enter the Office Systems |

| Menu |

| < |

|----------------------------------------------------------|

SaM 2.1 Text Displays: ”Bad”

[http://www.hcibib.org/sam/]

“You should always know how to find out what to do next.”

Marko Nieminen

|----------------------------------------------------------|

| SYSTEM BROADCAST MESSAGES |

| |

| 27 March 1984 |

| |

| Word Processing Users: |

| |

| Please do NOT print multiple copies of large |

| documents (more than 100 printed pages) during normal |

| working hours. Large print requests will delay |

| printing service for all users. |

| |

| If you do need bulk printing, submit your request |

| before leaving at 4:30 pm. Your printouts will be |

| ready by the next morning. |

| |

| Network Users: |

| |

| Please report any net-related problems to the |

| User Support Center, x2222. |

| |

| |

| * Press CONTINUE to display the Office Systems Menu. |

| < |

|----------------------------------------------------------|

SaM 2.1 Text Displays: ”Good”

[http://www.hcibib.org/sam/]

“Design for regular people and the real world.”

Marko Nieminen

Käyttöliittymäympäristökohtaisia ohjeistoja (”Guidelines”)

� Microsoft Windows� http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/welcome.asp

� Apple� http://developer.apple.com/documentation/mac/HIGuidelines/HIGuidelines-2.html

� GNOME� http://developer.gnome.org/projects/gup/hig/� GNOME Usability http://developer.gnome.org/projects/gup/

� KDE UI Guidelines� http://developer.kde.org/documentation/standards/kde/style/basics/

� KDE Usability project http://usability.kde.org/

� AMIGA User Interface Style Guide� Addison-Wesley Pub Co; 1st edition (July 2, 1991) ISBN 0-201-57757-7

� Windows CE / Pocket PC / Smartphone� http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ui_guide_ppc/htm/_UIguide_start.asp

� PalmOS� http://www.palmos.com/dev/support/docs/ui/UIGuidelinesTOC.html

� Nokia S40 & S60 UI Style Guide� http://forum.nokia.com

Marko Nieminen

Tyylioppaat

� Tiettyyn käyttöliittymäympäristöön sopivia ohjeistoja� (erottelu ”guidelines” vs. ”style guides” on joskus häilyvä, olematonkin)

� Usein myös tiettyyn sovellus-, toimittaja- ja yritysympäristöön liittyviä ohjeita

� Määrittelevät käyttöliittymän toimintaa toiminnallisesta, visuaalisesta ja teknisestäkin näkökulmasta

� Toiminnalliset ohjeet voivat liittyä yrityskohtaisiin toimintatapoihin

� Visuaalinen ohjeisto paitsi ”logoyhtenäisyyttä” myös tiettyjen elementtien sijoittumista aina yhtenäiseen paikkaan näytöllä

� Teknisestä näkökulmasta määrityksiin voi kuulua esimerkiksi tietyn käyttöliittymäkirjaston käyttö sekä määrittelyjärajapinnoista muihin järjestelmiin

Marko Nieminen

Tyylioppaan asioita

� Käyttöliittymäympäristö� MS Windows, Apple, GNOME,

KDE, Motif, Palm, S40, ...?

� Ikkunointi� MDI, SDI, värit, koot,...?

� Dialogit � dialogien välinen

vuorovaikutteisuus/ siirtymät, toiminnallisuus, ulkoasu

� Valikot� palkki/ponnahdus,

pikakomennot, kontekstisensitiivisyys

� Painikkeet� koko, etäisyys, teksti/kuva,

vertikaali/ horisontaali, vakiopainikkeet?

� Värit � lukumäärä,

ympäristösidonnaisuus

� Virheiden hallinta� muoto/modaliteetti,

informatiivisuus, kuittaus

� Toimintopalkit� mitä toimintoja, miten

siirreltävissä, miten muokattavissa

� Statuspalkit � mitä tietoa, miten päivittyy

� Vierityspalkit� onko käytössä, millaisilla alueilla

http://www.construx.com/survivalguide/uistyleguide.htm

Marko Nieminen

Example: KDE UI Guidelines, Basics

� Windows� SDI: No MDI, just SDI & Pure

SDI, co-operating SDI & controlled SDI

� Labels� Capitalization: Book Title /

Sentence style, use of colons:

� Settings� options, document options,

configuration, session management

� Systray� for non-document specific apps,

single click (open)/ right click (quit/options)

http://developer.kde.org/documentation/standards/kde/style/basics/windows.html

Marko Nieminen

Example: KDE Menus

File Edit View Go [Application specific menus] Bookmarks Tools Settings Help

New Ctrl+N

Open... Ctrl+O

Open Recent >

--------------------

Save Ctrl+S

Save As...

Revert

--------------------

Print... Ctrl+P

--------------------

Close Ctrl+W

--------------------

Quit Ctrl+Q

Marko Nieminen

Example: KDE Toolbar

� Buttonbar� New � Open � Save � Print � Print Preview � Undo � Redo � Cut � Copy � Paste � Find � Zoom � Previous Page/Back � Next Page/Forward � Go To Page/Home � Help

� All actions should be accessible through the menu bar - don't have an action in the toolbar that isn't also in the menubar

� Allow users to configure the buttonbar. You may choose to have more than one buttonbar.

� Implementation Note:� The KAction class offers an easy way to ensure

consistency between the menubar and the toolbar.

� The icons designed for the standard buttons should never be used for any other purpose.

Marko Nieminen

Example: KDE Dialogs

This is the opposite of Apply and is therefore only useful in conjunction with an

apply button. The reset button does not close the dialog, and resets the values

to the ones used in the system currently. It has the same result as closing the

dialog without saving changes and re-opening it again.

Reset is deprecated for most dialogs; only dialogs that are hard to reach after

closing may benefit from a reset button.

OptionalReset

The button sets all the settings in the dialog to the system defaults. This is only

useful for dialogs that change settings of some sort.

OptionalDefaults

A button labelled "Help" when activated should show a help-window with help

relating to the dialog.

OptionalHelp

Apply changes made in the dialog and keep the dialog open. Using this button only

makes sense when the <action> button (see above) is an 'ok' button.

Optional, but never with CloseApply

Pressing this button will close the dialog discarding changes. Changes made earlier

with the apply button will be used.

Mutually exclusing with cancelClose

Pressing this button will close the dialog discarding changes. Changes made earlier

with the apply button will be used.

Mutually exclusing with closeCancel

The action button can be 'ok', 'save' or 'print' or similar.

When used together with Cancel the dialog will be closed after pressing this

button. When used together with Close the dialog will stay open.

Mutually exclusive with Apply<action>

DetailsUsageButton

Marko Nieminen

Example: KDE – other issues

� Keys� accelerators, shortcuts

� Mouse� clicking left/right button, single/double click, keyboard combinations

� Drag and Drop� Shift - Move

� Ctrl - Copy

� Shift+Ctrl - Link

Marko Nieminen

KDE Example UI

The user should be in a good mood when done.

Slogan #32(Myers 1997)