Amikor a felhasználók megnyitnak egy weboldalt vagy alkalmazást, először a nyilvánvaló designelemeket veszik észre: logó, színek, ikonok, illusztrációk és képek. Bár ezek az elemek valóban hozzájárulnak az általános felhasználói élményhez, valójában egy nagyobb puzzle darabjai: az interakciótervezésé. Ez a koncepció a végfelhasználók számára finomabb lehet, mint egy mutatós, új honlap, de alapvető fontosságú a vonzó, intuitív digitális élmény megteremtésében.

Mi az interakciótervezés?

Az interakciótervezés a felhasználók és a termékek (leggyakrabban ezek a termékek alkalmazások vagy webhelyek) közötti interakciók megkönnyítéséről szól. Az Interaction Design Foundation szerint “az interakciótervezés célja olyan termékek létrehozása, amelyek lehetővé teszik a felhasználó számára, hogy a lehető legjobb módon érje el a cél(oka)t”. Más szóval, az interakciótervezők felelősek a képernyő minden olyan elemének létrehozásáért, amellyel a felhasználó interakcióba léphet, akár kattintással, húzással, koppintással vagy valamilyen művelettel.

Az interakciótervezés öt dimenziója hasznos modellként szolgál annak megértéséhez, hogy miről is van szó. A modellt először Gillian Crampton Smith, egy interakciótervezéssel foglalkozó akadémikus vezette be, a modell azonban csak négy dimenziót tartalmazott. Kevin Silver, az IDEXX Laboratories vezető interakciótervezője hozzáadta az ötödiket.

1D: A szavaknak egyszerűen érthetőnek kell lenniük, és a megfelelő mennyiségű információt kell közölniük a felhasználóval (a túl sok részlet túlterhelő lehet, míg a túl kevés információ zavart okozhat).

2D: A vizuális megjelenítéseknek, mint a képek, a tipográfia és az ikonok, ki kell egészíteniük a szavakat, hogy információt közöljenek a felhasználóval.

3D: A fizikai tárgyak vagy tér a tényleges hardverre és tárgyakra utal, amelyekkel a felhasználó kölcsönhatásba lép. Például okostelefont vagy egy egérrel ellátott laptopot használnak? És hol vannak, az íróasztaluknál vagy egy zsúfolt metróban?

4D: Az idő arra utal, hogy a felhasználók hogyan mérhetik a haladást, például hanggal és animációval, valamint arra, hogy mennyi időt töltenek az első három dimenzióval való interakcióval.

5D: A viselkedés Kevin Silver által került hozzá, és azt tartalmazza, hogy az előző dimenziók hogyan határozzák meg a termék interakcióit. Ide tartoznak a felhasználók és a termék reakciói is.

Related: 6 ok, amiért az UX-tervezőknek fel kellene fedezniük a gesztuális interakciót

10 példa az interakciótervezésre

Hogyan néz ki a tervezési interakció a való életben? Íme néhány kedvenc példánk, amelyeket a Dribbble-en találtunk.

Jony vino által. A számla megosztása a barátaiddal nem mindig olyan egyszerű, mint amilyennek látszik, különösen, ha inkább vizuális, mint számokkal foglalkozó ember vagy. Ez az alkalmazáskoncepció lehetővé teszi, hogy beírd a teljes számlát, kiválaszd a borravaló százalékát, majd megnézd, hogy ki mennyit fog fizetni. A legjobb rész? Ahelyett, hogy manuálisan módosítaná az egyes személyek részét, és folyamatosan frissítenie kellene mindenki részesedését, egyszerűen átméretezheti az egyes személyek részét az alkalmazásban, és a számok automatikusan újraszámolnak mindenkinek.

Szerző: Prem Gurusamy. A legtöbb e-kereskedelmi oldalon a kosár megtekintéséhez a weboldal vagy az alkalmazás egy teljesen más részébe kell navigálnia. Ezzel az interakcióval azonnal láthatja, hogy az árucikkei “berepülnek” a kosarába, amint rákattint a “Kosárba helyezés” gombra. A kosár vizuálisan továbbra is megjeleníti a tételeket, még akkor is, ha a webhely más részeit fedezi fel.

