User Interface Design & Usability
Kasutajaliideste disain ja usability
28. oktoober 2008
Avo AlenderAS Webmedia
User Interface Design & Usability
Täna
14:15 - 15:45 (I osa)15:45 - 16:00 (paus)16:00 - 17:30 (II osa)
Keskendume vähem esteetikale ning vaatame rohkem infosüsteemide/rakenduste kasutajaliideseid
Vaatame näiteid/lahendusi laiast maailmast
II osa teises osas teeme rühmatööna ühe praktilise ülesande. Autorid kannavad ette.
Järeldused, kokkuvõte
User Interface Design & Usability
Sissejuhatus
„The User Interface Is the Application“ …ehk siis suure osa tavakasutajate jaoks kasutajaliides ongi
rakendus
Kasutajaliidese disainimise põhimõttedUsability ehk kasutajakesksusLähteülesande koostamineKasutatavuse (kasutajakesksuse) analüüsDisainimise protsessPrototüüpimineKasutajaliidese testimineParandusettepanekud, täiendav analüüs
User Interface Design & Usability
Kasutajaliideste disainimise baaspõhimõtted
Struktuur - eesmärgipärane struktureeritus, selgus ja järjepidevus, seoste visualiseerimine, eristamine.
Lihtsus - lihtsaid tegevusi on lihtne sooritada. Kasutajaga räägitakse lihtsas keeles. Keskendutakse põhitegevustele.
Nähtavus ja olulisus - kogu põhitegevusteks vajalik info ja valikud on nähtaval. Hea disain ei koorma kasutajat liigse funktsionaalsusega või ebavajaliku infoga.
Tagasiside - kasutaja informeerimine, tegevuste läbipaistvus, aimatavus.
User Interface Design & Usability
Kasutajaliideste disainimise baaspõhimõtted
Tolerantsus - Vead on aktsepteeritavad, alati on võimalik tegevusi uuesti sooritada või samm tagasi liikuda. Kasutaja abistamine, täiendav informatsioon, ka varjatud tegevused taustal (nt mingi sisendi valideerimisel)
Taaskasutatavus - järjepidevus, komponentide ja käitumisloogika taaskasutus. Meenutada on lihtsam kui mõelda.
Atraktiivsus – rakendus või veebileht peaks tagama kasutaja rahulolu eelkõige visuaalse keskkonnaga
User Interface Design & Usability
Kasutajaliidese disainimine
Algmaterjalide kogumine
Logofailid ja –raamatudStiiliraamatudProjekti dokumentatsioonTrükised jms infokandjadUsability nõuded ja juhisedSEO (search engine optimization) nõudedBenchmarking ehk võrdlev analüüs
User Interface Design & Usability
Kasutajaliideste disainimise baaspõhimõtted
Brandbook/stylebook/UIG
User Interface Design & Usability
Kasutajaliideste disainimise tehnilised aspektid
Tehniline analüüs - otsuste objektiks on järgmised valdkonnad:
Brauserite tugi: A-klassi tugi on kõrgeim toetustase. A-klassi browserid on modernsed, võimekad ja enimlevinud. Nad on parima veebistandardite toega ning tagavad suurima funktsionaalsuse ja visuaalse korrektsuse:IE 6-7, FF 2-3.0, Opera 9.x, Safari 3.1
B-klass on baastase, millega tagame lehe põhisisu ja –funktsionaalsuse. B-klassi browserid on vanamoelised, võimetud ja haruldased: nt FF 1.5, IE 5.x, Opera 8.x
C klassi browserid on vähelevinud ja tundmatud, ent eeldatavalt võimekad ja modernsed. Siia gruppi kuuluvad ka uute veebilehitsejate beeta-versioonid, mõned näited (seisuga 10.10.2008): IE 8 beta 2, Google Chrome jne
User Interface Design & Usability
Kasutajaliideste disainimise tehnilised aspektid
Brauserite kasutusstatistikat ka nt siin: http://www.w3schools.com/browsers/browsers_stats.asp
User Interface Design & Usability
Kasutajaliideste disainimise tehnilised aspektid
Tehniline analüüs - otsuste objektiks on järgmised valdkonnad:
HTML standard. Nõutena nt kirjas:
Kasutatav markup järgib XHTML 1.0 Transitional spetsifikatsiooni, valideerub W3C Markup Validation Service'is ja vastab dokumendiChecklist of Checkpoints for Web Content Accessibility Guidelines 1.0 vähemalt prioriteet 1 tasemele.Kasutatav XHTML on semantiliselt korrektne ja kasutab maksimaalselt ära erinevaid HTML-elemente.Tekstikodeering on UTF-8.
User Interface Design & Usability
Kasutajaliideste disainimise tehnilised aspektid
Tehniline analüüs - otsuste objektiks on järgmised valdkonnad:
CSS
Nt nõue: Kasutatavad stiilid järgivad CSS 2.1 spetsifikatsiooni ja valideeruvad W3C CSS Validation Service'is.
CSS 3 lahendused ning ebastandardsed ja mittevalideeruvad definitsioonid on õigustatud vaid erandjuhtudel. Nende kasutamine peab olema vajalik ja põhjendatud.
Kasutatavad meediumid:Screen, projectionPrint
JavaScripti, Ajaxi, Flexi jms tehnoloogiate kasutusPrintimine - iga lehega peab olema seotud printimise stiilifail, mis optimeerib lehte printimise tarvis.
Otsimootorite jaoks optimeerituse (SEO) tase
User Interface Design & Usability
Kasutajaliideste disainimise tehnilised aspektid
Juurdepääsetavusehk accessibility http://www.w3.org/WAI/(või checklist: http://www.w3.org/TR/WCAG10/full-checklist.html)
Kasutatavus mobiilsetes seadetesWAP, nutitelefonid, iPhone jne,
Failimaht – “torud” on suuremad
Esitluskihi jõudlus (frontend preformance)
User Interface Design & Usability
Kasutajaliideste disainimise tehnilised aspektid
Näiteid:
BBC portal: http://www.bbc.co.uk/
jQuery: http://jquery.com/Adobe: http://www.adobe.com/devnet/flex/?tab:samples=1Ajaxi vidinad a’la lightbox, thumbnail viewer, search ja suggest funktsioonid jne
“Väga palju ägedaid vidinaid, mängulisus, interaktsioon jne”Kuidas see kõik reaalses elus töötab?
User Interface Design & Usability
Usability – mis see on?
“Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.” Jakob Nielsen
“Usability means that the people who use the product can do so quickly and easily to accomplish their own tasks.” Dumas and Redish
“Usability is a term used to denote the ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal.” Wikipedia
“The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.“ ISO 9241-11:1998(E)
User Interface Design & Usability
Usability – põhilised küsimused
Kes on kasutajad? Mida nad teavad/oskavad ja mida nad suudavad õppida?
Mis tegevusi kasutajad tahavad teha või peavad tegema?
Milline on kasutajate üldine taust ja kogemused?
Millises ümbritsevas keskkonnas kasutajad tegutsevad?
Milline osa interaktsioonist on jäetud „masinale“, milline kasutajale endale?
User Interface Design & Usability
Kasutajakesksuse analüüsi elutsükkel
User Interface Design & Usability
Lähteülesande koostamine – sisend disainietapiks
Struktuur ja sisu
Sisu või funktsionaalsus, selle maht ja keerukusTasemete arv ehk struktuuri sügavus5 +/- 2 või 7 +/- 2Visuaalne grupeerimine ja eristamineProfileerimine, sihtgruppideks jaotamineAutenditud ja autentimata keskkondSekundaarsed menüüd, lehesisesed menüüd
User Interface Design & Usability
Lähteülesande koostamine – sisend disainietapiks
Tehnilised nõudedEkraanilahutusLehe kõrgus ja foldSisuhalduslahendusest tulenevad nõudedTehnoloogiast tulenevad nõuded (java, .net, flash jpt)
Infoarhitektuur ja layout (Wireframes)Ei sisalda ühtegi disainitud elementi ega pilti“Hallid kastid”Vajadusel eristatakse profiile/komponente värvidega või joone paksusegaOtsustuskohad või küsimused on märgistatud
User Interface Design & Usability
Infoarhitektuur – wireframes
User Interface Design & Usability
Infoarhitektuur – wireframes
User Interface Design & Usability
Infoarhitektuur – wireframes
User Interface Design & Usability
Infoarhitektuur - grid
GRIDInfosüsteemi kasutajaliidese kujundamisel on esteetikast kõrgemal kohal
korrektsus, korrapärasus ja ühtne loogika.
Mis on grid? Võrgustik? Võre?
LayoutLaiused, kõrgused, elemendite vahekaugusedPäis ja jalusFold ehk siis ekraani nähtava ala piir (above the fold)Teksti ja sisuobjektide taanded (indent)
BBC: http://www.bbc.co.uk/guidelines/newmedia/desed/visual_lang_1_0_6.pdf
User Interface Design & Usability
Disainimise protsess
Protsess üldiselt:
Materjalidega tutvumine ja ajurünnak (klient, projektijuht, analüütik, disainer)Värvikasutus, look&feel, rõhuasetusedEsimesed disainilahendusedLukustamine, viimistlemineLõplik disainilahendus (JPG, PSD tööfailid, kirjeldused)
Meeskond
Infoarhitekt või interaktsioonidisainerDisainerHTML kodeerija / prototüüpijaProjektijuht või vastutav kasutaja
User Interface Design & Usability
Prototüüpimine
Prototüüpimine
User Interface Design & Usability
Prototüüpimine
Olukord ca 5 aastattagasi:
User Interface Design & Usability
Prototüüpimine
Mis see on ja miks seda vaja on?
HTML kuvadel baseeruv infosüsteemi/kodulehekülje funktsionaalsuse jäljendamineLihtne CMS + kommenteerimise-kinnitamise funktsionaalsus kliendileTöövahend ka tellija „äripoolele“Arendusriskide maandamineVisuaalne abi- ja töövahend analüütikule ja arendajaleVõimalus nii kliendile kui ka arendajale reaalselt rakendust „katsuda“
HTML lehemallidGraafiliste elementide kasutusjuhised (User Interface Guidelines)Prototüübimootori seadistamineSisukuvade tootmine läbi olulisemate protsesside -kasutajakesksuse analüütiku töölaudKinnitamine
User Interface Design & Usability
Prototüüpimise vajalikkus?
Lahendus mõeldakse detailides läbi
Lõppkasutaja saab testida funktsionaalsust enne realisatsiooni
Tellijal ja täitjal ühine nägemus lõpptulemusest
Tellija ja täitja saavad täpsemalt kokku leppida projekti skoobis ning vahetulemites
Leitakse vastused “väiksematele” küsimustele
Mis on lihtsam ja mis keerulisem funktsionaalsus
Selgemalt saab eraldada, mis on muudatus, mis on puudujääk ja mis täitja viga
Selgem ülevaade kui palju projektist valmis on
User Interface Design & Usability
Prototüüpimine – näide 1
User Interface Design & Usability
Prototüüpimine – näide 2
User Interface Design & Usability
Prototüüpimine – näide 2
User Interface Design & Usability
Prototüüpimine – vahendid
Paber (struktuur)WhiteboardLihtne CMS
Suvaline pilditöötlusprogramm + kuvade loogiline järjestus, Paint, Photoshop, Visio jneKeerukam CMS (content management system) ehk siis lisatud nt kuvade ülevaatamise-kinnitamise funktsionaalsus, töövoodSpetsiaaltarkvarant http://www.axure.com/ (Sisaldab ka dokumentatsiooni, ei võimalda HTML prototüüpimist)
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Kasutajaliidese ja selle usability testimine
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Miks rakendusi/prototüüpe testida?
Reaalne tagasiside lõppkasutajaltTeostamise lihtsus, tulemus/tagasiside saavutatakse kiiresti ja odavaltSäästab arendusaega ja rahaVähendab argumenteerimisele ja vaidlemisele kuluvat aega – kasutaja on kuningasPaneb meekonna kasutatavuse peale mõtlema
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Testitavate arv, testimise koht ja vahendid
Kvalitatiivne testimine -> 4-6 kasutajatKvantitatiivne testimine –> 10 kasutajat ja rohkemTestimise läbiviimise ruumVahendid (kaamerad, mikrofon, peegelsein, telefon, pastakas ja paber)Tarkvara (Morae – TechSmith, Observer XT, Realeyes jpt)
Morae – teostab katseisiku hääle, näoilme (näiteks veebikaamera abil), arvuti ekraani ning arvutis toimuvate erinevate sündmuste salvestamist
Observer - Lisaks andmetele mis fikseerib Morae, võimaldab registreerida füsioloogilisi andmeid: südamelöökide rütmi, pupilli suurust ning infrapunase kaamera kasutamisel silma liigutusi.
User Interface Design & Usability
Testimine – testimise ruum või laboratoorium
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Morae http://www.techsmith.com/morae.asp
User Interface Design & Usability
Testimise meetodi valik
Paber-prototüüpimine ehk card sortingIntervjuuIntervjuu + videosalvestusEyetracking (Realeyes, www.realeyes.it)Internetipõhised vahendid ehk Remote Testing Tools
(UserVue)
Kasutajaliidese ja kasutajakesksuse testimine
User Interface Design & Usability
Testimine - heatmap
User Interface Design & Usability
Testimine - Eyetrackingu tulemuste vaade
Kuidas eyetracking töötab?
Salvestatakse infrapunasevalguse peegeldumist kasutaja pupillideltca 50 salvestust
DisainiotsusedSisu paigutus ehk layout
User Interface Design & Usability
Testimine - Eyetrackingu tulemuste vaade
Näide!www.hansa.ee
User Interface Design & Usability
Testimine - Eyetrackingu tulemuste vaade
Milliseid järeldusi saab tulemuse põhjal teha?
Kui atraktiivne on mingi ala?Kui produktiivne on mingi ala?
User Interface Design & Usability
Testimine - Eyetrackingu tulemuste vaade
Milliseid järeldusi saab tulemuse põhjal teha?
Kui nähtav on mingi ala?Kui kiiresti kasutajad märkavadmingit konkreetset ala?Kui kaua kasutajad ala vaatavad?Kui huvitatud kasutajad alasisust on?
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Testimisülesannete koostamine
Eesmärk, eeldatav stsenaarium ja ajaline kestvusLihtsamad ülesanded enneVäldime rakenduses esinevaid mõisteidPsühholoogia (ülesandeid ei nummerdata, testitavat ei tohi mõjutada, jook alati käepärast, võimalus alati lõpetada jne)
Prototüübi ettevalmistamine
Garanteerime, et kõik ülesanded on prototüübis kuvadena kaetud ning sooritatavadLavastame vajadusel interaktsiooni (veateade, otsing jms)Kasutame võimalikult reaalseid andmeid (personaliseerime)Kustutame eelmisest testimisest jäänud võimalikud seaded ja info
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Testimine
Protsessi selgitamineVaatleja ülesanded„Valesid vastuseid ei ole olemas“„Mõtle häälega“ põhimõte„Vaikimise“ põhimõte, testija on vait, jälgib, teeb märkmeidDiskussioon peale sessiooni
Andmete analüüs ja raporteerimine
Kas kasutaja üritab jõuda õige tulemuseni? Kas kasutaja märkab, et tegevuse sooritamine on võimalik? Kas kasutaja seostab tegevuse õige tulemusega?Kas kasutaja märkab tegevuse läbiviimise järel, et on toimunud progress ülesande lahendamise suunas või proovib ta tegevust korrata?
ParandusettepanekudRealisatsiooni jälgimine ja konsulteerimine
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Kirjandust koduseks lugemiseks ☺
Usability theories
The Elements of User Experience: User-Centered Design for the WebUsability Engineering
User-centered web design process
Sketching User Experiences: Getting the Design Right and the Right DesignThe Persona Lifecycle : Keeping People in Mind Throughout Product DesignUser-Centered Design: An Integrated ApproachRapid Contextual Design: A How-to Guide to Key Techniques for User-Centered DesignInstitutionalization of Usability: A Step-by-Step GuideUsability Success Stories: How Organizations Improve by Making Easier-to-use Software And Web SitesPaper Prototyping: The Fast and Easy Way to Design and Refine User InterfacesThe Usability Engineering Lifecycle: A Practitioner's Handbook for User Interface DesignUser-Centered Web DevelopmentWeb Usability: A User-Centered Design ApproachThe Persona Lifecycle : Keeping People in Mind Throughout Product DesignEffective Prototyping for Software MakersUser-Centered Web DesignUsability Engineering: Process, Products and ExamplesUser-Centered Design Stories: Real-World UCD Case StudiesCommunicating Design: Developing Web Site Documentation for Design and Planning
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Kirjandust koduseks lugemiseks ☺
Usability testing
Usability Testing and ResearchUsability Inspection MethodsObserving the User Experience: A Practioner's Guide for User Research (Morgan Kaufmann Series in Interactive Technologies)A Practical Guide to Usability TestingHandbook of Usability Testing: How to Plan, Design, and Conduct Effective TestsA Step-by-Step Guide to Usability Testing
Information architecture
Information Architecture for the World Wide Web I-II editionInformation Architecture for Designers: Structuring Websites for Business SuccessThe Visual Display of Quantitative Information (2nd edition)Designing Web Navigation: Optimizing the User ExperienceGetting Things Done: The Art of Stress-Free ProductivityInformation Design Workbook: Graphic approaches, solutions, and inspiration plus 20 case studies
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Kirjandust koduseks lugemiseks ☺
Human-Computer Interaction
Thoughts on Interaction DesignHuman-Computer Interaction (3rd Edition)About Face 2.0: The Essentials of Interaction DesignBeauty, Goodness, and Usability/Change Blindness: A Special Issue of Human-Computer InteractionHuman Factors In Engineering and DesignThe Design of Everyday ThingsEmotional Design: Why We Love (Or Hate) Everyday ThingsGUI Bloopers: Don'ts and Do's for Software Developers and Web DesignersUsability and Internationalization of Information TechnologyFunology : From Usability to Enjoyment (Human-Computer Interaction Series)Designing InteractionsDesigning Pleasurable Products: An Introduction to the New Human FactorsThe Inmates Are Running the Asylum : Why High Tech Products Drive Us Crazy and How To Restore The SanityHuman Computer Interaction Research in Web Design and EvaluationVisual Thinking: for Design (Paperback)
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Praktiline ülesanne
Eeldused:Rühm: 3-4 inimestLaptopWifi 1 EMT lepinguline klient rühma peale
Iga rühm teeb lühikese kokkuvõtva ettekande.
User Interface Design & Usability
Kasutajaliidese ja kasutajakesksuse testimine
Praktiline ülesanne
“Tellige palun endale EMT koduleheküljelt roamingu ehk rahvusvahelise kõne teenus”
Tulem: pange palun grupitööna kirja kõik tähelepanekud, vea- ja kitsaskohad, soovitused:
DisainilahenduseleNavigatsiooniloogikaleLehe ülesehitusele ja kasutusloogikaleTeenuse leidmise ja tellimise loogikale
Pange kirja või saatke aadressil [email protected]
User Interface Design & Usability
Tänan! Küsimused?Tänan! Küsimused?