Gócza Zoltán előadása a felülettervezésről

1. A jó designer…
Gócza Zoltán
zoltan.gocza@kirowskiisobar.com
@goczazoltan | uxmyths.com

2. Ez egy nagyon jó előadás lesz!

3. Gócza Zoltán vagyok

4. Régen használhatósági szakemberként
mutatkoztam volna be…
…de az ma már ciki

5. If usability engineers designed a nightclub, it
would be clean, quiet, brightly lit, with lots of
places to sit down, plenty of bartenders, menus
written in 18-point sans-serif, and easy-to-find
bathrooms. But nobody would be there. They
would all be down the street at Coyote Ugly
pouring beer on each other.
Joel Spolsky

6. Ha usability szakik terveznék a játékokat…

7. Rocksztárok

8. Kezdjük!
A jó designer…

9. A jó designer egyben
szövegíró is.

10. Start with the content. Sometimes
designers and developers forget that
this is why people come to your site
to begin with.
Aaron Gustafson

12. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Mauris vulputate lectus in
nulla fringilla posuere...

14. A jó szöveg megírásához idő kell…

15. I didn't have time to
write a short letter, so I
wrote a long one instead.

21. Microcopy
The fastest way to
improve your interface is
to improve your
copywriting.
Joshua Porter

22. If we want users to like our software,
we should design it to behave like a
likeable person.
Alan Cooper

23. Grapes are among Nature's
most versatile fruits—if
squished they become wine, if dried they
becomes raisins, and if included in a
catered lunch, they become tools to
playfully pelt your boss…

24. Helyettesíthető a szöveg ikonokkal?

25. Outlook 97
Outlook 2003

26. Olvasnivaló

27. A jó designer egyben
ügyfélszolgálatos is.

28. Szerintem a legtöbb cégben mindenki az
ügyfélszolgálaton dolgozik.

29. Ügyfél = felhasználó

30. Ügyfél = megrendelő

31. Fikció, ilyen nincs
clientsfromhell.net/

32. The wisdom of crowds
The aggregation of information in
groups, resulting in decisions that,
he argues, are often better than
could have been made by any single
member of the group
http://en.wikipedia.org/wiki/The_Wisdom_of_Crowds

33. The idiocy of crowds

34. Ügyfél • Ismeri a piacot
• Mély szakirányú, domain-specifikus
tudása van
• Ismeri a kollégákat, a lehetőségeket, a
működési folyamatokat
Designer • Sokat látott különböző projekteken
• Nem utolsósorban ért a designhoz

35. The more UX work I do, the more I
realize I'm more of a therapist for
businesses.
Nick Finck

36. Lényegtelen,
hogy mennyire vagy jó designer, ha
1. nem tudod eladni és megvédeni a
terveidet,
2. nem tudsz jó kritikát adni vagy nem
tudod jól kezelni, ha kritikát kapsz.

37. Hogyan add el a tervedet?
• Kérdezz sokat
• Hivatkozz tényekre, kutatásokra
• Mutasd be, hogy jutottál a megoldásra
• De a legjobb, ha a megrendelő jön rá
• Kérdezz sokat

38. I’ll give the model a big mole on her
face, and the committee focuses on
that and are usually satisfied with the
momentous change of removing it
and leave everything else as is.
Speider Schneider fotós haverja

39. Lássuk a kritikát!
Tegyük fel, hogy a következő oldalt
én terveztem.

41. Hogyan kritizálj?
• „A használati statisztikák azt mutatják,
hogy … a legfontosabb elem?”
• „Arra gondoltál, hogy…?”
• „Hogy fogják szerinted a felhasználók
megérteni…?”
• „Mit szólnál, ha megmutatnánk pár
embernek…?”

42. Olvasnivaló

43. A jó designer ért a
pszichológiához.

45. figyelem-
figyelem
http://nymag.com/restaurants/features/62498/

46. viszonyítási
alap
http://nymag.com/restaurants/features/62498/

47. így már
ez olcsó
http://nymag.com/restaurants/features/62498/

