Post on 25-Jan-2015
description
What Would Jacob Do?Za co by nám Jacob Nielsen
dal přes držku?
24. 4. 2010, Praha, UXCamp.cz
tento příspěvek by měl být lehký motivační úvod do designových heuristik nejen podle Jacoba Nielsena
Pavel Mačekinterface designer www.matcheck.cz
Ondřej Válkafront-end developer & designer www.valka.info
jsme kluci z Brna
Heuristika je doporučení založené na zkušenosti.
místo, odkud začít; uvadime pozitivni priklady
Nielsenovy heuristiky se podobají jako biblickému desateru
pro vytváření úkolů k uživatelskému testování použitelnosti
Visibility of system status
svítící čudl dává větší smysl, než dioda
čudl vidím, protože na něj sahám; diodu snadno přehlédnu
stav sytému: zapnuto
Trvající stav systému.
stav systemu: prihlasovani
stav systemu: aktivni polozka v menu
Feedbackzpětná vazba
odezva systému, reakce na změnu stavu
System status je dlouhodobý stav systému.
Feedback je upozornění na změnu stavu.
Nielsen nerozlisuje mezi statusem a feedbackem, my si myslime ze je tam rozdil
mozna by nam za to dal prez drzku
rozdil mezi statusem a feedbackemskace: feedbacksviti: status
status muze byt kratkodoby
feedback muze mit nekolik forem, vizualni, zvukovy, hmatovy (vibracni)
zavibrovani pri chybove hlasce nebo nepovolenych hodnotach
Familiaritypovědomost
kulturni kontext: perliva a neperliva jsou v CR oznaceny jina nez ve zbytku sveta
foto z Rima
Dodržujte standardy.
používejte návrhové vzory
buďte inovativní, pokud se jedná výrazně přínosné řešení
iPod a cely Apple je tovarna na inovace
kolecko vymyslel marketak (cteno bud v Jak mysli Steve Jobs nebo ve Sketching User Interfaces)
context over consistency (myslenka 37signals)
homepage a podstranka se mohou lisit
http://mail.google.com/tasks/canvas
vyuziti fungujici koncepce: textovy soubor
Enter, Tab, Shift+Tab
Affordancejednoznačnost, návodnost
zaměnitelné prvky UI
tatka sahal po ceduli a dvirka byly nize
Musí být jasné, co k čemu slouží.
ikony nastaveni jsou pouzivane jinak na webu a jinak na Macu
icon design je celý o familiarity
Recognition rather than recall
Recognition je pasivní procházení paměti a porovnávání s možnostmi
tj. rozpoznávání.
Recall je aktivní prohledávání paměti tj. vzpomínání.
to muze byt nekdy pekne peklo
Rozpoznávání je jednodušší a rychlejší.
Design for recognition.
našeptávač: kombinace recall a pote recognition pri velkem mnozstvi moznosti
What Would Honza Korbel Do?
zobrazení hlášky u přihlašovacího formuláře po odhlášení
ujisti cloveka o tom, co se stalo
pojistka proti vyruseni nebo odchodu od obrazovky a naslednemu WTF efektu
vizualne nevadi, misto nezabira
Match betweensystem
and the real world
informace se snazime zobrazit v prirozenem a logickem sledu, prirozenym zpusobem
pokud zavadime inovativni reseni, snazime se najit podobnost s realnym svetem
okna na plose = metafora papiru na pracovnim stole
soucasne vyuzivame vyhody pocitacovych rozhrani: zvetsovani oken, minimalizace/maximalizace, zasouvani za okraj
Nabízejte přirozené analogie mezi skutečným a virtuálním světem.
Nenechte se omezovat.
nebuddte doslovni v prenosu zavedenych konceptu do novych technologiivyuzijte moznosti, ktere vam technologie dava
klasicky kalendar musime otacet po celych mesicich
napr. v Outlooku lze ale plynule scrollovat a zobrazit i presahy mezi mesici
Constrainsomezení
nechcete-li, aby neco uzivatel delal, nedejte mu k tomu moznost
Nedovolte uživateli udělat chybu.
Nastavte přirozená omezení.
zasuvky, zastrcky...
disabled button
nelze poslat napr. prazdny status nebo tweet dvakrat
Comic Sans nightmare
pitome pouziti Comic Sans je problemem snadne volby v UI
inspired by Mark Boulton at FOWD
http://www.vcasmo.com/video/carsonified/5016http://madebymany.co.uk/highlights-from-mark-boulton’s-presentation-at-fowd-london-2009-002006
User control and freedom
undo ve skutecnem svete: moznost vratit zbozi do 30 dnu
extrem: udalost se ve skutecnosti neprovede
Uživatel musí mít neustále pocit kontroly nad situací.
love Undo
mame zkusenost s projektem, kde jasne oznaceni navratu na defaultni nastaveni pomohlo v jistote uzivatele pri vlastnim nastavovani UI
jednalo se o elektrikare a portable zarizeni podobne tomu na obrazku
tento slider nema resetovaci polohu
tento ji ma a navic se pri ni rozsviti dioda
1
2
3
2
4
5
uz 40 let nezmeneny design gramofonu Technics
plni pouze svou funkci a dela to dokonale
Recoveryzotavení, vzpamatování
pomocna ruka ve chvili, kdy ji nejvice potrebujete
recovery ve skutecnem svete: kladne vyrizena reklamace
nakoupim znovu, kdyz vim, ze reklamace byla bezproblemova
vyuzity prostor
cislo 404 nic nerika
Pomozte lidem dostat se z problémových situací.
princip dobre provedeneho recovery: problem neni problem
Co?Proč?Jak z toho ven?
Fuck Off slajd
spravna chybova hlaska odpovida na vsechny tri otazky: nekdy explicitne, nekdy implicitne (kdyz to neni potreba)
okno je docela dobre: rika vsechno dulezite
neprijemna hlaska v nadpisu ale zabila dobrou myslenku
ve skutecnosti je to chyba prekladu
(diky Jakubovi Vranovi za podnet k prozkoumani anglicke verze)
Flexibility and efficiency of use
tato heuristika se tyka pokrocilych uzivatelu
nabidnete urychlovace prace: akcelerátory
důležité pro pokročilé uživatele
akcelerátory: makra, klavesove zkratky
Mac combo: ctrl + alt + command + shift
shortcuts
jablko + Z na Macu funguje vsude
autofocus na input
context over consistency: neni to standardni chovani, ale je vhodne ho pouzit, pokud je zamer vetsiny hledat
design for intermediate users (pise Cooper v knize About Face)
Aesthetic and minimalist design
predelani Java aplikace, na nic si nehraje a plni funkci
seda pro UI, bila pro pozadi, modra pro aktivni prvky
kdyz nevis, zacni od modre - zelena je OK, cervena je pozor (vice barev v RGB neni, ne?)
plocha je oskliva, decentni gradient ji dela stribrnou a luxusni
minimalni usili, maximalni efekt
decentni gradienty ve skutecnem svete nejsou potreba: vytvari je svetlo samo
Nedělejte design pro design.
forma nasleduje funkci
Help and documentation
Dokumentace je pro experty.
Dělejte rozhraní samovysvětlující.http://blogs.msdn.com/jensenh/archive/2005/11/29/497861.aspx
zkusenost: dokumentaci ctou pouze ti, kteri ziskat ze systemu maximum
Zdroje
znalosti nemame jen ze sve hlavy
www.delicious.com/ondrejvalka/book
www.readernaut.com/matcheck
proto ctete knihy
neni nic lepsiho, tecka
Fuck OffThis is the fuck off slide.