We know what's under the hood. And we know how to polish the hood.

1. 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

2. Pavel Maček
interface designer
www.matcheck.cz
Ondřej Válka
front-end developer & designer
www.valka.info
jsme kluci z Brna

3. 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

4. Visibility of system
status

5. 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

6. Trvající stav systému.

7. stav systemu: prihlasovani

8. stav systemu: aktivni polozka v menu

9. Feedback
zpětná vazba
odezva systému, reakce na změnu stavu

10. 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

11. rozdil mezi statusem a feedbackem
skace: feedback
sviti: status
status muze byt kratkodoby
feedback muze mit nekolik forem, vizualni, zvukovy, hmatovy (vibracni)
zavibrovani pri chybove hlasce nebo nepovolenych hodnotach

12. Familiarity
povědomost

13. kulturni kontext: perliva a neperliva jsou v CR oznaceny jina nez ve zbytku sveta
foto z Rima

14. Dodržujte standardy.
používejte návrhové vzory

15. 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)

16. context over consistency (myslenka 37signals)
homepage a podstranka se mohou lisit

18. http://mail.google.com/tasks/canvas
vyuziti fungujici koncepce: textovy soubor
Enter, Tab, Shift+Tab

19. Affordance
jednoznačnost, návodnost

20. zaměnitelné prvky UI
tatka sahal po ceduli a dvirka byly nize

21. Musí být jasné, co k čemu
slouží.

22. ikony nastaveni jsou pouzivane jinak na webu a jinak na Macu
icon design je celý o familiarity

23. Recognition rather
than recall

24. Recognition je pasivní procházení
paměti a porovnávání s možnostmi
tj. rozpoznávání.

25. Recall je aktivní prohledávání
paměti tj. vzpomínání.
to muze byt nekdy pekne peklo

26. Rozpoznávání je jednodušší
a rychlejší.
Design for recognition.

27. našeptávač: kombinace recall a pote recognition pri velkem mnozstvi moznosti

28. What Would Honza Korbel Do?
zobrazení hlášky u přihlašovacího formuláře po odhlášení

29. ujisti cloveka o tom, co se stalo
pojistka proti vyruseni nebo odchodu od obrazovky a naslednemu WTF efektu
vizualne nevadi, misto nezabira

30. Match between
system
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

31. okna na plose = metafora papiru na pracovnim stole
soucasne vyuzivame vyhody pocitacovych rozhrani: zvetsovani oken, minimalizace/
maximalizace, zasouvani za okraj

32. Nabízejte přirozené analogie
mezi skutečným a virtuálním
světem.

33. Nenechte se omezovat.
nebuddte doslovni v prenosu zavedenych konceptu do novych technologii
vyuzijte 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

34. Constrains
omezení
nechcete-li, aby neco uzivatel delal, nedejte mu k tomu moznost

35. Nedovolte uživateli udělat
chybu.
Nastavte přirozená omezení.
zasuvky, zastrcky...

36. disabled button
nelze poslat napr. prazdny status nebo tweet dvakrat

37. 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/5016
http://madebymany.co.uk/highlights-from-mark-boulton’s-presentation-at-fowd-
london-2009-002006

38. User control and
freedom
undo ve skutecnem svete: moznost vratit zbozi do 30 dnu

39. extrem: udalost se ve skutecnosti neprovede

40. Uživatel musí mít neustále
pocit kontroly nad situací.
love Undo

41. 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

42. tento slider nema resetovaci polohu

43. tento ji ma a navic se pri ni rozsviti dioda

44. 5
2
1
4
3
2uz 40 let nezmeneny design gramofonu Technics
plni pouze svou funkci a dela to dokonale

45. Recovery
zotavení, 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

46. vyuzity prostor
cislo 404 nic nerika

47. Pomozte lidem dostat se z
problémových situací.
princip dobre provedeneho recovery: problem neni problem

48. 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)

49. okno je docela dobre: rika vsechno dulezite
neprijemna hlaska v nadpisu ale zabila dobrou myslenku

50. ve skutecnosti je to chyba prekladu
(diky Jakubovi Vranovi za podnet k prozkoumani anglicke verze)

51. Flexibility and
efficiency of use
tato heuristika se tyka pokrocilych uzivatelu
nabidnete urychlovace prace: akcelerátory
důležité pro pokročilé uživatele

52. akcelerátory: makra, klavesove zkratky
Mac combo: ctrl + alt + command + shift

53. shortcuts
jablko + Z na Macu funguje vsude

54. 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)

55. Aesthetic and
minimalist design

56. 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?)

57. 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

58. Nedělejte design pro design.
forma nasleduje funkci

59. Help and
documentation

60. 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

61. Zdroje
znalosti nemame jen ze sve hlavy

62. www.delicious.com/
ondrejvalka/book
www.readernaut.com/
matcheck
proto ctete knihy
neni nic lepsiho, tecka

64. Fuck Off
This is the fuck off slide.