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