Az emberi viselkedés hatása a tervezési döntéseire - Jonas Arleth
A jó webes elrendezés megértéséhez meg kell értenünk az emberek viselkedését. Ezen tudás felhasználása a következő lépések lehető legkényelmesebb megtervezéséhez teszi a formatervezést eredményessé.
De mi befolyásolja? Hogyan értik az emberek egy weboldalt? Vannak-e olyan viselkedésmódok, amelyeket a való életből is átvehetünk?
Ebben a cikkben elmondom:
- Hogyan lehet az embereket megérteni egy elrendezéssel, amikor még soha nem használták
- Melyik színek kifejezetten nagyobb figyelmet vonzanak, és miért érzékeljük őket így
- Milyen széles szövegblokk legyen és miért
- Mely animációk segítenek minket egy weboldalon
- Hogyan biztosíthatja, hogy a fontos információk mindenképpen láthatók legyenek
- És hogyan növelheti annak esélyét, hogy egy gombra mindenképpen kattintanak
Hallgassa meg ezt a bejegyzést podcastként!
Az, hogy egy termék vagy szolgáltatás mennyire sikeres, attól függ, mennyire érti jól a célcsoportját
A magas használhatóság elérése érdekében az elrendezésnek elsősorban a felhasználónak kell örülnie, nem neked. Könnyen használhatónak kell lennie, és a látogatónak A-ból B-be kell jutnia anélkül, hogy túl sokat gondolkodna.
Amikor tudjuk, hogy ki a felhasználó, és mit akar, nekünk is könnyebb kiváltani az érzelmeket. Ehhez meg kell értenie, hogy bizonyos dolgokat hogyan éreznek az emberek, és miért csinálják, ahogy csinálják. A legjobb esetben az elrendezést olyan intuitív módon tervezik, hogy a felhasználó megszakítások nélkül tudja megoldani a feladatokat. A feladat lehet navigáció, de megrendelési folyamat is lehet egy online boltban.
Amint a felhasználónak tovább kell gondolkodnia, a feladatokat sem kezdi intuitív módon megoldani. Aztán megerőltetik. Minél többen ütköznek, annál frusztrálóbbá válik a termékhez és ezért a webhelyhez való kapcsolódásuk.
Tervezőként rajtunk múlik, hogy a látogatókat megismertessük-e a feladatokkal, vagy tudatosan irányítsuk őket egy irányba. Ehhez tudnia kell, hogy a felhasználók hogyan viselkednek és hogyan működnek ennek megfelelően az ismert dolgokkal. A tömegek tudják, hogyan működik egy weboldal vagy alkalmazás. Ennek ellenére még mindig sok olyan ember van, akinek fogalma sincs arról, hogy néz ki egy felhasználói felület vagy hogyan kell használni. A célcsoport ismerete tehát elengedhetetlen!
Nagyon nehéz olyan tervezési döntéseket hozni, amelyek nemcsak a tömegekre vonatkoznak, hanem minden felhasználó számára egyénileg is érezhetőek.
De hogyan lehet rávenni a felhasználót arra, hogy megértsen egy oldalt, pedig még soha nem volt ilyen irányú tapasztalata?
A grafikus felhasználói felületet különböző emberek működtetik. Tegyük fel, hogy ez egy online bolt. Sokan tudják, hogyan kell az interneten vásárolni, mások talán még nem. De hogyan lehet elérni, hogy mindenki gyorsan és egyszerűen megértse az oldalt?
Meg kell próbálnia megismertetni velük a lehető legszorosabb élményt, amelyet életükből ismernek. Még akkor is, ha nem tudják, hogyan vásárolnak termékeket online, van elképzelésük arról, hogyan működik a való életben. Ki kell használnia ezeket az ismereteket. Ezért jó a vevő valós élményeit átvinni a weboldalra.
Például megszoktuk, hogy a vásárlást a kosárba helyezzük. Ezért valami hasonlót kellene használnunk egy online boltban. A felhasználó számára ez egy ismerős kapcsolat, amelyet azonnal megért.
Íme néhány példa arra, hogyan lehet a dizájnnal befolyásolni az elemeket oly módon, hogy a felhasználó megértse őket a kívánt módon.
Használja a megfelelő színeket
A színek segítik a látogatót a weboldal eligazodásában. Különösen akkor, ha cselekvésre akarunk ösztönözni, akkor tökéletesek a figyelem felkeltésére. Használhatjuk őket cselekvések kiváltására és tudatosan egy irányba irányíthatjuk tekintetünket.
A következő példa megmutatja, mennyire tudatosan lehet arra ösztönözni a nézőt, hogy válasszon egy gombot.
Melyik gomb vonzza? Példa arra, hogyan tudjuk tudatosan eligazítani a felhasználókat a döntés meghozatalában.
Csak egy színes terület használatával hozhatjuk előtérbe a két gomb egyikét. A szürke kerettel ellátott színtelen gomb nem feltűnő és másodlagos. Minden bizonnyal használhatjuk ezt a változatot, hogy megkönnyítsük a felhasználók számára a döntéshozatalt.
Legtöbbször azt szeretnénk, ha kattintható gombokat fedeznének fel és működtetnének. Csak így vezethetjük a felhasználót a következő lépéshez, vagy válthatunk ki egy funkciót. Ahhoz, hogy egyáltalán észlelhető legyen, a gombnak fel kell hívnia a figyelmet, és különböznie kell más tárgyaktól. Segít növelni a kontrasztot a környező elemekkel. A következő esetben ezt a piros szín végzi.
A vörös szín vonzza a tekintetet, figyelmeztető szín számunkra, ezért nehéz figyelmen kívül hagyni. Ezt felhasználhatjuk arra, hogy tudatosan cselekedjünk az előtérben:
Tudatosan irányítsa a felhasználó tájékozódását egy gombhoz, mint ebben a példában a piros színnel. Felkapja a tekintetet, és figyelmeztető színként nehéz figyelmen kívül hagyni.
Vegyük a jelzőlámpa elvét, ahol piros színben állunk, zöld színben pedig járhatunk. Sokan már internalizálták ezt az elvet. Ebben az esetben tudjuk, hogy amikor a zöldről van szó, az emberek megteszik a következő lépést. Átvihetjük ezt az érzést egy gombra is, ahol azt akarjuk, hogy egy cselekvést pozitívan hajtsanak végre.
Mint egy lámpánál vagy telefonhívás fogadásakor: Zöld jelez és elkísér minket a következő lépés megtételéhez.
A telefonhívás felhasználói felülete is hasonló viselkedést mutat. Piros és zöld leteszi az elfogadáshoz. De ez a figyelem mindenkire vonatkozik?
A célközönség döntő fontosságú!
Még akkor is, ha a fenti két példa számunkra hihetőnek hangzik, általában nem alkalmazhatók. A közlekedési lámpák színfunkciója működhet Németországban, de még mindig sok más kultúrából származó ember másképp érzékeli a színeket. Kínában pl. B. A weboldalak teljesen színesek. Ha ott egy online boltot szolgálnánk fel, akkor valószínűleg teljesen negatív hatással lenne a szörfözésre.
A látogatók viselkedésének tudatos ellenőrzése érdekében az elrendezést a célcsoporton kell tesztelni. Csak elemzésekkel lehet igazán megmondani, hogy egy adott színdöntés vezetett-e további sikerhez.
Frissítés:
Érdekes módon röviddel a cikk megírása után olvastam egy bejegyzést, amelyben a HubSpot pontosan ezt a két színt vizsgálta meg egy felhasználói teszt során. Arról volt szó, hogy egy piros vagy zöld gomb okoz-e magasabb konverziós arányt. A teljes elrendezés ugyanaz volt, csak egy gomb különbözik. Meglepő módon a vörös 21% -kal több kattintást ért el. De inkább egyfajta "vásárolj meg" gombról volt szó, amely piros színe miatt egyszerűen nagyobb figyelmet keltett.
Az alábbiak általában a színekre vonatkoznak
Ekkor nagyobb figyelem és ennek megfelelően több cselekvés van, ha megnő a kontraszt a környező elemekkel. Nemcsak azoknál, akik érzékelik a színeket, hanem azoknál is, akik színvakok.
REGISZTRÁLJON HÍRLEVÉLEMRE
Új cikkek, podcast epizódok és értékes tervezési erőforrások közvetlenül a postaládájába!
A blogfrissítéseim mellett hetente egyszer érdekes linkeket és tartalmat fog kapni a webes tervezők számára, amelyeket csak ebben a hírlevélben osztok meg!
Növelje az esélyeket és két utat kínáljon fel a cél elérésére
Feladata van, hogy a látogatót egy adott művelet végrehajtására késztesse? Akkor duplázza meg az esélyeit!
Mindenki másképp néz egy weboldalra, éppen ezért az Ön számára jól láthatóan elhelyezett elemeket csak második pillantásra lehet észrevenni. Győződjön meg arról, hogy bizonyos felszólítások többször is megjelennek, és ezáltal növeli a kívánt hatás esélyét.
A szövegek olvashatósága
Van olyan emberi magatartás, amelyet már kiskorunktól kezdve megtanulunk, és ami ezért az életünkben megjelenik. Amikor elkezdtük összekapcsolni a betűket és szavakat mondatokként olvasni, akkor kezdettől fogva balról jobbra tettük. Ennek a viselkedésnek a megváltoztatása egy webhelyen végzetes lenne. Senki sem tudta helyesen olvasni a bekezdéseket, és nem is beszélhetünk a kellemes felhasználói élményről. Ez az érv legalább a legtöbb régióra vonatkozik (néhányan jobbról balra is olvasnak).
De nemcsak az olvasási irány játszik szerepet. Számunkra a szöveg akkor is könnyebben olvasható, ha a bekezdések szélessége nem túl széles. Ily módon segítjük a szem megcsúszását a sorváltáskor, ami kellemes olvasási folyamatot biztosít.
Ez a módszer jól látható egy papírkötésben. Annak érdekében, hogy ne legyen túl sok szó egymás mellett, minden oldalnak van egy bizonyos szélessége, és a gallér választja el őket. Ez két, egyformán széles területet hoz létre.
Ha ezt az elvet a valós életünkből alkalmazzuk egy weboldalra, akkor azt lehet mondani, hogy a szövegblokkok nem lehetnek szélesebbek, mint 700 - 800 képpont. Minél szélesebb a szövegmező és minél kisebb a betűtípus, annál nehezebb megtalálni a kényelmes olvasási folyamatot. Ha ez a szélesség nem elegendő, akkor a szöveget kisebb szövegblokkokban is elhelyezheti egymás mellett.
Példa a rossz olvasási folyamatra: Wikipédia bejegyzések nagyobb képernyőn
Ennek határozottan negatív példája a Wikipédia. Ha itt egy cikket megnéz egy nagyobb képernyőn, szinte lehetetlenné válik a következő sorra lépés. Minden sorváltás erőfeszítéssé válik.
A fontos információk helyes elhelyezése
Ha azt szeretnénk, hogy fontos információk jelenjenek meg, akkor a kihelyezés döntő szerepet játszik. A fontos dolgok utoljára megmutatásának nincs értelme. Tudjuk, hogy egy webhelyet felülről lefelé néznek. Csak akkor mélyül jobban az oldalon, ha valaki több információt szeretne.
Éppen ezért a tetején lévő információk fontosabbak, mint az alábbi információk, mivel azok először az oldal betöltése után kerülnek megtekintésre. Ezt a módszert más területeken is megtaláljuk:
- A táblázat táblázat a legnépszerűbb előadót mutatja először, nem a közepén vagy az utolsó helyen
- A legrelevánsabb keresési eredmények mindig az elsők
- A webhely logóját vagy nevét általában a bal felső sarokban helyezik el
Lehet, hogy ez egyesek számára nem tűnik új tudásnak, de mégis be kell látnia, hogy ha olyan információval rendelkezik, amelyet a látogatónak mindenképpen látnia kell, akkor azt is feljebb kell helyeznie. Csak így lehet meggyőzni. Attól függően, hogy az eszköz mely nézetablakkal rendelkezik, ez a látható mező természetesen eltérő lehet!
Vonzza a figyelmet mozgással
Az animációk életre hívják a felhasználói felületet. Minden, ami automatikusan mozog, magára vonja a figyelmünket. De vigyázz! Gyorsan túl soká válik!
Ha az animációkat ügyesen használják, azok élénk és érthetővé teszik az elrendezést. Ezután konkrétan megmutathatja a kapcsolatokat és meghatározhatja a hierarchiákat.
Használja hatékonyan a dizájnt
Érthető és kellemes elrendezést nem könnyű létrehozni. Sok tapasztalat, kutatás és tudás kell hozzá.
Az alapok megértése és alkalmazása elengedhetetlen a tervezés hatékony használatához. A fenti példák segítenek ebben. Ha többet szeretne tudni róla, itt feliratkozhat a hírlevelemre. Ezután értesítlek egy új bejegyzésről.
Bejegyzés megosztása:
Tudjon meg többet a webes és UI/UX tervezésről és a szabadúszó munkáról
Heti hírlevelem a legjobb módja a legfrissebb blogbejegyzésekhez, podcast-epizódokhoz és értékes tervezési erőforrásokhoz való hozzáféréshez.