Szerző: Igor Pavlinski. A közösségi médiaalkalmazások hírhedtek az információ-túlterheltségükről, mivel egyszerre mutatják az összes top sztorit, trending videót vagy cikket és friss híreket. Ez az új közösségi médiaalkalmazás koncepciója visszaadja az irányítást a felhasználó kezébe, forrás (például YouTube, Vimeo, Twitter vagy Reddit) szerint rendezi a tartalmakat, és lehetővé teszi, hogy kiválaszthassa, melyik csatornát szeretné felfedezni. Ez a kártyaszerű elrendezés azt is kiküszöböli, hogy az alkalmazások között kelljen ugrálni a kedvenc tartalmak fogyasztásához. Ehelyett könnyen váltogathat a források között ugyanazon az élményen belül.

By tubik. Millió és egy módja van a hamburgered testreszabásának. És ha okostelefonon rendelsz, az egyes összetevők kiválasztása egy kis képernyőn az ügyesség gyakorlása lehet. Ez a Tasty Burger alkalmazás felhasználói felületének koncepciója leegyszerűsíti a rendelés élményét azáltal, hogy az összetevőket típusonként vödrökbe rendezi. Ahelyett, hogy a sajt, a termék, a hús vagy a zsemle minden lehetséges variációjának hosszú listája jelenne meg, először az összetevő kategóriájára kattintasz (például a sajtra), majd megjelennek a különböző típusok, például a gouda vagy a comte.

By Rahul.Design. Ha lakáskeresésen vagy, és nem tudod személyesen megnézni az ingatlant, a következő legjobb megoldás egy virtuális túra. Ez a Spec nevű ingatlanalkalmazás koncepciója kihasználja természetes viselkedésünket, amikor egy új helyet nézünk meg. Belekattinthatsz bármelyik helyiségbe, például a konyhába vagy a nappaliba, és a telefonodat mozgatva 360 fokos nézetet kaphatsz. Egyetlen érintéssel könnyedén válthatunk a szobák között.

Forest Plasencia. A szűrők hatékony és egyszerű módját kínálják az információk különböző szeleteinek felszínre hozásának. A probléma azonban sok szűrőinterakcióval az, hogy egy felugró ablakot vagy új oldalt nyitnak meg az alkalmazásban, elrejtve éppen azt az információt, amit szűrni szeretne. Ez a mikrointerakció mindent ugyanabban a nézetben tart, még akkor is, ha szűrsz. Így láthatja, hogy az adatok azonnal megváltoznak, amikor különböző szűrési feltételeket választ ki.

Szerző: Dmitro Petrenko. Az okostelefonos alkalmazásoknak köszönhetően minden eddiginél könnyebb élesíteni és felügyelni a házat, de 94%-99%

között: A felhasználói interakciókat rögzítő eszköz létrehozása

By Gil. Ez az egyszerű oldalinterakció javítja a felhasználói élményt a helyszínen, és segít a vállalatnak abban, hogy a látogatók hosszabb ideig maradjanak az oldalukon. Az oldal fő célja, hogy bemutassa, hogyan használhatók ezek az ingatlanok a természetben, irodaként és bővítményként. Ahelyett, hogy külön élményeket hozna létre az egyes célokra, ez az oldal utánozza a különböző felhasználási módok összehasonlításának és szembeállításának felhasználói áramlását, és zökkenőmentesen ugrál közöttük.

Szerző: Dominik Martin. Az interakcióknak nem kell merésznek és feltűnőnek lenniük ahhoz, hogy hatást gyakoroljanak. Ez az alkalmazáskoncepció leegyszerűsít egy olyan viselkedést, amelyet mindannyian megvetünk – a lakóhelyünk szerinti ország kiválasztása egy hosszú listából. Ahelyett, hogy a felhasználóknak végig kell görgetniük a listát, és megkeresniük az országukat, ez a mikrointerakció először kiválasztja az ország első betűjét, majd egy sokkal kisebb, fókuszált országlistából megkeresi azt.

Szerző: Mykolas Puodziunas. Egyre több kiskereskedelmi webhely könnyíti meg egy-egy termék “gyors megtekintését”, ahelyett, hogy minden részletoldalra kattintva vissza kelljen térni a keresési eredményekhez, hogy további tételeket böngészhessünk. Ez a koncepció egy lépéssel továbbmegy, és lehetővé teszi, hogy minden egyes terméket a különböző elérhető színekben tekintsen meg anélkül, hogy el kellene hagynia a kategóriaoldalt.

Lemaradtunk a kedvenc interakciótervezési példájáról? Oszd meg velünk a Twitteren: @InVisionApp.