V rámci další Daily UI výzvy jsem měl navrhnout tzv. Flash Message, tedy potvrzovací hlášku, pro úspěšně doběhlou akci, ale také pro chybu.
Potvrzovací hlášky v návrzích poměrně často používám, kolikrát už jsem je i navrhoval. V rámci výzvy jsem tedy zkusil přijít trochu s jiným návrhem, který bude více lidský a doplněný o další části dané interakce.
Obdélník v. 102
V rámci své rozmýšlení jsem uvažoval nad tím, jak by takové potvrzovací hlášky mohly vypadat. Sám už jsem jich několik navrhl a z uživatelských testování vím, že když jsou udělané dobře, tak:
- Si jich lidé všimnou, ale neruší je.
- Lidé pochopí, co se stalo a co případně dělat dál.
V rámci výzvy jsem tedy přemýšlel nad tím, jak by hláška mohla vypadat, aby:
- Se dala aplikovat v produktu pro jakékoliv zařízení.
- Lidé si jí všimli (ideálně aby nerušila) a dobře posloužila svému účelu.
Když se podíváte do různých produktů na to, jak hlášky vypadají, uvidíte vlastně variaci na to samé (což nemyslím špatně):
- Většinou jde o obdelníky, které se v určitou chvíli v rozhraní objeví.
- Úspěch je symbolizován „fajfkou“ a zelenou barvou.
- Chyba je označena vykřičníkem/křížkem a červenou barvou.
Sám jsem navrhoval hodně podobné hlášky. V rámci výzvy jsem si ale říkal, zda by přeci jen nemohly vypadat trochu jinak.
Jde mít něco lidštějšího?
Potvrzovací hlášky se snažím vždy navrhovat tak, aby člověk jasně věděl, co se stalo a v případě chybových hlášek se dozvěděl:
- Proč se to stalo.
- Jak se z chyby zotavit.
Typicky takové hlášky vyskakují někde na vršku obrazovky. Pokud s nimi designéři nechtějí příliš „otravovat“, umístí je někam do spodních rohů.
Ve svých nápadech jsem vedle této formy přemýšlel i nad tím, jak je udělat trochu lidštější (a možná i zábavnější). Hrál jsem si tedy s využitím motivu (smyslu) dané aplikace, například:
- Pro sport tracker využít například téma fotbalu – v případě úspěchu zobrazit například ilustraci vstřelené branky, v případě neúspěchu zobrazit tzv. „krompáč“, tedy že hráč kopne do země místo do míče.
- Pro e-mailového klienta využít motiv papírové vlaštovky a třeba ukázat, že v případě neúspěchu se poničí o zeď, v případě úspěchu hezky odletí.
Nápad se mi pro e-mailového klienta zalíbil. Proto jsem jej dále zkoumal a nakonec si jej vybral jako návrh výsledného řešení.
Ukázat průběh i výsledek
Vybral jsem si nápad s odesíláním e-mailu, ve kterém bude hrát roli papírová vlaštovka (což je také trochu proklínaná ikonka, protože lidé díky provedení často neví, co to vlastně je). Tedy jakožto symbol odeslání v rámci odesílání zprávy.
Nechtělo se mi ale přemýšlet pouze o hlášce samotné. Přeci jen je součástí nějaké interakce (typicky na jejím konci). Do návrhu jsem tedy chtěl alespoň částečně zapojit i průběh akce a snažil se, aby hláška zapadla do kontextu.
Co kdybych tedy místo točících se koleček ukázal průběh akce trochu více reálně a stejným způsobem lidi informoval i o výsledku, například pomocí animace hozené vlaštovky?
Zaměřil jsem se na danou interakci a snažil se případného uživatele informovat o:
- Odesílání e-mailu,
- Neúspěšném odeslání,
- Úspěšném odeslání.
Chtěl jsem vlastně jednoduše a lidsky ukázat, co se děje a zda byla zpráva odeslána. (V případě chyby jsem využil retry spíš pro účel ukázky než jako finální řešení.)
Výsledná forma animace by samozřejmě hodně závisela na stylu aplikace, ve které by byla použita. Vždy by měla přirozeně zapadnout do jejího vizuálního provedení.
Také jsem si říkal, že podobným způsobem bych mohl informovat o výsledku i jiných akcí, nejen odesílání e-mailu. Mohl bych díky tomu produkty odlišit a lidi „zabavit“ u déle probíhajících akcí.
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 👍.