Proč by designéři nikdy neměli přeskakovat prototypování

Obsah

• Máte návrhový vzor? Naplánujte si to
• Promyslete celý proces
• Návrhové vzory odstraňují dohady
• Uživatelské testování: statistiky, které nemůžete ignorovat
• Připravte se na testování prototypů
• Další kroky

Existuje mnoho důvodů, proč vynechat wireframing a lo-fi prototyping. Žádný z nich není platný.

Možná, pokud to zítra budete potřebovat a plánujete to revidovat později: stavět první, plánovat druhé, doufat v to nejlepší po celou dobu.

Prototypování je zásadním krokem v designu produktu. Konečné výrobky jsou komplikované, a proto je obtížné je změnit. Prototypy jsou relativně levné na stavbu a změnu uspořádání. A zatímco se snaží předem, plánování a testování prototypu stojí za to.

Prototypy vytvářejí společný designový jazyk. Díky nim mohou designéři hledat problémy, zatímco lidé vidí, jak jejich práce zapadá do projektu. Mezitím vývojáři rozumějí interakcím a klienti mohou souhlasit nebo navrhnout změny.

V tomto příspěvku prozkoumáme, jak vám prototypování pomáhá používat chytřejší vzory návrhu a lépe spolupracovat s vývojáři.

Máte návrhový vzor? Naplánujte si to

Jak je vysvětleno v Příručce vzorů webového uživatelského rozhraní, návrhové vzory se neomezují pouze na vizuál. Existují také akceptované procesní vzory. Než si vybereme vizuální vzory, musíme hledat tyto celkové procesní vzory.

Vezměme si například proces hledání hotelu. Na první pohled to ani nestojí za zmínku. Vzor je tak běžný, považujeme ho za samozřejmost:

1. Traveler dorazí na domovskou stránku.
2. Cestovatel hledá hotel.
3. Cestovatel porovnává možnosti.
4. Cestovatel si vybere hotel.

To by se dalo dokonce zjednodušit na „hledat, porovnávat, vybírat“. Volný designový vzor. Glosuje však několik kritických detailů - detaily, které vývojáři nemohou považovat za samozřejmost, a detaily, které by návrháři měli pečlivě zvážit.

Přesnější proces může zahrnovat:

1. Traveler dorazí někam na web, podle toho, jak tento web našel.
2. Cestovatel používá vyhledávací nástroj - buď všudypřítomné vyhledávací pole na liště nabídek, nebo výraznější domovská stránka „najdi to!“
3. Cestovatel procházel stránkami možností a nějakým způsobem porovnával slibné hotely proti sobě.
4. Vyberou si hotel klepnutím na „rezervovat tento“ buď na jeho stránce s podrobnostmi, nebo na stránce s výsledky vyhledávání.
5. Web představuje formulář pro jejich jméno, počet osob a nocí, data a informace o kreditní kartě.
6. Cestovatel zadá své informace a klikne na „rezervovat nyní“.
7. Stránka odesílá informace příslušnému hotelu.
8. Obdrží e-mail s potvrzením jejich jmenování.

Všechny tyto „ifs“ a „závislosti“ a „somehows“ lze interpretovat. V rámci toho najdeme mnoho designových rozhodnutí.

Měla by domovská stránka říkat „najít“ nebo „hledat nyní“? Kolik výsledků se zobrazí na stránce a jak jsou od sebe vzdáleny? Podle jakých parametrů začnou hledat? A dál a dál ...

Prototypy sdělují vývojářům, co vytvářejí. Odstranění nejednoznačnosti znamená, že mají méně možností rozhodovat sami. Tím také odhalíte chybějící kritické kroky. Nebudete objevovat, o jaké kroky se jedná, natož najdete kreativní způsoby, jak se odlišit od konkurence, pokud se nevezmete do obuvi uživatele a nezkoušíte design sami.

Promyslete celý proces

Při prototypu se stane legrační věc: začnete používat design. Na rozdíl od statických maket zjistíte, že pracujete vizuálně i interaktivně současně.

