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.