BLOG

A mentális modellek a fejünkben élő képek, működési modellek, elvárások, amelyeket az eddigi tapasztalataink alapján alakítottunk ki. Bármit is tervezel, nagyon fontos ismerned, mi van a célközönség fejében a hasonló termékekről, szolgáltatásokról vagy rendszerekről, ez különösen igaz akkor, ha valamilyen módon el akarsz majd térni ezektől.

Mi történne például, ha egy weboldalon a logót a láblécbe helyeznénk, a kinyíló menüt pedig virág alakú ikonnal jelölnénk a bal oldali sávban? Jó eséllyel senki nem jönne rá, hogy a hamburger ikon alternatívájával van dolga, és nem tudná azonosítani a márkához tartozó logót sem. Valószínűleg több dühös és frusztrált felhasználónk lenne, mint ahányan értékelnék a kreatív megoldásokat. Összességében a konvencióktól való eltéréssel megnehezítjük a látogatók tájékozódását és rontjuk a felhasználói élményt.

A mentális modell lényege, hogy a weboldalunk látogatói magukkal hozzák a korábbi webes tapasztalataikat és azokat felhasználva igyekeznek tájékozódni az oldalunkon. Nem üres fejjel érkeznek, hanem elvárásokkal, megszokásokkal és bevált rutinokkal.

A mentális modellek a pszichológiában

A mentális modellek fogalmát a kognitív pszichológiából ismerhetjük: a mentális modell egy a valóságban meglévő rendszerről alkotott gondolati egység, amely a jelenséget és az összefüggéseket is tartalmazza. Egy konkrét feladat mentális reprezentációja.

Más szavakkal, a mentális modellek azt hivatottak feltérképezni, hogy miként tükröződik le a fejünkben a valóság, hogyan látjuk azt, ami minket körülvesz és ebből kifolyólag várhatóan, hogyan reagálunk az adott dologra vagy eseményre.

A mentális modell az emberek meggyőződésére, hiedelmeire épül, nem pedig tényekre. Bár mindenki rendelkezik mentális modellekkel, ezek akár lényegesen különbözőek is lehetnek.

Ha egy kisgyerek magabiztosan használja a mobiltelefont vagy tabletet, akkor a kezébe adott könyvet is meg fogja próbálni az ujjával irányítani. Kialakult egy mentális modell az agyában a kezébe adott téglalap alakú lapos dolgok működéséről. A korábban megtapasztalt mintát egy új helyzetben is ki fogja próbálni, és egy bizonyos működésre számít. Később, amikor kialakulnak a könyvekkel kapcsolatos mentális modelljei, már megfelelően fogja tudni kezelni őket. Ez teljesen természetes viselkedés, így építjük fel a világról alkotott képünket a tapasztalataink alapján, és ez a modell építés életünk végéig tart.

Hogyan alkalmazzuk a mentális modelleket a Webdizájnban

Egyre több tevékenységet végzünk az online térben. A böngésző ablak helyettesíti a bankot, az utazási irodát, a vonatállomást, és a tantermeket is. Utalunk, foglalunk, csevegünk, informálódunk és szórakozunk. Ahhoz, hogy ezen a számtalan felületen könnyedén megtaláljuk a helyünket, mindannyian mentális modelleket alkalmazunk. Ez nagyon sok felesleges energiát megspórol, hiszen nem kell minden egyes új oldal esetében tanulással, vagy oktató videókkal kezdeni az ismerkedést. Tudjuk, hogy egy új webshop esetén regisztrálnunk kell, és a megrendelési folyamat lépései is ismerősek a különböző felületeken.

Az általunk megszokott weboldal elrendezések és működési formák idővel „modellé” alakulnak és az ettől eltérő megjelenést, elrendezést, vagy működést negatívan értékeljük. Mindig mérlegelni kell, hogy egy kreatív ötlet vagy megoldás mennyire illeszkedik a látogatók mentális modelljébe. Minél nagyobb az eltérés, annál több segítséget kell adni a használat során.

