• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile first: 2 problémy, 2 příležitosti
 

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

on

  • 380 views

 

Statistics

Views

Total Views
380
Views on SlideShare
380
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Mobile First: 2 problémy, 2 příležitosti La Degustation Online, 20. 6. 2012 By @soundakečtvrtek, 21. června 12
    • č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.
    • č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.
    • 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í,
    • 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.
    • čtvrtek, 21. června 12Chtěl bych, abyste si z dnešního večera odnesli tři věci:
    • “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.
    • 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.
    • http://www.flickr.com/photos/44083360@N00/6157683097/čtvrtek, 21. června 12Občas jsou omezení super.
    • http://www.flickr.com/photos/8269775@N05/4341633116/čtvrtek, 21. června 12Problém první - prostor.
    • čtvrtek, 21. června 12Kdo tu děláte weby? A děláte weby i pro mobilní zařízení?
    • č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!
    • 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.
    • 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.
    • čtvrtek, 21. června 12Flickr znáte? Služba pro sdílení fotek.
    • č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í.
    • č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í.
    • č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í.
    • č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í.
    • č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í.
    • č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í.
    • č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í.
    • čtvrtek, 21. června 12Mají tam těch položek 5.
    • č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.
    • http://www.flickr.com/photos/19743256@N00/2224073271/čtvrtek, 21. června 12Zaměřit se na problém
    • č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."
    • 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í.
    • č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.
    • čtvrtek, 21. června 12Statefarm je americká pojišťovna.
    • č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í.
    • č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ší.
    • č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
    • č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
    • čtvrtek, 21. června 12Udělal svůj web Mobile Only. Taky způsob :)
    • čtvrtek, 21. června 121:1
    • http://www.flickr.com/photos/73491156@N00/380316678/čtvrtek, 21. června 12Druhý problém - rychlost
    • č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ě.
    • 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
    • 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.
    • 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?
    • “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á.
    • http://www.flickr.com/photos/12836528@N00/6575053747/čtvrtek, 21. června 12A zase to má vliv i na byznys.
    • 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.
    • 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.
    • č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.
    • http://www.flickr.com/photos/92921037@N00/5532840143/čtvrtek, 21. června 12Zapamatujte si tedy, že:
    • “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é.
    • 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.
    • 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.
    • 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í:
    • 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.
    • 2 Začněte řezatčtvrtek, 21. června 12Začněte ho řezat.
    • 3 Optimalizujtečtvrtek, 21. června 12Začněte optimalizovat jeho kód.
    • čtvrtek, 21. června 12
    • @soundake http://soundake.cz/ http://symbio.cz/čtvrtek, 21. června 12