A lecke végére fel tudod ismerni, hogy egy felületi elem megjelenése, felirata és viselkedése együtt jelzi a használat módját. Tudatosan választasz ismert interakciós mintát, és meg tudod indokolni, mikor segíti vagy akadályozza a felhasználó célját egy megszokottól eltérő megoldás. Különbséget teszel affordancia és signifier (jelző) között.
Miért kell az interakciót külön tervezni?
A wireframe megmutatja, mi hol van. Az interakciótervezés azt kérdezi, mi történik, amikor a felhasználó csinál valamit. Egy gombnak lenyomás közben, után és sikertelen művelet esetén is van viselkedése. Ezek a viselkedések határozzák meg, hogy a felhasználó bízik-e a rendszerben, vagy kételkedik. Az interakciótervezés az a terület, amely a felhasználó és a rendszer közötti műveletek és válaszok kialakításával foglalkozik.
Affordancia és signifier
Két fogalmat gyakran összekevernek, pedig más a jelentésük. Donald Norman tervezéselméleti munkái nyomán:
Az affordancia a tárgy által kínált használati lehetőség. Egy ajtókilincs húzható, egy gomb nyomható, egy csúszka csúsztatható. Az affordancia a tárgy és a használó viszonyából adódik: egy kilincs a felnőttnek és a kisgyereknek más lehetőséget kínál.
A signifier (jelző) az a jel, amely megmutatja, hogy a lehetőség ott van, és hogyan használható. Az ajtón a „Húzd” felirat, a gombon az árnyék és a felirat, a mezőben a halvány „Írd ide a nevet” szöveg mind jelzők.
Nem kell minden elemet nagy, árnyékos gombnak rajzolni. A lényeg az, hogy a jelentés és a viselkedés egyezzen. A „Részletek” link navigáció; a „Jelentkezés elküldése” gomb állapotváltozást indít. Ha ez felcserélődik, az nem csak vizuális következetlenség: billentyűzetes és segítő technológiás használatban is hibás elvárást teremt.
Néhány gyakori jelző
Jelző
Mit üzen?
Mire figyelj?
Kitöltött, kontrasztos téglalap felirattal
„Itt kattints” (fő művelet)
A fő gomb legyen egyedi a képernyőn
Aláhúzott vagy színes szöveg
„Hivatkozás”
Szöveg mellett egyéb szöveget ne jelölj hasonlóan
Lefelé mutató nyíl
„Lenyitható”
A nyíl forduljon, ha nyitva van
Halványított elem
„Most nem elérhető”
Magyarázd meg, miért (3. fejezet)
Kurzor / fókuszkeret
„Ez van kiválasztva”
Mindig látható legyen
Ismert minták és újítás
Az interakciós minta ismétlődő, a felhasználók számára ismerős megoldási forma. Az ismert minták csökkentik a tanulási költséget (Jakob törvénye: a felhasználók az idejük nagy részét más oldalakon töltik, ezért azt várják, hogy a tied is úgy működjön). A keresőmezőt, a visszalépést, a bezárást vagy az űrlap elküldését a használók sok rendszerből ismerik.
Nem tilos eltérni tőlük, de az eltérésnek világos, nagyobb előnnyel kell járnia. Egy kreatív menümozgás nem jó, ha közben elrejti, hol található a fő navigáció; egy újszerű gesztus nem jó, ha nincs látható alternatívája.
Használd a mintát a feladat szerint, ne vakon. A törlésnél más megerősítés kell, mint egy szűrő módosításánál, mert a következmény más. A túl sok megerősítő ablak „riasztási vakságot” okozhat: a felhasználó automatikusan rákattint az igenre, és a biztonsági lépés elveszíti értékét. Jobb megoldás sokszor a visszavonás (undo): „Törölve. Visszavonás” – a felhasználó gyorsan dolgozhat, de megmarad a biztonsági háló.
Gyakori interakciós minták
Kijelölés és szűrés: jelölőnégyzet, csúszka, szűrő-csoport.
Űrlap: mezők, valós idejű ellenőrzés, hibaüzenetek (3. fejezet).
Felugró elem: modális ablak, tooltip, kontextusmenü; mindegyiknek kell egy egyértelmű bezárása.
Lista és részletek: a listaelemre kattintva részletoldal vagy lenyíló rész.
Húzás és ejtés (drag and drop): csak ott, ahol van alternatíva billentyűzettel vagy gombbal.
Visszajelzés az interakció közben
Az állapotváltozás a rendszer vagy felület értelmezhető módosulása egy interakció után. A visszajelzés a rendszer válasza a felhasználó műveletére. Minden műveletnek legyen érzékelhető válasza. Kattintáskor, kiválasztáskor, drag-and-drop közben vagy hosszú műveletnél a felhasználó tudja, hogy a rendszer fogadta a szándékát. A visszajelzés ne csak animáció legyen: a tartalmi állapotváltozást is jelezze. Ha egy időpont kiválasztása után az összefoglaló frissül, a kapcsolat legyen látható és érthető.
Az interakció három pillanata, amelyet érdemes külön végiggondolni:
Mielőtt: a jelző mutatja, hogy lehet kattintani (alapállapot, rámutatás, fókusz).
Közben: azonnali jelzés, hogy a rendszer fogadta (lenyomott állapot, betöltés).
Után: látható eredmény (új állapot, összefoglaló, üzenet).
Végigvezetett példa: szürke időpontok a Mai programban
A Mai programban a szürke események némelyike jelentkezhető, némelyike nem, de csak kattintás után derül ki a különbség. A probléma: a halványított elem két különböző jelentést hordoz, és a jelző nem különbözteti meg őket. A jobb megoldás már előre jelzi az elérhetőséget (a betelt esemény címkéje „Betelt”, a kártya halványított, de kattintható a részletekért), a tiltott állapot okát és a választás következményét. A felhasználó így nem próbálgatással tanulja meg a rendszert, hanem a felületből olvassa ki a lehetőségeit.
Gyakori tévhitek
Állítás
Pontosítás
„Ha egy elem szép, a használata magától értetődő.”
A vizuális attraktivitás nem azonos az érthető szereppel.
„Az innovációhoz új gesztus kell.”
A jó újítás a feladatot könnyíti, nem a felhasználót tanítja új viselkedésre indok nélkül.
„Az affordancia és a jelző ugyanaz.”
Az affordancia a lehetőség, a jelző a lehetőséget mutató jel; a digitális tervezés főleg a jelzőket alakítja.
„Minden műveletet meg kell erősíttetni.”
A túl sok megerősítés riasztási vakságot okoz; a visszavonás gyakran jobb.
Röviden
Az affordancia a használati lehetőség, a signifier a lehetőséget jelző jel; digitális felületen a jelzőket tervezzük.
A jelző és a viselkedés egyezzen: link navigál, gomb műveletet indít.
Ismert mintától csak nagyobb előny esetén térj el; a visszavonás sokszor jobb a megerősítésnél.
Minden művelethez tervezz előtte, közben és utána jelzést.
Ellenőrző kérdések
A fő elemeid megjelenése és viselkedése ugyanazt ígéri?
Mely megszokott minta segíthet a projektedben?
Hol kellene közvetlenebb visszajelzés egy művelet után?
Interakciós minták, affordanciák és jelzők
Célok
A lecke végére fel tudod ismerni, hogy egy felületi elem megjelenése, felirata és viselkedése együtt jelzi a használat módját. Tudatosan választasz ismert interakciós mintát, és meg tudod indokolni, mikor segíti vagy akadályozza a felhasználó célját egy megszokottól eltérő megoldás. Különbséget teszel affordancia és signifier (jelző) között.
Miért kell az interakciót külön tervezni?
A wireframe megmutatja, mi hol van. Az interakciótervezés azt kérdezi, mi történik, amikor a felhasználó csinál valamit. Egy gombnak lenyomás közben, után és sikertelen művelet esetén is van viselkedése. Ezek a viselkedések határozzák meg, hogy a felhasználó bízik-e a rendszerben, vagy kételkedik. Az interakciótervezés az a terület, amely a felhasználó és a rendszer közötti műveletek és válaszok kialakításával foglalkozik.
Affordancia és signifier
Két fogalmat gyakran összekevernek, pedig más a jelentésük. Donald Norman tervezéselméleti munkái nyomán:
Nem kell minden elemet nagy, árnyékos gombnak rajzolni. A lényeg az, hogy a jelentés és a viselkedés egyezzen. A „Részletek” link navigáció; a „Jelentkezés elküldése” gomb állapotváltozást indít. Ha ez felcserélődik, az nem csak vizuális következetlenség: billentyűzetes és segítő technológiás használatban is hibás elvárást teremt.
Néhány gyakori jelző
Ismert minták és újítás
Az interakciós minta ismétlődő, a felhasználók számára ismerős megoldási forma. Az ismert minták csökkentik a tanulási költséget (Jakob törvénye: a felhasználók az idejük nagy részét más oldalakon töltik, ezért azt várják, hogy a tied is úgy működjön). A keresőmezőt, a visszalépést, a bezárást vagy az űrlap elküldését a használók sok rendszerből ismerik.
Nem tilos eltérni tőlük, de az eltérésnek világos, nagyobb előnnyel kell járnia. Egy kreatív menümozgás nem jó, ha közben elrejti, hol található a fő navigáció; egy újszerű gesztus nem jó, ha nincs látható alternatívája.
Használd a mintát a feladat szerint, ne vakon. A törlésnél más megerősítés kell, mint egy szűrő módosításánál, mert a következmény más. A túl sok megerősítő ablak „riasztási vakságot” okozhat: a felhasználó automatikusan rákattint az igenre, és a biztonsági lépés elveszíti értékét. Jobb megoldás sokszor a visszavonás (undo): „Törölve. Visszavonás” – a felhasználó gyorsan dolgozhat, de megmarad a biztonsági háló.
Gyakori interakciós minták
Visszajelzés az interakció közben
Az állapotváltozás a rendszer vagy felület értelmezhető módosulása egy interakció után. A visszajelzés a rendszer válasza a felhasználó műveletére. Minden műveletnek legyen érzékelhető válasza. Kattintáskor, kiválasztáskor, drag-and-drop közben vagy hosszú műveletnél a felhasználó tudja, hogy a rendszer fogadta a szándékát. A visszajelzés ne csak animáció legyen: a tartalmi állapotváltozást is jelezze. Ha egy időpont kiválasztása után az összefoglaló frissül, a kapcsolat legyen látható és érthető.
Az interakció három pillanata, amelyet érdemes külön végiggondolni:
Végigvezetett példa: szürke időpontok a Mai programban
A Mai programban a szürke események némelyike jelentkezhető, némelyike nem, de csak kattintás után derül ki a különbség. A probléma: a halványított elem két különböző jelentést hordoz, és a jelző nem különbözteti meg őket. A jobb megoldás már előre jelzi az elérhetőséget (a betelt esemény címkéje „Betelt”, a kártya halványított, de kattintható a részletekért), a tiltott állapot okát és a választás következményét. A felhasználó így nem próbálgatással tanulja meg a rendszert, hanem a felületből olvassa ki a lehetőségeit.
Gyakori tévhitek
Röviden
Ellenőrző kérdések