Dizajn používateľských rozhraní. Dizajn UX a používateľského rozhrania: účel a rozdiely. Vlastnosti vývoja aplikačného rozhrania

Vývoj používateľských rozhraní s kompetentným prístupom je postavený tak, aby bol vytvorený čo najatraktívnejšie a najpohodlnejšie, aby sa optimalizovala jeho interakcia s používateľom.

Vývojári webového rozhrania v akomkoľvek projekte stoja pred úlohou vytvoriť užívateľsky prívetivé rozhranie. Nie vždy je to však taká jednoduchá úloha, ako by sa na prvý pohľad mohlo zdať a niekedy si vyžaduje veľa dizajnérskych skúseností. Hlavnými požiadavkami sú pohodlie, praktickosť a intuitívnosť. Práve v tomto bode vstupujú do hry koncepty ako UX a UI dizajn, ktoré sú často zamieňané. Uvažujme o každom z nich samostatne a definujme ich kľúčové body.

UX dizajn (UX dizajn)

Dizajn používateľskej skúsenosti prekladaný znamená "interakčný zážitok" a zahŕňa rôzne komponenty UX: informačnú architektúru, interakčný dizajn, grafický dizajn a obsah.

Vo všeobecnosti dizajn UX znamená integrovaný prístup k interakcii používateľa s rozhraním, či už ide o webovú stránku, mobilnú aplikáciu alebo akýkoľvek iný program. Osoba, ktorá robí túto prácu, je UX dizajnér(v poslednej dobe stále častejšie počuť mená UX architekta, UX inžiniera či stratéga, keďže slovo „dizajn“ je v tomto kontexte skôr bežným podstatným menom, ako tomu, čo sme v skutočnosti chápali ako význam tohto slova ) - pri vývoji rozhrania by sa mali čo najviac brať do úvahy všetky maličkosti, počnúc užívateľským prostredím a typom elektronického zariadenia a končiac spôsobmi zadávania a zobrazovania informácií.

Jednoduchý príklad: povedzme, že ste investovali impozantné množstvo peňazí do propagácie svojho zdroja v prvých riadkoch vyhľadávacích nástrojov, ale jeho pohodlnosť nie je veľmi žiaduca. V tomto prípade pôsobivý počet používateľov jednoducho opustí stránku a účinok bude minimálny. Preto je potrebné neustále analyzovať akcie návštevníkov zdroja, zlepšovať svoje stránky a sledovať aktuálne trendy.

Kľúčové otázky riešené dizajnom UX:

• Stanovenie cieľov a zámerov – čo musíme nakoniec dosiahnuť?
• Výber vhodných nástrojov UX na dosiahnutie cieľov
• Vývoj produktu, ktorý je rovnako pohodlný a ľahko vnímateľný cieľovým publikom
• Analýza konečného výsledku – či produkt spĺňa očakávania zákazníka a aká vysoká je miera spokojnosti používateľov.

Je to kompetentná premyslenosť všetkých detailov v týchto fázach, ktorá vám umožní vytvoriť armádu fanúšikov vášho produktu. Vzorovým príkladom je tu Apple, ktorý sa vydal touto cestou a získal si srdcia tisícov a miliónov ľudí.

Dizajn používateľského rozhrania

Dizajn používateľského rozhrania alebo používateľského rozhrania je užší pojem, ktorý zahŕňa určitý súbor graficky navrhnutých technických prvkov (tlačidlá, zaškrtávacie políčka, selektory a ďalšie polia). Jeho úlohou je pomôcť používateľovi organizovať interakciu s programom/stránkou. V súčasnosti sú nejaké Pravidlá dizajnu používateľského rozhrania:

1. Organizácia prvkov rozhrania. To znamená, že musia byť logicky štruktúrované a vzájomne prepojené.
2. Zoskupovanie prvkov rozhrania. Znamená to zoskupiť logicky súvisiace prvky (menu, formuláre).
3. Zarovnanie prvkov rozhrania. Je ťažké si predstaviť, že zle nastavené rozhranie môže byť užívateľsky prívetivé!
4. Jednotný štýl prvkov rozhrania. Styling hrá dôležitú úlohu, pretože je uložený v pamäti používateľa.
5. Dostupnosť voľného miesta. To vám umožní ohraničiť informačné bloky so zameraním na jednu vec.

Používateľské rozhranie vyvinuté podľa všetkých pravidiel výrazne zvyšuje efektívnosť zdroja a dáva mu konkurenčnú výhodu.

Informačná architektúra (IA)

Samostatne by som chcel povedať pár slov o informačná architektúra (IA). Jeho činnosť je zameraná na organizáciu dát, teda na to, koľko informácií je štruktúrovaných z hľadiska používateľa, a nie na technické alebo systémové pravidlá. Určuje umiestnenie prvkov na stránke, prepojenie samotných stránok. Kompetenciou IA je skôr menu a navigácia a ich kompetentná implementácia.

Aby som to zhrnul, rád by som poznamenal, že v rôznych zdrojoch UX dizajn znamená rôzne veci, ale vo všeobecnosti všetky znamenajú prácu na produkte opísanom v článku. Čo pre vás znamená UX?

Dizajn je dosť široký a vágny pojem. Keď niekto povie: „Som dizajnér“, nie je hneď jasné, čomu sa denno-denne venuje. V tomto koncepte je zahrnutých množstvo rôznych odvetví.

Pracovné povinnosti súvisiace s dizajnom existujú v oblastiach od priemyselného dizajnu (autá, nábytok), tlače (časopisy a iné publikácie) až po webový dizajn (webové stránky, mobilné aplikácie). S nedávnym prílevom high-tech spoločností, ktoré sa zameriavajú na vytváranie rozhraní pre obrazovky, pribudlo veľa novej práce v oblasti dizajnu. Pozícia UX alebo UI dizajnéra môže byť nepochopiteľná nielen pre nezasvätených, ale aj pre samotných dizajnérov, ktorí pochádzajú z iných odvetví.

