Kompletný návod o interakčnom dizajne pre začiatočníka

 

Interakčný dizajn má svoje korene vo webovom a grafickom dizajne, časom sa však odčlenil a stal sa vlastnou entitou. Je to už viac než len práca s textom a fotkami, interakční dizajnéri majú zodpovednosť za vytváranie každého elementu na obrazovke, na ktorý môže používateľ kliknúť, písať, alebo ho presunúť. V skratke, sprostredkuje interakciu ako zážitok.

Zdroj: pexels.com

Čo je to interakčný dizajn

Interakčný dizajn je definovaný ako štruktúra a správanie sa interakčných systémov. Interakční dizajnéri sa pokúšajú o vytvorenie zmysluplných vzťahov medzi ľuďmi, produktmi a službami, ktoré používajú – od počítačov a mobilné zariadenia, až po využitie v iných oblastiach (fit náramky).

Interakčný dizajn je proces prepájania digitálneho sveta so skutočným. Je to o tom vytvárať webdizajn, ktorý vyzerá v digitálnom svete tak reálne, ako by vyzeral v skutočnom svete.

Toto prepojenie pomáha ľuďom používať a interaktovať s digitálnymi produktmi a službami, od desktop počítačov, mobilných zariadení a smarthodiniek po webstránky, aplikácie a hry. Interakčný dizajn je koncept, ktorý spolu kombinuje všetok dizajn a funkcie, ktoré poznáme do jedného celku.

Interakčný dizajn začal v deň, kedy bola prvá obrazovka vytvorená s väčším účelom, ako len byť statickou kópiou. Všetko od buttonu, po odkaz na formu, ktorú je treba vyplniť, je interakčný dizajn. Počas niekoľkých posledných dekádach bolo vydaných niekoľko kníh, ktoré interakčný dizajn popisujú a vysvetľujú, ako presahuje do zážitkového (experience) dizajnu.

Tento dizajn sa vyvinul pre uľahčenie interakcie medzi ľuďmi a ich prostredím. Na rozdiel od experience dizajnu, zahŕňajúceho všetky aspekty, ktorým čelí používateľ, interakční dizajnéri sa zaujímajú iba o špecifické interakcie medzi používateľmi a systémom.

Je to viac než len kolekcia najzaujímavejších funkcií. Výskum na univerzite Penn State dokázal, že používatelia sú ľahšie presvedčení ku konverzii pomocou správ na webstránkach, ktoré majú interaktívne funkcie.

Známe metodológie

Hoci je interakčný dizajn v rozmedzí nespočetného množstva webstránok a mobilných aplikácii, sú určité metodológie, na ktorých sa zakladá.

Goal-Driven dizajn

Goal-driven dizajn spopularizoval Alan Cooper vo svojej knihe „The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity“, vydanej v roku 1999. Cooper ho definoval ako dizajn, ktorý má ako najvyššiu prioritu funkciu riešiť problémy. Inými slovami, tento dizajn sa sústredí predovšetkým na splnenie špecifických potrieb a želaní konečného používateľa, na rozdiel od tradičných metód dizajnu, ktoré sa sústredili na to, čo sa s vtedajšou technológiou dokázalo na webe vykonávať.

V súčasnosti niektoré veci, ktoré Alan popísal sa zdajú byť jasnými, keďže dizajnéri málokedy volia interakcie čisto iba na základe obmedzenia z pohľadu programovania. Hlavnou pointou tejto metodológie je, že sa všetko točí okolo uspokojovania potrieb konečného používateľa a potrieb, ktoré sú nevyhnuté rovnako dnes, ako v minulosti.

Tento proces potrebuje spĺňať 5 bodov:

Najprv dizajn, potom programovanie – inými slovami, goal-driven dizajn začína s uvažovaním, ako používatelia rozmýšľajú (a ako veci vyzerajú).

Oddeliť zodpovednosť za dizajn od zodpovednosti za programovanie – tento bod zohľadňuje potrebu mať interakčného dizajnéra, ktorý uľahčí používateľovi proces na webe, bez toho, aby sa dizajnér škriepil s programátorom o technických obmedzeniach. Dizajnér by mal mať taktiež plnú dôveru v programátora v správnom vykonaní všetkých technických aspektov.

 

Prideliť dizajnérovi zodpovednosť za kvalitu produktu a spokojnosť používateľa – hoci majú klienti vlastné ciele, interakčný dizajnér by mal byť zodpovedný za osobu sediacu za obrazovkou na druhej strane.

