2. PRINCIPY WEBOVÉHO DESIGNU Doc. Ing. Martin Klepek, Ph.D. Ing. Tereza Ikášová Design a správa webové stránky V této přednášce si řekneme více o webdesignu jako takovém. Podstatě tohoto termínu a jeho různé interpretaci. Probereme také heuristiky, což jsou mnoha lety prověřené zvyklosti uživatelského designu Marketingový výzkum . 1.Principy designu webu 2.Interakční design 3.Nielsenovy heuristiky Struktura přednášky Principy webového designu WEBOVÝ DESIGN OBECNĚ •Webdesign je mezioborová disciplína, která využívá poznatky vizuální komunikace, interakčního designu, psychologie (především ovlivňování a rozhodování lidí), marketingu, brandingu, copywritingu, gamifikace a dalších oborů. •Cílem webdesignu je vytvořit funkční webové stránky nebo webové aplikace. Principy webového designu csvukrs WEBOVÝ DESIGN OBECNĚ •Funkční znamená, že splňují především následující kritéria : •Na web přicházejí relevantní návštěvníci. •Web je ovlivňuje/pomáhá jim tak, že provedou konverzní akci (akce), která je v souladu se záměrem tvůrce webu. •Návštěvníci se na web vrací a provádějí stejnou nebo další akce. •Web návštěvníky zaujme natolik, že o něm mluví sami od sebe s dalšími členy cílové skupiny webu. • Principy webového designu csvukrs WEBOVÝ DESIGN DEFINICE Nejjednodušší je vysvětlit webdesign jako průnik vizuální komunikace, obsahové strategie a interakčního designu, které doplňují vhodné marketingové aktivity. Principy webového designu csvukrs WEBOVÝ DESIGN OBECNĚ •Webdesigner tedy vytváří vizuální systém pro obsah, který vhodným způsobem strukturuje a vzájemně provazuje tak, aby bylo dosaženo maximálního účinku vzhledem k cílům webu a jeho konverzním akcím. •Tvorba webových stránek klade vyšší důraz na kvalitní obsah, u webových aplikací je nejdůležitější složkou interakční design. Principy webového designu csvukrs WEBOVÝ DESIGN OBECNĚ •Cílem webu je přinášet majiteli a/nebo návštěvníkům stránek užitek. •Tomu by měla být podřízena snaha webdesignera – aby se vyplatily náklady spojené s tvorbou webu a aby web dobře sloužil svému účelu, tj. například v případě komerčních stránek vytvořil ekonomický zisk. Principy webového designu csvukrs Interakční design •Interakční design je jedním z nových oborů z kategorie výpočetní techniky a je výrazem ze světa tvorby webových stránek a aplikací. •Často je chybně zaměňován s pojmem informační architektura. Je to obor zabývající se návrhem interakcí. Principy webového designu http://wiki.knihovna.cz/index.php/Interak%C4%8Dn%C3%AD_design Interakční design •Tradiční design se zabývá monologem, jako je tomu například u tištěných médií. •U interakčního designu jde o dialog, který uživatel povede například s počítačem, mobilním telefonem, bankomatem apod. •Interakční design je označován za jednu z oblastí User Experience Designu (UX) zabývající se návrhem aplikací uspokojujících potřeby uživatelů a současně naplňujících funkční a obchodní požadavky. Principy webového designu http://wiki.knihovna.cz/index.php/Interak%C4%8Dn%C3%AD_design Interakční design – základní prvky •Pohyb: interakce je typ komunikace a komunikace je typem pohybu. •Když mluvíme, rozhýbáváme naše mluvící ústrojí, když píšeme, používáme ruce. •Pohyb je spouštěčem akce - například když klikneme na myš, čímž akce pokračuje dál - klikáme na konkrétní věc na obrazovce (například na odkaz na webu) a získáváme zpětnou vazbu od zařízení (otevírá se stránka). Principy webového designu https://wikisofia.cz/wiki/Principy_interak%C4%8Dn%C3%ADho_designu#cite_note-3 Interakční design – základní prvky •Prostor: •Pohyb ale i všechny interakce se dějí v prostoru (i ve virtuálním prostoru na internetu) a prostor těmto pohybům dodává kontext. •Interakční designéři pak pracují v prostoru 2D nebo 3D, v analogových i digitálních obrazovkách; Principy webového designu https://wikisofia.cz/wiki/Principy_interak%C4%8Dn%C3%ADho_designu#cite_note-3 Interakční design – základní prvky •Čas: všechny interakce se dějí v čase. •Tento čas může být krátkého charakteru (kliknutí na myš) nebo dlouhého (archivované desítky let staré bulletiny). •Interakční designér musí mít dobrou představu o čase a umět s ním dobře zacházet (některé procesy trvají pár okamžiků, jiné jsou dlouhodobějšího charakteru a vyžadují čas na zprocesování). Principy webového designu https://wikisofia.cz/wiki/Principy_interak%C4%8Dn%C3%ADho_designu#cite_note-3 Interakční design – základní prvky •Vzhled: vzhled objektu nám napovídá o tom, jak se to chová a jak bychom s objektem měli interagovat. •Tlačítko nám například napovídá, že bychom ho měli stisknout. Principy webového designu SouvisejÃcà obrázek https://wikisofia.cz/wiki/Principy_interak%C4%8Dn%C3%ADho_designu#cite_note-3 Interakční design – základní prvky •Zvuk: tvoří malou část interakčního designu, i tak je důležitý například u zařízení jako jsou budíky, meteostanice, chytré domácnosti nebo alarmy. •Zvuk má tři hlavní komponenty, které mohou být upravovány designérem: výška, hlasitost a kvalita. Principy webového designu https://wikisofia.cz/wiki/Principy_interak%C4%8Dn%C3%ADho_designu#cite_note-3 Procesy interakčního designu •Identifikování potřeb a stanovení požadavků: abychom navrhli produkt, který bude lidem užitečný, musíme vědět, co tito lidé potřebují; •Vyvinutí alternativních návrhů, které tyto požadavky splňují: v této fázi je nutné si připravit relevantní alternativní plány, které by mohly k cílenému produktu vést a vybrat nejlepší z nich; Principy webového designu https://wikisofia.cz/wiki/Principy_interak%C4%8Dn%C3%ADho_designu#cite_note-3 Procesy interakčního designu •Vytvoření interaktivních verzí produktu, jejichž kvalita může být vyhodnocena: nejjednodušší způsob, jak zjistit, zda lidem produkt vyhovuje, je umožnit jim interagovat s interaktivním prototypem; •Hodnocení výsledného produktu a měření jeho přijatelnosti: evaluace a testování produktu je nutnou součástí jeho vývoje, při které se zjišťují nedostatky a chyby produktu a jeho všeobecná vhodnost pro užívání. Principy webového designu https://wikisofia.cz/wiki/Principy_interak%C4%8Dn%C3%ADho_designu#cite_note-3 Metody interakčního designu •Podle Coopera, Reimanna a Cronina nastává největší problém při dodržování designu orientovaného na uživatele ve chvíli, kdy jsou potřeby uživatele potlačovány například ze strany vývojářů nebo marketérů, kteří se nejsou schopni nebo nechtějí vcítit do situace na trhu a místo toho implementují svoje představy o fungování produktu do jeho vývoje bez přihlížení na potřeby cíleného uživatele produktu. Principy webového designu https://wikisofia.cz/wiki/Principy_interak%C4%8Dn%C3%ADho_designu#cite_note-3 Když nemáte výzkum, dejte tam heuristiky! Principy webového designu A teď budu kadeřník! Jiří Babica jako youtuber narazil na zlatou žílu - iDNES.cz NIELSENOVY HEURISTIKY •Jednou z možností jak testovat aplikaci bez využití uživatelů je heuristická analýza, která vychází z poznatků, které byly získány dlouhodobým pozorováním. •Jedná se o soubor zkušeností, jak jsou uživatelé zvyklí se systémem pracovat a co od něho očekávají. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation NIELSENOVY HEURISTIKY •Jednou z heuristických analýz je Nielsenova heuristická analýza, která se skládá z deseti základních pravidel, které je nutno zkontrolovat, aby byla zajištěna odpovídající použitelnost a intuitivní ovládání aplikace. Tyto pravidla je dobré mít na paměti již při vytváření návrhu UI. •NNGroup: •https://www.nngroup.com/articles/ten-usability-heuristics/ • Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation NIELSENOVY HEURISTIKY •1) Visibility of system status •Stav systému musí být vždy viditelný. •Uživatel musí vždy vidět, v jakém stavu se aplikace nachází, jestli čeká na nějaký vstup, nebo provádí určitou operaci, například pomocí ikonky přesýpacích hodin, nebo rotujícího kolečka. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu The History of Elevators From Top to Bottom NIELSENOVY HEURISTIKY •2) Match between system and the real world •Systém „mluví uživatelským jazykem“ a je co nejvíce přizpůsoben tak, aby práce s ním připomínala práci v reálném světě. •Toto pravidlo se vztahuje převážně k vizualizaci informací. Například ikona koše opravdu vypadá jako koš a přetažení souborů na tuto ikonu způsobí přesunutí souborů do koše, stejně tak jako v reálném světě vyhazujeme papírové soubory. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu Obsah obrázku text Popis byl vytvořen automaticky NIELSENOVY HEURISTIKY •3) User control and freedom •Systém musí poskytovat uživateli možnost vrátit ze z určitého stavu zpět, nebo zrušit zvolenou akci. •Nejčastěji se to řeší pomocí tlačítek, nebo odkazů s nápisem Zpět, Undo, Storno. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu Záznam obrazovky 2022-09-29 v 10.17.15 NIELSENOVY HEURISTIKY •4) Consistency and standards •Systém by měl být konzistentní jak vzhledově, tak i co se týče ovládání. •Popisky stejných akcí by měli mít stejný název, nemělo by se střídat např. uložit/upravit. Stejně tak by se měl používat výchozí vzhled, dle použitého systému a standardní ovládací prvky. Např. nepoužívat vzhled prvků z platformy Mac pro program, který poběží na platformě Windows. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu Obsah obrázku text, nástroj Popis byl vytvořen automaticky Obsah obrázku přeprava, vozík Popis byl vytvořen automaticky NIELSENOVY HEURISTIKY •5) Error prevention •Systém by měl předcházet chybovým stavům, např. pomocí potvrzovacích dialogů a varování. •Je vhodné upozornit uživatele, pokud zapomene vyplnit povinné položky formuláře, stejně tak jako zeptat se, že si opravdu přeje smazat vybraný adresář i přesto, že není prázdný. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu NIELSENOVY HEURISTIKY •6) Recognition rather than recall •Uživatel by měl být při používání systému co nejméně kognitivně zatížen. •To zajistíme tím, že bude systém nabízet pouze volby, které lze vybrat a ostatní skryje, nebo vizuálně zneplatní. •Dále je vhodné použití drobečkové navigace, stránkování, nebo zvýraznění pozice ve stromové struktuře, aby uživatel ihned viděl jeho aktuální pozici v systému. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu Drobečková navigace – CvičebniceOnline NIELSENOVY HEURISTIKY •7) Flexibility and efficiency of use •Systém musí být efektivní a jednoduchý pro použítí. •Zároveň však musí poskytovat i dostatečný počet voleb, které využijí hlavně pokročilí uživatelé. •V rámci možností je také vhodné poskytovat uživatelům klávesové zkratky anebo funkce automatického doplňování vstupních polí. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu How to copy and paste on Mac - Apple Support NIELSENOVY HEURISTIKY •8) Aesthetic and minimalist design •Systém by měl zobrazovat co nejméně informací a voleb, tak aby práce v něm byla co nejrychlejší, přehledná, a uživatel musel co nejméně přemýšlet. •Položky a volby, které nejsou často využívány, není vhodné umísťovat přímo na běžně používané obrazovky. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu Obsah obrázku text Popis byl vytvořen automaticky NIELSENOVY HEURISTIKY •9) Help users recognize, diagnose, and recover from errors •Systém by měl uživateli poskytovat srozumitelné chybové zprávy tak, aby měl uživatel možnost chyby obratem opravit a věděl, co po něm systém vyžaduje. •Zprávy by měly být v běžném jazyce a musí zároveň informovat o možném řešení problému. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu NIELSENOVY HEURISTIKY •10) Help and documentation •Systém musí poskytovat nápovědu přesně tam, kde jí uživatel očekává a v situacích, kdy je nejvíce potřeba. •Například vyplňování formulářů, zakládaní nových projektů apod. •Nápověda by měla být buď kontextová (přímo u daného prvku), nebo globální s možností vyhledávání. Principy webového designu http://blog.vojtasvoboda.cz/nielsens-heuristic-evaluation Principy webového designu Obsah obrázku text Popis byl vytvořen automaticky Cvičení Principy webového designu •1: Visibility of System Status •2: Match Between the System and the Real World •3: User Control and Freedom •4: Consistency and Standards •5: Error Prevention •6: Recognition Rather than Recall •7: Flexibility and Efficiency of Use •8: Aesthetic and Minimalist Design •9: Help Users Recognize, Diagnose, and Recover from Errors •10: Help and Documentation SHRNUTÍ PŘEDNÁŠKY •Definovali jsme podstatu webového designu v obecné rovině. •Vysvětlili jsme si základní prvky a také postupy interakčního designu. •Prošli jsme deset Nielsenových heuristik, což jsou pravidla vycházející z dlouhodobého pozorování. Jedná se o soubor zkušeností, jak jsou uživatelé zvyklí se systémem pracovat a co od něho očekávají. Principy webového designu Děkuji za pozornost. Principy webového designu