Felhasználóbarát felületek tervezése - Kollin Zoltán

2,248
-1

Published on

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,248
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Felhasználóbarát felületek tervezése - Kollin Zoltán

  1. 1. Felhasználóbarát felületektervezéseKollin Zoltán2011. november 26.
  2. 2. Miről lesz ma szó?1. Végigküzdjük magunkat némi elméleten2. Megismerjük a felhasználókat3. Megtanuljuk elkerülni a tipikus web design hibákat4. Megbarátkozunk a drótvázakkal5. Foglalkozunk egy kicsit a kutatási módszerekkel
  3. 3. 1 Egy kis bevezető
  4. 4. Design is not just what it looks likeand feels like. Design is how itworks.Steve Jobs
  5. 5. Megjelenés > Észlelés > Használat
  6. 6. Hogy szolgálja a vizuálismegjelenés és az észlelés aműködést?(most jön a kötelező elméleti háttér, de rövid lesz)
  7. 7. A hasonló elemeket csoportnak tekintjük
  8. 8. A hasonló elemeket csoportnak tekintjük
  9. 9. A hasonló elemeket csoportnak tekintjük
  10. 10. A hasonló elemeket csoportnak tekintjük
  11. 11. A hasonló elemeket csoportnak tekintjük
  12. 12. Visszafelé is igaz: ami különbözik, az kiemelt
  13. 13. Az egymáshoz közeli elemeket csoportnaktekintjük
  14. 14. Az egymáshoz közeli elemeket csoportnaktekintjük
  15. 15. Az egymáshoz közeli elemeket csoportnaktekintjük
  16. 16. Az egymáshoz közeli elemeket csoportnaktekintjük
  17. 17. Az egymáshoz közeli elemeket csoportnaktekintjük
  18. 18. Az egymáshoz közeli elemeket csoportnaktekintjük
  19. 19. Fitts törvényeA kattintáshoz szükséges idő akattintható objektum távolságánakés méretének függvénye.
  20. 20. Fitts törvénye
  21. 21. Fitts törvénye
  22. 22. Fitts törvénye x 
  23. 23. Hick törvényeA döntéshez szükséges idő aválasztható lehetőségek számátólfügg.
  24. 24. Hick törvénye
  25. 25. Összefoglalva az első pszichológiaóratanulságait:Hasonlóság elve Ugyanaz a funkció ugyanúgy jelenjen megKözelség elve A white space-szel (is) tagold a tartalmatFitts törvénye Készíts nagy kattintható felületeketHick törvénye Racionális mennyiségű választási lehetőséget mutass
  26. 26. Ismerjük meg a2 felhasználót!
  27. 27. Néhány dolog, amit felhasználóként nemteszünk: *Nem olvasunk el mindentNem hozunk optimális döntéseketNem viselkedünk racionálisan (vagy úgy, ahogy feltételezed)Nem mindig tudjuk elmondani, mit szeretnénkNem szeretjük, ha gondolkodásra kényszerítenek* Bár sokan azt gondolják, hogy igen
  28. 28. Néhány dolog, amit viszont igen:
  29. 29. Sietünk
  30. 30. Scrollozunk 1 2 3 4 A „fold”1. IMDB.com: ~5600px2. Index.hu: ~5800px3. Apple.com: ~9000px4. Amazon.com: ~10000px
  31. 31. Figyelmen kívül hagyjuk, ami nem érdekelScannelünk ésbannervakságbanszenvedünk
  32. 32. Figyelmen kívül hagyjuk, ami nem érdekelScannelünk ésbannervakságbanszenvedünkEzért mértékkel díszítsük afunkcionális elemeket.
  33. 33. Ami érdekesnek tűnik, arra viszont kattintunk• Nem csak hármat!• „Satisficing”
  34. 34. Használjuk a gombot„The Back button is the lifeline of the Web user andthe second-most used navigation feature (afterfollowing hypertext links). Users happily know thatthey can try anything on the Web and always be savedby a click or two on Back to return them to familiarterritory.”Jakob Nielsen
  35. 35. Keresünk
  36. 36. Á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
  37. 37. Értékeljük a kellemes és használható dolgokat
  38. 38. Néha a váratlan húzásoknak is örülünk
  39. 39. Tipikus webdesign hibák3 (és azok elkerülése)
  40. 40. Gyakori használhatósági problémák Áttekinthetetlen Túl kicsi kattintható oldaltartalom terület Nem működő Vissza gombBonyolult navigációs Keresés hiányaeszközök Nehezen olvasható tartalom Kiszámíthatatlan működésÉszrevehetetlen linkek Következetlen megjelenés
  41. 41. Gyakori használhatósági problémák Áttekinthetetlen Túl kicsi kattintható oldaltartalom terület Nem működő Vissza gombBonyolult navigációs Keresés hiányaeszközök Nehezen olvasható tartalom Kiszámíthatatlan működésÉszrevehetetlen linkek Következetlen megjelenés
  42. 42. Gyakori használhatósági problémák Áttekinthetetlen Túl kicsi kattintható oldaltartalom terület Nem működő Vissza gombBonyolult navigációs Keresés hiányaeszközök Nehezen olvasható tartalom Kiszámíthatatlan működésÉszrevehetetlen linkek Következetlen megjelenés
  43. 43. Navigáció
  44. 44. Navigációs eszközök 1 31. Menü2. Oldalon belüli linkek3. Kereső 24. Sitemap 4
  45. 45. Mitől lesz jól használható?
  46. 46. …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
  47. 47. Ha a nyitóoldal mindig elérhető
  48. 48. Ha a nyitóoldal mindig elérhető
  49. 49. Ha a felhasználó mindig tudja, hol jár
  50. 50. 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 tartalmavizuálisan összevan kapcsolva
  51. 51. Ha egyértelmű, melyik link hova vezet
  52. 52. Ha egyértelmű, mi kattintható
  53. 53. Ha a kattintható felületek a lehetőlegnagyobbak
  54. 54. És még néhány jótanács:• Ha nem muszáj, ne nyiss új ablakot!• Legyen kereső!• Legyen sitemap!
  55. 55. És mindig, mindenkörülmények közöttműködjön a Vissza gomb!
  56. 56. A csomagtartóteszt
  57. 57. A csomagtartó teszt1. 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?
  58. 58. Szöveges tartalmak
  59. 59. Legyen olvasható!• Betűtípus• Betűméret• Kontraszt• White space
  60. 60. Legyen scannelhető!
  61. 61. Legyen tömör!
  62. 62. „On the average Web page, usershave time to read at most 28% ofthe words during an average visit;20% is more likely.”Jakob Nielsen
  63. 63. Legyen tömör!
  64. 64. Legyen tömör!
  65. 65. „ A tökéletesség nem az, amiheznincs mit hozzátenni, hanemamiből nincs mit elvenni.”Antoine de Saint-Exupery
  66. 66. Tartalom nélkül nincs design.
  67. 67. 4 Drótváztervezés
  68. 68. Kedvenc analógiánk:
  69. 69. Íme a drótváz (wireframe)
  70. 70. Kevésbé kidolgozva:
  71. 71. 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
  72. 72. Mit NEM mutat meg?A pontos megjelenést.• Tipográfiát• Grafikai elemeket• Színeket• Formákat• Vizuális stílust
  73. 73. A drótváz nemkorlátoz
  74. 74. A drótváz nemkorlátoz
  75. 75. 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
  76. 76. 5 Visszajelzések gyűjtése
  77. 77. Néhány dolog, amit felhasználóként nemteszünk: *Nem olvasunk el mindentNem hozunk optimális döntéseketNem viselkedünk racionálisan (vagy úgy, ahogy feltételezed)Nem mindig tudjuk elmondani, mit szeretnénkNem szeretjük, ha gondolkodásra kényszerítenek* Bár sokan azt gondolják, hogy igen
  78. 78. Webanalitika
  79. 79. Használhatósági teszt
  80. 80. A/B teszt
  81. 81. A/B teszt
  82. 82. A végére értünk.Köszönöm a figyelmet! Kollin Zoltán zoltan.kollin@kirowskiisobar.com twitter.com/kollinz
  83. 83. Ajánlott irodalom
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×