Lehetetlen felsorolni azoknak a konvencióknak, szokásoknak és működési modelleknek az összességét, amelyek a weboldalakhoz és más online rendszerekhez köthetőek. Csak néhány példát ragadtam ki a mindennapi életünkből.

  • A linkek, kattintható elemek általában alá vannak húzva és a szövegtől eltérő színben jelennek meg (leggyakrabban kék), vagy az egeret az elem fölé tartva valamilyen animáció jelzi a kattinthatóságot.
  • A logót a bal felső sarokban találjuk a márkanévvel együtt. Ha a logóra kattintunk, a weboldal címoldalára navigál az oldal.
  • A regisztrációs lehetőséget a jobb felső sarokban találjuk a menüben.
    A cookie kezeléssel kapcsolatos felugró ablakot le kell okézni.
  • A webshopokban regisztráció után egy szívecske ikonnal bejelölhetjük a nekünk tetsző termékeket..
  • A kosárban egy ideig ott maradnak a kiválasztott elemek.
  • Egy közösségi oldalon posztolhatunk, képes tartalmat tehetünk közzé.
  • Jegyfoglaláskor grafikusan bejelölhetjük a rendelkezésre álló helyek között a választásunkat.

A felhasználó ellátogat az oldalra és a szemével végigpásztázza a látottakat. Ha felismer bizonyos mintákat, akkor magabiztosan nézelődik tovább, keresi a számára fontos pontokat, kapaszkodókat. Ha új rendszert tervezel, vagy akár csak egy új weboldal építésén dolgozol, akkor tudatában kell lenned a konvencióknak, elvárásoknak, illetve a mentális modelleknek. Ugyanis ehhez képest kell mérlegelned, hogy egy új megoldási lehetőség milyen távol van a megszokottól, mennyiben tér el tőle. 

Például a hamburger ikon rejti keskeny képernyő esetén, általában mobilokon a teljes tevékenységi készletet, azaz a teljes menüsort. Erre kattintva tudod meg, mit lehet csinálni, elérni a weboldalon, vagy egy mobil alkalmazásban. Ha asztali gépen, böngészős nézetben alkalmazod, akkor senkit nem fog zavarba hozni, a felhasználók megtalálják a menüt mögötte. A megjelenés kis eltérései sem okoznak gondot, különösen, ha a várt helyen a jobb felső sarokban helyezed el az ikont.

Azonban, ha a három vonalas absztrakt megjelenés helyett egy realistább hamburger képet szeretnél használni, akkor ezt csak azok fogják megérteni, akik ismerik a hamburger-ikon kifejezést, és ez már egyáltalán nem minden felhasználóra lesz igaz. De még aki használja ezt a szakzsargont, az sem biztos, hogy ikonként értelmez egy részletgazdag hamburger grafikát, könnyen valamilyen illusztrációként hathat.

Jakob törvénye

A UX design területen sokat idézett Jacob törvény alap állítása minden weboldal tulajdonosnak nagy szívfájdalmat okoz.

Aweboldalad látogatói idejük túlnyomó részét MÁS weboldalakon töltik.

Jacob Nielsen

Bármit is szeretnél eladni, üzenni, kommunikálni, szolgáltatni, nem indulhatsz ki önmagában a saját mondanivalódból és elképzeléseidből. Figyelembe kell venned a létező legtöbb hasonló rendszer működését, hiszen a nagy konkurensek meghatározó szerepet tölthetnek be a mentális modellek kialakításában. Ma már egy szállás foglaló oldal nem hagyhatja figyelmen kívül a booking.com működését, oldal elrendezéseit, sőt, még az üzleti modelljét sem. Az Adobe Photoshop képszerkesztő programjának funkcionalitását, fogalmait, még a felhasználói felület elrendezéseit is főbb vonalakban követik a későbbi időpontban fejlesztett konkurensek, például az Affinity Photo programja is.

Ez nem jelenti azt, hogy szolgaian mindent le kell másolnunk másokról, de mérlegelned kell minden új megjelenítési forma, vagy működési mechanizmus előtt. Mi az, amit mindenképpen meg kell tartanod, mi az, amin érdemes változtatni, és hogyan fogod az újító megoldásokat, a mentális modellektől való nagyobb eltéréseket bevezetni, kommunikálni?

Fogalmi modellek – mi az és miért fontos?

Míg a mentális modell azt vizsgálja, hogyan csapódik le egy adott dolog az emberek tudatában, addig a fogalmi modell maga a tény, az egzaktul leírható tulajdonságok halmaza, vagy működési folyamatok leírása. Ide tartoznak a konkrét felhasználói felületek tervei, a felhasználói folyamatok, az információs séma tervek, a jogosultsági rendszer részletei, azaz minden olyan konkrét elképzelés és terv, amely az adott rendszer megvalósítására vonatkozik.

Új rendszerek tervezése

