Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Jak má vypadat funkční mobilní web a aplikace finanční instituce

Podobné prezentace


Prezentace na téma: "Jak má vypadat funkční mobilní web a aplikace finanční instituce"— Transkript prezentace:

1 Jak má vypadat funkční mobilní web a aplikace finanční instituce
Petr Štědrý

2 Známe to všichni - sedíme na pohodlné židli, před námi je velký monitor s vysokým rozlišením a moderním prohlížečem internetu.

3 K dispozici máme počítač s výkonným procesore, spoustou paměti a vysokorychlostním internetovým připojením.

4 Píšeme všemi deseti na klávesnici s velkými příjemnými tlačítky.

5 A webu navíc věnujeme plnou pozornost.
Kontext využití klasického webu se od mobilního webu nebo aplikace nemůže více lišit.

6 Jiný kontext Mobilní telefony vyplnily i ty nejmenší skuliny v našich životech.

7 Jiný kontext Dostaly se do našich obývacích pokojů …

8 Jiný kontext Chodí s námi na nákupy ….

9 Jiný kontext

10 Jiný kontext

11 I způsob využití mobilního telefonu se změnil.
Z přístroje určeného výhradně ke komunikaci se stal ...

12 … univerzální nástroj.

13 Nové možnosti Nové chování
Tyto nové možnosti indukovaly i nové chování.

14 Dílčí požadavky Nudím se Urgentní požadavky
Ty vyplývají z nových kontextů využití a kombinují se v závislosti na aktuální potřebě. Urgentní požadavky

15 Web? Aplikace? !! !!! ?! ? Různí uživatelé mají různé potřeby
Potřebuji něco okamžitě vědět a chci být informován Hodně cestuji, chci mít k dispozici lokální informace Potřebuji komunikovat se svými zákazníky

16 Kde je bankomat? Najdu … Nebo chci vědět, kde je nejbližší pobočka či bankomat. To lze realizovat poměrně jednoduše i na mobilním webu.

17 Stav účtu? Zjistím … V případě smartbankingu to může být kontrola stavu účtu před nákupem a platbou kartou v obchodě … V případě výrazné, opakované a specifické potřeby je lepší zvolit aplikaci.

18 Chci zaplatit … Jednoduše
Přístup k pokročilým funkcím máme pouze z aplikace.

19 DOBRÝ MOBILNÍ WEB A APLIKACE MÁ …

20 Navigace

21 Velikost prvků a rozmístění
Velikost položek v navigaci je 27px a jsou těsně u sebe – lehce se může stát, že uživatel vstoupí do jiné než požadované sekce

22 Velikost prvků a rozmístění
Také nevhodné rozložení

23 Velikost prvků a rozmístění
Také nevhodné rozložení – bez mezer mezi sebou, malá ovládací tlačítka pro stránkování …

24 Velikost prvků a rozmístění
Velikost položek v navigaci je přibližně 60px – není potřeba dodatečných mezer

25 Velikost prvků a rozmístění
Velikost položek v navigaci je přibližně 60px – není potřeba dodatečných mezer

26 Formuláře

27 Struktura a vzhled Jednotlivá vstupní pole nesmí být příliš blízko u sebe.

28 Vstup Pro zadávání čísel je nutné přepínat klávesnici

29 Vstup Numerická klávesnice není vhodně uzpůsobená

30 Struktura a vzhled Velká plocha, funkční popisky, dobře ovladatelné

31 Vstup Klávesnici lze přepnout na čísla pomocí vhodného HTML typu vstupního pole u chytrých telefonů Je to vhodné také k prevenci chyb … Chytré telefony umí přepnout klávesnici i pro vhodnější zadávání ů nebo URL adres (např. iPhone)

32 OBSAH / KONTEXT

33 Samotný obsah Pokud není obsah přizpůsoben pro mobilní zařízení, nemá na mobilním webu co dělat – není totiž asi tak důležitý!

34 Písmo Chytré telefony zaznamenávají rozkvět především díky nízké ceně – tato zařízení však nemohou nabídnout tak kvalitní displeje, jako vyšší kategorie a malé písmo se na nich špatně čte! Webový prohlížeč má v základním nastavení velikost písma 16px – což je dostačující velikost pro adekvátní čtení.

35 Obsah / kontext Základní tabulka již určitě dnešní návštěvníky mobilního webu neuspokojí.

36 Obsah / kontext Mapa je dobrá, ale stále není využito ideálních možností pro dnešní zařízení a v malé mapě se bude složitěji vybírat

37 Obsah / kontext I seznam je třeba realizovat s ohledem na schopnosti zařízení.

38 Obsah / kontext Dnešní chytré telefony nabízejí ve svých prohlížečích přístup ke geolokačním službám – je tedy možné pozici zachytit přímo v mapě. Možnosti nabízejí i sledovat pohyb dané osoby (např. směr, rychlost, atp.)

39 Vizuální design

40 Grafické prvky a ikony

41 Grafické prvky a ikony

42 Pozor na Kontext Využijte možnosti zařízení dobré ux

43 Kontakty Petr Štědrý Dobrý web
UX Designér, lektor Dobrý web


Stáhnout ppt "Jak má vypadat funkční mobilní web a aplikace finanční instituce"

Podobné prezentace


Reklamy Google