35. htp:/w w ickr phot 73 91156@N0 / 8 3
t / w .fl .com/ os/ 4 03 0 16678/
36.
37. M l , R B. (1968 R
iler . ). esponse t in ma comput conv saiona ta ct Pr AIPSF l J Comput Confer V . 3 , 267-
ime n- er er t l r nsa ions. oc. F al oint er ence ol 3 277
39. htp:/w w ickr phot 7229654 03 24 13 7/
t / w .fl .com/ os/ 2@N0 / 8 4 8
40. “M e exper
obil iences fil t ga w e w w it Nobodyw nt t wait while we wait.” -M
l he ps hil e a . aso ike
Kr , Co-
ieger founderInst gr m
aa
41. htp:/w w ickr phot 128 6528 065750 74
t / w .fl .com/ os/ 3 @N0 / 53 7/
42. A zon -10 ms zpož ění při v
ma 0 d ypisov n v sl ů v
áí ý edk ygener e r čně1% zt áu. Cožj zhr 20 mil ů
uj o rt e uba 0 ion
dol r r čně.
aů o
Y hoo -4 0 zpož ění v sl ů sníž o 5- cel ýpr oz nast á á
a 0 ms d ý edk í 9% kov ov r nk ch
G e -50 ms zpož ění sniž e pr oz v v edá a i o 20
oogl 0 d uj ov e yhl v č %.
Bing -1s zpož ění v sl ů sniž e příj o 4
d ý edk uj em %
A 10 nejychl šch už ael zůst v nast á á o 50 dée než10 už ael pomaých.
OL % r ejí iv t ů áá r nk ch % l % iv t ů l
Sour sl
ces: ideshae.netst neladesigning- stw es- esent t &sl
r / ubbor l / fa - ebsit pr aion ideshae.netmakst nt speed- ter
r / r a on/ mat s
43. htp:/w w ickr phot 929210 7@N0 / 28 0 3
t / w .fl .com/ os/ 3 0553 4 14 /
44.
45. htp:/w w ickr phot 929210 7@N0 / 28 0 3
t / w .fl .com/ os/ 3 0553 4 14 /
Jsem designer, protože mě hrozně štvou věci, který jsou zbytečně složitý a chci mít tu možnost dělat věci co nejjednodušší, jak jen to jde.
Jsem designer, protože mě hrozně štvou věci, který jsou zbytečně složitý a chci mít tu možnost dělat věci co nejjednodušší, jak jen to jde.
Dnes bych vám chtěl říct o dvou velkých problémech, které s sebou přináší návrh pro mobilní zařízení,
a které jsou zároveň obrovskou příležitostí pro skvělý design aplikace, prezentace či služby.
Chtěl bych, abyste si z dnešního večera odnesli tři věci:
Návrh pro mobilní zařízení dokáže zlepšit uživatelskou zkušenost i na velkém webu.
Návrh pro mobilní zařízení vám dokáže ušetřit či dokonce vydělat i nějaké peníze.
Občas jsou omezení super.
Problém první - prostor.
Kdo tu děláte weby? A děláte weby i pro mobilní zařízení?
Znáte to, na běžnou webovou stránku se vejde hromada věcí. Někdy se dokonce stane, že se někde na stránce objeví prázdné místo a hned se značíme tam něco vrazit. Přeci tam nebude díra!
Už nějakých 10 let se průměrné rozlišení počítačů pohybuje kolem 1024x768px. A chytré telefony kterých je čím dál víc (za rok či dva jich prý bude více jak počítačů), tak mají rozlišení pětinové. Pouhých 20% plochy obrazovky.
Už nějakých 10 let se průměrné rozlišení počítačů pohybuje kolem 1024x768px. A chytré telefony kterých je čím dál víc (za rok či dva jich prý bude více jak počítačů), tak mají rozlišení pětinové. Pouhých 20% plochy obrazovky.Na smartfounu tedy nebudete mít díru nikdy. Budete řešit opačný problém - moc věcí, které tam potřebujete dát.
Flickr znáte? Služba pro sdílení fotek.
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í.
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í.
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í.
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í.
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í.
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í.
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í.
Mají tam těch položek 5.
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.
Zaměřit se na problém
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."
Ono to má ještě jednu souvislost a to souvislost s byznysem. 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í, 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í.
Postupme ještě o krok dál. Zpátky na web. Ukažme si příklad, jak vám návrh pro mobil pomůže s velkým webem.
Statefarm je americká pojišťovna.
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í.
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ší.
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
Jeffrey Zeldman - A List Apart - Designing with Web Standards
Mobile Only
1:1
Druhý problém - rychlost
Druhou věcí, krom malé obrazovky, se kterou se musíte na mobilu vypořádat je, že jsou to zařízení pomalá. Mají pomalejší připojení k Internetu, mají pomalejší vykreslování stránek, 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ě.
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
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.
Uživatelé budou jednoduše nadšeni. A o to tu jde, ne?
Lidé velmi často používají mobilní zařízení, když čekají a nikdo nehce čekat, když čeká.
A zase to má vliv i na byznys. 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áchGoogle - 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.
Když navrhujete weby pro mobilní zařízení, tak se musíte vyrovnat se dvěma velkými problémy: malá obrazovka a pomalé načítání stránek. 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.
Když navrhujete weby pro mobilní zařízení, tak se musíte vyrovnat se dvěma velkými problémy: malá obrazovka a pomalé načítání stránek. 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.
Zapamatujte si tedy, že:
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é.
Návrh pro mobilní zařízení vám dokáže ušetřit či dokonce vydělat i nějaké peníze. Zaměříte se na to, co vám peníze vydělává a kde jenom utrácíte.
Občas jsou omezení super. Máte prostě méně věcí, o které se musíte starat. A naopak je může vyladit k dokonalosti.
Až zítra ráno přijdete do práce můžete zkusit následující:
Koukněte se na váš web a představte si ho na mobilu.