Udržování konzistence ve vašem návrhu uživatelského rozhraní

Konzistence v designu uživatelského rozhraní je princip staré školy a v některých dnešních designech webu a aplikací je poněkud zapomenut. Vypadá to, že se návrháři rozhodují vynechat konzistenci ze svých rozhraní.

V případě návrhu mobilní aplikace se někteří návrháři rozhodnou znovu vynalézt, znovu vytvořit nebo dokonce úplně přerušit standardní hardwarové interakce s jejich vlastními jedinečnými vzory rozhraní. Přerušení konzistence mezi hardwarovými pravidly uživatelského rozhraní a zkušenostmi s aplikacemi nemusí být špatný nápad, ale může být narušena konzistence vlastních aplikací.

Tři kroky k konzistentnímu návrhu uživatelského rozhraní

Při navrhování návrhů webových a mobilních aplikací byste měli v zásadě uvažovat o třech typech konzistence:

• 1. Zůstaňte v souladu s pokyny a chování uživatelského rozhraní zařízení
• 2. Zůstaňte v souladu s jinými podobnými weby nebo aplikacemi
• 3. Zůstaňte v souladu s vlastním designem

Pro účely tohoto článku bych se chtěl více zaměřit na třetí - udržení konzistence ve vašem uživatelském rozhraní. Jedná se o velký problém, hlavně proto, že nechcete svést své uživatele ve své vlastní aplikaci.

Nechcete, aby uživatel šel z vaší domovské stránky na podstránku a viděl různé styly nebo dokonce výrazně odlišné uživatelské interakce. Tato věc může uživatele překvapit nebo v některých případech dokonce vystrašit. Konzistence není jen velkým problémem celkové použitelnosti webu, může také výrazně zvýšit konverzi.

Konzistentní struktura a interakce

Toto je klíč k vytvoření konzistentního uživatelského rozhraní. Když se vyvíjíme, někdy zapomínáme, jak struktura a interakce ovlivní celkový dojem uživatele. Ale stejně jako plánování a vytváření plánů je důležité při stavbě domu nebo budovy, je také důležité pro vytvoření konzistentního, použitelného uživatelského rozhraní. Než začnete psát kód, je několik věcí, o kterých byste měli přemýšlet a naplánovat si je.

• 1. Zvažte, jak důsledně umisťovat prvky do celého webu nebo aplikace.
• 2. Přemýšlejte o tom, jaké vzory uživatelského rozhraní budete používat.
• 3. Naplánujte, jaké vstupní prvky budete potřebovat.
• 4. Zjistěte, jaké ikony budete potřebovat, a vyberte nebo vytvořte dobrou sadu ikon, která je pokryje všechny.

Umístění prvků je obrovský způsob, jak snížit překvapení uživatele a vytvořit konzistentní a spolehlivá očekávání. Udržujte své navigace na stejném místě, nic nedráždí uživatele rychleji než pohybující se nebo mizející navigační prvky. Rovněž loga a další značkové položky udržujte na stejných místech po celém webu.

„Nic nedráždí uživatele rychleji než pohybující se nebo mizející navigační prvky“

Pokud používáte postranní panel, netřeste boční lištou příliš změnou toho, co je v nich přítomno ze stránky na stránku. Některé z nich mohou souviset s obsahem na stránce, ale vyhnout se odebrání nebo dokonce přesunutí importu celkových prvků, jako jsou vyhledávací formuláře. Jednou z velkých věcí, kterou byste měli neustále umisťovat, jsou odkazy a tlačítka pro nastavení přihlášení a uživatele.

Zvažte vzory uživatelského rozhraní

Naplánujte si dopředu a přemýšlejte o tom, jaké vzory uživatelského rozhraní budete potřebovat. Potřebujete galerii? Modals? Akordeony? Boční panely? Plánování návrhových vzorů v předstihu vám pomůže nejen rychleji vyvinout a navrhnout aplikaci, ale přemýšlet o tom, jaké návrhové vzory budete potřebovat, také pomůže zjistit obsah předem, což vám může ušetřit spoustu času.

To také vyřeší problémy a zodpoví otázky předem, tímto způsobem, když přijdete na sekci nebo stránku na vašem webu, která vyžaduje rozhodnutí o uživatelském rozhraní, už jste to udělali a nezachytí vás vytváření chybných návrhových vzorů na celém webu.

Přemýšlejte také o svých formulářích před rukou. Naplánujte, jaké prvky formuláře budete potřebovat, a určete prvky, které nebudete potřebovat nebo které můžete nahradit. Prvky formuláře mohou být pro uživatele stejně strašidelné nebo dokonce obtížné, takže pokud můžete eliminovat nebo zaměnit některé vstupy, které mohou být překážkami, můžete to udělat.

"Pokud můžete eliminovat nebo zaměnit některé vstupy, které mohou být překážkami úrazu, udělejte to."

To je také skvělý způsob, jak odstranit rozhodování z procesu vývoje. Udržování konzistentních stylů, struktur a interakcí formulářů může někdy způsobit nebo narušit konverzní poměr.

Znovu naplánujte hlavu. Naplánujte si, jaké ikony budete potřebovat dopředu. Jedním z nejrychlejších způsobů, jak upevnit konzistenci, je být v polovině vývoje aplikace, když zjistíte, že budete potřebovat ikony pro tisk, pak si uvědomíte, že si nepamatujete, kde máte své ikony, ani když můžete najděte ikonu tisku, která odpovídá ostatním ikonám.