"Táto otázka nemá jedinú správnu odpoveď."

Skúsme prísť na to, čo to skutočne znamená v IT priemysle.

UX dizajnér

Dizajnérom UX ide predovšetkým o ako produkt interaguje s používateľom. Táto otázka nemá jedinú správnu odpoveď. Dizajnéri UX skúmajú rôzne prístupy k riešeniu konkrétneho problému používateľa. Hlavnou úlohou UX dizajnéra je zabezpečiť, aby produkt logicky plynul z jedného kroku do druhého. Jedným zo spôsobov, ako to môže dizajnér UX zistiť, je vykonať používateľské testy osobne a vyvodiť závery z ich skúseností. Identifikáciou verbálnych a neverbálnych kameňov úrazu koriguje a opakuje, čím vytvára pre používateľa „lepší“ zážitok. Príkladom je vytvorenie úžasného zážitku z registrácie pre nového používateľa.

„Definujte modely interakcie, tok úloh používateľa a špecifiká rozhrania. Vyvíjajte scenáre, end-to-end interakcie, modely interakcií, vývoj GUI. Spolupráca s naším kreatívnym riaditeľom a grafickým dizajnérom na spojení vizuálnej stránky Twitteru s jeho funkčnosťou. Podľa potreby vyvíjajte a udržiavajte drôtové modely, makety a špecifikácie."

Príklad obrazovky aplikácie navrhnutej dizajnérom UX
Zdroj: Kitchenware Pro Kit Wireframe od Neway Lau na Dribbble.

Úloha: Screen wireframes, storyboardy, plán lokality

Nástroje: Photoshop, Sketch, Illustrator, Fireworks, InVision

Pravdepodobne ste od neho počuli: Po dokončení registrácie by sa mala používateľovi zobraziť stránka „Ďakujem“.

Dizajnér používateľského rozhrania

Na rozdiel od dizajnérov UX, ktorí sa zaoberajú celkovým vnímaním produktu, dizajnérom používateľského rozhrania záleží ako produkt vyzerá. Sú zodpovední za návrh každej obrazovky alebo stránky, s ktorou používateľ komunikuje, a poskytujú vizuálnu časť používateľského rozhrania, ktoré navrhol dizajnér UX. Napríklad dizajnér používateľského rozhrania môže pri vytváraní analytického dashboardu preniesť dôležitejšie informácie na začiatok alebo rozhodnúť, či je najintuitívnejšie pridať do grafu posuvník alebo ovládací panel. Dizajnér používateľského rozhrania je tiež zvyčajne zodpovedný za vytvorenie kompletného sprievodcu dizajnom, ktorý poskytuje koherentný dizajnový jazyk, ktorý pokrýva celý produkt. Udržujte konzistentnosť vizuálnych prvkov a určte, ktorým smerom sa má pracovať. Napríklad, ako zobraziť chyby alebo varovania je v kompetencii dizajnéra používateľského rozhrania.

„Koncept a implementácia vizuálneho jazyka Airbnb.com. Vytvorenie rozšíreného sprievodcu štýlom.»

Hranice medzi UI a UX dizajnérom sú dosť nejasné a spoločnosti sa veľmi často rozhodnú tieto úlohy skombinovať.

Dizajnér používateľského rozhrania určuje celkový dojem a vzhľad aplikácie.
Zdroj: Metro Style Interface 4 od Ionut Zamfir na Dribbble.

Nástroje: Photoshop, Sketch, Illustrator, Fireworks

"Polia 'login' a 'register' by mali byť presunuté do pravého horného rohu."

Grafický dizajnér

"Grafickí dizajnéri sa pohrávajú s malými detailmi, ktorým ostatní nevenujú pozornosť."

Grafik je niekto, kto robí grafiku – nedizajnér vám skôr odpovie, ak sa ho spýtate, čo robí dizajnér. Grafických dizajnérov nezaujíma, ako sú obrazovky navzájom prepojené alebo ako niekto interaguje s produktom. Namiesto toho sa zameriavajú na navrhovanie krásnych ikon, ovládacích prvkov a vizuálov a vytváranie správneho vzhľadu a štýlu. Grafickí dizajnéri pracujú na malých detailoch, ktoré ostatní nevidia a často pracujú vo Photoshope pri 4x a 8x zväčšení.

„Produkujte vysokokvalitné vizuálne projekty od konceptu až po realizáciu, a to aj pre desktop, web a mobilné zariadenia v rôznych rozlíšeniach (ikony, grafika a marketingové materiály). Vytváranie a opakovanie zdrojov, ktoré odrážajú značku, robia produkt krásnym a oživujú ho.“

Dizajnéri používateľského rozhrania tiež často musia robiť nielen svoju prácu, ale aj vytvárať pixelovo dokonalé rozloženie. Niektoré spoločnosti sa rozhodnú, že na úlohu grafického dizajnéra nemajú samostatnú osobu.

Grafický dizajnér navrhne, nasmeruje a nastaví každý pixel, aby zaistil dokonalý konečný výsledok.
Zdroj: IOS 7 Guide Freebie PSD od Seevi kargwal na Dribbble.

Nástroje: Photoshop, skica

Pravdepodobne ste od neho počuli:"Znížte kerning a posuňte tlačidlo o 1 pixel doľava!"

Návrhár pohybu

