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.
- Požiadať si o študentskú licenciu softvéru Miro a oboznámiť sa s jeho používateľským rozhraním.
- Pripraviť si v Miro 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: Miro
Platforma Miro sa využíva predovšetkým v tímoch v korporátnych projektoch na Storyboarding, ale výborne sa hodí 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.
Poznámka
Oboznámte sa s rôznymi typmi prototypov a ich príkladmi.
Úloha 3.1
Miro ponúka bezplatnú študentskú licenciu, o ktorú si požiadate vyplnením jednoduchého formulára. Návod na vyplnenie:
- Dôležité: Ako email uveďte svoj študentský email s koncovkou
@student.tuke.sk. - Nezabudnite ako typ štúdia vybrať Undergraduate program.
- Do Educational institution napíšte "Department of Computers and Informatics, Technical University of Košice, Slovakia".
- Ako cieľ využitia uveďte "Preparation of the Department's UX course assignment".
- Ako doklad o tom, že študujete na našej katedre, nahrajte dočasne fotku vášho študentského preukazu na cloud (napr. ImageShack a do formulára vložte odkaz na tento obrázok.
- Do emailovej schránky vám príde odkaz na potvrdenie registrácie.
Otvorí sa vám nový "Miro Board" s hotovým príkladom obsahu a vstavaným mini-tutoriálom.
Krok 4: Základy práce s Miro
Úloha 4.1
Oboznámte sa s používateľským rozhraním Miro pomocou krátkeho tutoriálu (5:36). Na webe je množstvo ďalších podobných tutoriálov. Inšpirujte sa aj prednáškou, radi vás na nej uvidíme :-)
Úloha 4.2
Kliknite na logo miro vľavo hore a následne si vytvorte nový "Miro Board".
Krok 5: Vytvorenie ikonky Miro Boardu a základného rámca
V našom novom Boarde si v tomto kroku vytvoríme:
- Obrázok ikonky Miro Boardu zloženej z elementov typu obdĺžnik a text.
- Základný rámec (Frame), ktorý budeme používať na tvorbu nového obsahu.
Názov a Ikonka Boardu
Úloha 5.1
Kliknutím na dočasný názov Boardu si ho premenujte na "Bakalárska práca". Potvrďte nové meno tlačidlom Enter na klávesnici.
Prvý rámec vytvorený v predch. kroku nám bude slúžiť ako ikonka Boardu. Môžete si zmeniť farbu pozadia tohto rámca. V ďalšej úlohe ho jednoduchým spôsobom nastavíte ako ikonku Boardu.
Úloha 5.2
Označte element s ikonkou boardu, kliknite naň pravým tlačidlom myši a z kontextového menu vyberte "Copy as image". Uložte si obrázok do súborového systému.
Úloha 5.3
Teraz uloženú ikonku použijeme pre náš Board. Kliknite na dočasnú ikonku boardu hneď vedľa jeho názvu. Otvorí sa vám rozhranie na zmenu ikonky. Vybraním obrázka v súborovom systéme nastavíte novú ikonku.
Po kliknutí na logo miro sa dostanete na zoznam všetkých vašich Boardov, kde uvidíte ten váš s názvom "Bakalárska práca" a novou ikonkou.
Ikonka nám pomáha lepšie rozlíšiť jednotlivé Boardy.
Znovu otvorte Board Bakalárska práca.
Základný rámec (Frame)
Rámec (Frame) v Miro môže slúžiť na akýkoľvek obsah, napríklad: analýza domény, konceptuálny model, náčrty (sketch) a pod. (viď príklad korporátneho Miro Boardu na obrázku nižšie).
Teraz si vytvoríme rámec, ktorý bude slúžiť ako základ pre každý ďalší nový rámec v Boarde. Tento prvý si necháme ako vzor a všetky nové budeme z neho kopírovať.
Úloha 5.4
Vytvorte základný rámec pre celý Board pomocou elementov Frame, text a obdĺžnik. Inšpirujte sa príkladom na Obr. 2.
Poznámka
Kliknite na názov rámca a pokúste sa celý rámec presunúť v rámci Boardu. Všimnite si, že celý obsah sa posúva s rámcom. Vďaka tomu môžeme rámce využívať na zoskupenie obsahu a meniť pozíciu celého rámca v rámci Boardu podľa potreby a veľkosti iných rámcov.
Krok 6: Doplňujúca úloha
Je vhodné si vytvoriť aj vzor oddeľovača pracovnej sekcie, pre väčšie skupiny rámcov - čo veľmi napomáha organizácii Boardu, viď čierne rámčeky na obrázku nižšie.
Príklad priblíženej sekcie:
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 7: Príprava na zadanie BP
Preštudujte si podmienky pre vypracovanie a odovzdanie Zadania BP.
Úloha 7.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 alebo ChatGPT.
- Vytvorte si nový rámec v Boarde Bakárska práca 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", ...