A webes felülettervezés alapjait bemutató MOME előadás slide-jai.

1. Felhasználóbarát felületek
tervezése
Kollin Zoltán
2011. november 26.

3. Miről lesz ma szó?
1. Végigküzdjük magunkat némi elméleten
2. Megismerjük a felhasználókat
3. Megtanuljuk elkerülni a tipikus web design hibákat
4. Megbarátkozunk a drótvázakkal
5. Foglalkozunk egy kicsit a kutatási módszerekkel

4. 1 Egy kis bevezető

5. Design is not just what it looks like
and feels like. Design is how it
works.
Steve Jobs

6. Megjelenés > Észlelés > Használat

7. Hogy szolgálja a vizuális
megjelenés és az észlelés a
működést?
(most jön a kötelező elméleti háttér, de rövid lesz)

8. A hasonló elemeket csoportnak tekintjük

9. A hasonló elemeket csoportnak tekintjük

10. A hasonló elemeket csoportnak tekintjük

11. A hasonló elemeket csoportnak tekintjük

12. A hasonló elemeket csoportnak tekintjük

13. Visszafelé is igaz: ami különbözik, az kiemelt

14. Az egymáshoz közeli elemeket csoportnak
tekintjük

15. Az egymáshoz közeli elemeket csoportnak
tekintjük

16. Az egymáshoz közeli elemeket csoportnak
tekintjük

17. Az egymáshoz közeli elemeket csoportnak
tekintjük

18. Az egymáshoz közeli elemeket csoportnak
tekintjük

19. Az egymáshoz közeli elemeket csoportnak
tekintjük

20. Fitts törvénye
A kattintáshoz szükséges idő a
kattintható objektum távolságának
és méretének függvénye.

21. Fitts törvénye

22. Fitts törvénye

23. Fitts törvénye
x


24. Hick törvénye
A döntéshez szükséges idő a
választható lehetőségek számától
függ.

26. Hick törvénye

27. Összefoglalva az első pszichológiaóra
tanulságait:
Hasonlóság elve Ugyanaz a funkció ugyanúgy jelenjen meg
Közelség elve A white space-szel (is) tagold a tartalmat
Fitts törvénye Készíts nagy kattintható felületeket
Hick törvénye Racionális mennyiségű választási
lehetőséget mutass

28. Ismerjük meg a
2 felhasználót!

29. Néhány dolog, amit felhasználóként nem
teszünk: *
Nem olvasunk el mindent
Nem hozunk optimális döntéseket
Nem viselkedünk racionálisan (vagy úgy, ahogy feltételezed)
Nem mindig tudjuk elmondani, mit szeretnénk
Nem szeretjük, ha gondolkodásra kényszerítenek
* Bár sokan azt gondolják, hogy igen

30. Néhány dolog, amit viszont igen:

31. Sietünk

32. Scrollozunk 1 2 3 4
A „fold”
1. IMDB.com: ~5600px
2. Index.hu: ~5800px
3. Apple.com: ~9000px
4. Amazon.com: ~10000px

33. Figyelmen kívül hagyjuk, ami nem érdekel
Scannelünk és
bannervakságban
szenvedünk

34. Figyelmen kívül hagyjuk, ami nem érdekel
Scannelünk és
bannervakságban
szenvedünk
Ezért mértékkel díszítsük a
funkcionális elemeket.

35. Ami érdekesnek tűnik, arra viszont kattintunk
• Nem csak hármat!
• „Satisficing”

36. Használjuk a gombot
„The Back button is the lifeline of the Web user and
the second-most used navigation feature (after
following hypertext links). Users happily know that
they can try anything on the Web and always be saved
by a click or two on Back to return them to familiar
territory.”
Jakob Nielsen

37. Keresünk

38. Általában szeretjük, ha mi irányítunk
• Ha nem nyílik meg új ablakban egy link
• Ha a linkek oda vezetnek, ahova gondoljuk
• Ha akkor küldjük el egy űrlap adatait, amikor kattintunk

39. Értékeljük a kellemes és használható dolgokat

40. Néha a váratlan húzásoknak is örülünk

41. Tipikus webdesign hibák
3 (és azok elkerülése)

42. Gyakori használhatósági problémák
Áttekinthetetlen
Túl kicsi kattintható oldaltartalom
terület
Nem működő Vissza
gomb
Bonyolult navigációs Keresés hiánya
eszközök
Nehezen olvasható
tartalom
Kiszámíthatatlan
működés
Észrevehetetlen linkek
Következetlen
megjelenés