Pamätáte si ten jemný pohyb, keď potiahnete obrazovku, aby ste aktualizovali poštu na vašom iPhone? Toto je práca návrhára pohybu. Na rozdiel od grafických dizajnérov, ktorí sa zvyčajne zaoberajú statickými objektmi, návrhári pohybu vytvárajú animácie v rámci aplikácie. Zaoberajú sa čo robí rozhranie, keď sa ho používateľ dotkne. Napríklad rozhodujú o tom, ako sa má ponuka posúvať, aké efekty použiť na prechody a ako sa bude tlačidlo stláčať. Ak je pohyb vykonaný dobre, stáva sa neoddeliteľnou súčasťou rozhrania a poskytuje vizuálne pokyny, ako produkt používať.

„Vyžaduje znalosť grafického dizajnu, motion dizajnu, digitálneho umenia, cit pre farby a typografiu, všeobecné povedomie o materiáloch/textúrach a praktické pochopenie animácie. Znalosť firmvéru iOS, OS X, Photoshop a Illustrator, ako aj znalosť programov Director (alebo ekvivalent), Quartz Composer (alebo ekvivalent), 3D počítačové modelovanie, pohyblivá grafika.

Nástroje: After Effects, Core Composer, Flash, Origami

Pravdepodobne ste od neho počuli:"Ponuka by sa mala objaviť zľava po 800 ms."

UX výskumník

Výskumník UX vie všetko o potrebách používateľov.

Výskumník UX vie všetko o potrebách používateľov. Cieľom výskumníka je odpovedať na dve hlavné otázky: "Kto sú naši používatelia?" a „Čo chcú naši používatelia?“. Spravidla to zahŕňa používateľské prieskumy, prieskum trhu a analýzu údajov. Dizajn je proces neustáleho opakovania. Výskumníci môžu pomôcť s týmto procesom vykonaním A/B testov, aby zistili, ktorá možnosť dizajnu najlepšie vyhovuje potrebám používateľov. UX výskumníci bývajú hlavnou oporou veľkých spoločností, ktorým prístup k veľkému množstvu údajov dáva dostatok príležitostí na vyvodenie štatisticky významných záverov.

„Úzka spolupráca s vývojovými tímami pri identifikácii výskumných tém. Návrh výskumu týkajúci sa akcií aj vnímania používateľov. Vykonávanie výskumu pomocou a uplatňovanie rôznych metód, ako sú prieskumy.

Akýkoľvek dizajn, bez ohľadu na to, aký je dobrý, bude úplne zbytočný, ak nejde o dizajn UX. Existujú státisíce zdrojov, ktoré vytvárajú ohromujúci dizajn rozhrania a grafický dizajn a využívajú služby tých najlepších profesionálov s neskutočným talentom, ale nedokážu zaujať svoje právoplatné miesto v sieti. A to je všetko, pretože interakcia medzi stránkou a používateľmi rastie exponenciálne, čo znamená, že na to, aby mohli webdizajnéri nájsť spätnú väzbu od používateľa, musia sa starať o používateľskú skúsenosť (UX – User Experience – „interaction experience“). Práve v tejto fáze prichádzajú na pomoc dizajnové nástroje UX – vynikajúce online služby, ktoré dizajnérom poskytujú tipy na navrhovanie používateľských rozhraní. V tomto článku si o nich povieme podrobnejšie.

Keďže dizajnéri musia zvážiť nielen krásu a správnosť organizácie prvkov, ale aj zložitejšie faktory spojené so správaním návštevníkov na stránke, často siahnu po pomoci UX dizajnových nástrojov, ktoré im môžu pomôcť zautomatizovať niektoré úlohy resp. výrazne zjednodušiť proces ich vykonávania. Našťastie, dizajn rozhrania už nie je novou témou a na internete sú stovky nástrojov na dizajn UX. Samozrejme, nebudeme ich uvádzať všetky. Aby sme vám pomohli, vybrali sme len niektoré z najzaujímavejších a najužitočnejších nástrojov UX dizajnu s krátkymi popismi, ktoré ukazujú ich hlavné charakteristiky, a umožnili sme vám vybrať si ten, ktorý vám najviac vyhovuje.

UX dizajnové nástroje na modelovanie a navrhovanie makiet a prototypov

Prototypovanie sa stalo nevyhnutnosťou pre všetkých dizajnérov, ktorí chcú uspieť v oblasti dizajnu UX a zlepšiť používateľskú skúsenosť. Vytváranie makiet, modelov a prototypov im umožňuje otestovať akékoľvek nápady v praxi predtým, ako investujú čas, úsilie a peniaze do projektu. Pomocou týchto nástrojov na návrh UX môžete testovať svoj produkt počas výrobného procesu a vykonávať vylepšenia, aby ste pre svoje cieľové publikum vytvorili solídnu používateľskú skúsenosť.

Nástroj na návrh rozhrania Moqups

Aplikácia Moqups isana HTML5 je navrhnutá na vytváranie rozložení, makiet a prototypov. Moqups poskytuje obrovské množstvo prefabrikátov a šablón, ktoré môžete použiť na vybudovanie základov vášho projektu. Každý komponent si môžete prispôsobiť a nastaviť si vlastné farby, veľkosť textu, ikony atď.

Drôtený rám

Toto je ďalší nástroj na vytváranie štruktúrnych diagramov stránok (wireframing) s pohodlným minimalistickým rozhraním. Nástroj sa ľahko používa a obsahuje len minimum funkcií, vďaka čomu je jeho používanie čo najjednoduchšie. Vytváranie diagramov pomocou tohto nástroja má tú výhodu, že ich používatelia môžu jednoducho zdieľať s ostatnými. Každý diagram alebo maketa, ktorú vytvoríte, dostane svoju vlastnú jedinečnú adresu URL, ktorú môžete poslať klientovi alebo iným členom tímu.

Ceruzka