Tento duální přístup vede k nejrůznějším kreativním rozhodnutím vzoru uživatelského rozhraní. Nakupujte hotely. Co když vymyslíme hybridní zobrazení (zobrazené níže v prototypovacím nástroji UXPin) mezi výsledky vyhledávání a podrobnou stránkou, na které může cestující porovnat vybrané hotely podle ceny, umístění, vybavení atd.?

• Zaškrtávací políčka a tlačítko „přidat toto do svých možností“.
• Schopnost hodnotit a řadit oblíbené hotely, možná přetažením
• Schopnost říci „ne“ určitým možnostem
• Možnost vyhledávat podobné hotely na základě jejich oblíbených

Podívejte se na ukázku.

Nyní se podívejme na „vyhledávání podle místa“. Co kdyby naše stránka s výsledky vyhledávání byla místo seznamu mapa?

• Vývojáři by museli proniknout do vyhledávacího rozhraní (pravděpodobně Google).
• Výběr více hotelů pro naše hypotetické srovnání může být problematický v závislosti na možnostech API.
• Uživatelé mobilních zařízení by potřebovali způsob, jak procházet stránku a vyhýbat se mapě.

Všechna tato rozhodnutí o návrhu vycházejí z pochybných předpokladů při procházení prototypem.

Návrhové vzory odstraňují dohady

Všechny dosavadní popisy jsou samozřejmě textové. Dejte to vývojáři a on nebo ona získá přibližnou představu o tom, co má postavit.

Ale příliš často text skrývá předpoklady. „Tato stránka bude mít vyhledávací formulář“ ponechává příliš mnoho představivosti. Nedělej to. Je vaší prací jako designéra činit tato rozhodnutí a vymýšlet co nejvíce možných výjimek.

Domovská stránka pro vyhledávání hotelů má mnoho možných konfigurací. Mohlo by to představit speciální nabídky, vyhledávací formulář, nejoblíbenější nemovitosti nebo cokoli jiného, ​​co podle návrháře nejlépe poslouží cestujícím při hledání místa k pobytu. Jakékoli z těchto řešení může fungovat, v závislosti na vašich prioritách a omezeních.

Ale to vývojářům nestačí říct. Musíte jim ukázat, jak design funguje.

Kódovací kód. Implementace je jejich práce. Nemusí být posedlí tím, jak by se produkt měl chovat, zkoumat uživatelské osobnosti nebo řešit požadavky klientů a omezení designu.

Jejich zájem o to, aby byl web vhodný pro mobilní zařízení, souvisí s dotazy médií více než s tím, kolik fotografií se pohodlně vejde na tablet. Prototypování usnadňuje jejich práci tím, že vysvětluje, jak by měl produkt fungovat, a ponechává jim volnost v ponoření do HTML / CSS / PHP / Ruby.

Prototypy tedy také pomáhají návrhářům zpracovat vzory v jejich plném rozsahu. Snadněji se to řekne, než udělá, protože plánování designu vyžaduje na začátku projektu hodně přemýšlení. Tam by se však mělo rozhodovat: brzy, než dodáme vývojářům prototyp.

Co se stane, například pokud je popis hotelu příliš dlouhý? Jak by měly výsledky vyhledávání text oříznout? Existuje mnoho způsobů (samozřejmě vzorů), jak tento konkrétní problém vyřešit. Možná si zaslouží úplný popis na stránce s výsledky. Mohli bychom skončit s elipsou… nebo bychom mohli úplně ignorovat textové popisy.

Makety nejsou o moc lepší. Skládání stránek nedává smysl toku webu, což vývojáře připravuje o ducha vašich rozhodnutí. Nevidí, jak web visí pohromadě - a proto vám nemohou pomoci zpochybnit předpoklady. Vývojáři jsou chytrý dav a my na jejich náklady slevujeme jejich inteligenci.

Uživatelské testování: statistiky, které nemůžete ignorovat

Několik věcí vývojářům dělá starosti, jako je učení, že postavili špatný produkt. Proto je zásadní hledat externí názory před kódováním. Pravděpodobně nejdůležitějším důvodem prototypování se vzory je dát uživatelům šanci poukázat na nedostatky v designu - než budete trávit čas stavbou konečného produktu.

Například vyhledávání klíčových slov ve vyhledávači hotelů je docela zbytečné. Skuteční vyhledávači hotelů umožňují cestovatelům vyhledávat podle dostupnosti, ceny a umístění. Uživatelé by na to poukazovali ve spěchu, ale ne ze statických modelů.

