felhasználóbarát felületek tervezése - kollin zoltán
DESCRIPTION
A webes felülettervezés alapjait bemutató MOME előadás slide-jai.TRANSCRIPT
Felhasználóbarát felületek tervezése
Kollin Zoltán
2011. november 26.
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
Egy kis bevezető1
Design is not just what it looks like and feels like. Design is how it works.
Steve Jobs
Megjelenés > Észlelés > Használat
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)
A hasonló elemeket csoportnak tekintjük
A hasonló elemeket csoportnak tekintjük
A hasonló elemeket csoportnak tekintjük
A hasonló elemeket csoportnak tekintjük
A hasonló elemeket csoportnak tekintjük
Visszafelé is igaz: ami különbözik, az kiemelt
Az egymáshoz közeli elemeket csoportnak tekintjük
Az egymáshoz közeli elemeket csoportnak tekintjük
Az egymáshoz közeli elemeket csoportnak tekintjük
Az egymáshoz közeli elemeket csoportnak tekintjük
Az egymáshoz közeli elemeket csoportnak tekintjük
Az egymáshoz közeli elemeket csoportnak tekintjük
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.
Fitts törvénye
Fitts törvénye
Fitts törvénye
üx
Hick törvénye
A döntéshez szükséges idő a választható lehetőségek számától függ.
Hick törvénye
Összefoglalva az első pszichológiaóra tanulságait:
Hasonlóság elve
Közelség elve
Fitts törvénye
Hick törvénye
Ugyanaz a funkció ugyanúgy jelenjen meg
A white space-szel (is) tagold a tartalmat
Készíts nagy kattintható felületeket
Racionális mennyiségű választási lehetőséget mutass
Ismerjük meg a felhasználót!2
Néhány dolog, amit felhasználóként nem teszü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
Néhány dolog, amit viszont igen:
Sietünk
Scrollozunk
1. IMDB.com: ~5600px2. Index.hu: ~5800px3. Apple.com: ~9000px4. Amazon.com: ~10000px
1 2 3 4
A „fold”
Figyelmen kívül hagyjuk, ami nem érdekel
Scannelünk és bannervakságban szenvedünk
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.
Ami érdekesnek tűnik, arra viszont kattintunk
• Nem csak hármat!• „Satisficing”
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
Keresünk
Á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
Értékeljük a kellemes és használható dolgokat
Néha a váratlan húzásoknak is örülünk
Tipikus webdesign hibák (és azok elkerülése)3
Gyakori használhatósági problémák
Túl kicsi kattintható terület
Áttekinthetetlen oldaltartalom
Keresés hiánya
Nehezen olvasható tartalom
Kiszámíthatatlan működés
Nem működő Vissza gomb
Bonyolult navigációs eszközök
Észrevehetetlen linkekKövetkezetlen megjelenés
Gyakori használhatósági problémák
Túl kicsi kattintható terület
Áttekinthetetlen oldaltartalom
Keresés hiánya
Nehezen olvasható tartalom
Kiszámíthatatlan működés
Nem működő Vissza gomb
Bonyolult navigációs eszközök
Észrevehetetlen linkekKövetkezetlen megjelenés
Gyakori használhatósági problémák
Túl kicsi kattintható terület
Áttekinthetetlen oldaltartalom
Keresés hiánya
Nehezen olvasható tartalom
Kiszámíthatatlan működés
Nem működő Vissza gomb
Bonyolult navigációs eszközök
Észrevehetetlen linkekKövetkezetlen megjelenés
Navigáció
Navigációs eszközök
1. Menü2. Oldalon belüli linkek3. Kereső4. Sitemap
1
2
3
4
Mitől lesz jól használható?
…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
Ha a nyitóoldal mindig elérhető
Ha a nyitóoldal mindig elérhető
Ha a felhasználó mindig tudja, hol jár
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
Ha egyértelmű, melyik link hova vezet
Ha egyértelmű, mi kattintható
Ha a kattintható felületek a lehető legnagyobbak
És még néhány jótanács:
• Ha nem muszáj, ne nyiss új ablakot!• Legyen kereső!• Legyen sitemap!
És mindig, minden körülmények között működjön a Vissza gomb!
A csomagtartó teszt
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?
Szöveges tartalmak
Legyen olvasható!
• Betűtípus• Betűméret• Kontraszt• White space
Legyen scannelhető!
Legyen tömör!
„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
Legyen tömör!
Legyen tömör!
„ A tökéletesség nem az, amihez nincs mit hozzátenni, hanem amiből nincs mit elvenni.”
Antoine de Saint-Exupery
Tartalom nélkül nincs design.
Drótváztervezés4
Kedvenc analógiánk:
Íme a drótváz (wireframe)
Kevésbé kidolgozva:
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
Mit NEM mutat meg?
A pontos megjelenést.
• Tipográfiát• Grafikai elemeket• Színeket• Formákat• Vizuális stílust
A drótváz nem korlátoz
A drótváz nem korlátoz
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
Visszajelzések gyűjtése5
Néhány dolog, amit felhasználóként nem teszü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
Webanalitika
Használhatósági teszt
A/B teszt
BA
A/B teszt
A B
+ 77 %
Ajánlott irodalom