Definovať jedného špecifického používateľa pre produkt – tento nápad sa v súčasnosti vymyslel na niečo, čo poznáme ako persóny. Cooper nám pripomína, aby sme persónu prepojili s produktom a konštantne sa opýtali otázky typu: Kde toto používateľ využije? Kto to je? Čo chce dosiahnuť?

Pracovať v tíme po dvoch – interakční dizajnéri by nikdy nemali pracovať vo veľkých skupinách. Spolupracovanie s ostatnými členmi by mal zabezpečiť „dizajnový komunikátor“. Ten bol v Cooperovej predstave v roku 1999 copywriter, ktorý poskytoval marketing copy pre produkty, avšak za tú dobu sa táto úloha roztrieštila na projektového manažéra, content stratéga, informačného architekta a ďalších pozícii.

Zdroj: pexels.com

Usability (použiteľnosť)

Použiteľnosť môže znieť ako nejasné označenie. Dizajnéri sa však zvyčajne iba samých seba jednoducho spýtajú „môže toto niekto jednoducho použiť?“. Použiteľnosť bola vysvetlená v knihách a online nespočetnými spôsobmi, avšak my sa zameriame iba na známe témy.

V knihe Human Computer Interaction od autorov Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale je použiteľnosť rozdelená na 3 princípy:

  • naučiteľnosť: ako ľahko sa nový používateľ môže naučiť navigovať rozhraním?
  • flexibilita: koľkými spôsobmi môže používateľ používať systém?
  • robustnosť: ako dobre podporujeme používateľov, keď čelia problémom?

Iní autori, Nielsen a Schneiderman vysvetlili použiteľnosť v 5 princípoch:

  • naučiteľnosť: ako ľahko sa nový používateľ môže naučiť navigovať rozhraním?
  • efektívnosť: ako rýchlo môže používateľ vykonávať úlohy?
  • pamätihodnosť: ak používateľ už dlhšie systém nepoužil, ako dobre si bude pamätať rozhranie?
  • chyby: koľko chýb používatelia urobia a ako rýchlo sa dokážu poučiť?
  • uspokojenie: cítia sa používatelia pri používaní rozhrania dobre a sú spokojní s výsledkom?

Medzinárodné štandardy ISO (ISO 9241) taktiež toto slovo taktiež rozobrali do 5 princípov:

  • naučiteľnosť: ako ľahko sa nový používateľ môže naučiť navigovať rozhraním?
  • pochopiteľnosť: ako dobre dokáže používateľ pochopiť to, čo vidí?
  • prevádzkyschopnosť: koľko kontroly má používateľ pri využívaní rozhrania?
  • atraktívnosť: ako dobre vizuálne rozhranie pôsobí?
  • súlad s použiteľnosťou: dodržiava rozhranie štandardy?

Ďalšia stránka, ktorá sa zaoberá použiteľnosťou je Usability.gov. Návod poskytuje radu otázok a podotázok, ktorých odpovede tvoria základ pre vytvorenie projektu a digitálnej interakcii. Základnými konceptmi sú:

  1. Definovať, ako môže používateľ interaktovať s rozhraním.
  2. Naznačiť používateľom čo sa stane, ak vykonajú konkrétnu akciu.
  3. Predvídať a zmierniť chyby.
  4. Pouvažovať nad systémovým feedbackom a časom odozvy.
  5. Strategicky uvažovať o každom elemente dizajnu.
  6. Zjednodušovať systém pre naučiteľnosť.

Mobilné zariadenia taktiež zmenili spôsob, akým prehliadame webstránky.

Je jasne vidieť, že tieto témy predovšetkým vysvetľujú, čo robí rozhranie „použiteľným“. Bez ohľadu na princípy, dôležitou zložkou použiteľnosti je vždy dizajnér.

5 dimenzií

V knihe rozhovor Billa Moggridgea, Designing Interactions, Gillian Crampton Smith, akademička zameraná na interakčný dizajn predstavila koncept štyroch dimenzií tzv. „interakčného dizajnového jazyka“. Inými slovami, tieto dimenzie vytvárajú interakcie navzájom a výsledkom je komunikácia medzi používateľom a tým, čo vidí na obrazovke.

4 pôvodné dimenzie sú slová, vizuálna reprezentácia, fyzikálne objekty, alebo priestor a čas. Kevin Silver, senior interakčný dizajnér IDEXX Laboratories pridal 5. dimenziu, správanie. Čo teda jednotlivé dimenzie popisujú?