Dokud to nevyzkouší s prototypem, může uživatel snadno kritizovat takové kritické detaily.

Uživatel, který pracuje prostřednictvím aplikace pro vyhledávání hotelů, může považovat určité vzorce za příliš jednoduché. Pravděpodobněji upozorní na nutnost vyhledávat podle dostupnosti v daných termínech, blízkosti turistických atrakcí, kuřáckých / nekuřáckých pokojů a dalších faktorů.

I když se to technicky počítá jako vyhledávací vzor, ​​použití prototypu by odhalilo nezbytné podrobnosti. Nestačí použít lorem ipsum. Nic nepřekoná testování vzoru ve skutečném produktu.

Připravte se na testování prototypů

Existují další důvody, proč žádat lidi, kteří nesouvisejí s projektem, aby otestovali prototyp. Nezávislé testování produktu je velkou příležitostí zjistit, zda k řešení problému s designem používáme nejvhodnější vzor. Trik je dostat se z cesty a:

• Buďte připraveni opustit vzorce. Někdy věci prostě nefungují. Uživatelé ignorují nebo dezinterpretují vaše pečlivě vytvořené cesty produktem. Potvrzení a oprava je snazší, pokud je váš prototyp jednoduchý a dostatečně flexibilní na to, abyste jej mohli rychle spěchat (což je důvod, proč byste měli nejprve vyzkoušet svůj prototyp lo-fi).
• Dávejte pozor na možná řešení. Uživatelé jsou přirozenými vyhledávači procesů. Jakmile se seznámí s prototypem, objeví způsoby, jak jej použít, o kterém jste nikdy neuvažovali. Pokud se nebudete snažit, budou často poukazovat na vzorce a pracovní postupy, které můžete zdůraznit a doladit pro další iteraci.
• Zvažte alternativy. Uživatelé ne vždy přímo poukazují na to, které vzorce je pletou. Obvykle se ptají, proč a jak, například v „proč nemohu…?“ a „jak ...?“ Poslech jejich obav a pozorování je skvělý způsob, jak zjistit, které vzorce pracovního toku nefungují a které vizuální vzorce nejsou jasné. Věnujte pozornost a položte inteligentní následné otázky.

Testování použitelnosti je zásadní, protože ostatní lidé věří, že jste učinili nejlepší možná rozhodnutí. Řekněme, že vývojáři důvěřují vašim možnostem a sestaví vyhledávání klíčových slov, v tomto příkladu název hotelu a možná vybavení. Umístit tyto funkce na hlavní vyhledávací stránku, ze které si uživatelé mohou vybírat, může být skvělý nápad - ten, který vychází z trávení času skutečnými daty, jak to vývojáři obvykle nedělají.

Vývojáři jsou chytří lidé. Ale dát jim odpovědnost za to, aby zjistili věci, jako jsou parametry vyhledávání, zabírá jen cenný čas na vývoj. Než projekt pustí na stůl, musí přestat a přemýšlet o věcech, které byste měli zvážit.

A to je síla prototypování vašich návrhů jako první: rozhodování předem šetří z dlouhodobého hlediska čas všem.

Další kroky

Pokud vám tento příspěvek pomohl, pokračujte a podívejte se na bezplatnou příručku vzorů webového uživatelského rozhraní.

Kniha byla napsána na základě mých zkušeností s navrhováním webových stránek za posledních 20 let. Průvodce na 104 stránkách vysvětluje, jak vybrat a používat nejlepší návrhové vzory na více než 100 příkladech od ESPN, Adobe, AIGA, The Discovery Channel a dalších.

Slova: Ben Gremillion

Ben Gremillion je návrhář obsahu v prototypové aplikaci UXPin, kde píše pro bezplatnou knihovnu elektronických knih. Navrhuje a programuje web téměř 20 let. Rovněž vytváří a udržuje CMS pro umělce v oblasti webcomic.

Líbilo se vám to? Vyzkoušejte tyto ...

• Nejlepší nástroje pro drátové formování
• Vytvořte drátové modely, které vám budou vyhovovat
• 100 úžasných výukových programů Adobe Illustrator