Jednou z nejzajímavějších částí testování je práce s designem. Testování designu pro mě znamená propojení technických detailů s tím, jak aplikace působí na uživatele. I když aplikace funguje perfektně, špatné zarovnání, jiné barvy nebo nejasný text můžou rychle zkazit první dojem.
V tomhle článku se podíváme na to, proč má smysl věnovat pozornost UI testování, co při něm kontrolovat, jaké nástroje se mi v praxi osvědčily a proč je dobré občas si nasadit „uživatelské brýle“.
Proč testujeme design?
Na první pohled se může zdát, že funkcionalita je důležitější než vzhled aplikace. A je pravda, že hodně záleží na kontextu projektu a požadavcích klienta – ne vždy je design prioritou a například u interních systémů může být vzhled druhořadý.
Pokud ale mluvíme o prvním dojmu, UI hraje zásadní roli – je to první, co uživatel uvidí. A chyba ve vzhledu, ať už je to špatné zarovnání, jiný odstín barvy nebo nečitelný text, může rychle narušit důvěru v aplikaci. Jako testeři máme výhodu, že můžeme tyto nedostatky zachytit ještě předtím, než se k uživateli vůbec dostanou.
Co kontrolovat při UI testování
Při testování UI se zaměřuji na několik hlavních oblastí:
Barvy – Odpovídá implementace návrhu? Mají barvy správný kontrast?
Layout – Jsou prvky zarovnané, mají správné rozestupy a velikosti? Je provedení „pixel perfect“?
Texty – Jsou bez gramatických chyb, srozumitelné, s použitím správného fontu a velikosti?
Responzivita – Funguje design správně na všech zařízeních a velikostech obrazovky?
Nástroje, které nám usnadňují práci
Figma
Základní místo, odkud vše začíná. Návrhy od designerů si tu můžeme otevřít a:
změřit vzdálenosti mezi prvky (cmd + option)
zkontrolovat zarovnání a rozměry
vyčíst HEX kódy barev
- používat komentáře pro zpětnou vazbu (nezapomeňte označit kolegu, jinak si komentář nemusí všimnout)
DevTools
Nástroje pro vývojáře slouží jako neocenitelný pomocník pro webové aplikace:
inspekce elementů pro kontrolu barev, fontů a rozměrů
nastavení konkrétního rozměru zařízení pro test responzivity
porovnání parametrů s návrhem z Figmy
Pro mobily
Na mobilních aplikacích nemáme tolik nástrojů jako na webu, ale i tady existují šikovné pomůcky:
- Screen ruler – jednoduchý nástroj pro rychlé měření vzdáleností a kontrolu zarovnání prvků
- Rocketsim (s Xcode) – pro iOS simulátory, kde můžete overlayem porovnávat design s aplikací, měřit pozice prvků, kontrolovat barvy a dokonce testovat přístupnost
Další užitečné pomůcky
- WhatTheFont pro zjištění fontu ze snímku obrazovky
Myslete jako uživatel
Testování designu není jen o hledání pixelových odchylek. Důležité je i to, jak aplikaci vnímá uživatel:
Dá se aplikace snadno ovládat?
Není navigace příliš složitá?
Co by mohlo uživatele zmást?
Funguje aplikace i pro lidi s různými potřebami, například pro uživatele se zhoršeným zrakem?
Vyplatí se testovat i netypické scénáře typu „Co se stane, když kliknu sem?“ a myslet na různé úrovně technické zdatnosti uživatelů.
Testování designu
UI testování je kombinací technické pečlivosti a empatie. Správné nástroje a přístup „myslete jako uživatel“ vám umožní odhalit nejen vizuální chyby, ale i problémy, které by mohly zhoršit celkový dojem z aplikace a tím i uživatelskou zkušenost. A to je přidaná hodnota, kterou jako testeři přinášíme: Produkt, který nejen spolehlivě funguje, ale i dobře vypadá a je radost ho používat.
