70/
Mock-up
Otestujte návrh více do detailu.
Wireframe máte hotový? Je na čase pustit se do detailnějšího prototypu. Mock-up má k hotovému produktu stále daleko, ale k představení vašeho návrhu a ke sběru důležité zpětné vazby pomocí uživatelského testování bohatě postačí.
Potřebujete
Čas: 60 minut a více
Lidé: 1 designérka
Nástroje: psací potřeby, papír, nebo vizualizační nástroj (Marvellapp, UXPin, Photoshop)
Postup
- Připravte si odsouhlasený wireframe, který znázorňuje strukturu prvků na webu.
- Na základě wireframu vytvořte realistický grafický návrh rozhraní.
- Míru detailu volte v rozmezí mid-fidelity až high-fidelity.
- Návrh může být i částečně funkční (prokliky, stránkování atd.).
- Věnujte pozornost barvám, typografii, obrázkům a velikosti jednotlivých prvků.
- Mock-up otestujte pomocí uživatelského testování. Zjistěte, jestli:
- uživatelé chápou, co mají na stránce dělat,
- všímají si prvků, které jsou nejdůležitější,
- návrh je přístupný různým skupinám uživatelů bez rozdílu.
- Na základě testování mock-up vylepšujte, dokud nedoladíte všechny nedostatky.
- Podle hotového mock-upu se pusťte do technického řešení (programování a kódování).
Tipy
Testujte průběžně – můžete začít s jednoduššími návrhy a postupně je zpřesňovat v míře detailu a funkčnosti.
Počítejte dopředu s několika koly uživatelského testování. Na orientačním počtu iterací se s participanty můžete domluvit předem.
Zatímco wireframy obvykle navrhuje UX designer, k mock-upu je už zapotřebí přizvat grafika.
Příklady a inspirace
Tento nástroj použili autoři a autorky studie o redesignu automatů na vlakové jízdenky rakouského národního dopravce. Celkově vyvinuli tři softwarové mock-upy, které participanti otestovali podle zadaných scénářů – běžných situací, kdy pasažéři využívají automat na jízdenky. Vítězný mock-up byl poté rozšířen o funkční hardwarové řešení a podroben dalšímu kolu uživatelského testování.
Laurentz a Rawecka ze švédské Chalmers University of Technology ve společné diplomové práci vytvořili mock-up nemocniční čekárny s cílem zlepšit službu a dojem pacienta. Jejich mock-up je de facto zmenšeným 3D modelem prostoru čekárny, na kterém lze testovat například to, jak dobře čitelné jsou důležité nápisy a informační cedule z různých zákoutí místnosti.
Více informací
- Busche, L. (2014, 6. října). The Skeptic’s Guide To Low-Fidelity Prototyping. Smashing Magazine. https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/
- Mkrtchyan, R. (2018, 28. června). Wireframe, Mockup, Prototype: What is What? UX Planet. https://uxplanet.org/wireframe-mockup-prototype-what-is-what-8cf2966e5a8b