Kasutajaliideste disain ja usability · Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 vähemalt prioriteet 1 tasemele. Kasutatav XHTML on semantiliselt korrektne

User Interface Design & Usability

Kasutajaliideste disain ja usability

28. oktoober 2008

Avo AlenderAS Webmedia


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


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


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.



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


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



Brandbook/stylebook/UIG


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



Brauserite kasutusstatistikat ka nt siin: http://www.w3schools.com/browsers/browsers_stats.asp

http://www.w3schools.com/browsers/browsers_stats.asp




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.




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



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)

http://www.w3.org/WAI/

http://www.w3.org/TR/WCAG10/full-checklist.html



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?

http://www.bbc.co.uk/

http://jquery.com/

http://www.adobe.com/devnet/flex/?tab:samples=1


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)


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?


Kasutajakesksuse analüüsi elutsükkel


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


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


Infoarhitektuur – wireframes






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

http://www.bbc.co.uk/guidelines/newmedia/desed/visual_lang_1_0_6.pdf


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


Prototüüpimine

Prototüüpimine


Prototüüpimine

Olukord ca 5 aastattagasi:


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


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


Prototüüpimine – näide 1






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)

http://www.axure.com/


Kasutajaliidese ja kasutajakesksuse testimine

Kasutajaliidese ja selle usability 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



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.


Testimine – testimise ruum või laboratoorium



Morae http://www.techsmith.com/morae.asp

http://www.techsmith.com/morae.asp


Testimise meetodi valik

Paber-prototüüpimine ehk card sortingIntervjuuIntervjuu + videosalvestusEyetracking (Realeyes, www.realeyes.it)Internetipõhised vahendid ehk Remote Testing Tools

(UserVue)



Testimine - heatmap


Testimine - Eyetrackingu tulemuste vaade

Kuidas eyetracking töötab?

Salvestatakse infrapunasevalguse peegeldumist kasutaja pupillideltca 50 salvestust

DisainiotsusedSisu paigutus ehk layout



Näide!www.hansa.ee



Milliseid järeldusi saab tulemuse põhjal teha?

Kui atraktiivne on mingi ala?Kui produktiivne on mingi ala?



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?



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



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



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




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




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)



Praktiline ülesanne

Eeldused:Rühm: 3-4 inimestLaptopWifi 1 EMT lepinguline klient rühma peale

Iga rühm teeb lühikese kokkuvõtva ettekande.



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]

mailto:[email protected]


Tänan! Küsimused?Tänan! Küsimused?

Documents

Kasutajaliideste disain ja usability · Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 vähemalt prioriteet 1 tasemele. Kasutatav XHTML on semantiliselt korrektne