Zdroj: pexels.com

  1. slová – mali by byť ľahko pochopiteľné a napísané takým spôsobom, aby jednoducho komunikovali informácie pre používateľa.
  2. vizuálna reprezentácia – grafika, fotky a v podstate všetko, čo nie je text. Mali by byť použité umiernene a nie príliš veľmi.
  3. fyzikálne objekty, alebo priestor – všetok fyzický hardvér, či už myška alebo klávesnica a mobilné zariadenie, ktoré používateľ využíva.
  4. čas – ktorý používateľ strávi používaním prvých troch dimenzií. Zahŕňa spôsoby, akými používateľ môže merať progres, ako aj zvuky alebo animácie.
  5. správanie – sú to emócie a reakcie, ktoré používateľ zažíva pri používaní systémy.

S využitím týchto piatich dimenzií môže interakčný dizajnér venovať pozornosť tomu, čo používateľ zažíva, keď komunikuje so systémom.

Kognitívna psychológia

Kognitívna psychológia je štúdia zaoberajúca spôsobom, akým naša myseľ funguje a aké mentálne procesy v nej prebiehajú. Podľa americkej asociácie psychológov tieto procesy zahŕňajú pozornosť, použitie jazyka, pamäť, vnímanie, riešenie problémov, kreativita a myslenie.

Hoci je psychológia pomerne rozsiahla oblasť, je niekoľko kľúčových elementov kognitívnej psychológie, ktoré sú obzvlášť využiteľné a môžu byť použité v interakčnom dizajne. Don Norman ich napísal vo svojej knihe The Design of Everyday Things niekoľko a tu ich je zopár vymenovaných:

 

  • Mentálne modely – obrazy v hlave používateľa, ktoré informujú o jeho očakávaní pri niektorých interakciách alebo systéme. Naučením sa mentálneho modelu môžu interakční dizajnéri vytvoriť systémy, ktoré pôsobia intuitívne.
  • Metafory pre rozhranie – využitie známych prvkov pre navádzanie používateľov na nové činnosti. Dobrým príkladom je kôš na pracovnej ploche, ktorý používateľovi dáva predstavu, na čo slúži.
  • Dostupnosť – veci, ktoré nielenže vyzerajú, že sú vytvorené na určitú činnosť, ale zároveň sú vytvorené tak, aby to aj vyzeralo, že sa s nimi má niečo urobiť. Napr. taký call to action (ďalej CTA) button vyzerá ako fyzický objekt, ktorý sa dá stlačiť.

 

Human Interface Guidelines (Usmernenie používateľského rozhrania)

Tento názov je tak trochu zle pomenovaný, pretože tu v skutočnosti žiadne vodítka pre ľudí nie sú. Idea je v samotnej metodológii. Usmernenia boli vytvorené väčšinou tech biznisov, ako je Apple a Android, alebo Java a Windows. Cieľ je všade rovnaký – upozorniť perspektívnych dizajnérov a vývojárov na rady a odporúčania, ktoré im pomôžu vytvoriť skutočne univerzálne intuitívne rozhrania a programy.

Vodiace princípy (guiding principles)

Interakcia je kombinácia princípov dizajnu s princípmi ľudských emócii a interakcií. Keď sa rozhodujete o tom, ako by mal digitálny projekt fungovať, premýšľajte ako vy používate a interaktujete so svojimi obľúbenými nástrojmi. Porozmýšľajte o každom z týchto konceptov.

 

  • Impulz (motion) – keď rozmýšľate o impulze a interakčnom dizajne, prvé čo vás napadne je klikanie alebo potiahnutie, pretože to sú činnosti používateľa, ktorými aktivuje elementy dizajnu.

 

  • Priestor – s akým typom prostredia používateľ interaktuje? Je dizajn vytvorení v 1,2, alebo 3-dimenzionálnom priestore? Je medzera iba súčasťou obrazovky, alebo zohráva nejakú úlohu?

 

  • Čas – ktorý používateľ strávi pri interakcii ovplyvní, či v nej bude pokračovať.
    Je tu delikátna rovnováha medzi zábavnosťou interakcie a časom potrebným na jej splnenie. Porozmýšľajte o cieli a ako dlho by mala interakcai trvať.

 

  • Zvuk – jedna z najviac debatovaných častí interakčného dizajnu. Zatiaľ, čo niektorým ľuďom sa to páči, iní sú okamžite otrávení. Ak nad zvukom uvažujete, vždy myslite na používateľov, ktorí chcú túto funkciu okamžite vypnúť. Dizajn musí fungovať rovnako efektívne aj bez zvuku.

 

  • Estetika – každý element dizajnu tu zohráva rolu. Ako to celé vyzerá? Podáva to želanú správu? Medzera, farba, typografia, kontrast a čitateľnosť hrajú významné role vo vizuálnom aspekte interakčného dizajnu.

 

