Your SlideShare is downloading. ×
0
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Mobile first: 2 problémy, 2 příležitosti
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile first: 2 problémy, 2 příležitosti

283

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
283
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile First: 2 problémy, 2 příležitosti La Degustation Online, 20. 6. 2012 By @soundakečtvrtek, 21. června 12
  • 2. čtvrtek, 21. června 12Jsem designer, protože mě hrozně štvou věci, který jsou zbytečně složitý a chci mít tumožnost dělat věci co nejjednodušší, jak jen to jde.
  • 3. čtvrtek, 21. června 12Jsem designer, protože mě hrozně štvou věci, který jsou zbytečně složitý a chci mít tumožnost dělat věci co nejjednodušší, jak jen to jde.
  • 4. http://www.flickr.com/photos/61229509@N03/5839275322/čtvrtek, 21. června 12Dnes bych vám chtěl říct o dvou velkých problémech, které s sebou přináší návrh pro mobilnízařízení,
  • 5. http://www.flickr.com/photos/93008522@N00/253953566/čtvrtek, 21. června 12a které jsou zároveň obrovskou příležitostí pro skvělý design aplikace, prezentace či služby.
  • 6. čtvrtek, 21. června 12Chtěl bych, abyste si z dnešního večera odnesli tři věci:
  • 7. “You are great lover!”čtvrtek, 21. června 12Návrh pro mobilní zařízení dokáže zlepšit uživatelskou zkušenost i na velkém webu.
  • 8. http://www.flickr.com/photos/94588149@N00/4758676577/čtvrtek, 21. června 12Návrh pro mobilní zařízení vám dokáže ušetřit či dokonce vydělat i nějaké peníze.
  • 9. http://www.flickr.com/photos/44083360@N00/6157683097/čtvrtek, 21. června 12Občas jsou omezení super.
  • 10. http://www.flickr.com/photos/8269775@N05/4341633116/čtvrtek, 21. června 12Problém první - prostor.
  • 11. čtvrtek, 21. června 12Kdo tu děláte weby? A děláte weby i pro mobilní zařízení?
  • 12. čtvrtek, 21. června 12Znáte to, na běžnou webovou stránku se vejde hromada věcí. Někdy se dokonce stane, že seněkde na stránce objeví prázdné místo a hned se značíme tam něco vrazit. Přeci tam nebudedíra!
  • 13. 1024 x 768pxčtvrtek, 21. června 12Už 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.
  • 14. 1024 x 768px 320 x 480 px 20%čtvrtek, 21. června 12Už 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.
  • 15. čtvrtek, 21. června 12Flickr znáte? Služba pro sdílení fotek.
  • 16. čtvrtek, 21. června 12Jen v menu se skrývá přes 60 položek. Jak tohle sakra dostali do mobilu? Udělalijednoduchou 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í.
  • 17. čtvrtek, 21. června 12Jen v menu se skrývá přes 60 položek. Jak tohle sakra dostali do mobilu? Udělalijednoduchou 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í.
  • 18. čtvrtek, 21. června 12Jen v menu se skrývá přes 60 položek. Jak tohle sakra dostali do mobilu? Udělalijednoduchou 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í.
  • 19. čtvrtek, 21. června 12Jen v menu se skrývá přes 60 položek. Jak tohle sakra dostali do mobilu? Udělalijednoduchou 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í.
  • 20. čtvrtek, 21. června 12Jen v menu se skrývá přes 60 položek. Jak tohle sakra dostali do mobilu? Udělalijednoduchou 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í.
  • 21. čtvrtek, 21. června 12Jen v menu se skrývá přes 60 položek. Jak tohle sakra dostali do mobilu? Udělalijednoduchou 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í.
  • 22. čtvrtek, 21. června 12Jen v menu se skrývá přes 60 položek. Jak tohle sakra dostali do mobilu? Udělalijednoduchou 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í.
  • 23. čtvrtek, 21. června 12Mají tam těch položek 5.
  • 24. čtvrtek, 21. června 12Malý 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.
  • 25. http://www.flickr.com/photos/19743256@N00/2224073271/čtvrtek, 21. června 12Zaměřit se na problém
  • 26. čtvrtek, 21. června 12Antoine de Saint-Exupery řekl jednu geniální větu: "Dokonalosti je dosaženo, nikolivkdyž již nelze nic víc přidat, ale když není již možné nic odebrat."
  • 27. Vydělává penízečtvrtek, 21. června 12Ono to má ještě jednu souvislost a to souvislost s byznysem. Vy se díky tomu, že se přiná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í. Amůžete v klidu zapomenout na balast kolem. Nevyhazujte peníze za něco, co nikdo mocneocení.
  • 28. čtvrtek, 21. června 12Postupme ještě o krok dál. Zpátky na web. Ukažme si příklad, jak vám návrh pro mobilpomůže s velkým webem.
  • 29. čtvrtek, 21. června 12Statefarm je americká pojišťovna.
  • 30. čtvrtek, 21. června 12Ješ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í.
  • 31. čtvrtek, 21. června 12Pak udělali mobilní verzi. Na prvním místě - založení pojištění. Jádro jejich bysnysu. Vdruhé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ší.
  • 32. čtvrtek, 21. června 12A tuhle zkušenost oni aplikovali i na web. Na první místě sjednání po jištění, hned vedlekontakt a hlášení pojistné události. Pod tím nabídka dalších pojištění. Stejný pattern
  • 33. čtvrtek, 21. června 12Spíše perlička. Webový designer Jeffrey Zeldman zašel při návrhu svého nového webu ještě okrok dál. Vlastně zůstal v kroku prvním.Jeffrey Zeldman - A List Apart - Designing with Web Standards
  • 34. čtvrtek, 21. června 12Udělal svůj web Mobile Only. Taky způsob :)
  • 35. čtvrtek, 21. června 121:1
  • 36. http://www.flickr.com/photos/73491156@N00/380316678/čtvrtek, 21. června 12Druhý problém - rychlost
  • 37. čtvrtek, 21. června 12Druhou věcí, krom malé obrazovky, se kterou se musíte na mobilu vypořádat je, že jsou tozaří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 mobilupoužitelná, tak musí být v prvé řadě rychlá. Stránka se musí rychle načíst, musí se rychlevykreslit, všechny prvky, které na ní jsou musí na uživatele reagovat bleskově.
  • 38. Miller, R. B. (1968). Response time in man-computer conversational transactions. Proc. AFIPS Fall Joint Computer Conference Vol. 33, 267-277čtvrtek, 21. června 12Protož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
  • 39. Speed is best feature http://pacepirate.tumblr.com/post/23988387164čtvrtek, 21. června 12Dá se říct, že rychlost je ta nejlepší funkce, kterou svým uživatelům můžete dopřát. A jakmiledokáž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.
  • 40. http://www.flickr.com/photos/72296542@N00/382441387/čtvrtek, 21. června 12Vaši uživatelé budou jednoduše nadšeni. A o to tu jde, ne?
  • 41. “Mobile experiences fill the gaps while we wait. Nobody wants to wait while we wait.” - Mike Krieger, Co-founder Instagramčtvrtek, 21. června 12Lidé velmi často používají mobilní zařízení, když čekají a nikdo nechce čekat, když čeká.
  • 42. http://www.flickr.com/photos/12836528@N00/6575053747/čtvrtek, 21. června 12A zase to má vliv i na byznys.
  • 43. 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čtvrtek, 21. června 12 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ž jezhruba 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.
  • 44. http://www.flickr.com/photos/92921037@N00/5532840143/čtvrtek, 21. června 12Když navrhujete weby pro mobilní zařízení, tak se musíte vyrovnat se dvěma velkýmiproblé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.
  • 45. čtvrtek, 21. června 12Když navrhujete weby pro mobilní zařízení, tak se musíte vyrovnat se dvěma velkýmiproblé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.
  • 46. http://www.flickr.com/photos/92921037@N00/5532840143/čtvrtek, 21. června 12Zapamatujte si tedy, že:
  • 47. “Yes, I am...”čtvrtek, 21. června 12Ná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é.
  • 48. http://www.flickr.com/photos/94588149@N00/4758676577/čtvrtek, 21. června 12Ná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.
  • 49. http://www.flickr.com/photos/44083360@N00/6157683097/čtvrtek, 21. června 12Obč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.
  • 50. http://www.flickr.com/photos/95572727@N00/4317572931/čtvrtek, 21. června 12Až zítra ráno přijdete do práce můžete zkusit následující:
  • 51. 1 Představte si svůj web na mobilučtvrtek, 21. června 12Koukněte se na váš web a představte si ho na mobilu.
  • 52. 2 Začněte řezatčtvrtek, 21. června 12Začněte ho řezat.
  • 53. 3 Optimalizujtečtvrtek, 21. června 12Začněte optimalizovat jeho kód.
  • 54. čtvrtek, 21. června 12
  • 55. @soundake http://soundake.cz/ http://symbio.cz/čtvrtek, 21. června 12

×