Driving Behavioral Change for Information Management through Data-Driven Gree...
T 121 5300 (2008) User Interface Design 4 Guidelines
1. T-121.5300
Käyttöliittymäsuunnittelu
Luento 4. Suunnitteluohjeistot
käyttöliittymäsuunnittelun tukena
Marko Nieminen
Teknillinen korkeakoulu
Käytettävyys ja käyttöliittymät
Marko.Nieminen@tkk.fi
http://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
2. 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]
Marko Nieminen
“The best user interface is one the user doesn't notice.”
3. 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 ratkaisemaan
ongelmia
Käytettävyyssuunnittelu on prosessi
[Nielsen 1993] Marko Nieminen
“Whadya mean, they're not all computer scientists?”
4. 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
Marko Nieminen
“The idea is to empower the user, not speed up the system.”
5. 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
...
Marko Nieminen
“Make it easy for a beginner to become an expert.”
6. 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
Marko Nieminen
“Minimize the need for a mighty memory.”
7. 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
Marko Nieminen
“No -- you can't just explain it in the manual.”
8. 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]
Marko Nieminen
“The user should always know what is happening.”
9. Tog’s Principles (”checklist”)
Anticipation Human Interface Objects
Autonomy Latency Reduction
Color Blindness Learnability
Consistency Metaphors, Use of
Defaults Protect Users' Work
Efficiency of the User Readability
Explorable Interfaces Track State
Fitts's Law Visible navigation
[Tognazzini: http://www.asktog.com/basics/firstPrinciples.html]
Marko Nieminen
“Color is information.”
10. 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
11. 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
Marko Nieminen
“Everything in its place, and a place for everything.”
12. Smith & Mosier: Categories
http://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.
Marko Nieminen
“Things that look the same should act the same.”
13. 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/]
Marko Nieminen
“Dialogues should not contain information that is irrelevant or rarely needed.”
14. SaM Example: Lists
2.1/24 + Vertical Ordering in Multiple Columns
2.1/19 Lists for Related Items If a list is displayed in multiple columns, order
the items vertically within each column.
For a series of related items
(words, phrases, instructions, Example
etc.), display those items in (Good)
a list rather than as
continuous text. | S.R. Abbott B.M. Drake |
| C.N. Abernethy S.M. Dray |
| C.A. Adams M.G. Dumoff |
Comment | H.L. Ammerman R.C. Eakins |
A list format will facilitate | C.J. Arbak S.L. Ehrenreich |
rapid, accurate scanning. | 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 |
[http://www.hcibib.org/sam/] | etc. |
Marko Nieminen
“Keep it neat. Keep it organized.”
16. SaM 2.1 Text Displays: ”Bad”
|----------------------------------------------------------|
| -- 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 |
| < |
|----------------------------------------------------------| [http://www.hcibib.org/sam/]
Marko Nieminen
“You should always know how to find out what to do next.”
17. SaM 2.1 Text Displays: ”Good”
|----------------------------------------------------------|
| 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. |
| < |
|----------------------------------------------------------| [http://www.hcibib.org/sam/]
Marko Nieminen
“Design for regular people and the real world.”
18. 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
19. 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
20. Tyylioppaan asioita
http://www.construx.com/survivalguide/uistyleguide.htm
Käyttöliittymäympäristö Värit
MS Windows, Apple, GNOME, lukumäärä,
KDE, Motif, Palm, S40, ...? ympäristösidonnaisuus
Ikkunointi Virheiden hallinta
MDI, SDI, värit, koot,...? muoto/modaliteetti,
informatiivisuus, kuittaus
Dialogit
dialogien välinen Toimintopalkit
vuorovaikutteisuus/ siirtymät, mitä toimintoja, miten
toiminnallisuus, ulkoasu siirreltävissä, miten
muokattavissa
Valikot
palkki/ponnahdus, Statuspalkit
pikakomennot, mitä tietoa, miten päivittyy
kontekstisensitiivisyys
Vierityspalkit
Painikkeet onko käytössä, millaisilla alueilla
koko, etäisyys, teksti/kuva,
vertikaali/ horisontaali,
vakiopainikkeet?
Marko Nieminen
21. Example: KDE UI Guidelines, Basics
http://developer.kde.org/documentation/standards/kde/style/basics/windows.html
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)
Marko Nieminen
22. 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
23. Example: KDE Toolbar
Buttonbar All actions should be accessible through
New the menu bar - don't have an action in
Open the toolbar that isn't also in the
Save menubar
Print
Print Preview Allow users to configure the buttonbar.
Undo You may choose to have more than one
Redo buttonbar.
Cut
Copy
Implementation Note:
The KAction class offers an easy way to ensure
Paste consistency between the menubar and the
Find toolbar.
Zoom
Previous Page/Back The icons designed for the standard
Next Page/Forward buttons should never be used for any
Go To Page/Home other purpose.
Help
Marko Nieminen
24. Example: KDE Dialogs
Button Usage Details
<action> Mutually exclusive with Apply 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.
Cancel Mutually exclusing with close Pressing this button will close the dialog discarding changes. Changes made earlier
with the apply button will be used.
Close Mutually exclusing with cancel Pressing this button will close the dialog discarding changes. Changes made earlier
with the apply button will be used.
Apply Optional, but never with Close 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.
Help Optional A button labelled quot;Helpquot; when activated should show a help-window with help
relating to the dialog.
Defaults Optional 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.
Reset Optional 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.
Marko Nieminen
25. 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
![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]
Marko Nieminen
“The best user interface is one the user doesn't notice.”](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)