Moderné techniky interakčného dizajnu

Nové funkcionality prinášajú nové metódy interakcie, ktoré dokážu používateľov zaujať. V súčasnosti si používatelia zvykli na nádherné dizajny, ktoré sú možné pomocou responzívnych a adaptatívnych systémov. Tie využíva čoraz viac a viac dizajnérov.

Nasledujúce techniky nie sú samostatné trendy – každý je súčasťou oveľa väčšieho hnutia, ktoré tlačí na využívanie interaktivity:

  • parallax skrolovanie a efekty
  • kartové rozmiestnenie (card-style layout)
  • dizajnové elementy, ktoré si vyžadujú fyzikálne akcie, ako je potiahnutie a kliknutie
  • mikrointerakcie, čo sú momenty zobrazujúce sa pri používaní webstránky alebo aplikácie
  • push notifikácie a pripomienky z webstránok a aplikácii
  • personalizačné a lokalizačné nástroje , ktoré vytvárajú pocit, že je aplikácia a webstránka vytvorená špecificky pre používateľa
  • rýchle zobrazenie alebo skrytie contentu s kliknutím alebo potiahnutím
  • hover effekty a akcie pre sekundárny content
  • prechody a zmeny medzi elementami.

Rozoberme si na ukážku MixPlus vytvorenou Net+. Webstránka je séria mixtapeov vytvorených pre používateľov. Kliknutím si vyberiete štýl a skrollovaním v playliste pustíte nahrávky. Animácie je zábavná a vyzerá živo, pričom pomáha používateľovi pri navigovaní sa cez webstránku. V päte môžu používatelia pokračovať pre ešte dlhší playlist, alebo sa vrátiť na stránku Net+. A vďaka niekoľkým kazetám na výber sú používatelia povzbudení interaktovať a vracať sa naspäť pre spustenie novej možnosti. Interakcia na stránke je v podstate obmedzená, ale exekúcia je skvelá.

Budúcnosť interakčného dizajnu

Pokrok v technológiách rozširuje možnosti interakčného dizajnu. Predsa len, všetka technológia sa vytvára tak, aby sa z neznámeho zariadenia stávalo príbuzné.

Príkladom môžu byť wearable zariadenia. Či už ide o fit náramok, smarthodinky alebo náhrdelník, interakcie so zariadením umiestneným na koži musí byť jednoduché, užitočné a príjemné.

Personalizácia bude ďalším cieľom pre interakčný dizajn. Geolokačné nástroje tomuto už v súčasnosti napomáhajú vďaka tomu, že umožňujú vložiť osobné údaje na základe ktorých sa funkcia prispôsobí jednotlivým používateľom.

Záver

Interakčný dizajn je niečo, o čom by ste mali popremýšľať. Používatelia prichádzajúci na web očakávajú interakciu v takmer každom aspekte dizajnu. Väčšina používateľov sa dostane na web cez mobilné zariadenie a očakáva viac, než len čítať text. Interakčný dizajn sa mení skoro každý deň s pokrokom technológie a prístupom používateľov k novým technológiám.

Plánovanie a dizajn týchto interakcií so zmyslom môže byť spočiatku ťažký, ale nie je z hľadiska konceptu o nič ťažší, ako tvorba konceptu pri inom type dizajnu.

 

 

Autor

Ivan Potančok

Ivan je riaditeľom a zakladateľom spoločnosti vibration. Stará sa hlavne o rozvoj firmy, procesy, inovácie, navrhuje systémy a webové aplikácie. Vo voľnom čase rád cestuje, jazdí na bicykli, snowboarduje a skúša nové veci.

mohlo by vás zaujímať

Budúcnosť bez aplikácií

Čoskoro možno nebudeme musieť inštalovať aplikácie, pomôže nám s...
BarCamp Bratislava 2016

Pozrite si online prednášky z BarCamp Bratislava 2016

Na Barcamp Bratislava 2016 sme spravili video záznam, aby si...

Tip 88: export účtovných položiek do fakturačného systému

Účtovníctvo pre svoj eshop riešia ľudia väčšinou cez účtovníka....

Štýlujme wordpress šablóny rýchlejšie

Na WordCamp Slovensko 2014 prednášal náš CEO Ivan Potančok...

presvedčili sme vás?

Ak sa chcete niečo spýtať, napíšte nám.

Odpovieme čo najskôr.

00421 915 263 443

info@vibration.sk