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 %

A végére értünk.

Köszönöm a figyelmet!

Kollin Zoltánzoltan.kollin@kirowskiisobar.com

twitter.com/kollinz

Ajánlott irodalom