Návrh redesignu služby: Brno iD

Ota Škvor
DESIGN KISK
Published in
3 min readFeb 9, 2023

Webové stránky jsou jednou z věcí, na které je v dnešní době kladen velký důraz. Nejenom že jsou nedílnou součástí internetu, ale za posledních 20 let se jak ve státním, tak soukromém sektoru tak zpopularizovali, že společně s tím vzrostly i nároky na jejich grafickou a funkční úroveň. V roce 2022 používalo internet v průměru pět miliard lidí denně, a i když jsou do čísla započítány i oblasti jako: sociální média atd.., tak počet webovek nutný na pokrytí tolika uživatelů je obrovský. Bohužel to ale neznamená že všechny dodržují webové standardy, které se od aktuálních stránek očekávají, ba naopak, stránek, které jsou špatně navržené a kvůli tomu uživatelsky nepřívětivé je plno a setkáváme se s nimi na denní bázi.

Příkladem hůře navržené stránky je webové rozhraní e-shopu městských služeb Brno iD. Jedná se o webovky, které zprostředkovávají městské služby v online podobě. Většinu věcí je tak možno vyřídit z pohodlí domova a nemuset tak jezdit do centra Brna osobně. Hlavními nabízenými službami jsou: prodej šalinkaret, řešení placení odpadů, turistické karty, platby vůči knihovně a další.

Redesign webu Brno iD

Starý design webu Brno iD

Web Brno iD je zbytečně komplikovaný a uživatelsky nepřívětivý, a to především pro návštěvníky, kteří nemají s webem žádnou předešlou zkušenost. Úvodní stránka webu obsahuje zbytečně moc odkazů a informací, které jsou jen minimálně strukturované a na první pohled by mohli být lépe uspořádány. Vycházím i z vlastní zkušenosti, s webem jsem se poprvé setkal několik měsíců zpět a trvalo mi několik desítek minut pochopit jakým způsobem si zakoupím šalinkartu a co pro to mám udělat, což pro portál tohoto typu neznamená nic dobrého, obzvláště pokud vezmeme v potaz, že Brno iD má aktuálně téměř 360 tisíc uživatelů a každým měsícem jich tisíce přibývají.

Drobné nedostatky nalezneme i ve zbytku aplikace. Některé stránky jsou sice vytvořené lépe než jiné, nicméně žádné nejsou navrženy perfektně a vždy obsahují nedostatky. Chybně navrženým elementem vyskytující se napříč celou aplikací je například i navigace na horní liště, která až na tlačítko „služby“, které je zde umístěno správně, obsahuje několik typů navigačních tlačítek, které mají výrazně nižší prioritu a měli by být umístěny níže na stránce a udělat tak místo pro důležitější funkce.

Další nevýhodou je visuální zpracování webovek. V porovnání s jinými státními či městskými weby web Brno iD nepůsobí na první pohled profesionálně a z mého pohledu by zasloužil částečný či kompletní redesign. Proto jsem se rozhodl tento nápad zrealizovat a navrhl jsem jednu z možností, jak by mohl nový design úvodní stránky vypadat.

Nový design webu Brno iD

Hlavním cílem bylo zkombinovat vysokou uživatelskou přívětivost s moderním designem. V prvním kroku jsem si sepsal všechny funkce aktuálně obsažené na úvodní stránce a poté jsem je omezil jen na ty které by uživatel na úvodní stránce očekával. V tomto kroku jsem klad důraz především na kvalitu, protože kdyby byla v této fázi udělána chyba, mohlo by to mít zásadně negativní vliv na výsledný produkt. Dalším krokem bylo vytvoření tzv. wireframů. Wireframy pomáhají designérovi vytvořit základní myšlenku layoutu (rozvržení) chystaného produktu a pomáhají ji lépe vizualizovat. V mém případě jsem vytvořil několik verzí wireframů, každý reprezentující jiný pohled na věc. Po ujasnění si, jak by měla nová stránka vypadat, jsem se konečně posunul do poslední fáze, a to do vytváření tvz. high fidelity prototypu, který představuje finální design nového vzhledu webu Brno iD.

Nový prototyp omezil počet funkcí a odkazů na úvodní stránce na ty nejdůležitější a kompletně změnil visuální styl, který působí moderněji a profesionálněji a obsahuje jen to co by uživatel od stránky očekával.

--

--