Je to nástroj na tvorbu grafických prototypov. Keďže ide o open source nástroj, môžete si ho nainštalovať na svoj osobný počítač a začať vytvárať grafické prototypy aj bez prístupu na internet. Samozrejme, nemali by ste od neho očakávať pokročilé funkcie a komplexnú funkčnosť, ale dobre zvláda svoje hlavné úlohy.

Balsamiq

Nechcete tráviť hodiny prototypovaním? V tomto prípade musíte Balsamiq jednoducho vyskúšať. Je to jednoduché, ale veľmi efektívne, pokiaľ ide o prototypovanie. S Balsamiq môžu používatelia vytvoriť viacero rozložení, ktoré možno otestovať a vybrať to, ktoré poskytuje najlepší výsledok.

mockup

Ste majstrom programu PowerPoint? Potom si tento nástroj zamilujete, pretože premení program PowerPoint na výkonný nástroj na rozloženie dizajnu UX. To znamená, že sa vôbec nemusíte učiť nový softvér. PowerMockup umožňuje ľuďom bez špeciálnych technických zručností zúčastniť sa procesu návrhu a vývoja, čo je určite jedna z jeho hlavných výhod.

falošný plus

Mockplus má všetko, čo potrebujete pre svoj ďalší projekt, od krásne vizualizovaných interakcií, vstavaných 200 komponentov a 3 000 ikon až po spoluprácu v reálnom čase a testovanie na skutočných zariadeniach. Tento nástroj na návrh používateľského rozhrania vám pomôže premeniť vaše nápady na plne funkčné prototypy efektívne a bez námahy. Dizajnérsky nástroj Mockplus navyše predstavuje rovnováhu medzi jednoduchosťou používania a prítomnosťou zložitých funkcií na vytváranie akýchkoľvek prototypových prvkov.

UXPin

Hľadáte nástroj, ktorý vám umožní vytvárať interaktívne prototypy a makety? UXPin je intuitívny a ľahko použiteľný nástroj. Pomocou nej môžete dokonca získať predstavu o tom, ako bude produkt vyzerať na mobilných zariadeniach jednoduchým prepnutím veľkosti obrazovky prehliadača.

stuhnúť

Gliffy

Gliffy nie je len ďalším nástrojom na prototypovanie dizajnu UX; je to oveľa viac. Gliffy umožňuje používateľom vytvárať sieťové diagramy, zložité technické výkresy, vývojové diagramy, diagramy UML a ďalšie. Jeho intuitívne rozhranie vám umožňuje vytvárať diagramy v priebehu niekoľkých minút.

POP

A/B testovacie nástroje

Myšlienkou týchto nástrojov je vytvoriť dve verzie stránky a potom ich otestovať, aby ste zistili, ktorá verzia funguje lepšie. Miera konverzie, priemerný čas strávený na stránke a ďalšie metriky sú niektoré z faktorov, ktoré môžete použiť na vyhodnotenie výkonnosti webovej stránky.

Desinion

Nie ste si istí, či vytvárate projekt, ktorý používatelia naozaj chcú vidieť? Pomocou tohto nástroja na testovanie A/B môžete položiť akúkoľvek otázku, ktorá vás zaujíma, a získať skutočnú odpoveď od používateľov. Nástroj má veľmi užitočnú funkciu – diskusiu. Na svojom webe môžete začať diskusiu, aby ste používateľov zapojili do procesu návrhu. Okrem toho môžete vytvárať súkromné ​​diskusie a zdieľať ich iba s priateľmi alebo kolegami.

Visual Website Optimizer

Je to jednoduchý, ale mimoriadne výkonný nástroj, ktorý vám umožňuje vykonávať A/B testovanie na najvyššej úrovni. S ním môžete vykonávať aj viacrozmerné testovanie a rozdelené testovanie. Segmentované prehľady a analýza výnosov budú dostupné aj vo Visual Website Optimizer.

Optimizely

Ide o robustný nástroj na testovanie A/B, ktorý používateľom umožňuje spustiť test bez toho, aby sa dostali do technických detailov a bez potreby špeciálnych zručností. Nedostatok kódu a úplná vizuálna úprava ho robí veľmi populárnym medzi obchodníkmi.

Nástroje na testovanie použiteľnosti

Pokiaľ ide o vytvorenie dobrého dizajnu UX, možno budete potrebovať nástroje na testovanie použiteľnosti, ktoré vám pomôžu pochopiť používateľskú skúsenosť a určiť potreby cieľových používateľov a ich psychológiu. Ak dokážete určiť, čo návštevníci a potenciálni zákazníci skutočne chcú, a vytvoriť rozhranie založené na týchto znalostiach, potom dizajn určite zapôsobí a aktivuje publikum. Nástroje UX na testovanie použiteľnosti možno rozdeliť na nástroje testovania použiteľnosti na diaľku a nástroje spätnej väzby. V tejto sekcii sme zhromaždili obe riešenia, aby ste si mohli vybrať, ktoré vám najviac vyhovuje.

Slučka 11

Loop11 je jednoduchý nástroj na testovanie použiteľnosti, ktorý nevyžaduje znalosť HTML kódu alebo programovacích jazykov. V rámci nástroja môžete použiť hotové šablóny alebo si vytvoriť tému sami. Okrem toho existuje niekoľko spôsobov, ako pozvať účastníkov na testovanie vašich projektov. Môžete si vytvoriť svoj vlastný zoznam používateľov na základe sociálnych sietí, vytvoriť kontextové okno na stránke, aby ste našli záujemcov. Všetko, čo musíte urobiť, je vytvoriť zoznam otázok alebo zahrnúť rôzne možnosti dizajnu, z ktorých si môžete vybrať, a potom poslať pozvánku ľuďom a požiadať ich, aby na ne odpovedali. Na základe výsledkov môžete vykonať potrebné zmeny v dizajne.

