Share to: share facebook share twitter share wa share telegram print page

User experience design

User experience design (také UX design, UXD, UED nebo XD) je proces definování zážitku, který by měl uživatel prožívat při interakci s digitálním produktem, webovou stránkou, výrobkem nebo službou. Rozhodnutí o konkrétním návrhu v rámci designového procesu se zpravidla řídí především výzkumem, analýzou dat a výsledky uživatelského testování než estetickými preferencemi a názory. Na rozdíl od designu uživatelského rozhraní, který se zaměřuje především na technické a grafické aspekty návrhu produktu, UX design se soustředí na aspekty uživatelského vnímání produktu, jako je např. jejich použitelnost a užitečnost.

Historie

Prvotní „zárodky“ UX designu lze sledovat až do starověké Číny. Tradiční učení Feng-šuej kladlo důraz na soulad a harmonii mezi prostorem a tokem energie, je to tedy metoda uspořádání prostoru tak, aby se v něm člověk cítil příjemně. Moderní vývoj můžeme sledovat od počátku 20. století. Mezi významná jména zde patří Frederick Winslow Taylor a Henry Ford, kteří zkoumali interakci zaměstnanců s jejich pracovními nástroji.[1] Ve 40. letech provedla Toyota podobný průzkum, jehož cílem bylo přizpůsobit pracovní nástroje zaměstnancům. Také vytvořila první uživatelské testování, při kterém zaměstnanci mohli zastavit výrobní pás a sdělit své vlastní připomínky k procesu.[2] Za dalšího průkopníka UX jsou považovány Bellovy laboratoře. Od roku 1945 do 50. let se podílel na vývoji telefonů. Jako první komunikoval vývoj produktu s psychologem. Henry Dreyfuss byl průmyslový designér, který v roce 1955 publikoval článek Designing for People v časopise Harvard Business Review , kde poukazoval na význam cílení na uživatele při vytváření produktů.[1] Dreyfuss byl také autorem prvních UX person – Joe (muž), Josephine (žena) a Joe Jr (šestileté dítě)[2]. Xeror bylo výzkumné středisko, které v 70. letech sdružovalo psychology a inženýry s cílem inovativního vývoje technologií. V dnešní době je UX významným prvkem vývoje produktů, aplikací a webů.[1]

Design uživatelského rozhraní

Zatímco UX design se věnuje celkové uživatelské zkušenosti, User Interface design (UI Design) je zaměřen výhradně na vizuální prvky produktu a je viditelný na první pohled. Na webových stránkách a v aplikacích je to právě UI Design, který uživatele vizuálně provádí. Týká se animací, obrázků, použitých barev a designu dalších funkčních prvků.[3]

User Interface design, zkráceně UI design nebo UI, česky uživatelské rozhraní a design uživatelského rozhraní, je princip rozšiřující uživatelský zážitek z digitálního produktu, a to konkrétně po vizuální a interaktivní stránce. UI aplikuje interaktivní funkce a jejich vizuální podobu na design vytvořený pomocí UX. Jedná se tedy například o podobu různých ikon, navigací, tlačítek, ale také o převod hlasu na řeč nebo příkazy založené na gestech a dalších funkčních i jiných prvků. UI design zohledňuje designové principy a psychologii uživatelů, čímž vytváří uživatelský přívětivá a poutavá rozhraní.

User interface se dělí do tří základních typů:

  • Grafický UI (GUI) – základní typ UI, upravuje prvky designu po jejich vzhledové stránce a je založen na systému obrázků a ikon. Uživatel interaguje s GUI přes obrazovku.
  • UI založený na gestech, nebo také VR (virtuální realita) – převádí gesta a pohyby ve 3D prostoru do příkazů, které potom digitální produkt zpracovává.
  • UI založený na hlasovém zadávání, také VUI (Voice-controlled interface) – zpracovává hlas uživatele do příkazů. VUI využívají například hlasoví asistenti jako je Siri nebo Alexa.[4][5]

Principy funkčního designu

Podle Donalda A. Normana, autora knihy Design pro každý den, se UX design v praxi využívá tak, aby pomohl:

  • usnadnit orientaci v tom, co lze s daným produktem dělat (pomocí nastavení limitů) – např. ze stavebnicového modelu motorky lze postavit motorku i bez návodu díky jednoduchosti stavebnicových dílků
  • všechny prvky maximálně zviditelnit a zpřehlednit
  • usnadnit vyhodnocení toho, kde se uživatel nachází v procesu užívání dané věci – např. při objednávání věci na e-shopu by měl uživatel jednoduše zjistit, co zbývá vyplnit do úspěšného objednání
  • uplatňování přirozeného mapování mezi úmyslem a požadovanou akcí, tedy navést přirozeně uživatele k jeho cíli[6] – např. při zapnutí pračky se rozsvítí kontrolky, které navedou uživatele k tomu, co ještě potřebuje nastavit předtím, než pračku spustí.

