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

  • 252 views
Uploaded on

 

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
252
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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