UX design elmélet

Design

Sokszor láthattok design-nal kapcsolatos szavakat, melyek jelentései átfedik egymást: UX (user experience), UI (user interface), GUI (graphical user interface), design. Ezek mind hasonló dolgokról szólnak: hogy milyen az az interfész, amit a felhasználók használnak a funkció eléréséhez.

Amikor design-ról beszélünk, sokan csak a vizuális dolgokra gondolnak, pedig egy interfész nem csak erről szól. Biztosan találkoztatok már olyan interfésszel, ami habár gyönyörű volt, nagyon nehéz volt használni. Igazából kétfajta dolgot szoktak designon érteni:

  • Vizuális (visual) design: ez az interfésznek az esztétikája, illetve vizuális elemek amik segítenek az eligazodásban.
  • Interakció (interaction) design: ez az applikáció használata: mikor hova kattintson a felhasználó, mire gondol éppen, mi a felhasználó mentális modellje.

Ezek alapján látszik, hogy lehet valami szép, de nem funkcionális, illetve lehet valami funkcionális, de nem esztétikus. Ez két nagyon különböző dolog!

Melyik a fontosabb? A funkció a lényeg. De az esztétikának is fontos szerepe van: jobb érzés használni, profizmust és bizalmat sugall, értékesebbnek tűnik. Az ilyen mentális elfogult gondolatok is befolyásolják a felhasználói élményt. A piacon nagy a verseny, így a UX designon is jelentősen múlik, múlhat egy-egy cég vagy termék sikere.

Mitől jó egy interfész?

  • az interfész támogatja a felhasználót célja elérésében,
  • egyszerű a mentális modellje,
  • egyszerű, nem technikai nyelvezetet használ,
  • a fontos/gyakran használt dolgokat könnyű megtalálni,
  • egy oldalon a kattintható elemek száma nem túl nagy,
  • visszajelzéseket kap a felhasználó,
  • nehéz visszafordíthatatlan hibát elkövetni, stb.

Egy jó interfész tervezését/fejlesztését tipikusan megelőzi az igények kutatása: mire van szükség? Mit csinálnak a felhasználók gyakrabban, mit ritkábban? Mit értenek félre, mi okoz nehézséget? Milyen lépésnél hagyják abba a szoftver használatát?

Konkrét példák

  • Material Design telefonos és webappokra. Elve: az ember a valós anyagokhoz és azok fizikájához van szokva. Intuitívabb ami a valóságban is konzisztens változás lenne. Pl mozgás sebessége, textúra, árnyékok és szintek.
    • Google: egymás feletti rétegek, árnyékok. (material.io)
    • iPhone: app a launcher elé kerül.
    • Messenger chathead, a törlésnél attraction forces.
  • Google advanced search: sok gomb és komplikáltság helyett egyszerű lépések, világos lehetőségek, haladó feature-ök elrejtve.
  • Visszajelzés arról, amit csináltál. Például törlés, visszavonás. Hangjelzés amikor emailt küldtél.
  • Reward: duolingo regisztráció, bagoly kísér és örül :)
  • Situational awareness: például Google forms, az 5 lépésből hol tartok?
  • Rossz példák: http://nauxui.com/en/.

Tovább a UX design gyakorlatra

Kapcsolatok