Bláznivé vajce

Tento nástroj vám pomôže urobiť vašu stránku užívateľsky príjemnejšou a zvýšiť konverziu vytvorením správnej používateľskej skúsenosti. Funguje to nasledovne. Odošlete svoj návrh, po ktorom ho odborníci na použiteľnosť a používateľskú skúsenosť analyzujú a podelia sa o svoje pripomienky, ktoré môžete použiť na zlepšenie svojej stránky.

Nástroje použiteľnosti

Je to jeden z najpoužívanejších nástrojov na dizajn UX a vďaka svojim užitočným funkciám si získal obrovskú popularitu medzi dizajnérmi a obchodníkmi. Tento nástroj pomáha analyzovať webové stránky z pohľadu používateľa. Pre dizajnéra je to obrovská výhoda v tom, že poskytuje konkrétne rady, kde a aké zmeny musí dizajnér urobiť, aby zvýšil konverzie, alebo aké prvky je potrebné presunúť, aby mohol prinútiť používateľa vykonať určité akcie. Tento nástroj použiteľnosti vám tiež umožňuje získať spätnú väzbu a spätnú väzbu od ľudí, ktorí produkt skutočne používajú.

appsee

Ide o „analytický softvér“, ktorý sa používa na sledovanie aktivity používateľov aplikácie. Tento nástroj vám pomôže získať cenné údaje o tom, ako používatelia interagujú s aplikáciou. Funkcia „Nahrávanie používateľov“ tohto nástroja je najpôsobivejšia. Zaznamenáva akcie používateľov a poskytuje vám tak skvelý prehľad o správaní používateľov. Ide o užitočný nástroj na zlepšenie celkového výkonu vašej aplikácie a zvýšenie konverzií.

Prítomný

Toto je nástroj na sledovanie správania používateľov, ktorý vám pomôže pochopiť, ako si vaše cieľové publikum prezerá stránky webu. Attensee vám dáva vizuálnu informáciu o tom, či si ľudia všímajú „dôležité“ prvky vašej stránky. To priamo súvisí s dizajnom, pretože ak zistíte, že značná časť používateľov sa v skutočnosti nezameriava na dôležité prvky, ako sú bannery, tlačidlá výzvy na akciu, špeciálne ponuky, Attensee vám to pomôže napraviť.

UserVoice

Toto je ďalší výkonný nástroj, ktorý vám umožňuje prezerať a analyzovať rôzne aktivity používateľov počas prehliadania vašich stránok. Tento nástroj vám umožňuje získať priamu spätnú väzbu od skutočných používateľov a opraviť problémy, s ktorými sa stretávajú.

mousestats

Ako naznačuje názov tohto nástroja, MouseStats vám pomáha sledovať aktivitu používateľov pomocou myši. Ako asi viete, pohyby myši napodobňujú pohyby očí používateľov. Sledovanie pohybov kurzora a posúvania vám poskytne dôležité informácie o tom, ako používatelia interagujú s dizajnom. Najlepšie na tomto nástroji je, že poskytuje vizuálnu reprezentáciu aktivity používateľa a pomáha tak vykonať potrebné zmeny.

UX dizajnové nástroje pre prototypovanie a kolaboratívny dizajn

Tímová práca je nevyhnutnosťou, pokiaľ ide o vývoj dobrého dizajnu UX pre vaše cieľové publikum. Ak ste zvyknutí pracovať v tíme, musíte mať prístup k príslušným nástrojom, ktoré pomôžu členom vášho tímu efektívne a bez námahy spolupracovať a vytvárať vlastné návrhy. Nižšie sú uvedené nástroje na návrh UX pre prototypovanie a spoločný dizajn, ktoré by sa vám mohli hodiť.

FileSquare

Nie je to len nástroj spolupráce. Umožňuje vytvárať interaktívny prototyp a zároveň spolupracovať s ostatnými členmi tímu. Robte kreatívne rozhodnutia a získavajte spätnú väzbu od ľudí v reálnom čase.

notizmus

Pracujete na vizuálnom obsahu a hľadáte nástroj na spoluprácu? Potom potrebujete Notism. Aby bola komunikácia s tímom čo najpohodlnejšia, využíva náčrty a poznámky. Upozornenia prichádzajú v reálnom čase, takže môžete získať spätnú väzbu od kolegov a klientov hneď, ako si to niekto všimne.

červené pero

S RedPen je spoločný dizajn a prototypovanie rýchle a jednoduché. Tento nástroj UX je určený na spoločné modelovanie dizajnu a prototypovanie. Je špeciálne navrhnutý na uľahčenie spoločnej práce s grafickým obsahom. Výmena spätnej väzby je veľmi jednoduchá: ak chce používateľ zvýrazniť niektorý z prvkov a zanechať poznámku, stačí naň umiestniť kurzor myši. Potom sa zobrazí malé textové pole, v ktorom môžete zanechať spätnú väzbu.

memosort

Vďaka Memosortu už vzdialenosť nebude prekážkou. Tento úžasný nástroj je jedným z najlepších nástrojov spoločného dizajnu. Pomôže vám spojiť sa s tímom a spolupracovať v reálnom čase. Všetky poznámky v Memosort sa ukladajú automaticky, takže sa nemusíte báť, že sa stratí nejaký dobrý nápad alebo návrh.

Trello

Zabudnite na dlhé a nudné e-maily, Trello je tu na uľahčenie spolupráce a zlepšenie tímovej komunikácie. Výhodou tohto nástroja je, že je zadarmo. Vo vnútri nástroja Trello sú špeciálne karty označujúce rôzne projekty. Jediné, čo musíte urobiť, aby ste pridali ľudí do projektu, je pretiahnuť ho na príslušnú mapu. Nástroj sa tiež aktualizuje v reálnom čase.