Célszerű, hogy a fogalmi modell szorosan illeszkedjen a célcsoport mentális modelljéhez, mert a kapcsolódó felületek így lesznek könnyen kezelhetőek a felhasználók számára. Azaz, úgy tervezd a rendszereidet, hogy az kellőképpen ismerős legyen a célcsoportod számára.

Ha valamilyen teljesen új dolog bevezetésére készülsz, akkor kihagyhatatlan a látogatók edukálásának fázisa. Videókkal, leírásokkal kell komfortosabbá tenned a felhasználó számára, hogy megismerkedjen a rendszereddel és kialakulhassanak benne az új mentális modelljei. Ezek lehetnek 3-4 lépcsős felugró ablakok a legfontosabb funkciókról, használhatsz rövid összefoglaló videót a kezdő képernyőn a rendszerben rejlő lehetőségekről, beépíthetsz a felület megfelelő pontjain kinyitható leíró dobozokat, helpeket, és folyamatos oktató, ismertető tartalmakat tehetsz közzé a social média felületeken vagy a blogban a haladó felhasználók számára.

A mentális modellek megismeréséhez érdemes olyan kutatásokat végezni, ahol a felhasználókat valamilyen probléma megoldására kéred meg és megfigyeled, hogy milyen irányban látnak hozzá a feladat megoldáshoz, hogyan viszik azt végbe.

Érdemes megismerkedni az esetleges konkurenciával, hasonló alkalmazásokkal, weboldalakkal. Ha közülük valamelyik különösen népszerű, az már jó eséllyel hozzájárulhatott a meglévő mentális modellek kialakulásához. érdemes lehet róla inspirálódni.

De ha lehetőségünk adódik arra, hogy néhány hús-vér felhasználóval beszélhessünk az általunk készült oldalról, vagy annak első prototípusáról, az is hatalmas segítség lehet a mentális modellek megismeréséhez. Igazán nem nagy dolog megkérni néhány barátot vagy ismerőst, hogy kattintgassák végig a weboldalt, használják az azon található űrlapokat vagy éppen regisztráljanak fel valamire. Utána érdeklődjünk arról, hogy milyen élmény volt, min változtatnának, kényelmesen érezték-e magukat az oldal használata közben! Meg fogunk lepődni, hogy válaszaikból milyen világosan fognak látszódni a mentális modelljeik és ezek a meglátások mekkora segítséget jelentenek majd a nem tökéletesen kiforrott megoldások további optimalizálásához.

A rendszerek vizsgálata nem áll meg a publikáláskor. A Heatmap és az ehhez hasonló egéreseményeket lekövető alkalmazások lehetővé teszik, hogy élőben figyeljük a felhasználóink cselekvéseit a weboldalon. Láthatjuk, hogy a weboldal mely részeire szenteltek nagyobb figyelmet a felhasználók, mi nem került a látóterükbe és melyik ponton léptek ki az oldalunkról. Ezzel a módszerrel a publikálás után is folyamatosan javíthatjuk a weboldalak konverzióját, és a felhasználói élményt. Mert az igazán jó rendszereknél ez a két dolog kéz a kézben jár.

Kapcsolódó

5 bosszantó UX hiba, ami csökkentheti egy weboldal látogatottságát

Mi webdesignerek, marketingesek, kis és nagyvállalkozók egyaránt rengeteg időt, pénzt és energiát áldozunk arra, hogy minél többen látogassák a weboldalainkat, akár a saját vállalkozásról, akár egy ügyfél weboldaláról van szó. Szomorú, de néha a legnagyobb igyekezet...

UI tippek – a jól konvertáló felhasználói felületekhez

A felhasználói felület sokáig az egérrel és billentyűzettel történő kapcsolódási felületeket jelentette. Amikor egy űrlapon kitöltünk valamit, lefelé görgetünk a weboldalon, keresünk, szűrünk, megnyitunk vagy becsukunk egy ablakot, akkor a felhasználói felületen...

Mire használd az animációt és mire jó az After Effects?

Mire használd az animációt és mire jó az After Effects?

Az After Effects segítségével fantasztikus animációs hatások hozhatóak létre. Nézd meg élő példákon keresztül, mire használható az animáció a webdesignerek kezében. Az oktató videóktól kezdve az animált egéreseményeken át a mozgó illusztrációkig számtalan lehetőség van a kezedben, ha izgalmas, egyedi weboldalakat szeretnél készíteni.