Ciele
- Oboznámiť sa s organizáciou cvičení predmetu Používateľské rozhrania softvérových systémov.
- „Zažiť“ si zlé UX a naučiť sa tak základy UX.
- Získať bezplatnú študentskú licenciu v nástroji Figma.
- Pripraviť projekt typu FigJam a prostredie pre vypracovanie Zadania BP.
- Začať pracovať na vašej bakalárskej práci.
Úvod: Viete, čo je zlé UX?
Dôvodom zlej použiteľnosti sú podľa Dona Normana najčastejšie:
- Neexistujúce obmedzenia (constraints) - Fyzické, logické
- Neidentifikovateľné umožnenia (affordances) - Ako viem, aké úlohy viem vykonať a ako identifikujem, či je (alebo nie je) možné v vykonať práve túto úlohu?
- Neexistujúca alebo oneskorená spätná väzba - Ako viem, že sa niečo stalo?
- Neexistujúce alebo neprirodzené mapovanie - Ako viem, čo je čo?
- Nedodržané existujúce štandardy a konvencie
Postup
Krok 1: Organizácia predmetu
Oboznámte sa s organizáciou cvičení a podmienkami udelenia zápočtu predmetu Používateľské rozhrania softvérových systémov.
Krok 2: Zažite si zlé UX
Úloha 2.1
Vyskúšajte si pracovať s rozhraním https://userinyerface.com/ a zapisujte si, kde bolo porušené aké pravidlo UX. Potom si dáme spoločný brainstorming.
Na vypracovanie máte 45 minút.
Krok 3: FigJam
Spoločnosť Figma v 2021 predstavila nástroj FigJam, ktorý sa využíva predovšetkým v tímoch v korporátnych projektoch ako kolaboratívne prostredie na tvorbu vizuálneho obsahu. Výborne sa hodí a využíva aj na široké spektrum aktivít v UX oblasti. Bude to naše centrálne úložisko a spôsob budovania znalostí a materiálov pre fázy doménovej analýzy, návrhu používateľského rozhrania, až po prototypy nízkej vernosti (low fidelity prototypes) nášho projektu.
Úloha 3.1
Použite váš školský e-mail na zaregistrovanie sa v nástroji Figma, aby ste získali bezplatnú študentskú licenciu na 1 rok.
V nástroji Figma budeme neskôr vytvárať aj všetky naše prototypy pomocou projektov typu Design.
Poznámka
Oboznámte sa s rôznymi typmi prototypov a ich príkladmi.
Krok 4: Základy práce s FigJam
Úloha 4.1
Oboznámte sa s používateľským rozhraním FigJam pomocou tutoriálu. Na webe je množstvo ďalších podobných návodov. Inšpirujte sa aj prednáškou, radi vás na nej uvidíme :-)
Úloha 4.2
Vytvorte si nový projekt typu FigJam pomocou tlačidla na hlavnej stránke nástroja Figma.
Úloha 4.3
Dvojitým kliknutím na dočasný názov projektu si ho premenujte na „UX {Priezvisko} {Meno}“. Potvrďte nové meno tlačidlom Enter na klávesnici.
Po zmenení názvu projektu uvidíte aj zoznam stránok (Page) vášho projektu. Stránku Page 1 si vhodne pomenujte podľa témy vašej bakalárskej práce.
Krok 5: Pripravenie prostredia
V našom novom projekte si v tomto kroku vytvoríme základnú sekciu (Section), ktorú budeme používať na tvorbu nového obsahu. Takto si zadefinujeme základné prostredie pre tvorbu obsahu: veľkosť sekcií, veľkosť písma, obrázkov a pod. Túto našu sekciu si necháme ako vzor a všetky nové budeme z nej kopírovať. To nám uľahčí prácu v budúcnosti.
Úloha 5.1
Vytvorte základnú sekciu pre celý projekt pomocou elementov Section, Text a Square. Jednotlivé elementy si pekne naštýlujte. Inšpirujte sa príkladom na obrázku.
Sekcia vo FigJam môže slúžiť na akýkoľvek obsah, napríklad: analýza domény, konceptuálny model, náčrty (sketch) a pod. Ako príklad, ako by to mohlo vyzerať, uvádzame korporátny projekt v Miro (nástroj podobný FigJam).
Ako vidíte, každému rozhodnutiu v projekte predchádza dôkladná analýza a výskum. Všetko je zdokumentované a dostupné pre celý tím. V tomto projekte sme skúmali všetky existujúce dostupné displeje ultrazvukových zariadení na trhu. Naše rozhodnutia nie sú prvoplánové, ale sú vždy informované. To znamená založené na sumarizácii poznatkov a faktov a nie na pocitoch, či želaniach používateľov. Každé rozhodnutie (aj v bakalárskej práci) musí byť podložené relevantnými informáciami a výskumom. Majte tento prístup na mysli počas vypracovania zadania.
Poznámka
Kliknite na názov sekcie a pokúste sa ju celú presunúť v rámci stránky. Všimnite si, že celý obsah sa posúva s ňou. Vďaka tomu môžeme sekcie využívať na zoskupenie obsahu a meniť pozíciu celej sekcie na stránke podľa potreby a veľkosti iných sekcií.
Poznámka
Všetok obsah vytvorený v tomto predmete odporúčame tvoriť v jazyku bakalárskej práce, aby ste z neho mohli využiť čo najviac v texte práce.
Krok 6: Príprava na vypracovanie zadania
Preštudujte si podmienky pre vypracovanie a odovzdanie Zadania.
Úloha 6.1
- Začnite sa oboznamovať s témou bakalárskej práce zadávaním kľúčových slov z jej názvu a definície úlohy do internetového vyhľadávača a/alebo ChatGPT.
- Vytvorte si nový rámec vo FigJam s názvom „Prvotná analýza“ a vložte tam čokoľvek nové, čo zistíte o svojej téme, spolu s odkazmi na zdroje.
- Píšte si poznámky a vkladajte si odkazy na nájdené zdroje. Poznámky môžu byť neštruktúrované.
Najdôležitejšie zdroje pre predmet
- D. A. Norman - The Design of Everyday Things (1998)
- D. A. Norman - Design of Everyday Things, Revised and Expanded Edition, MIT Press, ISBN 9780465067107, pp. 288 (2013)
- Architecting Usability - Donald Norman’s design principles for usability
- Thomas Mitchell — Affordances, constraints and natural mapping (summary with illustrative examples) (2008)
- J. Nielsen — Usability 101: Introduction to Usability (2012)
- D. A. Norman — Emotional Design: Why We Love (or Hate) Everyday Things (2005)
- Miklos Philips — Boost Your UX with These Successful Interaction Design Principles (2017)
- Chceš viac? Googli: „Norman doors“, „Don Norman examples“, ...