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.

Mitől jó egy interfész?

  • Egyszerű mentális modell.
  • A fontos/gyakran használt dolgokat könnyű megtalálni.
  • Kattintható elemek száma nem túl nagy.
  • Visszajelzéseket kap a felhasználó.
  • Stb.

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.
    • Notification drawers.
  • Sok gomb és komplikáltság helyett egyszerű lépések, világos lehetőségek. Haladó feature-ök elrejtve: például keresésben az advanced search.
  • 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: LinkedIn dark patterns. Dark pattern: olyan design, ami a felhasználók ellen dolgozik.

Kapcsolatok