T-121.5300
                      Käyttöliittymäsuunnittelu



          Luento 4. Suunnitteluohjeistot
        käyttöliitt...
Millainen on hyvä käyttöliittymä?

1.   Näkymätön, huomaamaton
2.   Ei vaadi koulutusta, helppo oppia
3.   Yhdessä tilante...
Miksi tarvitaan suunnitteluohjeistoja?

   Arvaus, paraskaan, ei ole riittävä suunnitteluperusteeksi
   Käyttäjä on aina o...
Suunnitteluperiaatteet

 Yleisiä sääntöjä, peukalosääntöjä, jotka ovat
 muistettavissa helpohkosti
 Eivät kuitenkaan tarjo...
Suunnitteluperiaatteet: Shneiderman (1/2)


1.   Pyri yhdenmukaisuuteen
2.   Tarjoa tehokäyttäjille oikopolkuja; auta käyt...
Suunnitteluperiaatteet: Shneiderman (2/2)


6.   Mahdollista toimenpiteiden helppo peruminen
7.   Käyttäjä kontrolloi ja o...
Nielsen’s Ten Heuristic Rules (1993)

 Simple and natural dialog
 Speak the user’s language
 Minimize user’s memory load
 ...
Nielsen’s Ten (reformed 1999) Heuristics

    Visibility of system status
    Match between system and the real world
    ...
Tog’s Principles                     (”checklist”)




   Anticipation                                         Human Inter...
Fitts’s Law (1954)

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

   MT = a + b log2...
Suunnitteluohjeet (Guidelines)

 Suunnitteluohjeet ovat periaatteita konkreettisempia ja
 yksilöivämpiä lauseita siitä, mi...
Smith & Mosier: Categories
http://www.hcibib.org/sam/

1.   Data Entry
            user actions involving input of data to...
SaM Examples: Data Display

   2.0/1 Necessary Data Displayed
   2.0/2 + Only Necessary Data Displayed
   2.0/3 Data Displ...
SaM Example: Lists
                                        2.1/24 + Vertical Ordering in Multiple Columns

2.1/19 Lists fo...
Florida Ballot




                 Marko Nieminen
SaM 2.1 Text Displays: ”Bad”
|----------------------------------------------------------|
| -- System Broadcast Messages -...
SaM 2.1 Text Displays: ”Good”
|----------------------------------------------------------|
|                SYSTEM BROADCA...
Käyttöliittymäympäristökohtaisia
ohjeistoja (”Guidelines”)
 Microsoft Windows
    http://msdn.microsoft.com/library/defaul...
Tyylioppaat
 Tiettyyn käyttöliittymäympäristöön sopivia ohjeistoja
        (erottelu ”guidelines” vs. ”style guides” on jo...
Tyylioppaan asioita
http://www.construx.com/survivalguide/uistyleguide.htm


    Käyttöliittymäympäristö                  ...
Example: KDE UI Guidelines, Basics
http://developer.kde.org/documentation/standards/kde/style/basics/windows.html


    Wi...
Example: KDE Menus

File   Edit   View   Go   [Application specific menus]   Bookmarks   Tools   Settings     Help
New    ...
Example: KDE Toolbar

 Buttonbar               All actions should be accessible through
    New                  the menu ...
Example: KDE Dialogs
Button     Usage                            Details
<action>   Mutually exclusive with Apply    The a...
Example: KDE – other issues

 Keys
   accelerators, shortcuts
 Mouse
   clicking left/right button, single/double click, k...
KDE Example UI




                 Marko Nieminen
The user should be in a
good mood when done.



      Slogan #32
       (Myers 1997)
Upcoming SlideShare
Loading in …5
×

T 121 5300 (2008) User Interface Design 4 Guidelines

2,369 views
2,316 views

Published on

Lectures 4 and 5 (T-121.5300 User Interface Design)

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Tämä kalvosarja sisältää aineiston, joka käsiteltiin luennoilla 4 ja 5. Luennolla 4 pohjustettiin suunnitteluohjeistoja tarkastelemalla esimerkkinä kunnallisvaaleissa kokeiltua sähköisen äänestämisen käyttöliittymää.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
2,369
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
90
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

T 121 5300 (2008) User Interface Design 4 Guidelines

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.”
  15. 15. Florida Ballot Marko Nieminen
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  26. 26. KDE Example UI Marko Nieminen
  27. 27. The user should be in a good mood when done. Slogan #32 (Myers 1997)

×