Upload
mniemi
View
2.234
Download
1
Embed Size (px)
DESCRIPTION
Lectures 4 and 5 (T-121.5300 User Interface Design)
Citation preview
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
[email protected]://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)