Killer apps - sådan
•Descargar como PPTX, PDF•
1 recomendación•505 vistas
Morgeninspiration i København den 3.12.15 hos Peytz & Co om apps
Recomendados
Recomendados
Más contenido relacionado
Destacado
Similar a Killer apps - sådan
Similar a Killer apps - sådan (20)
Más de Peytz & Co
Más de Peytz & Co (20)
Killer apps - sådan
- 2. Velkommen 08:55: Vi sætter os ned (ikke før) 09:00: Claus Sølvsteen: Velkommen 09:05: Laust Jørgensen: Sådan vælger du teknologi 09:45: Pause - alle strækker ben 10:00: Mads Vad: Sådan bygger du en KILLER-APP 10:45: Slut
- 3. Sådan vælger du teknologi
- 4. Mulighederne • Tendenser • Mobil web tilstedeværelse • Apps • Overblik og omkostninger
- 5. Det er ikke enten eller – det er både og...
- 8. Danmarks statisik Internetbrug på mobilen er steget fra 33% til 70% i perioden 2011-2014
- 9. GWI 2013 Q3 De 16-24 årige bruger 2,84 timer per dag online via deres smartphones
- 10. Kilde: Gemius officielle internetmåling
- 13. Responsivt Mobil Tablet Desktop Responsivt (11.950) 36,95% 15,90% 47,15% Responsivt (1.068.709) 31,00% 18,67% 50,33% Responsivt (616.622) 21,73% 12,90% 65,38% Responsivt (606.984) 44,63% 44,10% 11,28% Ikke Responsivt (32.746) 26,45% 17,42% 56,16% Ikke Responsivt (478.545) 14.48% 23,18% 61,84%
- 14. Argumenterne for at være responsive er massive
- 31. Er mobile first noget med at tjekke facebook om morgenen?
- 32. Design (and develop) for the smallest device first – then add things Mobile first
- 33. True responsive design is fluid Responsive
- 34. Adaptive design uses a series of static layouts based on breakpoints. Adaptive
- 35. Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information. Breakpoints
- 36. ..to create and serve up the best experience possible, and then account for each possible degradation and ensure that despite any shortcomings, the site would remain functional. Gracefull degradation
- 37. Design for the smallest screen, bandwidth and lowest functionaly first – then add Progressive enhancement
- 39. Fordele ved responsiv løsning • Der er kun ét website, og det er nemmere at administrere et site på tværs af alle devices • Der er kun én URL, og det sikrer at brugerne finder dig • SEO – der er kun et sted der skal SEO optimeres • Omkostninger – det er billigere kun at vedligeholde et website
- 40. Ulemper ved responsiv løsning • Der er kun ét website – det gør det svært at tage hensyn til de behov som brugerne kan have afhængigt af brugssituationen på forskellige devices • Performance – det er svært, og nogle gange ikke muligt, at tage hensyn til alle de gamle (og langsomme devices) med responsivt design • Indbyggede funktioner – er der ikke adgang til • Det kommer kun på brugernes ”hjemmeskærm” vha. et bogmærke, hvis man overhovedet kan få dem til at sætte det
- 41. Mobilsite
- 43. Fordele ved et mobilsite • Brugeroplevelse – du har et site der henvender sig specifikt til brugerne på mobile devices • Hastighed – du har et site der performer godt på de mobile platforme (da der ikke bliver loadet noget ekstra indhold)
- 44. Ulemper ved et mobilsite • Lidt gammeldags løsning – (! kan stadig være relevant) vil typisk dog blive løst med et responsivt site • URL – du har en ekstra URL som dine brugere skal finde dig på • Vedligeholdelse – nu har du to sites der skal vedligeholdes • Mange forskellige devices (selv med et specifikt mobilsite er du ikke sikret at ramme alle. F.eks. touch og ikke touch devices)
- 45. Web app
- 47. Fordele ved en web app • En kodebase at vedligeholde • Nemmere kodesprog at skrive i • Ingen godkendelsesproces i App store
- 48. Ulemper ved en web app • Kan ikke findes via App store • Har ikke adgang til de indbyggede funktioner • Afhængig af at være online
- 49. Hybrid app
- 51. Fordele ved en hybrid app • Kan benytte de indbyggede funktioner • Kan genbruge en stor mængde kode på tværs af platforme • Kan findes via App store
- 52. Ulemper ved en hybrid app • Afhænger af browserens hastighed • Skal godkendes til App store
- 53. Native app
- 54. "They are developed specifically for one platform, and can take full advantage of all the device features”
- 57. Fordele ved en native app • Brugeroplevelse – kan tilpasses helt specifikt til brugssituationen på det enkelte device • Alle de indbyggede funktioner • Hastighed • Synlighed – er på brugerens skærm hele tiden
- 58. Ulemper ved en native app • Vedligeholdelse – forskellige platforme = forskellige kodesprog • Adgang via App store • Apple tager 30% af in-app purchase
- 59. Overblik
- 60. Responsive Mobilsite Web app Hybrid app Native app Største fordel Kun et site at vedligeholde Specifikt til mobil Fungerer på alle platforme Bedste af begge verdener Alle de indbyggede funktioner Største ulempe Ikke til stede på home screen Flere URL’er % Indbyggede funktioner Afhægig af browser hastighed Mange vedligeholdelses punkter Omkostninger Middel til høj - men kun til et site Relativt billigt Relativt billigt Middel til høj Høj Online / offline Kun online Kun online Kun online Kan fungere offline Kan fungere offline App store Nej Nej Nej Ja Ja
- 61. At have en mobil presence ER en god ide
- 62. Det du gerne vil opnå er afgørende for, hvor du skal sætte ind
- 63. Find din indre killer app 3. december 2015
- 64. Introduktion. • Kontaktdirektør hos Peytz & Co. • Fokus på strategi og forretningsudvikling med udgangspunkt i brugerbehov og service design. • +15 års erfaring med digital produkt- og forretnings- udvikling indenfor IT og medier. • Tidl. digital direktør og medlem af koncernledelsen i Berlingske Media. • Med i lanceringen af +100 apps til smartphone og tablet.
- 65. Evolutionen. Fra mobility til killer app
- 66. Mobilrevolutionen. Den digitale schweizerkniv
- 67. Mobilrevolutionen. Vores nye livsledsager Venskabe r Sundhed Transport Arbejde Penge Opgaver
- 68. Mobilrevolutionen. Det essentielle spørgsmål Har jeg strøm nok?
- 69. Men hvad betyder det dog for mig og min virksomhed?
- 70. Step 1. Hvordan kommer vi i lommen på folk?
- 71. Step 2. Hvordan skaber vi værdi og bliver brugt?
- 72. Killer App …men hvordan det?
- 73. #1. Det starter og slutter med kunden Det ville være fedt hvis jeg kunne…Det irriterer mig grænseløst, at…
- 74. #1a. Map kundens behov Værdi Skabere Smerte Stillere Produkter & Services Værdi Kunde Behov Smerte
- 75. #2. Kortlæg jeres brugsscenarier
- 76. #2a. Map jeres produkt/service til behov Værdi Skabere Smerte Stillere Produkter & Services Værdi Kunde Behov Smerte
- 77. #3. Syretest jeres hypoteser ude i virkeligheden
- 78. #4. Skab et killer-fit Værdi Skabere Smerte Stillere Produkter & Services Værdi Kunde Behov Smerte
- 79. En hyppig brugssituation • En pause • På vej • Lean Back • Utility-situation Lav kognitiv friktion • Pølsefingervenlig • Indlysende funktion • (subset af features) Emotionelt belønnende • Social værdi • Fortryllet funktionalitet • Emotionelt design #4a. Processen mod en killer app
- 80. #5. Start den kreative proces
- 81. #5a. Lav kognitiv friktion
- 82. #5b. Skab emotionel belønning
- 83. B.I.V.A. Pitch • Behovet • Ideen • Værdiskabelsen • Alternativer Oversat fra NABC, Stanford Research Center Kill! Kill! Kill! 1A4 #5c. Fokusér på værdiskabelsen
- 84. #5d. Lav iterationer Hvad skal fastholdes? Hvad var rigtig godt Konkrete forbedringsforslag Justeringer
- 85. • Giv folk et sted at gå hen med ideerne • Gør de enkle værktøjer tilgængelige • Skab korte enkle sessions, hvor folk kan arbejde med ideer • Saml op og giv det en stemme på fællesmøder • Ledelsen skal kigge på ideerne #5e. Tips til den gode proces
- 86. #6. Prioriter de idéer, I vil gå videre med
- 88. #7a. Eksempler på redskaber
- 89. #8. Byg, lær og bliv klogere
- 90. Opsummering. På vej mod en killer app • Tag udgangspunkt i kunden og vedkommendes behov. • Map jeres produkt/service til behov. • Test hypoteser i virkelighedens verden og skab et killer-fit. • Kør en god kreativ proces. • Prioritér de bedste idéer. • Kom nærmere produktet med pretotyping. • Byg, lær og bliv klogere – og find jeres killer-app!
Notas del editor
- Luke Wroblewski Product Director at Google, Author/Advisor
- Luke Wroblewski Product Director at Google, Author/Advisor
- Hvilket er 38% procet af det totale internet forbrug verden over – Global webindex 2013
- Gemius har 17 miliader sidevisninger de holder øje med. 16% fald i antal desktop sidevisninger 30% stigning i antal mobile sidevisninger 4% fald i antal tablet sidevisninger
- Underholdning hitter som APPS De fleste henter underholdnings-apps, som er bl.a. spil, bøger, magasiner, film eller musik. Kilde: danmarks statistik
- Der er meget få apps på vores telefoner = konkurrencen er benhård
- Statistik over nogle af vores sites. Hvad er dit ærinde, hvem er din målgruppe, er dit site responsivt – Content er king - Vinder du på indhold, kan du godt vinde uden at være responsiv Bemærkelsesværdigt er at have et ikke responsivt ikke nødvendigvis betyder at brugerne ikke besøger det. Det nederste site er et MEGET spraglet dansk mediesite med en ung målgruppe – og det ses TYDELIGT
- WEBTILSTEDEVÆRELSEN - De næste slides og eksempler skal forklare hvad mobilfirst, responsive, adaptive osv er.. - jeg vil også meget gerne forklare om den proces vi bruger til at komme frem til et responsivt mobile first design – men det er ikke emnet her, så der må man fange mig i pausen.
- Responsive Web Design baseret på skærmstørrelse: fra Key Ideas Den responsive tilgang til web design foreslår på at design og udvikling bør reagere på brugerens adfærd og miljø i forhold til skærmstørrelse, platform og orientering. Et responsive website har evnen til at reagere på alle tænkelige brugersituationer. Kilde: Key Ideas - http://www.keyideasinfotech.com/ https://medium.com/@DinaDestreza/what-is-responsive-web-design-and-why-the-hell-should-i-care-about-it-c635d7bea2ec
- Det kunne for eksempel være det her website
- Nøglefunktioner ved Responsive Web Design: Super fleksibel: Et responsive website er flydende, forstået på den måde at al content bevæger sig frit uanset skærmstørrelse og/eller device.
- Bedre design: Responsive Web Design tilbyder mere fleksibilitet og bedre design muligheder.
- Anbefalet af google: Google anser Responsive Web Design som best practice og anbefaler især også Responsive Web Design i forhold til mobil konfiguration.
- UX: Responsive design er grobund for en fantastisk user experience. Bedre design, navigation og flow fører til mere bruger engagement.
- Forøgelse af Conversion Rate: Nedsæt dit sites’ bounce rate ved at skabe en god brugeroplevelse, hvilket vil holde længere på de besøgende.
- Hvorfor Responsive Web Design er vigtigt: Her er lidt relevante statistikker og trends: 67 af brugere siger at når de besøger et ”mobile friendly” website, er der større chance for at de er villige til at købe et produkt. 16% af smartphone og tablet brugere siger at de hurtigt giver op hvis en side er lang tid om at loade.
- Ifølge Google sker 77% af søgninger på mobiltelefoner i hjemmet eller på arbejde – hvilket er steder hvor der ofte også er computere tilgængelige.
- 6 ud af 10 brugere siger at de ikke vil anbefale en virksomhed, der ikke er ”mobile friendly” - altså uopdateret og dårligt designet.
- Progressive enhancement: video mobile first Lazy loading af billeder og youtube video – progressive loading
- Progressive enhancement: video mobile first Lazy loading af billeder og youtube video – progressive loading
- Progressive enhancement: video mobile first Lazy loading af billeder og youtube video – progressive loading
- WEBTILSTEDEVÆRELSEN - De næste slides og eksempler skal forklare hvad mobilfirst, responsive, adaptive osv er.. - jeg vil også meget gerne forklare om den proces vi bruger til at komme frem til et responsivt mobile first design – men det er ikke emnet her, så der må man fange mig i pausen.
- , using CSS3 media queries to respond to any screen sizes. With the use of this you can create a flexible grid where text can wrap and images can shrink to adjust along with your browser.
- A webpage could be three different sizes: 320, 760 and. Unlike responsive (where the design responds while you adjust a browser window), adaptive files don’t respond once they are loaded. It detects the device and calls up the properly sized layout to view. Så for eksempel 3 forskellige størrelser : 320, 760 og 960. Adaptive tilpasser sig ikke løbende, men detektere I stedet det device der gættes på der bliver brugt, og serverer den størelse.
- A webpage could be three different sizes: 320, 760 and. Unlike responsive (where the design responds while you adjust a browser window), adaptive files don’t respond once they are loaded. It detects the device and calls up the properly sized layout to view. Så for eksempel 3 forskellige størrelser : 320, 760 og 960. Adaptive tilpasser sig ikke løbende, men detektere I stedet det device der gættes på der bliver brugt, og serverer den størelse.
- A webpage could be three different sizes: 320, 760 and. Unlike responsive (where the design responds while you adjust a browser window), adaptive files don’t respond once they are loaded. It detects the device and calls up the properly sized layout to view. Så for eksempel 3 forskellige størrelser : 320, 760 og 960. Adaptive tilpasser sig ikke løbende, men detektere I stedet det device der gættes på der bliver brugt, og serverer den størelse.
- Progressive enhancement: video mobile first Lazy loading af billeder og youtube video – progressive loading Størstedelen af desktop css bliver kun loaded på desktop vha. ajax
- Helt generelt, så vil jeg sige at hvis dit ærinde er at vise det samme indhold på tværs af alle devices – så er et responsivt site en rigtig god løsning.
- m.momondo.dk m.b.dk m.aok.dk m.business.dk
- Et mobil website er designet specifikt til de mobile platforme, og tager hensyn til de muligheder og begrænsninger der findes der. I praksis er de fleste mobile sites I dag stadig responsive men bliver ikke bredere end de typiske mobile skærme. De mobile sites er i dag typisk mediasites, men der er undtagelser som momondo, som jeg har taget med her – jeg ved dog at de også påtænker at blive responsive.
- En webapp er en application, der er designet med de samme værktøjer som man laver hjemmesider med. Den fungerer på alle devices, og den bliver åbnet med en browser. An HTML5 mobile app is basically a web page, or series of web pages, that are designed to work on a tiny screen. As such, HTML5 apps are device agnostic and can be opened with any modern mobile browser. And because your content is on the web, it's searchable, which can be a huge benefit depending on the app (shopping, for example).
- Apps der har et specifik problem de prøver at løse En app der ikke er lavet til et specifikt device.
- Hybridapps kombinerer det bedste og værste af webapps og native apps. Jeg definere en hybrid app som en app der primært er bygget ved hjælp af de gængse webværktøjer, lige som webappen, og så puttet ind i en native beholder så den får adgang til alle de indbyggede funktioner. Sådan en beholder kunne være PhoneGap.
- Netflix has a really cool app that uses the same code base for running the UI on all devices: tablets, phones, smart TVs, DVD players, refrigerators, and cars. While most people have no idea, nor care, how the app is implemented, you’ll be interested to know they can change the interface on the fly or conduct A/B testing to determine the optimal user interactions. The guts of decoding and streaming videos are delegated to the native layer for best performance, so it’s a fast, seemingly native app, that really does provide the best of both worlds. De er alligevel afhængige af at være online.
- Du downloader den fra din app store
- De er udviklet specifikt til een platform, og de kan til fulde udnytte alle de forskellige devices’ features. Så som Camera GPS Accelerometer Compass Contacts Gestures (either standard operating-system gestures or new, app-defined gestures). And native apps can use the device’s notification system and can work offline” OFFLINE
- Mobilepay vandt sidste år titlen som årets ord hos Sproglaboratoriet på P1 Der fines masser af andre rigtig gode apps. Fx DSB, nemlig.com, dropbox,
- Facebook og linkedin var faktisk hybrid apps til at begynde med – men udviklede sig så ud til at blive fulde native apps – helt sikkert for bedst muligt at kunne udnytte og optimere alle native platformmulighederne – til trods for de større vedlighedholdelsesomkostninger – som helt sikkert er til at overse for dem
- Tid og Penge Reference til Claus Venløv – fail fast and fail often “IDEO” Native apps er dyrere at vedligeholde, da appen i sig selv er et nyt kodesprog I forhold til evt. Website og jo flere native jo flere kodesprog Webapps er billigst, så kommer hybridapps
- Omkostninger – kommer an på hvad du er ved at bygge
- Der er “næsten” ikke tvivl om at mobilpresence er en god ide
- The Next Web: http://thenextweb.com/dd/2014/02/08/decide-responsive-website-native-mobile… Skriver bl.a.: If the goal of your destination online is to be universally accessible from any device, then responsive design is the solution. A mobile app is designed for a unique experience; exclusive to the operating system it lives on, which means it isn’t a one size fits all fix.
- Billede: Flickr/stangale
- Foto: Flickr/Jared Earle
- Foto: Flickr/Wolf Gang
- Foto: Flickr/brandon schauer