Webové aplikace

Webové aplikace

• chytré webové stránky
• dynamické, ne-statické, interaktivní
• prozatím pouze základy JS ve WBA
• eshopy, aukce, osobní stránky, portály, ...
• rozdělujeme na frontend a backend

Frontend

Frontend

• vše co vidí uživatel
• důležitá část — jediné, s čím uživatel přímo interaguje
• design stránky
• user experience & user interface (UX & UI)

Technologie

• jazyky: HTML, CSS, JS
• framework
• frameworky: Vue, React, Angular

Backend

Backend

• vše co nevidí uživatel
• důležitá část — její rychlost a stabilita
• data, databáze, e-maily, komunikace, kalkulace, zpracování, ...

Technologie

• jazyky: PHP, JS, Java, C#
• frameworky: JS — express, PHP — nette

Fullstack

• propojení frontendu a backendu
• většinou programátor, pozice ve firmě, ...
• cílem předmětu: fullstack programátor

Teorie uživatelského prostředí

Uživatelské prostředí

• ovládání určitého softwaru
• chování softwaru vzhledem k uživateli
• jak daný software vypadá

User Interface

• = uživatelské rozhraní, UI
• zevnějšek, to co vidí uživatel
• pocit z designu
• přehlednost

User Experience

• = uživatelský zážitek, UX
• jak se stránka chová vůči uživateli
• zobrazování dialogů, funkčnosti, ...

Nástroje pro UI a UX

• Adobe XD
• Figma
• InVision
• Sketch
• ...

Zásady

Konzistence

Rozhraní by mělo být vždy konzistentní (stejné chování pro stejné kontrolní prvky, stejné vzhledově) ve všech částech aplikace.

Přívětivost

Rozhraní by mělo uživateli vždy říct, co dělá nesprávně a při nekatastrofálním selhání se chybu pokusit opravit.

Stručnost

Rozhraní by na první pohled mělo být jednoduché, nemělo by být hned viditelné veliké množství možností a zavalit uživatele komplexitou.

Zpětná vazba

Rozhraní by mělo naznačovat co právě dělá, mělo by být rychlé a dávat zpětnou vazbu po zpracování požadavku.

Standard

Rozhraní by se mělo chovat stejně či podobně tomu, jak je stanoveno obecným a známým standardem.

Příjemnost

Nejčastěji používané sekce stránky by měli být upraveny tak, aby byli atraktivní a vylepšené natolik, aby byl čas strávený co nejpříjemnější.

Efektivita

Rozhraní by mělo být efektivní, uživatelovi dovolovat dělat hromadné akce či používat zkratky.

Očekávatelnost

Z prvního pohledu na rozhraní by mělo být jasné jak je rozhraní hierarchicky rozloženo a jak vypadá tok stránky.

Princip minimálního překvapení

Princip minimálního překvapení

• člověk je schopen zcela sledovat pouze jednu věc v jeden okamžik
• focus
• mělo by být jasné co se stane
• respektovat jeho zkušenosti, očekávání a mentalitu

UX Honeycomb

How I Experience Website Today

UserInyerface

Shit User Story

Bad UI battles

Sledování požadavků

Sledování požadavků

• nejjednodušší způsob monitoringu
• nenarušujeme práva uživatele
• sledujeme pouze požadavky, IP a další nekonkrétní data
• nejnavštěvovanější stránky, země, ...
• např. jakýkoliv web server, Cloudflare, ...

Sledování aktivity uživatelů

Pokročilejší sledování

• sledování přechodů, přesné informace o uživateli, interakce, ...
• nutné informovat uživatele
• např. Google Analytics

Sledování kurzoru

Heatmapy

• zobrazuje nejčastější pozice myši
• nebo např. nejčastější místo kliku
• komplexní na sledování
• uživatel musí být obeznámen
• naopak se velmi dobře získávají data o UX

Heatmapy

PRÁCE