Funkčně designovaná služba

Základem každé služby je promyšlený plán, založený na přínosu pro zákazníka, použitelnosti, komplexitě a empatii. Uživatelé očekávají, že jim poskytnutá služba přinese přidanou hodnotu; bude srozumitelná, dostupná (cenově i časově), a uživatelsky přívětivá. Nezbytností pak je také bezchybné fungování služby a ucelenost všech interaktivních prvků.[7]

Metody a procesy

Základy designového procesu

Součásti UX designu[8]

UX design často navazuje na přístupy používané při designovém myšlení, human-computer interaction (HCI) a user-centered design, a také si při návrhovém procesu půjčuje elementy z interakčního designu, grafického designu, informační architektury, uživatelského výzkumu a dalších.

Jednou z nejdůležitějších podmínek při designovém procesu, kterou musejí UX designéři při tvorbě vnímat, je, že oni nejsou cílovým uživatelem, a tudíž bez průběžného ověřování a testování svých nápadů a domněnek na cílové skupině nemají pro svůj návrh empirické podklady.[9] Jedná se o tzv. efekt falešného konsenzu, kdy lidé předpokládají, že ostatní sdílí jejich pohled na svět a v dané situaci se budou chovat podobně jako by se chovali oni sami. [10]

Uživatelské testování

Uživatelské testování je nejčastější metoda používaná k testování designových návrhů. Hlavním cílem při provádění testu je zjistit, jestli je cílová uživatelská skupina schopna s návrhem, prototypem, výrobkem nebo značkou bez problémů interagovat. Při testování UX designéři sledují především dva cíle: jestli je design jejich produktu úspěšný (uživatel mu rozumí, a ví, jak ho používat), a pokud úspěšný není, tak jak ho mohou zlepšit. Testování návrhu je jedna z nejdůležitějších částí designového procesu, proto se UX designéři snaží testovat své návrhy tak často, jak jim to jen prostředky a situace umožňují.[11]

UX Persona

UX persona

UX persona je fiktivní charakter, který reprezentuje potencionálního uživatele produktu. Je důležitá pro hlubší pochopení potřeb uživatelů, v ideálním případě jí tedy předchází výzkum cílové skupiny. Cílí na empatický přístup k uživateli a samotného uživatele staví do centra designového procesu.

Běžný popis UX persony obsahuje:

UX persona se dělí na následující typy:

  • Proto persona – vytváří se na základě již existujících znalostí o cílové skupině, není spojena se samostatným výzkumem a je běžně využívaná např. na workshopech
  • Kvalitativní persona – vytváří se na základě kvalitativního výzkumu menšího počtu uživatelů, a pracuje tak s přesnějšími daty, než proto persona
  • Statistická persona – vytváří se na základě jak kvalitativního, tak kvantitativního výzkumu. Ze všech typů je nejnákladnější a nejkomplexnější. Poskytuje však nejpřesnější data.[12]

Mapa empatie

Mapa empatie (Empathy Map)

Mapa empatie (angl. emapthy map), slouží k ještě podrobnějšímu náhledu na potřeby cílové skupiny uživatelů a zároveň pomáhá identifikovat prostor k inovaci produktu. Skládá se ze čtyř kvadrantů:

  • co uživatel říká,
  • co uživatel dělá,
  • co si uživatel myslí,
  • co uživatel cítí,

zároveň může popisovat i bolestivá místa (výzvy, překážky) a zisk (uživatel potřebuje od produktu). [13]

Wireframe

Wireframe mobilní aplikace Nicolas Garden, v podobě náčrtu na papíře. Ilustrační obrázek.

Wireframe je základní kostra designu aplikace nebo webu. Jeho podstatou je prezentace základních komponentů stránky, jako je rozložení jednotlivých prvků, navigace a interaktivní prvky. Není bohatý na vizuální prvky a využívá tzv. placeholder text (např. lorem ipsum).

Podle úrovně vypracování můžeme wireframy členit do následujících úrovní:

  1. základní wireframe, prezentující strukturu a sloužící k rychlé vizualizaci na začátku projektu,
  2. středně pokročilý wireframe, který již obsahuje jednoduché vizuální prvky, např. barvy, fonty a ikony,
  3. kompletní wireframe, který obsahuje jak vizuální, tak interaktivní prvky, ne však v takovém rozsahu, jako prototyp.

Mezi nejefektivnější praktiky při vytváření wireframů patří jednoduchost návrhu, udržení konzistence designu, výběr správné velikosti pro různé obrazovky a zejména identifikace cílů aplikace nebo webu. [14]

