Jak navrhujeme aplikace

Od úkolu k promyšlené obrazovce.

V návrhu řešíme, co lidé potřebují vidět, jak udělají další krok i co se stane při chybě. Projděte si čtyři kroky na příkladu ze svého oboru.

Projděte si návrhNapište nám o projektu
Vyberte si příklad pro celý postup

Krok 1 · Zadání

Nejdřív víme, co má člověk udělat.

Pojmenujeme úkol, uživatele a rizika. Podle nich pak rozhodujeme, co patří na obrazovku a co by jen odvádělo pozornost.

Poslat peníze a mít jistotu, že dorazí správnému člověku ve správné výši.
Pro koho navrhujemeZákazníci, kteří z telefonu platí člověku nebo firmě.
Co potřebuje vědětČástka, příjemce i cena jsou jasné dřív, než se cokoli pohne.
Na co si dát pozorPlatba na špatný účet nebo podvodníkovi.

Krok 2 · Reference

Podíváme se, jak to řeší jiné aplikace.

V knihovně Mobbin porovnáme skutečné obrazovky podobných postupů. Vybereme principy, které dávají smysl pro váš úkol, a ověříme je v kontextu produktu.

Co z referencí zvažujeme:Nejdřív částka a příjemceKontrola nového příjemceCelá cena před tlačítkemKdy peníze dorazíJedna akce na dosah palce

Reference z knihovny Mobbin: obrazovky veřejných iOS aplikací. Názvy a ochranné známky patří jejich vlastníkům. Uvedené aplikace nejsou klienty Tolaronu.

Krok 3 · Návrh

Každý prvek má svůj důvod.

Zapínejte jednotlivé prvky a sledujte, co do návrhu přidávají. Poznámky k přístupnosti ukazují rozměry a kontrast. Při testování hotové aplikace patří ke kontrole i větší písmo a čtečky obrazovky.

Prvky v návrhu2 z 5
Co zatím chybíKontrola nového příjemce

Nový příjemce zatím nedostává žádné zvláštní upozornění.

Na co myslíme při návrhu

  • Plocha pro dotyk: doporučení platforem je alespoň 44 × 44 bodů na iOS a 48 × 48 dp na Androidu.
  • Čitelný text: kontrast alespoň 4,5 : 1, u velkého textu 3 : 1 podle WCAG 2.2 AA.
  • Větší písmo: rozhraní musí zvládnout změnu velikosti textu.
  • Ovládání s asistencí: srozumitelné popisky a pořadí prvků pro čtečky obrazovky.
  • Cesta z chyby: vysvětlit problém a nabídnout další krok.

Krok 4 · Souvislosti

Vaše značka. I když se něco nepovede.

Porovnejte oba návrhy, rozbalte důvody jednotlivých změn a vyzkoušejte chybový stav. Přepnutí barev ukazuje, jak může stejná struktura nést jinou značku.

Stav ukázky
Vyberte barvy ukázky
Výchozí návrhPromyšlený návrh

  1. Částka a příjemce jsou nahoře, aby je šlo před potvrzením snadno zkontrolovat.

    Ve výchozím návrhu: schovaná ve formulářiReference: Wise, Airwallex

Oba ilustrační návrhy vytvořil Tolaron s vymyšlenými daty. Barvy vedle modré Tolaronu představují ukázkové značky.

Další příklady · Fintech

Stejný přístup, další úkoly.

Postupy z fintechu

Úvod a zůstatek

  • Zůstatek je na obrazovce největší.
  • Dvě až čtyři akce hned pod ním.
  • Transakce seskupené po dnech, nejnovější nahoře.

Co nás zaujalo: Starling ukazuje vedle běžného zůstatku i součet napříč spořicími Spaces.

Co to znamená pro návrh: úvodní obrazovka odpoví na „kolik mám?“ na první pohled a další krok je na jedno klepnutí.

Reference z knihovny Mobbin: obrazovky veřejných iOS aplikací. Názvy a ochranné známky patří jejich vlastníkům. Uvedené aplikace nejsou klienty Tolaronu.

Co má vaše aplikace lidem usnadnit?

Napište nám o projektu← Zpět na Jak pracujeme
  • Začneme vaším zadáním: kdo bude aplikaci používat, co potřebuje udělat a na co má aplikace navazovat.
  • Reference pomohou při rozhodování: jak uspořádat informace, kdy ukázat cenu nebo jak nabídnout pomoc.
  • Výsledný návrh přizpůsobíme vašemu produktu, značce a konkrétním požadavkům. Ověření plánujeme podle rizik projektu.