Zkuste si vytvořit heatmapu na nějakou Vámi vybranou stránku. Zdůvodněte proč a kde bude nejvíce pohybu myší a kde nejvíce kliknutí.

Tvorba UI/UX

Výzvy UI/UX

• https://www.richmcnabb.com/user-experience-design/100-days-of-design/
• https://uxplanet.org/how-i-improved-my-design-output-by-taking-100-day-design-challenge-19efdce6458f
• https://jjbrown913.medium.com/become-a-better-ui-ux-designer-in-onl100-days-e75e9cc03b5f
• https://blog.prototypr.io/100-days-of-ux-sketch-28356b054ec3
• https://www.dailyui.co

Sledování na televizi

Práce

Vytvořme UI a zhodnoťte UX pro aplikaci určenou ke sledování videí na televizi.

Psychologie designu

Psychologie designu

• design (ne)přímo ovlivňuje chování uživatele
• špatný i dobrý dojem
• nekalé praktiky
• animace, barvy, fonty, klikání, ...

Ovlivňování pomocí UI a UX

• stejný podíl
• nejde jen o web ale i aplikace, tisk, marketing, ...
• UI — vzhled
• UX — chování

není možno neovlivňovat

není možno nekomunikovat

Psychologie barev

Psychologie barev

• každá barva vzbuzuje různé emoce
• každý člověk jiné, nejčastěji rozhoduje kultura
• při tvorbě UI si je potřeba každou barvu rozmyslet

energie

síla

teplo

determinace

bezprostřednost

vášeň

vážnost

důležitost

hloubka

stabilita

důvěra

sebejistota

klidnost

informace

růst

klidnost

prostředí

příroda

bezpečí

úspěch

radost

důležitost

energie

optimismus

čerstvost

upozornění

nadšení

zapálenost

úspěch

teplo

kreativita

vzrušení

citlivost

starost

emoce

láska

věrnost

síla

arogance

luxus

chytrost

záhadnost

čistota

nevinnost

luxus

mír

bezpečnost

síla

důležitost

záhadnost

elegance

stabilita

https://www.informationisbeautiful.net/visualizations/colours-in-cultures/

Volba barev

https://flatuicolors.com

https://coolors.co

https://www.toptal.com/designers/colorfilter

Psychologie fontu

Fonty typu serif

• patky
• respekt, důvěřivost, autorita, formálnost
• především tisk

Fonty typu sans-serif

• bez-patek
• moderní, důvěřivost, techničnost, přímočarost, nezkušenost

Fonty typu cursive

• bez-patek, psané
• elegantní, kreativní, tradiční

Fonty typu monospace

• každý znak zabírá stejné místo
• technické, vzdělanost, úhlednost

Typografie

Dobrý text!

Odevzdání je do 23. 11. 2023 23:00!

Je nutné získat alespoň 3 body.

Oni (učitelé, pozn. redakce) si myslí že jsou chytří.

Pojďme jíst děti.

Pojďme jíst, děti.

Je mi to jedno mami !

Víte ,že je hodina ?

Odstoupil a řekl a.. ahoj

Jsem společensky znaven ( možná opilý).

8% získalo dostatečný počet bodů.

8 % získalo dostatečný počet bodů.

Skončil na 5-tém místě!

Skončil na 5.-tém místě!

Skončil na 5. místě!

Skončil na 5 místě!

https://www.pslib.cz/milan.kerslager/Typografick%C3%A1_pravidla

https://www.napocitaci.cz/33/typograficka-pravidla-uniqueidgOkE4NvrWuNY54vrLeM676nSxPa8k1rvWcEWLDBR_98/

Psychologie obrázků

Obrázek vydá 6x více informací než prostý text

Máme 10 sekund na to, oslovit uživatele stránkou.

Z obrázku čteme informace 30.000x rychleji než prostý text.

Zásady

• jeden obrázek je jedna myšlenka
• obrázky by se měly doplňovat
• obrázkům dáváme popisky

https://unsplash.com

https://pixabay.com

https://www.shutterstock.com/cs