ux-principles.html

---
layout: default
---
<section class="task-description">
<div class="container"><div class="row"><div class="col-xs-12">
  <h1>UX design elmélet</h1>
</div></div></div>
</section>

<div class="container theory"><div class="row"><div class="col-xs-12">
<h3>Design</h3>
<p>
  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.
</p>
<p>
  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:
</p>
<ul>
  <li>Vizuális (visual) design: ez az interfésznek az esztétikája, illetve vizuális elemek amik segítenek az
    eligazodásban.</li>
  <li>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.</li>
</ul>
<p>
  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!
</p>
<p>
  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.
</p>
<p>
  Mitől jó egy interfész?
</p>
<ul>
  <li>az interfész támogatja a felhasználót célja elérésében,</li>
  <li>egyszerű a mentális modellje,</li>
  <li>egyszerű, nem technikai nyelvezetet használ,</li>
  <li>a fontos/gyakran használt dolgokat könnyű megtalálni,</li>
  <li>egy oldalon a kattintható elemek száma nem túl nagy,</li>
  <li>visszajelzéseket kap a felhasználó,</li>
  <li>nehéz visszafordíthatatlan hibát elkövetni, stb.</li>
</ul>
<p>
  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?
</p>

<h3>Konkrét példák</h3>
<ul>
  <li>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.
    <ul>
      <li>Google: egymás feletti rétegek, árnyékok. (<a href="https://material.io/design/environment/light-shadows.html#shadows">material.io</a>)</li>
      <li>iPhone: app a launcher elé kerül.</li>
      <li>Messenger chathead, a törlésnél attraction forces.</li>
    </ul>
  </li>
  <li>Google advanced search: sok gomb és komplikáltság helyett egyszerű lépések, világos lehetőségek, haladó feature-ök elrejtve.</li>
  <li>Visszajelzés arról, amit csináltál. Például törlés, visszavonás. Hangjelzés amikor emailt küldtél.</li>
  <li>Reward: duolingo regisztráció, bagoly kísér és örül :)</li>
  <li>Situational awareness: például Google forms, az 5 lépésből hol tartok?</li>
  <li>Rossz példák: <a
      href="http://nauxui.com/en/">http://nauxui.com/en/</a>.
</ul>
<p>
  <a href="/ux-practice/">Tovább a UX design gyakorlatra</a>
</p>
</div></div></div>