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
[editovat | editovat zdroj]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í
[editovat | editovat zdroj]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ání 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
[editovat | editovat zdroj]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
[editovat | editovat zdroj]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
[editovat | editovat zdroj]Základy designového procesu
[editovat | editovat zdroj]![](http://upload.wikimedia.org/wikipedia/commons/thumb/2/21/UX_Design.png/221px-UX_Design.png)
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í
[editovat | editovat zdroj]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
[editovat | editovat zdroj]![](http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/New_Readers_User_personas%2C_Tolu%2C_Nigeria.pdf/page1-220px-New_Readers_User_personas%2C_Tolu%2C_Nigeria.pdf.jpg)
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:
- jméno,
- portrét - ilustrace nebo fotografie
- demografické informace - věk, pohlaví, zaměstnání
- potřeby vztahující se k produktu
- výzvy a překážky, kterým persona čelí, a s nimiž může produkt pomoct
- citát, který reprezentuje danou personu
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
[editovat | editovat zdroj]![](http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Empathy_map.jpg/220px-Empathy_map.jpg)
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
[editovat | editovat zdroj]![](http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Wireframe_of_Nicolas_Garden_mobile_app.jpg/220px-Wireframe_of_Nicolas_Garden_mobile_app.jpg)
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í:
- základní wireframe, prezentující strukturu a sloužící k rychlé vizualizaci na začátku projektu,
- středně pokročilý wireframe, který již obsahuje jednoduché vizuální prvky, např. barvy, fonty a ikony,
- 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
[editovat | editovat zdroj]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 prky 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]
Související články
[editovat | editovat zdroj]- Designové myšlení
- Human Centered Design
- Design služeb
- Human-computer interaction
- Uživatelské rozhraní
- Wireframe
- Prototyp
- Softwarové inženýrství
Odkazy
[editovat | editovat zdroj]Externí odkazy
[editovat | editovat zdroj]- Mezinárodní nadace Interaktivního designu International Design Foundation, která byla založena v USA v roce 2002 a nabízí kurzy a vzdělávání v oblasti UX
- UXInstitute - Ústav UX, sídlící v Irsku, který nabízí kurzy a mentoring se zaměřením na UX
- World Usability Congress - mezinárodní UX konference, která se pořádá v Rakousku
- Postup vytváření UX Person od výzkumu uživatelů po využití UX Person v designu
- Využití mapy empatie pro nábor zaměstnanců do firmy
Reference
[editovat | editovat zdroj]V tomto článku byl použit překlad textu z článku User experience design na anglické Wikipedii.
- ↑ a b c The history of UX (User Experience). www.uxdesigninstitute.com [online]. 2023-01-09 [cit. 2024-05-17]. Dostupné online. (anglicky)
- ↑ a b CPACC, Tereza Kosnarová. Stručná historie UX designu [online]. 2021-08-11 [cit. 2024-06-02]. Dostupné online. (anglicky)
- ↑ Co je UX a UI design. http://cojeuxui.cz [online]. [cit. 2024-04-15]. Dostupné online.
- ↑ What is UI Design?. Figma [online]. [cit. 2024-06-02]. Dostupné online. (anglicky)
- ↑ What is User Interface (UI) Design? — updated 2024. The Interaction Design Foundation [online]. [cit. 2024-06-02]. Dostupné online. (anglicky)
- ↑ 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.
- ↑ 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.
- ↑ WRITERJS. English: The subject areas of user experience design. [s.l.]: [s.n.] Dostupné online.
- ↑ 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)
- ↑ 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)
- ↑ AFFAIRS, Assistant Secretary for Public. Usability Testing. www.usability.gov [online]. 2013-11-13 [cit. 2023-01-19]. Dostupné online. (anglicky)
- ↑ What are UX personas and what are they used for? - UX Design Institute. www.uxdesigninstitute.com [online]. 2022-05-25 [cit. 2024-05-17]. Dostupné online. (anglicky)
- ↑ 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)
- ↑ What is Wireframing? The Complete Guide [Free Checklist]. Figma [online]. [cit. 2024-05-17]. Dostupné online. (anglicky)
- ↑ 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.
- ↑ 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.