Návrh užívateľského rozhrania
PB007 Softwarové inženýrství I
Stanislav Chren
5. 12. 2012
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 1 / 11
User-Centered Design
Zohľadnenie prostredia, v ktorom daný SW bude používaný (typy
užívateľov, spôsob použitia,...)
Aktívne zapojenie užívateľov
Zber požiadaviek
Prototypovanie
Testovanie a vyhodnotenie
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 2 / 11
Základné pojmy
WIMP - Windows, Icons, Menus, Pointing device
Usability - do akej miery je práca s UI efektívna, jednoduchosť
použitia, náročnosť naučenia,...
User Experience - celkový dojem z používania aplikácie
Look & Feel - ako aplikácia vyzerá a ako sa s ňou pracuje
Human Interface Guidelines - doporučenia a postupy ako vytvoriť
kvalitné UI
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 3 / 11
Základné pravidlá
Konzistencia - podobné objekty by sa mali správať podobne
Spätná väzba - UI by malo komunikovať s užívateľom
Slabá- môže sa spozorovať
Silná - musí sa spozorovať
Prevencia a tolerancia voči chybám užívateľa
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 4 / 11
Human-Interface Guidelines (HIG)
Popisujú správne použitie a umiestnenie komponent, napr. vzdialenosť
medzi tlačidlami, popismi, ...
Mali by ste dodržiavať HIG cieľovej platformy, pre ktorú je aplikácia
určená
http://en.wikipedia.org/wiki/Human_interface_guidelines
https://developer.apple.com/library/mac/#documentation/
UserExperience/Conceptual/AppleHIGuidelines/
http://msdn.microsoft.com/en-us/library/aa511258.aspx
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 5 / 11
Webové rozhranie
Žiadne prísne HIG
Navrhunté skôr na konzumáciu obsahu ako na jeho vytváranie
Nesnažte sa napodobňovať desktopové aplikácie
Podporujte ovládanie navigácie prehliadačom (stránka dopredu/späť)
Breadcrumb navigácia
Žiadne horizontálne skrolovanie
http://www.usability.gov/guidelines/index.html
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 6 / 11
Webové rozhranie - Heatmap
Umiestňovanie dôležitých prvkov do prominentných oblastí
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 7 / 11
Prototypovanie
Wireframe – prvotný náčrt, zobrazuje aké prvky budú tvoriť UI a ich
umiestnenie, neobsahuje detaily
Mockup – reálne vyzerajúca maketa rozhrania, používa sa na
demonštráciu a vyhodnocovanie
Prototyp – skorá (čiastočne funkčná) implementácia aplikácie
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 8 / 11
Balsamiq Mockups
http://www.balsamiq.com/
Nástroj na tvorbu wireframes
Komerčný, voľne dostupné online demo
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 9 / 11
Úlohy
Vyberte si jeden prípad užitia a vytvorte wireframes pre jeho
jednotlivé kroky/obrazovky
Na ich tvorbu použite online demo nástroja Balsamiq Mockups
Odovzdajte jpg z Balsamiqu do odovzdávarne Týden 12
Odovzdajte pdf report do odovzdávarne(Týden 12).
Deadline:
15.12. 23:59 (Skupina 14)
10.12. 23:59 (Skupiny 15, 16)
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 10 / 11
Nastavenie reportu VP
Softwarové inženýrství I (PB007) Návrh užívateľského rozhrania 5. 12. 2012 11 / 11