Design systém zní jako téma pro velké firmy s vlastním designovým oddělením. V e-commerce ale řeší docela přízemní problém: proč má e-shop pět různých tlačítek, tři odstíny oranžové a čtyři různé podoby formuláře.
Co to vlastně je
Design systém je sada hotových prvků a pravidel, jak se používají. Ne obrázek, jak má web vypadat, ale stavebnice, ze které se stránky skládají. A popis toho, kdy se který díl použije.
Prakticky obsahuje:
- Barvy a písma včetně pravidel, kde se používají a v jakém kontrastu.
- Prvky rozhraní. Tlačítka, pole formulářů, karty produktů, hlášky, filtry.
- Rozestupy a mřížku, aby se stránky neskládaly pokaždé jinak.
- Stavy, jak vypadá tlačítko po kliknutí, pole s chybou, karta u vyprodaného zboží.
- Pravidla pro texty, jak se pojmenovávají tlačítka, jak zní chybové hlášky.
Poslední bod se často vynechá, přestože je nejlevnější a má velký dopad. Na chybových hláškách totiž závisí, jestli zákazník objednávku dokončí. Podle výzkumu Baymard Institute 31 % webů formulář průběžně nekontroluje a zákazníci se u chyb hlášených až po odeslání zastavují, někteří nákup vzdají.
Design systém se nevyplácí tím, že je hezčí. Vyplácí se tím, že se přestanete pokaždé znovu rozhodovat o věcech, které jste už jednou vyřešili.
Kdy se to vyplatí
| Situace | Vyplatí se? | Proč |
|---|---|---|
| Jeden e-shop, úpravy dvakrát ročně | Ne | Náklad se nevrátí, stačí dobře udělaná šablona |
| Jeden e-shop, průběžný rozvoj | Spíš ano | Každá další úprava je rychlejší a levnější |
| Víc značek se společným zázemím | Ano | Jednou vyřešené prvky, jen jiné barvy a obsah |
| E-shop plus aplikace nebo portál | Ano | Jinak se rozhraní rozejdou a zákazník to pozná |
| Chystaný redesign | Ano, jako součást | Nejlevnější chvíle to udělat je právě tehdy |
Třetí řádek je nejčastější reálný důvod. Když spravujete víc značek, každá změna se dnes dělá několikrát. A design systém je přesně to, co z několikrát udělá jednou.
Co se tím reálně ušetří
Úspora není v tom, že se rychleji kreslí. Je ve třech méně viditelných věcech:
- Nemusí se znovu rozhodovat. Většina času u drobných úprav padne na diskusi o věcech, které už jednou někdo vyřešil.
- Nemusí se znovu testovat. Prvek, který jednou prošel testem na mobilu, s klávesnicí i s odečítačem, se při každém dalším použití netestuje od nuly.
- Nová stránka vzniká skládáním. Místo návrhu od nuly se poskládá z dílů, které existují.
Druhý bod je z dlouhodobého hlediska nejcennější, a je to zároveň odpověď na otázku, která se k tomuhle tématu často nepřipojuje: přístupnost se nejlevněji řeší v komponentě. Když má tlačítko a formulářové pole správný kontrast a dají se ovládat klávesnicí, platí to všude, kde se použijí. Celou přístupnost e-shopu tím ale nevyřešíte: alternativní texty obrázků, struktura nadpisů nebo srozumitelnost obsahu se řeší stránku po stránce. A u většiny e-shopů prodávajících spotřebitelům je to povinnost: týká se jich zákon č. 424/2023 Sb. o požadavcích na přístupnost, nad kterým má dozor Česká obchodní inspekce. Výjimku mají mikropodniky. Co všechno přístupnost obnáší, rozebírá článek o přístupném e-shopu.
Design systém a brand manuál nejsou totéž
Časté nedorozumění, které stojí peníze. Brand manuál popisuje značku: logo, barvy, tón komunikace, použití na tiskovinách. Design systém popisuje rozhraní, jak se chová tlačítko, co se stane po odeslání formuláře.
Jedno z druhého automaticky nevyplývá. Z brand manuálu se dá vyjít, ale sám o sobě neřekne, jak má vypadat karta produktu u vyprodaného zboží. To je práce navíc a v nabídce má být naceněná zvlášť.
Jak to udělat, aby to nezapadlo
Nejčastější osud design systému je, že vznikne, chvíli se používá a pak se od něj začne odbočovat, protože je rychlejší udělat výjimku než dohledat pravidlo.
- Začněte malým rozsahem. Tlačítka, formuláře, karta produktu, hlášky. Ne všechno naráz.
- Držte ho tam, kde se pracuje. Systém v prezentaci, ke které nikdo nemá přístup, je k ničemu.
- Mějte jednoho člověka, který rozhoduje o výjimkách. Bez toho se systém rozpadne do půl roku.
- Revidujte ho jednou ročně. Prvky, které nikdo nepoužil, vyhoďte.
- Neřešte dokonalost. Použitelný systém se šesti komponentami je lepší než dokonalý, který nevznikne.
Kdy je to nejlevnější
Jako samostatnou zakázku to klienti poptávají málokdy a obvykle je to správně: nejlevnější je udělat design systém jako součást [redesignu nebo nového e-shopu](/sluzby), kdy se prvky stejně navrhují znovu. Přidaná práce je pak v popisu pravidel a v tom, že se prvky staví tak, aby byly znovupoužitelné.
Jako samostatný projekt na existujícím e-shopu je to dražší, protože se nejdřív musí zmapovat, co všechno na e-shopu je. A obvykle se přitom zjistí, že prvků je několikanásobně víc, než kdokoli čekal.