Ve skutečnosti nejde ani o problém se stylem, ale o interaktivní problém. Uživatelé si zvyknou na vzhled konkrétní ikony a budou schopni je rychle rozpoznat. Pokud ale používáte sadu ikon patchworků, můžete svého uživatele zmást nebo dokonce ztížit, aby určili, co určité ikony představují.

Konzistentní styl

Styl a design každého prvku uživatelského rozhraní je důležitý a zachování konzistence mezi nimi je také důležité pro uživatele. Stejně jako je důležité mít konzistentní sadu ikon, je důležité, aby vaše aplikace měla celkovou konzistenci designu. Můžete si myslet, že některá tlačítka jsou v pohodě, i když se nepřibližují k celkovému designu nebo barevnému schématu webu, ale to uživatele jen zmatí a bude vypadat ošklivě.

Při navrhování sady uživatelského rozhraní je třeba mít na paměti několik věcí, aby bylo dosaženo konzistence:

• 1. Barevné schéma
• 2. Styl
• 3. Hranice
• 4. Typ a písma
• 5. Velikost
• 6. Obrázky na pozadí
• 7. Účinky

Barvy

Jak jsem řekl dříve, udržujte barvu svého uživatelského rozhraní v souladu s barevným schématem vašeho webu. I když navrhujete výzvu k akci, kde chcete, aby tlačítka vynikla a byla si všimnuta, buďte opatrní, aby se vaše výzva k akci nelepila ošklivým komplimentem k vašemu přes všechny barevné schéma. Chcete-li vám pomoci, použijte nástroje jako Kuler nebo ColorSchemer k výběru barev, které spolu dobře ladí.

Když mluvím o udržení konzistentního stylu, mluvím o tom, že nepoužívám nějaké bláznivé tlačítko přechodu s vrženými stíny a zkosením, pokud je zbytek designu webu plochý a nemá na něm stín ani sklon. Kromě toho, že zůstanete v souladu s celkovým designem webu, zůstaňte v souladu se stylem prvků uživatelského rozhraní. Pokud na vstupních štítcích používáte určitou barvu nebo styl písma, držte se jich a používejte je na všech štítcích.

Hranice

Ahh, hranice. Příliš často vidím weby, které používají tři nebo čtyři různé tloušťky okrajů tlačítek nebo poloměry, což může být opravdu matoucí. Udržujte všechny své hranice na tlačítkách, vstupech, výběrech, galeriích, obrázcích a všech ostatních prvcích uživatelského rozhraní navzájem v souladu. To neznamená, že musíte použít na poloměru ohraničení, můžete jej smíchat pomocí několika hodnot nebo dokonce použít každý styl konzistentně na každý prvek.

Typ a písma

Použití stejného typu a písem ve vašich prvcích je docela důležitá věc, zejména při jednání s elementy formuláře. Zůstaňte v záhlaví konzistentní a nepoužívejte k mnoha písmům, i když se vám všechna budou líbit - můžete je uložit pro jiné projekty. Vstupy a tlačítka by měly mít styly písem, které se vzájemně shodují nebo se doplňují, aby byly formuláře snadno čitelné a předvídatelné.

Velikost

Velikost písem a dalších prvků by měla být vzájemně konzistentní nebo doplňková. Záhlaví a nadpis stránek by měl zůstat konzistentní, aby uživatel věděl, že tyto řádky textu ve skutečnosti odpovídají záhlavím a názvům. Stejná velikost platí také pro jakýkoli prvek uživatelského rozhraní z oblastí obsahu, odkazů, navigačních prvků nebo postranních panelů. Vyhněte se změně jejich velikosti tak, aby se drasticky zobrazovala mezi zobrazeními stránek, aby je uživatel mohl okamžitě rozpoznat při načtení stránky.

Obrázky na pozadí

Snažte se příliš nezměnit obrázky na pozadí. To se v těchto dnech moc nestane, ale stále je dobré se vyhnout změnám obrázků na pozadí ze zobrazení stránky na zobrazení stránky. Pokud tak učiníte, zkuste obrázek nějakým způsobem vzájemně porovnávat, aby stránky neztratily konzistenci. Měnící se obrázek na pozadí, zejména velký, může způsobit, že se web bude cítit nespojený a že se uživatel bude cítit, jako by vás dokonce úplně opustil, takže se opravdu pokuste tomuto pokušení vyhnout.

Efekty

Efekty, zejména světelné efekty, mohou způsobit, že se zdá, že se jedná o skvělý design webu, který uživateli nedává smysl. Pokud například na tlačítku používáte zvýraznění, které vypadá, jako by na něm svítilo světlo, použijte stejný světelný efekt na zkosený text v tlačítkách nebo zkosené textové vstupy.

Upřímně řečeno, ve skutečnosti to není obrovský způsob, jak to udělat nebo přerušit jednání s uživatelem, ale pro vybíravého prohlížeče si mohou všimnout nekonzistentnosti vašich efektů a nechat se rozptylovat od toho, co mají dělat s vaší aplikací nebo webem.

Nebuď nuda

Navrhování konzistence se může někdy zdát všední nebo dokonce nudné a možná budete chtít jen hodit něco do svého návrhu, abyste uživatele překvapili, a to je opravdu skvělé.

Je dobré držet uživatele na nohou, ale netřást si věci natolik, že jsou tak znechuceni nebo zmateni, že odcházejí a jdou někam jinam. Trocha konzistence může jít dlouhou cestou.