Prototyp

Prototypy jsou návrhy designu aplikací a webů, které vyjadřují jak jejich vizuální, tak funkční náležitosti (spojují tedy prvky UX a prvky UI). Prototyp by měl dobře komunikovat cíle a vlastnosti aplikace a měl by být náhledem na to, zda aplikace bude uživatelsky přívětivá a bude dobře oslovovat svou cílovou skupinu. [15] V softwarovém inženýrství je potom prototyp nejčastěji vnímán jako nástroj, který pomáhá analyzovat prostor ke zlepšení designového návrhu a přispívá tak k jeho zdokonalování. Prototyp je důležitý pro úspěšnost celé aplikace, protože je na jeho základě sbírána zpětná vazba při uživatelském testování.

K vytváření a úpravě prototypů se využívá mnoho různých metod. Jednou z nich je tzv. zkušené prototypování (angl. experienced prototyping), které se soustředí na interakci s aplikací jako s celkem. Dalším příkladem je tradiční prototypování, což je metoda, která je zaměřena spíše na design jednotlivých prvků. [16]


Odkazy

Reference

V tomto článku byl použit překlad textu z článku User experience design na anglické Wikipedii.

  1. a b c The history of UX (User Experience). www.uxdesigninstitute.com [online]. 2023-01-09 [cit. 2024-05-17]. Dostupné online. (anglicky) 
  2. a b CPACC, Tereza Kosnarová. Stručná historie UX designu [online]. 2021-08-11 [cit. 2024-06-02]. Dostupné online. (anglicky) 
  3. Co je UX a UI design. http://cojeuxui.cz [online]. [cit. 2024-04-15]. Dostupné online. 
  4. What is UI Design?. Figma [online]. [cit. 2024-06-02]. Dostupné online. (anglicky) 
  5. What is User Interface (UI) Design? — updated 2024. The Interaction Design Foundation [online]. [cit. 2024-06-02]. Dostupné online. (anglicky) 
  6. NORMAN, Donald A. Design pro každý den. 1. vyd. v českém jazyce. vyd. Praha: Dokořán 271 s. s. Dostupné online. ISBN 978-80-7363-314-1, ISBN 80-7363-314-0. OCLC 697265053 S. 212. 
  7. Skvělé služby : jak dělat služby, které vaše zákazníky nadchnou. 1. vyd. vyd. Praha: Grada 160 s. s. Dostupné online. ISBN 978-80-247-4711-8, ISBN 80-247-4711-1. OCLC 842344251 S. 52–54. 
  8. WRITERJS. English: The subject areas of user experience design. [s.l.]: [s.n.] Dostupné online. 
  9. EXPERIENCE, World Leaders in Research-Based User. You Are Not the User: The False-Consensus Effect. Nielsen Norman Group [online]. [cit. 2023-01-19]. Dostupné online. (anglicky) 
  10. ROSS, Lee; GREENE, David; HOUSE, Pamela. The “false consensus effect”: An egocentric bias in social perception and attribution processes. Journal of Experimental Social Psychology. 1977-05, roč. 13, čís. 3, s. 279–301. Dostupné online [cit. 2024-05-23]. doi:10.1016/0022-1031(77)90049-X. (anglicky) 
  11. AFFAIRS, Assistant Secretary for Public. Usability Testing. www.usability.gov [online]. 2013-11-13 [cit. 2023-01-19]. Dostupné online. (anglicky) 
  12. What are UX personas and what are they used for?. UX Design Institute [online]. 2022-05-25 [cit. 2024-05-17]. Dostupné online. (anglicky) 
  13. DAM, Rikke Friis; SIANG, Teo Yu. Empathy Map – Why and How to Use It. The Interaction Design Foundation [online]. 2024-05-20 [cit. 2024-05-17]. Dostupné online. (anglicky) 
  14. What is Wireframing? The Complete Guide [Free Checklist]. Figma [online]. [cit. 2024-05-17]. Dostupné online. (anglicky) 
  15. HOUDE, Stephanie; HILL, Charles. What do Prototypes Prototype?. [s.l.]: Elsevier Dostupné online. ISBN 978-0-444-81862-1. doi:10.1016/b978-044481862-1.50082-0. S. 367–381. 
  16. LIM, Youn-Kyung; STOLTERMAN, Erik; TENENBERG, Josh. The anatomy of prototypes: Prototypes as filters, prototypes as manifestations of design ideas. ACM Transactions on Computer-Human Interaction. 2008-07-07, roč. 15, čís. 2, s. 7:1–7:27. Dostupné online [cit. 2024-05-17]. ISSN 1073-0516. doi:10.1145/1375761.1375762. 

Související články

Externí odkazy

Kembali kehalaman sebelumnya