Dolní panel karet, boční zásuvka a plovoucí akční tlačítko (FAB) jsou nejčastěji používané vzory pro mobilní navigaci na nejvyšší úrovni. Pokud chcete navrhnout přehledné a jednoduché navigační cesty, použijte ve své aplikaci jeden z těchto vzorů.
Zavedení skutečné kopie
Jakmile budete spokojeni s vizuální hierarchií, začněte nahrazovat zástupné symboly a fiktivní text skutečným obsahem (skutečnou kopií nebo tím, který je pro uživatele relevantní). Existuje důležitý důvod, proč bychom se v této fázi měli vyhnout fiktivnímu textu – Lorem Ipsum nesděluje, jak stránka podporuje uživatele v dosažení jejich cílů. Také mnoho vizuálních prvků, které vytváříme, vychází z obsahu, který máme v našich produktech. Jakmile začnete přidávat skutečný obsah, zjistíte, že některé prvky uživatelského rozhraní (nebo dokonce sekce uživatelského rozhraní) nejsou pro váš produkt nutné.
Někdy, když zaplníte své wireframy skutečnými detaily, můžete si všimnout, že rozvržení, které máte, nefunguje dobře. V takovém případě je důležité iterovat a najít lepší způsob reprezentace informací, které se snažíte sdělit.
Po naplnění stránky skutečnou kopií otestujte, zda je stránka pro uživatele plynulá. Některý obsah na stránce může být neuspořádaný. To je ideální okamžik pro reorganizaci obsahu na stránce a zlepšení kompozice.
Níže je příklad našeho drátěného modelu domovské obrazovky, který obsahuje skutečná data. K upřednostnění některých bloků uživatelského rozhraní (například kategorií potravin) jsou použity různé velikosti písma.
Ujistěte se, že se obsah dobře škáluje
Pokud váš návrh vypadá skvěle na středně velké obrazovce telefonu iPhone XS, neznamená to, že uživatelé iPhonu 5 a iPhonu XS Max budou mít stejně skvělý zážitek. I když je naprosto v pořádku začít při tvorbě wireframu s obrazovkou střední velikosti, je také nezbytné zkontrolovat, jak obsah vypadá na různých velikostech obrazovek (menších i větších), a případně jej upravit.
Propojte stránky dohromady a vytvořte tok
Přestože je možné dodat design jako soubor jednotlivých obrazovek, je lepší z nich vytvořit tok. Toky UX usnadňují týmu pochopit detaily scénářů interakce – sdělují, jak mají lidé s produktem komunikovat.
Toky UX vás také donutí přemýšlet o funkčnosti aplikace jako celku. Po vizualizaci toku UX si například můžete všimnout, že je třeba zavést další stav mezi domovskou obrazovkou a stránkou s výsledky vyhledávání (protože backendu systému bude trvat několik sekund, než vrátí výsledky).
Je také dobré dát každé obrazovce referenční číslo. Referenční čísla vám usnadní život při diskusi o projektu s ostatními členy týmu nebo zainteresovanými stranami.
Testování je posledním (a jedním z nejdůležitějších) krokem při tvorbě wireframu. Testování předpokládá interakce s uživatelem, proto se tento termín často používá v souvislosti s prototypy. Je však možné provést jednoduché testování i pro tok vytvořený z wireframů. Pomocí nástroje Balsamiq je možné vytvořit jednoduché klikací prototypy propojením wireframů. Cílem takového testování je zjistit, zda obrazovky společně fungují.
Závěr
Konečným cílem wireframingu je určit obrys obsahu a vytvořit pevný základ pro další kroky procesu návrhu. Dobře navržené wireframy výrazně usnadňují vizuální návrh a návrh interakce.
Stejně jako u jiných návrhářských činností věnujte dostatek času experimentování s různými nástroji a postupy a najdete si svůj vlastní styl wireframingu. Praxe dělá mistra.
Slovy: Nick Babich
Původně publikováno na vzdělávacím webu UI společnosti Balsamiq
.