vízie

Je to zaujímavá kombinácia nástroja na spoluprácu a prototypovanie. S ním môžete vytvárať interaktívne prototypy a modely. S Invision je možná interakcia v reálnom čase. Stačí poslať odkaz na dizajn ostatným členom tímu a aj oni na ňom môžu pracovať a podávať návrhy.

Zhrnutie

Toto sú niektoré nástroje na návrh UX, ktoré pomáhajú webovým dizajnérom vytvárať úspešné online projekty samostatne a v tíme, ako aj zbierať informácie o používateľskej skúsenosti pre sebazdokonaľovanie. Ak poznáte nejaké ďalšie užitočné nástroje, ktoré sme zabudli spomenúť, určite o nich napíšte do komentárov!

Práca s interakciou používateľa pomáha posunúť produkt alebo podnikanie na ďalšiu úroveň, pretože UX dizajnér premýšľa cez logiku produktu a pomáha klientom dosahovať ich ciele.

Ak sa chcete začať učiť UX dizajn, musíte pochopiť, ako sa buduje práca na akomkoľvek digitálnom projekte a za čo presne je takýto dizajnér počas vývoja zodpovedný.

Kto je UX dizajnér, čo robí

UX dizajnér je dizajnér, ktorý robí digitálne produkty zrozumiteľnými a logickými. Študuje zážitok z interakcie používateľa s produktom – webovou stránkou, aplikáciou, programom. Cieľom UX dizajnéra je pomôcť používateľovi dosiahnuť svoj cieľ. Na tento účel je projekt rozdelený na etapy a každá z nich je vypracovaná.

Najprv dizajnéri analyzujú publikum produktu, skúmajú jeho ciele a obavy. Potom vedú rozhovory so skutočnými ľuďmi, pozorujú stránky a aplikácie konkurentov. Potom vytvoria prototypy, ukážu ich používateľom a prenesú súbory vývojárom.

Ak sa podrobne pozriete na každú z týchto fáz, je ľahké pochopiť, kde sa začať učiť UX dizajn.

Kto sa môže stať UX dizajnérom

Do UX často prichádzajú webdizajnéri, ktorí sa rozhodli preniknúť do oblasti interakcie používateľov. S používateľmi už pracovali, poznajú základné princípy a vedia vizualizovať informácie.

Na prácu v UX však nemusíte byť webový dizajnér. Všetky procesy v tejto oblasti sú založené predovšetkým na logike, schopnosti kriticky myslieť, komunikácii s ľuďmi a schopnosti analyzovať.

Jedna z dizajnérok Google, Fiona Yong, povedala, že v jej tíme je len niekoľko špecialistov s dizajnérskym vzdelaním. Zvyšok pracoval v príbuzných odboroch alebo v iných odvetviach. Niekto sa zaoberal kognitívnymi vedami a niekto psychobiológiou.

Preto sa architekti, inžinieri a programátori môžu stať dobrými dizajnérmi. Hlavná vec je pochopiť základy interakčného dizajnu a pochopiť, ako je postavená logika práce v UX. Môžete to urobiť sami alebo v špeciálnych kurzoch dizajnu UI / UX.

Kde začať

Môžete sa začať učiť UX dizajn pomocou kurzov, kníh a článkov. Hlavná vec je zostaviť správny tréningový plán, sformulovať ciele a prejsť od všeobecného ku konkrétnemu.

Proces vývoja produktu pozostáva z niekoľkých etáp. Na každom z nich robí UX dizajnér iné veci. Aby ste pochopili, aké znalosti sú potrebné pre prácu, musíte podrobne zvážiť každú z fáz:

• štúdium,
• analýza dát,
• dizajn,
• dizajn,
• analýza metrík.

Štúdium

Dizajnér UX sa stará o to, aby budúca stránka alebo aplikácia vykonala užitočnú akciu – predávala, inzerovala, pomáhala používateľom.

Ale je ťažké vytvoriť dobrý projekt, ak nerozumiete problému. Preto najprv dizajnér zbiera údaje o budúcom produkte. Skúma konkurentov, plánuje funkcie, premýšľa nad logikou práce.

Dobrou výskumnou metódou je rozhovor so skutočnými používateľmi. Pri vytváraní služby na nákup lístkov je lepšie ísť na stanicu a pohovoriť s cestujúcimi. Zistite, či bude pre nich jednoduchší nákup lístkov cez internet, či je výhodné platiť kartou, ako si chcú vyberať miesta v aute.

Počas výskumnej fázy by mal UX dizajnér aktívne hovoriť s potenciálnymi používateľmi a pýtať sa, čo potrebujú.

Analýza dát

Keď sú ciele produktu jasné, dizajnér premýšľa cez logiku interakcie.

Z cieľového publika sa vyberú najbystrejší predstavitelia a povie sa im o nich. Snažia sa predstaviť si, čo je pre túto osobu v produkte dôležité. Aké úlohy bude riešiť, akým spôsobom. Táto fáza vytvárania osobností pomáha dizajnérovi predstaviť si konkrétnych ľudí a pracovať pre nich.

Nebude to fungovať na uspokojenie požiadaviek celej cieľovej skupiny, ale môžete pracovať na želaniach najjasnejších predstaviteľov. Potom sa zvyšuje šanca, že ostatní budú tiež pohodlne používať produkt.

Pre každú z osôb vytvára dizajnér prípady použitia. Tu je dôležité predstaviť si, ako môže konkrétny človek interagovať s produktom. Aká funkčnosť je potrebná a čo možno v prvej fáze opustiť.

Skriptovanie vám pomáha premýšľať o štruktúre vašej aplikácie alebo webu, ako aj o základných prvkoch.

Dizajn