48. legjobb pozíció
http://nymag.com/restaurants/features/62498/

49. oszlop :/

50. ezen nincs haszon…

51. ezen viszont van :)

52. The behavior you're seeing is the
behavior you've designed for
(whether intentional or not).
Joshua Porter

53. szűkösség

54. társadalmi
bizonyíték

55. boldogság
választék

56. Dunning-Kruger hatás

57. Introspekció
Melyik posztert választod? Miért?

58. A szép dolgokat
könnyebb használni

59. Social Proof Is The
New Marketing
techcrunch.com/2011/11/27/social-proof-why-people-like-to-follow-the-crowd/

60. …

61. Olvasnivaló

62. Olvasnivaló

63. A jó designer egyben
tesztelő is.

64. A/B tesztelés

65. 1. Egy dolgot változtatunk 2. Több dolgot változtatunk 3. Teljesen más verziókat
hasonlítunk össze

67. Forrás: Button Color Test: Red beats Green

73. Van, hogy egyértelmű a dolog

74. De persze van olyan is, hogy nem

75. Gyakori kérdések
Hány felhasználóra lesz szükség?
Mennyi ideig fog tartani?
Mikor vagyok kész?
Milyen változtatásokat teszteljek?

76. Két iskola van
1. Apró dolgokat változtatunk

77. A
B
C
D
How Obama Raised $60 Million by Running a Simple Experiment

78. Nagy
változtatások
Kis
optimalizálások
Itt vagyunk

79. 2. Teljesen eltérő verziókat
hasonlítunk össze

80. A B

81. Nincsenek kész receptek
Forrás: The attack of red buttons:, How We Improved Our Conversion Rate by 72%, saját mérés

82. Olvasnivaló
+ Inspiráció
www.abtests.com
www.whichtestwon.com/
visualwebsiteoptimizer.com/split-
testing-blog/category/case-studies/

83. Használhatósági
tesztelés

84. Want your users to fall in love with
your designs? Fall in love with your
users.
Dana Chisnell

85. Használhatósági teszt = fókusz csoport

86. Papíron, gépen / lo-fi, hi-fi

87. Sokszor apró, de fontos dolgok jönnek ki…

88. Tabuk
„Használnád ezt és ezt a funkciót?”
„Mit gondolsz, miért nem vetted észre a gombot?”
„Mit változtatnál az oldalon?”
„Képzeld azt, hogy éppen Hawaiira mész nyaralni!”

89. Gyakori kérdések
Hány felhasználóra van szükség?
Kik legyenek a résztvevők?
Mikor mondható egy tervre, hogy jó?

90. Olvasnivaló

91. A jó designer egyben
kutató/elemző is.

92. Failure comes when you don't listen.
You can't put something out there
and assume it's great.
Alan Lewis

93. Számos kérdésre megvan valahol a válasz…
Hogyan állítsuk be az alapértelmezett szűrőket?
Lekérdezési
Lakossági Vállalati
nézet
Egyéni 9,9 % 17,5 %
Elmúlt két nap 17,1 % 26,1 %
Elmúlt két hét 50,8 % 44,0 %
Elmúlt egy hónap 15,2 % 7,6 %
Elmúlt fél év 5,6 % 3,8 %
Elmúlt egy év 1,3 % 1,0 %

94. Meg aztán meg is lehet kérdezni…

95. Mérés okosabban - például
<a href="http://feeds.feedburner.com/uxmyths"
onClick="_gaq.push(['_trackEvent', 'Subscription', 'RSS -
Header']);">RSS</a>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jq
uery.min.js"></script>
<script>
jQuery(function() {
jQuery("a[href^=http]").not('a[href*="uxmyths.com"]
').click(function() {
_gaq.push(['_trackEvent', 'Outgoing',
document.title,"'" + this.href + "'"]);
});
});
</script>

99. Hőtérkép – óvatosan,
a színek teljesen
félrevezethetnek

100. Látogatói felvételek
Itt nézhettek meg egy példát: Clicktale

101. Olvasnivaló

102. Olvasnivaló

103. Köszönöm!