43. Gyakori használhatósági problémák
Áttekinthetetlen
Túl kicsi kattintható oldaltartalom
terület
Nem működő Vissza
gomb
Bonyolult navigációs Keresés hiánya
eszközök
Nehezen olvasható
tartalom
Kiszámíthatatlan
működés
Észrevehetetlen linkek
Következetlen
megjelenés

44. Gyakori használhatósági problémák
Áttekinthetetlen
Túl kicsi kattintható oldaltartalom
terület
Nem működő Vissza
gomb
Bonyolult navigációs Keresés hiánya
eszközök
Nehezen olvasható
tartalom
Kiszámíthatatlan
működés
Észrevehetetlen linkek
Következetlen
megjelenés

45. Navigáció

46. Navigációs eszközök 1 3
1. Menü
2. Oldalon belüli linkek
3. Kereső 2
4. Sitemap
4

47. Mitől lesz jól használható?

48. …ha a nyitóoldal mindig elérhető
…ha a felhasználó mindig látja, hol jár
…ha egyértelmű, hogy melyik link hova vezet
…ha egyértelmű, hogy mi kattintható
…ha a kattintható területek a lehető legnagyobbak

49. Ha a nyitóoldal mindig elérhető

50. Ha a nyitóoldal mindig elérhető

51. Ha a felhasználó mindig tudja, hol jár

52. Ha a felhasználó mindig tudja, hol jár
A tab alapú navigáció előnyei:
Látszik, hogy hol járunk … és hogy milyen egyéb opcióink vannak.
Az aktív menüpont
és tartalma
vizuálisan össze
van kapcsolva

53. Ha egyértelmű, melyik link hova vezet

54. Ha egyértelmű, mi kattintható

55. Ha a kattintható felületek a lehető
legnagyobbak

56. És még néhány jótanács:
• Ha nem muszáj, ne nyiss új ablakot!
• Legyen kereső!
• Legyen sitemap!

57. És mindig, minden
körülmények között
működjön a Vissza gomb!

58. A csomagtartó
teszt

59. A csomagtartó teszt
1. Melyik site-on járok?
2. Melyik oldalon
járok?
3. Mik a site fő
szekciói?
4. Mik az adott szint
további
menüpontjai?
5. Hol járok a site
struktúrában?
6. Hogy tudok keresni?

60. Szöveges tartalmak

61. Legyen olvasható!
• Betűtípus
• Betűméret
• Kontraszt
• White space

62. Legyen scannelhető!

63. Legyen tömör!

64. „On the average Web page, users
have time to read at most 28% of
the words during an average visit;
20% is more likely.”
Jakob Nielsen

65. Legyen tömör!

66. Legyen tömör!

67. „ A tökéletesség nem az, amihez
nincs mit hozzátenni, hanem
amiből nincs mit elvenni.”
Antoine de Saint-Exupery

68. Tartalom nélkül nincs design.

69. 4 Drótváztervezés

70. Kedvenc analógiánk:

71. Íme a drótváz (wireframe)

72. Kevésbé kidolgozva:

73. Mit mutat meg?
• Az alapvető oldalszerkezetet
• A navigációt
• Az oldal tartalmi blokkjait
• Az oldalon megjelenő információkat
• Az interaktív funkciók helyét, működésüket
• Az oldal egyes részei közti kapcsolatokat, arányokat,
hangsúlyokat

74. Mit NEM mutat meg?
A pontos megjelenést.
• Tipográfiát
• Grafikai elemeket
• Színeket
• Formákat
• Vizuális stílust

75. A drótváz nem
korlátoz

76. A drótváz nem
korlátoz

77. Miért hasznos?
• Mert a funkcionalitásra koncentrál anélkül, hogy elveszne
grafikai részletekben
• Mert könnyen validálható, de könnyen is módosítható
• Mert arra késztet, hogy a jelentéktelennek tűnő
részletkérdéseket is alaposabban is átgondold

78. 5 Visszajelzések gyűjtése

79. Néhány dolog, amit felhasználóként nem
teszünk: *
Nem olvasunk el mindent
Nem hozunk optimális döntéseket
Nem viselkedünk racionálisan (vagy úgy, ahogy feltételezed)
Nem mindig tudjuk elmondani, mit szeretnénk
Nem szeretjük, ha gondolkodásra kényszerítenek
* Bár sokan azt gondolják, hogy igen

80. Webanalitika

81. Használhatósági teszt

82. A/B teszt

83. A/B teszt

84. A végére értünk.
Köszönöm a figyelmet!
Kollin Zoltán
zoltan.kollin@kirowskiisobar.com
twitter.com/kollinz

85. Ajánlott irodalom