V tejto fáze sa vizualizujú všetky zozbierané údaje. Budujú štruktúru aplikácie, usporiadajú prvky pre každú obrazovku.

Dizajn nie je vytvorenie hotového dizajnu. Toto sú rýchle náčrty, ktoré sa zobrazujú používateľom. Testujú a zisťujú, či produkt v tejto podobe problém vyrieši.

Rozloženia v tejto fáze môžu byť úplne odlišné – nízke detaily a čiernobiele alebo svetlé a interaktívne. Niekto pracuje s papierom a perom, niekto používa špeciálne programy. Niektorí dizajnéri okamžite pracujú v grafických editoroch.

Fáza návrhu šetrí veľa času. Je rýchlejšie ukázať náčrt používateľovi a požiadať ho o názor, ako kresliť a kódovať produkt od začiatku a potom opravovať chyby.

Dizajn

Návrhár používateľského rozhrania je zodpovedný za vytvorenie finálnej verzie. Konečnú verziu si však často musíte nakresliť sami. Preto je užitočné získať základné zručnosti a naučiť sa dizajn používateľského rozhrania.

Vo fáze sa prototypy a wireframy používajú na vytvorenie vizualizácie, prácu s farbou, kompozíciu a typografiu, obsah dizajnu.

Na to sú vhodné grafické editory, v ktorých dizajnéri pracujú:

• Adobe Photoshop,
• Adobe XD,
• Skica,
• Figma.

Úlohou UX dizajnéra je sledovať použiteľnosť jednotlivých prvkov a stránok ako celku. Uistite sa, že pri pridávaní vizuálnych efektov sa nestratí hlavný význam produktu.

Analýza metrík

Po zverejnení prvej pracovnej verzie produktu UX dizajnér sleduje skutočné správanie používateľov. Na tento účel sa používajú analytické systémy a rôzne metriky.

Práca na produkte - vykonajte testy použiteľnosti a A / B. Zlepšite používateľskú skúsenosť, pridajte nové funkcie.

Ako sa naučiť UX dizajn

Dizajn UX sa skladá z rôznych odvetví a disciplín. Ide o vizuálny dizajn, prácu s používateľmi a výsledky testovania. Niektorí UX profesionáli pracujú jedným smerom, niektorí všetkým.

Ak sa chcete naučiť UX dizajn, musíte si predstaviť celú cestu vývoja produktu a zlepšiť zručnosti potrebné pre každú fázu.

Živá spätná väzba s učiteľmi

Neobmedzený prístup k materiálom kurzu

Stáž v partnerských firmách

Absolventský projekt od skutočného zákazníka

Garancia zamestnania v partnerských firmách pre absolventov, ktorí obhájili dizertačné práce

Pri štúdiu teórie nezabúdajte na praktické zručnosti. Vytvorte rozloženie webovej stránky alebo vymyslite mobilnú aplikáciu. Rozdeľte projekt na časti a starostlivo pracujte na každej časti: urobte prieskum a analýzu, potom prejdite na dizajn a dizajn. Iba prax pomáha dizajnérovi stať sa dobrým špecialistom.

UX / UI dizajn je efektívnym dizajnovým nástrojom pre akýkoľvek druh používateľského rozhrania, kde existujú dve hlavné kritériá: jednoduchosť interakcie a vzhľad. Hlavnou úlohou nástrojov je predať produkt alebo službu potenciálnemu zákazníkovi prostredníctvom používateľského rozhrania. Preto by jeho vizuálna časť mala človeka prilákať a mechanizmus práce by mal byť intuitívny, s určitými pokynmi a tipmi na ďalšie kroky.

Dizajn UX / UI: čo to je

Napriek tomu, že ich hlavná úloha je rovnaká - zvýšiť efektívnosť webového zdroja vo všeobecnosti a najmä úroveň predaja tovaru a služieb, ide o rôzne koncepty s rôznymi funkciami. Zároveň spolu úzko súvisia a zriedka sa uplatňujú oddelene. Aby ste pochopili, čo tieto nástroje znamenajú a aké spôsoby aplikácie majú, musíte zistiť, na čo je každý z nich určený, jeho možnosti a spôsoby aplikácie.

Dizajn používateľského rozhrania a jeho typy

Mali by ste začať s používateľským rozhraním. Ide o rozhranie určené na zabezpečenie prenosu najúplnejších informácií: od softvérových komponentov stránky k ľudskému používateľovi. Jednoducho povedané, používateľské rozhranie je odkaz, prostredníctvom ktorého publikum webového zdroja kontaktuje softvér.

Používateľské rozhranie slúži na dosiahnutie niekoľkých cieľov: po prvé, na vytvorenie interaktívnych ovládacích prvkov, kde môže návštevník stránky samostatne ovládať systém klikaním na tlačidlá, prechádzaním do sekcií atď. Po druhé, reagovať na akcie používateľov, to znamená ukázať systému, že vykonávané akcie nájdu správny a rýchly spôsob ich implementácie.

Práve na tieto účely slúži dizajn používateľského rozhrania: jeho hlavnou úlohou je implementovať vhodné podmienky pre interakciu človeka so systémom, vytvárať intuitívny a efektívny model. Príkladom ideálneho riešenia je možnosť, pri ktorej musí človek vynaložiť minimálne úsilie, či už ide o klikanie, písanie alebo navigáciu v sekciách. Požadovaný výsledok sa dosiahne v čo najkratšom čase. Existuje mnoho rôznych typov. Hlavná časť je však prezentovaná v nasledujúcich formách:

