Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Neohýbejte svůj web na mobil, začněte znovu
1. Neohýbejte svůj web na mobil,
začněte znovu
Dayilweb SK, 14. 11. 2012
By @soundake
2. http://www.sxc.hu/photo/1394368
Dnes bych vám chtěl říct o tom, proč se věnovat návrhu pro mobilní zařízení, proč začít od
začátku a jaké benefity to bude mít pro vás a pro váš byznys.
9. 1 038 000 000
chytrých telefonů
http://www.comscore.com/Insights/Press_Releases/2012/11/comScore_Reports_September_2012_U.S._Mobile_Subscriber_Market_Share
Pět let po uvedení iPhonu a Androidu je na celém světě již přes 1 miliardu (1,038) chytrých
telefonů, což je oproti loňskému roku nárůst o 46 procent.
10. US Smartphone Penetration
100 %
75 % Non-Smartphone Users
50 %
25 %
Smartphone Users
0 %
Prosinec 09 Červen 20120 Únor 2011 Říjen 2011 Říjen 2012
http://www.asymco.com/2012/11/05/the-late-smartphone-adopter-paradox/
Jen v US již počet používaných smartphonů překročil 50 % hranici na společném trhu všech
mobilních telefonů.
13. 371 tisíc 300 tisíc
Během toho se aktivuje 300 tisíc iOS zařízení
14. 300 tisíc 1,5 milionu
a 1,5 milionu zařízení s Androidem.
15. 2 000 000
prodáno každý den
https://www.idc.com/getdoc.jsp?containerId=prUS23771812
Dohromady včetně Windows Phone, Symbianem a Blackberry to dělá 2 miliony zařízeních
prodaných každý den.
16. 22 %
Velká
Británie
A ještě jedna věc. Možná trochu šokující. Ve Velké Británii 22% uživatelů internetu nikdy
nepoužilo běžný počítač. V US je to kolem 40 %. V asii a v africe dokonce 50% a více.
17. 22 % 40 %
Velká
USA
Británie
A ještě jedna věc. Možná trochu šokující. Ve Velké Británii 22% uživatelů internetu nikdy
nepoužilo běžný počítač. V US je to kolem 40 %. V asii a v africe dokonce 50% a více.
18. 22 % < 50 % 40 %
Velká Afrika
USA
Británie Asie
A ještě jedna věc. Možná trochu šokující. Ve Velké Británii 22% uživatelů internetu nikdy
nepoužilo běžný počítač. V US je to kolem 40 %. V asii a v africe dokonce 50% a více.
19. Pojďme na to. Máte web. Každý z vás má jistě nějakou webovou stránku. Za těch několik let
co jí máte pěkně narostla.
20. Máte web. Každý z vás má jistě nějakou webovou stránku. Za těch několik let co jí máte pěkně
narostla.
21. A teď jste se ode mě dozvěděli, že spousta uživatelů si jí nejspíš bude chtít prohlížet na
nějakém tabletu či nedejbože chytrém telefonu. Co teď s tím?
23. Příkladem budiž sme.sk, kde zatím zřejmě mobilní verzi považují za zbytečnou a mobily zdá
se ignorují úplně.
24. Druhým příkladem může být například apple.com, kde sice také nemají nějakou variantu pro
chytré telefony, ale na druhou stranu celý jejich web je přizpůsoben tak, aby se i na malých
obrazovkách dobře používal.
26. Zase jeden příklad ze slovenska - zoznam.sk, kde mají speciální mobilní šablonu, která de
facto obsahuje vše co velký web.
27. Ze zahraničí ukážu web Národního divadla v Praze, kde jsme použili tzv. responsivní design.
28.
29.
30.
31. A pak je tu třetí varianta. Ta trochu těžší. Zkusíte se zamyslet a uděláte svůj mobilní web
zgruntu znovu.
Zkusme si říct, proč bychom to měli dělat znovu. Důvodů je samozřejmě více, ale povězme si o
dvou:
33. 13” 15”
551 cm² 693 cm²
Nejprodávanější monitory dneska jsou monitory o úhlopříčce 13 a 15 palců. Je to prostě proto,
že notebooků už se dnes prodává více než desktopů. Displej na mém 13palcovém MacBooku
má plochu zhruba 600cm2.
34. 3,5” 47 cm²
Ovšem můj iPhone má plochu displeje pouze 47 cm2.
38. Jen v menu se skrývá přes 60 položek. Jak tohle sakra dostali do mobilu? Udělali jednoduchou
věc. Vyškrtali všechno co není potřeba a nechali jen to, co skutečně potřeba je. Jádro aplikace,
to co lidé nejvíce používají, za čím tam chodí.
40. Malý prostor je úžasné omezení pro každého designera, protože malý prostor vás donutí
zjednodušovat, donutí vás skutečně zapřemýšlet nad tím co prioritu má a co prioritu nemá.
Sednout si, přemýšlet, škrtat, zjednodušovat.
42. Antoine de Saint-Exupery
Antoine de Saint-Exupery řekl jednu geniální větu: "Dokonalosti je dosaženo, nikoliv když již
nelze nic víc přidat, ale když není již možné nic odebrat."
43. Vydělává peníze
Podívejme se na to z pohledu byznysu. Vy se díky tomu, že se při návrhu soustředíte na to
podstatné, soustředíte tedy na to co, vám vlastně vydělává peníze. Ta služba, kterou nabízíte,
produkt, který prodáváte, to je to co lidí vlastně u vás chtějí. A můžete v klidu zapomenout na
balast kolem. Nevyhazujte peníze za něco, co nikdo moc neocení.
46. Ještě v loňském roce vypadal jejich web nějak takto. Velký banner s bílým nečitelným textem,
usměvavý pán, hromada divných obdélníků, v menu mraky věcí.
47. Menu
Tab 1
Tab 2
Tab 3 Promo
Tab 4
Tab 5
Box 1 Box 2 Box 3
V SYMBIU toto šablonu nazýváme jako promo a tři boxy.
48. Pak udělali mobilní verzi. Na prvním místě - založení pojištění. Jádro jejich bysnysu. V
druhém sledu nalezení agenta a hlášení škod.Pomoc v nouzi a pak nabídka dalších pojištění.
5 věcí! Tj. nejčastější věci, které u nich uživatelé řeší.
49. A tuhle zkušenost oni aplikovali i na web. Na první místě sjednání po jištění, hned vedle
kontakt a hlášení pojistné události. Pod tím nabídka dalších pojištění. Stejný pattern
50. Jeffrey Zeldman
Spíše perlička. Webový designer Jeffrey Zeldman zašel při návrhu svého nového webu ještě o
krok dál. Vlastně zůstal v kroku prvním.
Jeffrey Zeldman - A List Apart - Designing with Web Standards
54. Druhou věcí, se kterou se musíte na mobilu vypořádat je, krom malé obrazovky, že jsou to
zařízení pomalá. Mají pomalejší připojení k Internetu, mají pomalejší vykreslování stránek (né
každý má rychlý smartfon za 15 000 Kč, 600 Euro), mají pomalejší vykreslování Javascriptu
atd. Tudíž, aby byla vaše webová stránka na mobilu použitelná, tak musí být v prvé řadě
rychlá. Stránka se musí rychle načíst, musí se rychle vykreslit, všechny prvky, které na ní jsou
musí na uživatele reagovat bleskově.
55. Miller, R. B. (1968). Response time in man-computer conversational transactions. Proc. AFIPS Fall Joint Computer Conference Vol. 33, 267-277
Protože použitelnost velmi souvisí s rychlostí, což už je známo přes 40 let.
R.B.Miller - 1968 - Response time in man-computer conversational transactions
56. Speed is best feature
http://pacepirate.tumblr.com/post/23988387164
Dá se říct, že rychlost je ta nejlepší funkce, kterou svým uživatelům můžete dopřát. A jakmile
dokážete optimalizovat vaší stránku na mobilním zařízení, představte si, jak úžasně rychlá
bude na uživatelově notebooku či stolním počítači.
58. “Mobile experiences fill the gaps while we wait. Nobody
wants to wait while we wait.” - Mike Krieger, Co-founder
Instagram
Lidé velmi často používají mobilní zařízení, když čekají a nikdo nechce čekat, když čeká.
60. 100ms zpoždění při vypisování výsledků vygeneruje ročně 1%
ztrátu. Což je zhruba 200 milionů dolarů ročně.
400ms zpoždění výsledků sníží o 5-9% celkový provoz na
stránkách.
500ms zpoždění snižuje provoz ve vyhledávači o 20%.
1s zpoždění výsledků snižuje příjem o 4%.
10% nejrychlejších uživatelů zůstává na stránkách o 50% déle než
10% uživatelů pomalých.
Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters
Studie za studií potvrzují, že nedostatečná rychlost vašeho webu vás může připravit o slušné
příjmy.
Amazon - 100ms zpoždění při vypisování výsledků vygeneruje ročně 1% ztrátu. Což je
zhruba 200 milionů dolarů ročně.
Yahoo - 400ms zpoždění výsledků sníží o 5-9% celkový provoz na stránkách
Google - 500ms zpoždění snižuje provoz ve vyhledávači o 20%.
Bing - 1s zpoždění výsledků snižuje příjem o 4%
AOL 10% nejrychlejších uživatelů zůstává na stránkách o 50% déle než 10% uživatelů
pomalých.
63. Kde uživatelé nejčastěji používají mobil pro přístup k internetu? Kdy navštíví právě ty vaše
webové stránky?
64. Většinou je to v tramvaji, v autobuse či v autě. Tedy když lidé jedou z práce či do práce.
65. http://www.sxc.hu/photo/701461
Dalším případem může být situace, kdy člověk někde čeká - na zastávce tramvaje, ve frontě
na poště, v čekárně u doktora či na pražské magistrále :) To jsou případy, kdy návštěvníci
vašich potřebují specifické informace.
67. Thing different!
Tudíž, při návrhu webové stránky či aplikace musíte přemýšlet nejen o tom, jaké zařízení váš
návštěvník používá, ale také kde ho používá, za jaké situace. Co právě dělá. Protože né vždy
ho zajímají vaše tiskové zprávy, né vždy ho zajímá jaké ocenění jste dostali ve webové
soutěži, né vždy ho zajímá hromada flashových bannerů a navíc málokdy je to člověk z vaší
vlastní firmy.
68. http://www.flickr.com/photos/92921037@N00/5532840143/
Když navrhujete weby pro mobilní zařízení, tak se musíte vyrovnat se třemi problémy: malá
obrazovka, pomalé načítání stránek a místo. Jsou to dva problémy a zároveň skvělé
příležitosti, jak vytvořit příjemnou a svižnou prezentaci či službu.
69. Když navrhujete weby pro mobilní zařízení, tak se musíte vyrovnat se třemi problémy: malá
obrazovka, pomalé načítání stránek a místo. Jsou to dva problémy a zároveň skvělé
příležitosti, jak vytvořit příjemnou a svižnou prezentaci či službu.
71. “Yes, I am...”
Návrh pro mobilní zařízení dokáže zlepšit uživatelskou zkušenost i na velkém webu.
Máte méně funkcí, které jsou ale zatraceně rychlé a vymazlené.