Daily UI – stránka 404

V rámci další Daily UI výzvy jsem měl navrhnout stránku 404 – tedy stránku, která se zobrazí v případě, že daný obsah nebyl nalezen. V popisu cvičení bylo, že stránka by měla ideálně reflektovat brand a být uživatelsky přívětivá.

Shodou náhod jsem v práci poměrně nedávno řešil podobu naší 404 stránky. Proto jsem zkusil prozkoumat možnosti a přijít s nápadem, který by naší současnou stránku alespoň trochu vylepšil.

Moc technické a vágní

V práci jsme nedávno popisovali případy použití našich UI elementů, komponent a vzorů z naší knihovny. Během toho jsem se na Slacku pozastavil nad tím, jak naše 404 stránka vypadá.

„Popisuju naše komponenty pro stránku 404. Co tak nad tím přemýšlím, dává smysl zmiňovat tu ‚404‘? Je to přeci jen docela technická věc (HTTP response code), což není zrovna moc přivětivá reprezentace. Co myslíte?“

Naše současná stránka 404 je podle mě dost technická a vágní.
Naše současná stránka 404 je podle mě dost technická a vágní.

Vždy preferuji něco více lidského, co lidé snadno pochopí. Navrhl jsem tedy variantu pouze s nadpisem „Stránka nebyla nalezena“ a s tím, že bychom mohli využít některou z našich existujících ilustrací.

Nikam jsme ale nepokročili. Přeci jen máme důležitější věci na práci, například předcházet tomu, aby se na takovou stránku vůbec dostali. Nicméně v rámci výzvy jsem se stějně zamyslel nad tím, jak bychom mohli naši stránku zlepšit.

Nápady

Naše platforma (ve zkratce) umožňuje našim zákazníkům řídit procesy od výroby, správy skladů až po logistiku. V nápadech jsem se tedy točil kolem:

  • Prázdných krabic,
  • Doručování zboží zákazníkům,
  • Prodávaného zboží, například nepotiskutého trička.
Různé nápady pro doplňující ilustraci, která by mohla být součástí stránky.
Různé nápady pro doplňující ilustraci, která by mohla být součástí stránky.

Snažil jsem se přijít s něčím trochu veselejším, ale stále jasně lidem vysvětlit:

  • Co se stalo a co je možnou příčinou.
  • Co případně dělat dál.

Z nápadů jsem si vybral jedno téma, které jsem rozpracoval více do detailu.

Něco tu chybí

V rámci naší platformi mi přišlo zajímavé zobrazit na stránce situaci, kdy zákazník dostane od kurýra balíček, ve kterém něco očividně schází.

Rozkreslení nápadu od detailnějšího náčrtku až po barevný obrázek.
Rozkreslení nápadu od detailnějšího náčrtku až po barevný obrázek.

Tato scéna mi přišla pro danou situaci docela vtipná, ale stále umírněná. Pro ještě trochu lepší efekt jsem jí doplnil o jednoduchou animaci a do finálního návrhu přidal vhodnou textaci.

Jak by mohla naše 404 stránka vypadat.
Jak by mohla naše 404 stránka vypadat.

Výsledek se mi docela líbí, i když si jej dokáži představit trochu jinak. Nicméně si myslím, že by pro náš součastný styl mohla klidně fungovat.

Vždy bude co zlepšovat

Vím, že ilustrace není dokonalá, stejně jako animace. Mohl jsem se návrhu trochu více pověnovat. Nicméně jsem nápad na řešení nasdílel kolegům s tím, že pokud bychom něco takového chtěli mít, určitě bych na tom ještě zapracoval.

V tomhle se mi právě výzvy v rámci Daily UI opravdu líbí. Nutí mě zkoušet a učit se nové věci. Před tím jsem totiž například nikdy nedělal v After Effects a protože stále více přemýšlím v intecích animací, začal jsem se s ním učit pracovat.

Poznámka: Budu moc rád, pokud mi do komentářů napíšete, co si o mém nápadu myslíte. Moc mi to pomůže v dalších výzvách. Díky moc 👍.

Napsat komentář