UX a UI Ing. Martin Klepek, Ph.D. Ing. Tereza Pražáková Design a správa webové stránky PROCES TVORBY WEBU Fáze objevování OBJEVOVÁNÍ EVALUACE VÝZKUM TVORBA Dle Jana Řezáče (Web ostrý jako břitva) UX (USER EXPERIENCE) •UX se zabývá celkovým zážitkem uživatele při interakci s webem. • •Zahrnuje všechny aspekty, jak uživatelé vnímají a interagují s webem, včetně toho, jak se cítí při používání. • •Klíčové prvky: Použitelnost, přístupnost, pohodlí, efektivita interakce, snadné pochopení, užitečnost, a emoční reakce. • •Cíl: Vytvořit příjemný, efektivní a smysluplný zážitek pro uživatele, který odpovídá jejich potřebám a očekáváním. Základní pojmy csvukrs UI (USER INTERFACE) •UI je specifická část UX, která se zaměřuje na vizuální prvek interakce s webem. Jedná se o rozhraní, přes které uživatel komunikuje s webem – stránky, tlačítka, ikony, … • •Klíčové prvky: Design, grafické prvky, rozložení, barvy, písma, tlačítka, ikony a animace. • •Cíl: Vytvořit intuitivní a esteticky příjemné rozhraní, které usnadňuje uživatelům navigaci a používání produktu. Základní pojmy csvukrs UX A UI – JAKÝ JE MEZI TÍM ROZDÍL? •UX je o celkovém zážitku a funkčnosti produktu z pohledu uživatele. •UI se více zaměřuje na konkrétní vizuální aspekty a interaktivní prvky, které uživatelé vidí a s kterými přímo interagují. • •Příklad: Při návrhu webové stránky se UX designér zaměří na to, jak snadno a efektivně mohou uživatelé najít informace nebo dokončit úkoly, zatímco UI designér se zaměří na to, jak tyto informace a funkce vypadají a jsou prezentovány. Základní pojmy csvukrs INFORMAČNÍ ARCHITEKTURA WEBU •Nejjednodušší vyobrazení - myšlenková mapa •Obsahuje jednotlivé podstránky, které se na webu budou nacházet. •Zahrnuje informace, které budou na jednotlivých podstránkách webu uvedené. • Zdroj obrázku: https://mladypodnikatel.cz/informacni-architektura-webu-t26202 Informační architektura webu (návod) | MladýPodnikatel.cz csvukrs WIREFRAME •Wireframe je základní vizuální návrh webové stránky, který ilustruje rozložení prvků, strukturu obsahu a funkcionality stránky. • •Představuje kostru webu, aniž by se zabýval designem, barvami nebo grafikou. • •Jeho hlavním účelem je poskytnout jasný přehled o tom, jak bude na jednotlivých podstránkách organizován obsah. • •Slouží jako komunikační nástroj mezi designéry, vývojáři a klienty. • Základní pojmy csvukrs WIREFRAME •Nepoužíváme barvy. •Vkládáme nadpisy, aby bylo jasné, kde se co bude nacházet. •Vkládáme prvky pro ovládání uživatelského rozhraní (tlačítka, posuvníky, …) •Nepíšeme konkrétní texty, pouze naznačujeme, kam je umístíme. (Copywriteři podle toho připravují vhodné texty). •Nevkládáme konkrétní obrázky, pouze naznačujeme, kam je umístíme. (Grafici podle toho připravují vhodné podklady). •Wireframy přebírá webový designér, který ve spolupráci s grafikem a copywriterem vytváří webovou stránku. • • Základní pojmy csvukrs WIREFRAME Zdroj obrázku: https://miro.com/templates/low-fidelity-wireframes/ Low Fidelity Wireframe Template & Example for Teams | Miro csvukrs STRUKTURA WEBU Základní pojmy NAVIGACE ZÁHLAVÍ OBSAH ZÁPATÍ csvukrs KOMPOZICE Co tvoří web: •Prostor •Text •Obrázky/videa/galerie •Tvary •Další grafické prvky • Proč to děláme: •Chceme, aby návštěvník webu vykonal akce, které jsme si dali za cíl. •Chceme, aby návštěvník nemusel nic hledat a intuitivně věděl, kde se co nachází. • Základní pojmy csvukrs KOMPOZICE •Prvky mají svou hierarchii, kterou jako designéři musíme dodržovat. •Zaměřujte se na podstatný obsah, aby návštěvník mohl udržet soustředěnost nad prvky, které jako designéři chceme, aby použil. •Tvořme web tak, jako by šlo o příběh. •U delších stránek střídejme kompoziční postupy. •Udržujme prvky v gridu – mřížce. •Snažme se o maximální jednoduchost. •Prázdné místo nemusí být na škodu. • • • Základní pojmy csvukrs GRID Základní pojmy csvukrs GRID Základní pojmy csvukrs GESTALT PRINCIPY •Zákon podobnosti - věci, které jsou si podobné, mají tendenci být vnímány jako skupina nebo celek. •Zákon blízkosti - věci, které jsou blízko sebe, mají tendenci být vnímány jako skupina nebo celek. •Zákon uzavření – lidé mají tendenci doplňovat prázdná místa, aby viděli neúplné obrazce jako kompletní. •Zákon společného osudu - prvky, které se pohybují stejným směrem nebo jsou umístěny na stejné ose, jsou vnímány jako součást stejného celku. • Základní pojmy csvukrs JAK POSKLÁDAT JEDNOTLIVÉ ELEMENTY NA WEBU? •Web musí plnit svůj cíl. •Každý umístěný prvek na webu by měl vést k jeho naplnění. •Přemýšlejte nad tím, jaké informace chce návštěvník mít předtím, než vykoná konverzi a ty mu naservírujte jako první. • •Pro dovedení uživatele k vytyčenému cíli vám pomohou CTA (Call to Action) tlačítka. •Jedná se o tlačítko, které vyzývá uživatele k provedení určité akce. •Např. prodejní CTA: • Základní pojmy KOUPIT NYNÍ – SLEVA 20 % csvukrs RADY, TIPY •Vše chceme držet maximálně jednoduché. •Hlídáme kontrast prvků. •Web stavíme do rozvržení mřížky (gridu). •Zarovnáváme na pixel přesně. •Snažíme se maximálně vyzdvihnout prvky, které vedou k naplnění cíle webu. •Web držíme vizuálně jednotný. •Experimenty spíše ne. •Lidé mají rádi to, co znají. •Dodržujeme vizuální identitu značky a v žádném případě již stanovaná pravidla neohýbáme k obrazu svému. • Základní pojmy csvukrs RADY, TIPY NENUŤTE UŽIVATELE PŘEMÝŠLET. Lidé chtějí vědět, co se stane po kliknutí na tlačítko ještě předtím, než to udělají. Takto by měla fungovat celá jejich návštěva na webu. Základní pojmy csvukrs Týmová práce Ing. Martin Klepek, Ph.D. Ing. Tereza Pražáková Design a správa webové stránky •Připravte wireframy pro nový web.