Nutnost pro komplexní digitální produkty s uživatelským rozhraním — UI Style Guide
Co je potřeba k tomu, aby uživatelské rozhraní vašeho produktu bylo konzistentní a soudržné…
autor B. Mazoch, publikováno v Deníku Designéra | read in English
V mém předchozím článku 5 základních elementů UI designéra jsem zmínil, že konzistentnost uživatelského rozhraní patří mezi klíčové vlastnosti digitálních produktů, které vynikají výbornou uživatelskou použitelností. Konzistentnost má tak vliv na celkový uživatelský prožitek a významně pomáhá ve fázích návrhu i vývoje z pohledu rychlosti a snadnosti dokončení. Hlavní nástroj pro její udržení je tzv. UI Style Guide. Možná jste se už setkali s dalšími názvy jako například knihovna stylů, design framework, manuál grafického rozhraní apod. Pointa je ve všech případech stejná: jde o to navrhnout a udržovat systém v uživatelském rozhraní vašeho produktu.
Jde o to NAVRHNOUT A UDRŽOVAT SYSTÉM v uživatelském rozhraní vašeho produktu…
OBSAH
Pojďme se podívat na onu “UI Style Guide” blíže (pozn. snad nebude vadit používání tohoto anglického termínu, jsem na něj jednoduše zvyklý…). Tady je přehled toho, co ve článku najdete:
01. PŘÍNOSY
Jaké přínosy vám vytvoření UI Style Guide poskytne?
02. STAVEBNÍ KAMENY [checklist]
Co vše by dobrá UI Style Guide měla obsahovat?
03. KAM POKRAČOVAT DÁL
Doporučení na užitečné články zabývající se tvorbou UI Style Guide
01. PŘÍNOSY
Jaké přínosy vám vytvoření UI Style Guide poskytne?
Během své práce na různých softwarových produktech a digitálních řešení jsem zaznamenal hned několik přínosů, které vytvoření a používání UI Style Guide poskytuje. Skvělou věcí navíc je, že se tak děje ve fázích návrhu i vývoje:
- Konzistence — znovu ta několikrát omílaná konzistence a musím jí zminit i mezi přínosy. Konzistentnost v uživatelském rozhraní zlepšuje uživatelskou použitelnost a tím i uživatelský prožitek. To samo o sobě může přinést více spokojených uživatelů, více zákazníků a díky tomu samozřejmě i větší zisky. Jestliže budete mít definovaná pravidla, vzory, styly a jednotlivé elementy uživatelského rozhraní ve formě UI Style Guide, bude pro vás udržování konzistentnosti celého produktu mnohem jednodušší.
- Údržba —mezi vlastnostmi, které bývají požadavkem na komplexní softwarové produkty a digitální řešení, je také snadná údržba. Tím, že zavedete UI Style Guide uživatelského rozhraní, zajistíte právě snadnější údržbu produktu, protože uživatelské rozhraní tak bude definované po menších a lépe spravovatelných dílech.
- Znovupoužitelnost — jakmile máte vaše uživatelské rozhraní definované po menších dílech, můžete váš produkt stavět jako stavebnici. Vzpomínáte si na Lego? Lego je moje srdeční záležitost z dětství a UI Style Guide funguje hodně podobně. Pokud je UI Style Guide vytvořena důmyslně, změna na jednom místě v jedné dílčí části se projeví na všech místech, kde byla použita.
- Referenční místo — UI Style Guide by se měla stát pomyslným počátečním bodem vašeho designérského a vývojářského vesmíru. Místem, které slouží pro efektivnější komunikaci designérů a vývojářů. Místem, kde může každý snadno a rychle nakouknout pokud hledají odpověď na otázku jak je určitá část uživatelského rozhraní navržena a naimplementována.
02. STAVEBNÍ KAMENY [checklist]
Co vše by dobrá UI Style Guide měla obsahovat?
Ve firmě Bluewire Technologies, kde aktuálně pracuju jako in-house UI designér, máme zavedenou základní UI Style Guide pro náš softwarový produkt Epro (webový informační systém pro kliniky a nemocnice). Můžu potvrdit, že pociťujeme přínosy, které jsem zmínil v předchozí části i přesto, že naši UI Style Guide máme kam posunovat. Její vylepšování a rozšiřování je průběžný proces, který stojí za to právě díky zmíněným přinosům.
Níže vám představím jakýsi můj “čeklist”, kterým se řídím při správě a vylepšování UI Style Guide v naší softwarové firmě a zároveň i u svých mimopracovních projektů. K jednotlivým částem přikládám screenshoty skvělých ukázke online style guides organizací a firem jako jsou BBC.co.uk, MailChimp.com, MarvelApp.com, USA.gov a HealthCare.gov.
I. Typografie
- primární typ písma,
- případně sekundární typ písma (a ne víc, dva vhodně kombinované typy písma jsou pro vaše uživatelské rozhraní ve většině případů dostačující),
- vybrané řezy písem (základní, kurzíva, polotučné, …),
- příkladů textových stylů (nadpisy, podnadpisy, odstavce, popisky, …).
Ukázka níže: Jeden příklad vzorně definované typografie je z vládního webu USA.gov. Její tvůrci vysvětlují výběr typu písma a jdou ve specifikaci typografie ještě dále, když definují konkrétní textové styly a dokonce i vhodné textové kombinace. Autoři této style guide se opravdu poctivě zamýšleli nad tím, jak mít typografii celého projektu vizuálně pěknou a zároveň i funkční.
II. Paleta barev
- primární barvy,
- sekundární barvy,
- doplňkové barvy,
- barvy notifikací (varování, chybová hlášení, informace, validace, …),
- rozšiřující prvky palety barev (například gradienty nebo semi-transparentní překryvy).
Ukázka níže: Screenshot palety barev projektu MarvelApp.com ukazuje vizuálně i logicky pěkně navržené barevné schéma, jehož základem je barevnost firemní identity. Autoři navíc definují tmavé a světlé odstíny primárních barev, což jim dává prostor pro variace, ale pořád se zachováním konzistentnosti v odstínu. Paletu barev je dále rozšířena o doplňkové barvy neutrální šedé a barvami pro notifikace, které často patří mezi velmi důležité prvky uživatelského rozhraní.
III. Rozestavení a pozicování
- mřížka pro horizontální pozicování (grid systém),
- pravidla a vzory v rozestavení,
- pomocné konstanty (pro vertiální a horizontální mezery mezi jednotlivými prvky a elementy uživatelského rohraní).
Příklad níže: Grid systém (neboli mřížka) je podle mého názoru dalším základním stavebním blokem dobré UI Style Guide. Zároveň je mřížka nástrojem, který dokáže udržet elementy uživatelského rozhraní navzájem správně zarovnané. V projektu MailChimp.com to očividně dobře vědí a zřejmě i proto je grid systém s ukázkami použití součástí jejich Style Guide. Kromě samotné mřížky v ní můžete najít i užitečnou specifikaci breakpointů pro responzivní layout.
IV. Ikonky
- všechny ikonky na jednom místě (pomůže se zachování stejného vizuálního stylu,
- verze ikonek na tmavém i světlém pozadí,
- unifikované rozměry,
- definované oblasti řezů pro SVG export.
Ukázka níže: Rozhlasová a televizní společnost BBC má také zavedenou vydařenou unifikovanou knihovnu vzorů a elementů a do jejího základu řadí právě ikonografii. Na jednom místě tak definují všechny použivané ikonky, které jsou zároveň rozřazeny po tématických skupinách. Na ikonkách je patrné, že jejich vizuální styl je velmi konzistentní. V sekci “Rules for using icons” se mi osobně navíc líbí, že podrobněji popisují, jak navržené ikonky používat.
V. Elementy uživatelského rozhraní
Každý softwarový produkt má své specifické elementy uživatelského rozhraní. Níže jsou uvedeny některé z nich, které jsou důležité konkrétně pro náš produkt, o kterém jsem se zmínil na začatku této kapitoly. Berte je spíše jako inspiraci než kompletní seznam. Důležité je, aby tyto elementy byly vždy postaveny na předem definové typografii, paletě barev, pravidlech rozestavení a ikonkách:
- navigace (primární navigace, sekundární navigace, drobečková navigace, stránkování, …),
- tlačítka (primární/sekundární tlačítka akcí, tlačítka nástrojů, …),
- upozorňovací zprávy (varování, chybová hlášení, informace, validace, …),
- formuláře (textová pole, tlačítka, poplisty, validování, …),
- značky (značky pro typy osoby, značky statusu pacienta, značky pro typy dokumentů, …),
- další elementy (kalendář, časová osa pacienta, seznamy pacientů, seznamy dokumentů, karty, modální panely, …)
Ukázka níže: Na ukázce ze Style Guide hráče na poli emailového marketingu MailChimp.com můžete vidět výpis UI elementů, které jsou specifické pro daný projekt. Kromě živých ukázek jednotlivých elementů je vedle nich také zobrazen přímo i jejich zdrojový kód, což usnadňuje jeho použití při implementaci. To vše je doplněno o další poznámky, které každý element popisují ještě podrobněji a upozorňují na určité specifické vlastnosti.
VI. Šablony
Šablony jsou sady jednotlivých UI elementů používající vzorové texty nebo vzorová data (užitečné je taky vzít v úvahu stavy, kdy rozhraní nebsahuje žádná data):
- pohledy,
- sekce,
- stránky.
Ukázka níže: Další ukázka opět z webu USA.gov tentokrát ukazuje pěknou demonstraci šablon stránek, které jsou založeny na dílčích prvcích a elementech jejich Style Guide. Za velmi přínosné také považuju sekce “When to use”, “When to avoid” a “Guidance”, které podrobněji specifikují použití dané šablony.
VII. Další možné sekce UI Style Guide
- konvence pojmenovávání (pro soubory, složky, grafické elementy, exportované obrázky, …),
- pravidla pro strukturování (opět platí pro soubory, složky, grafické elementy, exportované obrázky, …),
- konvence pro psaní kódu,
- vzory interakcí s uživatelem,
- mikroanimace,
- texty a mikrotexty,
- jazykový styl,
- použití fotografií a videí,
- manuál firemní identity,
- a další…
Ukázky níže: Další části UI Style Guide můžou být hodně indidividuální v závislosti na tom, co je pro daný projekt užitečné. Níže přikládám pro vaši představu několik dalších ukázek. Například vládní web HealthCare.gov zahrnuje do své UI Style Guide artefakty firemní identity a také samostatnou sekci věnovanou použití fotografií. Digitální produkty od MarvelApp.com mají dobře vypracované animace a tak se není čemu divit, že mají svou speciální sekci věnovanou právě animacím. A na poslední ukázce z webu USA.gov můžete vidět, že například i design principy firmy či organizace, mohou být součástí UI Style Guide.
03. KAM POKRAČOVAT DÁL
Doporučení na užitečné zdroje zabývající se tvorbou UI Style Guide
Téma okolo UI Style Guides je docela široké a tak existuje spousta zahraničních zdrojů, které se mu nějak věnují. Níže jsem tak připravil svůj seznam vybraných článků, které pro mě byly přínosné v době, kdy jsem se o tvorbu UI Style Guides začal podrobněji zajímat. Stále se k některým z nich vracím, abych si osvěžil paměť. Myslím, že můžou být užitečné vám:
- Creating Style Guides publikováno na Alistapart.com
- How to create a FRONT END FRAMEWORK with Sketch
publikováno na Medium.com/sketch-app-sources - Designing Style Guidelines For Brands And Websites
publikováno na Smashingmagazine.com - Starting a new app design project
publikováno na Medium.com/ux-power-tools - Style Guide Best Practices publikováno na Bradfrost.com
- Design Systems publikováno na Blog.marvelapp.com
- Color in Design Systems publikováno na Medium.com/eightshapes-llc
- Space in Design Systems publikováno na Medium.com/eightshapes-llc
- a další články najdete na Website Style Guides Resources…
A tady je ještě jednou seznam skvělých ukázek online UI Style Guides, které jsou komentoval v předchozí kapitole a na které doporučuju kouknout, pokud hledáte konkrétní a praktickou inspiraci:
- BBC.co.uk
- MailChimp.com
- MarvelApp.com
- USA.gov
- HealthCare.gov
- pro ještě více příkladů navštivte Website Style Guides Resources…
Závěrem
Dá se říci, že každý softwarový produkt je samozřejmě odlišný a vyžaduje individuální přístup v návrhu i vývoji. Určitě jsem ale toho názoru, že většina takových produktů jednoduše se zavedením a udržováním UI Style Guide získá mnoho výhod v krátkodobém i dlouhodobém horizontu. Jestliže váš produkt onu UI Style Guide nemá, snad vás informace v tomto článku inspirovaly a navedly k tomu, abyste tento užitečný nástroj návrhové i vývojové fáze ve svém projektu zavedli.
V některém z dalších článků se budu podrobněji věnovat opět jednomu z témat z mého zamyšlení o 5 základních elementech UI designéra.
Pro další nové příspěvky sledujte můj design blog ►Deník Designéra.
Děkuju za přečtení!
Jak se vám článek líbil? 💚
Pokud pro vás byl článek užitečný, můžete jej níže podpořit potleskem, zobrazí se tak ostatním.
Chcete se na něco zeptat nebo sdílet svoji zkušenost? Pak mi určitě napište do diskuze. Budu vděčný i za každé online sdílení, třeba na Twitteru.
Článek napsal Břetislav “Brett” Mazoch během své designérské kariéry v Anglii. Tam se přestěhoval, aby následoval svoje cestovatelské sny a pracovní vášeň — UI/UX Design a Front-end Development.