1. Grafický ovládací shell (GOU). Tu má osoba prístup ku všetkým prvkom viditeľným na monitore, aby ich mohla ovládať. Toto sa vykonáva prostredníctvom vstupného zariadenia: klávesnice alebo myši.
2. Zbierka webových stránok. Prostredníctvom nich prebieha interakcia s webovým zdrojom. Môžu byť založené na programoch, softvérových platformách alebo programovacích jazykoch.
3. Dotykové obrazovky. Ide o špeciálne zariadenia s obrazovkou na zadávanie informácií pomocou prstov alebo dotykového pera.

Pri vývoji používateľského rozhrania sa riadia nasledujúcimi parametrami:

• Najdôležitejšie prvky sú umiestnené na viditeľnom mieste a sú označené veľkým, krásnym písmom.
• Minimalizujte vodiace lišty a zarovnajte ich (okraj alebo stred), aby bolo rozhranie vizuálne príjemnejšie.

UI je úlohou implementácie jednoduchých, pohodlných a zároveň efektívnych spôsobov interakcie cieľového publika s konečným produktom. Dôležitou súčasťou práce je tu pozorovať, zbierať a analyzovať údaje o správaní návštevníkov stránok, na základe ktorých sa v budúcnosti prijímajú zodpovedné rozhodnutia. Dôležitými nástrojmi pre špecialistov používateľského rozhrania sú programy ako Photoshop, Adobe Illustrator, Cinema 4D a ďalšie typy grafických editorov.

Čo je dizajn UX

Táto sekcia dizajnu je mnohostranný koncept, ktorý zahŕňa obrovskú škálu rôznych disciplín: od interaktívneho a vizuálneho dizajnu až po použiteľnosť, teda schopnosť webového zdroja byť zrozumiteľný a atraktívny pre používateľa v daných podmienkach. Základy UX dizajnu ako skúsenosti ľudskej interakcie so systémom sú čisto subjektívne, pretože sú spojené predovšetkým s individuálnymi preferenciami veľkého množstva ľudí. Z tohto dôvodu sa trendy v tejto oblasti neustále menia. Hlavné aspekty vývoja kvalitného produktu sú:

1. Použiteľnosť, teda jednoduchosť používania a ergonómia. Tu je potrebné minimalizovať počet krokov, ktoré musí človek urobiť, aby dosiahol požadovaný výsledok.
2. Vlastnosti bežného používateľa. Musíte poznať svoje publikum a účely, na ktoré sa webový zdroj používa.
3. Formy a funkcie. Ak je na výber: vytvoriť krásnu schému alebo usporiadanie, ale obetovať funkčnosť alebo uprednostniť funkciu na úkor vzhľadu, vždy sa uprednostňuje druhá možnosť - hlavnú úlohu tu zohráva funkčnosť.
4. Intuitívne rozhranie. Ľudia na internete nemajú radi, keď im je prezentovaný produkt, ktorý je príliš komplikovaný na používanie. Dizajn UX by mal dešifrovať algoritmus akcií, ktoré musí osoba vykonať.

Vytváranie UX začína analýzou a vývojom jedinej charakteristiky priemerného používateľa. Na základe získaných informácií môže developer vytvoriť individuálne požiadavky na projekt. V ďalšej fáze sa špecialisti zaoberajú tvorbou, organizáciou a návrhom informačnej architektúry tak, aby človek mohol okamžite pochopiť princíp rozhrania a rozlíšiť, kde sú hlavné komponenty a kde sú sekundárne. Ďalej prichádza proces predurčenia budúceho rozhrania zdroja a pohodlia jeho používania. Táto fáza sa spravidla vykonáva ešte pred napísaním kódu.

Hlavné rozdiely medzi dizajnom UX a používateľského rozhrania

Ako už bolo uvedené, v praxi je dosť ťažké rozlíšiť medzi týmito dvoma pojmami - pri vývoji webového zdroja spolu dosť úzko súvisia. Používateľské rozhranie a skúsenosti veľmi často fungujú ako prvky, ktoré do seba vstupujú. V najjednoduchšej schéme sú ich rozdiely vyjadrené takto: UX je vzhľad objektu a používateľské rozhranie je spôsob, akým funguje. V praxi môžete jeden od druhého rozlíšiť podľa nasledujúcich príkladov dizajnu UX a používateľského rozhrania:

• Ak človek vidí dobre vybudovanú vnútornú štruktúru, dizajn informácií a vybudovanie hierarchie prvkov tak, aby návštevník stránky ľahko určil, kde je to hlavné a kde vedľajšie je UX.
• Keď sú odkazy, na ktoré sa už kliklo, zvýraznené, výsledky vo vyhľadávacom paneli sú navzájom odsadené a možnosť otvoriť sekciu „Košík“ v internetovom obchode je k dispozícii na ľubovoľnej stránke - toto je používateľské rozhranie.

V prvom prípade je hlavným cieľom špecialistu zabezpečiť pohodlnú interakciu publika stránky so softvérom, druhá možnosť znamená, že ikony, tlačidlá, nápisy, obrázky a všeobecný štýl dizajnu sú čo najpohodlnejšie a vizuálne príjemné.

Užitočné knihy o dizajne UX a používateľského rozhrania

Stať sa dobrým špecialistom v tejto oblasti je veľmi ťažké: musíte mať teoretické znalosti, praktické zručnosti a neustále si uvedomovať najnovšie trendy a zmeny na trhu. Profesionáli majú svoje vlastné spôsoby štúdia predmetu - knihy známych dizajnérov. Zoznam užitočnej literatúry je pomerne široký. Ale aby ste získali základné vedomosti, musíte si prečítať:

100 hlavných princípov dizajnu. Ako udržať pozornosť od Susan Weinshank. Toto je súbor nudných a účinných pravidiel.

Ohromujúci dizajn UX. Aj keď je kniha o UX dizajne určená pre odborníkov, začiatočníkov veľa naučí. Predovšetkým sú tu prezentované princípy organizácie pracovných postupov.