Succes med Hybrid Mobil App - Phonegap BDmobil 2014
App Design Lektion 4 Charlotte Lærke Weitze
1. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Lektion 4
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
2. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Idag
Kl. 16.00 - 16.30 Fremlæggelse af skitser og markeds/konkurrent undersøgelse
Kl. 16.30 - 16.45 Hvor er I i forhold til fotoredigeringsprogrammer nu?
Kl. 16.45 - 16.55 Pause
Kl. 16.55 - 17.30 App arkitektur – Flows
Kl. 17.30 - 18.00 Grafisk Design – HIG
Kl. 18.00 - 18.05 Pause
Kl. 18.05 - 18.25 Wireframes
Kl. 18.25 - 18.45 (Videoprototyping)
Kl. 18.45 - 19.00 Opgaver til næste gang
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
3. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Siden sidst
• Jeres skitser? Har I tænkt, – skitséret, – tænkt, osv.
• Har I fået feedback på skitserne?
• Konkurrent til jeres app? (Forskelle ligheder mv.)
• Har I prøvet et billederedigeringsprogram af? (Photoshop, Gimp el. lign)
• Har I samlet ind til et moodboard?
• iPhone eller android?
• Spil eller app?
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
4. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Plan for de næste 3 gange
• Hvad vil I gerne stå tilbage med? Notér!
• Og hvilken aflevering?
• Poster? F.eks. rent grafisk: http://medialoot.com/blog/how-to-design-an-iphone-app-in-photoshop/
• Video: http://youtu.be/ep-kLD59uVY
• Emner
• Problemområde • Flow
• Faser i udviklingen • Navigation
• Målgruppe • Funktioner
• Konkurrenter • Wireframes
• Forretningsmodel • Moodboard
• SWOT • Grafik
• Skitser • Programmering?
• Præsentation
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
5. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Konceptet
• Hvad vil du gerne opnå på det konceptuelle niveau (Er det på plads)?
• Hvilket problem vil du gerne løse med din app?
• Hvilken slags brugere har du?
• Hvad er deres forventninger?
• Hvordan er din financieringsplan?
• Hvad adskiller din mobile app fra en løsning på computeren?
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
6. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
opfind.nu
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
7. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
App arkitektur – Flow
• Lav et mindmap over dit indhold
• Begynd at strukturere det
• Hvad er over og underordnet?
• Kort sorterings test (Usability)
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
8. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
App arkitektur – Flow
Flow
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
9. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Pause 10 min
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
10. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
HIG - Human Interface Guidelines
• Apple har mange retningslinier for godt interface design - HIG
• Forsøg at overholde dem, - det kan være afgørende for godkendelse (App Store)
• http://developer.apple.com/iphone
• http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Con-
ceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/
doc/uid/TP40006556-CH13-SW1
• Retningslinier for Android
• http://developer.android.com/design/index.html
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
11. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Navigationsformer (eks.)
• Flad struktur
• Tab bar
• Træ-struktur
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: Tapworthy, - designing great iPhone apps, Josh Clark, O’Reilly (2010).
12. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Flad struktur
• Forholdsvis flad struktur
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
13. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Tab bar
• Fanebladslinjen er et sæt af knapper på nederst på skærmen, som lader dig skifte mellem
app’ens hovedfunktioner.
• Tryk på en knap for at springe til et nyt skærmbillede og et nyt “mode”.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
14. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Træ - struktur
• Gå ned gennem et hierarki af kategoriserede muligheder og/eller indhold
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
15. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Blandet navigation
• Bland de forskellige muligheder
• For og imod de forskellige muligheder
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
16. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Funktioner
/ controls
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
17. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper - fra androids principper
• Enchant Me - Fortryl mig
• Glæd mig på overraskende måder
• En smuk overflade, en omhyggeligt placeret animation, eller en godt timet lydeffekt er en fryd at opleve.
• Subtile effekter bidrager til en følelse af lethed og en fornemmelse af, at en magtfuld kraft er lige ved hånden
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#enchant-me
18. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Enchant Me - Fortryl mig
• Rigtige objekter er sjovere end knapper og menuer
• Tillad folk at røre og manipulere objekter direkte i din app. Det reducerer den nødvendige kognitive indsats for at
udføre en opgave, samtidig med at det er mere følelsesmæssigt tilfredsstillende.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#enchant-me
19. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Enchant Me - Fortryl mig
• Lad mig gøre det til mit eget
• Folkholder af at tilføje et personligt præg, fordi det gør at de føler sig hjemme og har kontrol.
• Giv fornuftige, smukke standarder, men overvej også sjove, valgfrie tilpasninger, der ikke forhindrer de primære opgaver.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#enchant-me
20. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Enchant Me - Fortryl mig
• Lær mig at kende
• Lær folks præferencer over tid. I stedet for at bede dem om at træffe de samme valg igen og igen, skal du placere
tidligere valg inden for rækkevidde.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#enchant-me
21. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Simplify My Life - Forenkl mit liv
• Hold det kort
• Brug korte sætninger med enkle ord. Folk er tilbøjelige til at springe over sætninger, hvis de er lange.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
22. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Simplify My Life - Forenkl mit liv
• Billeder er hurtigere end ord
• Overvej at bruge billeder til at forklare ideer.
• Billeder tiltrækker folks opmærksomhed, og kan være meget mere
effektive end ord.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
23. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Simplify My Life - Forenkl mit liv
• Bestem for mig, men lad mig få det sidste ord
• Gæt så godt du kan og foretag en handling for brugeren snarere end
at spørge først.
• Alt for mange valg og beslutninger gør folk utilfredse.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
24. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Simplify My Life - Forenkl mit liv
• Vis kun hvad jeg har brug for, når jeg har brug for det
• Folk bliver overvældede, når de ser for meget på én gang.
• Bryd opgaver og oplysninger op i små letfordøjelige bidder.
• Skjul valgmuligheder som ikke er afgørende i øjeblikket, og
undervis folk hen ad vejen i forløbet.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
25. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Simplify My Life - Forenkl mit liv
• Jeg bør altid vide, hvor jeg er
• Giv folk tillid til, at de selv kan finde rundt.
• Gør steder i din app tydelige og brug overgangene til at vise relationer mellem skærmene.
• Giv feedback på de opgaver, som er i gang.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
26. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Simplify My Life - Forenkl mit liv
• Mist aldrig mine ting
• Gem de ting, som folk har givet sig tid til skabe, og lad dem adgang til tingene fra “hvor som helst”.
• Husk indstillinger, personlige præferencer, og kreationer på tværs af telefoner, tablets og computere. Det gør
synkronisering til den nemmeste sag i verden.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
27. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Simplify My Life - Forenkl mit liv
• Hvis det ser ens ud, bør det reagerer på samme måde
• Hjælp folk med at få øje på funktionelle forskelle ved at gøre dem visuelt forskellige snarere end distinkte.
• Undgå funktioner/ områder, der ligner hinanden, men reagerer forskelligt på samme input.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
28. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Simplify My Life - Forenkl mit liv
• Afbryd mig kun, hvis det er vigtigt
• Skån folk for uvigtige bagateller, - ligesom en god personlig assistent.
• Folk ønsker at holde fokus, og medmindre det er kritisk og tidsfølsomt, kan en afbrydelse være dyr og frustrerende.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
29. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Make me amazing - Gør mig fantastisk
• Giv mig tricks, der virker overalt
• Folk føler sig godt tilpas, hvis de selv kan regne tingene ud.
• Gør din app nem at lære at anvende ved at udnytte visuelle mønstre og motorisk hukommelse fra brugen af andre apps.
• For eksempel kan swipe-gestussen være en god navigations genvej.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
30. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Make me amazing - Gør mig fantastisk
• Det er ikke min skyld
• Vær nænsom med, hvordan du beder folk om at rette fejl/ korrektioner.
• De ønsker at føle sig kloge, når de bruger din app.
• Hvis noget går galt, så giv lette og klare genopretnings instrukser, men spar dem for de tekniske detaljer.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
31. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Make me amazing - Gør mig fantastisk
• Giv opmuntring!
• Bryd komplekse opgaver ned i mindre trin, så man let opnår det næste trin.
• Giv feedback på handlinger, selv om det er bare en diskret oplysning.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
32. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Make me amazing - Gør mig fantastisk
• Udfør de tunge løft for mig
• Få nybegyndere til at føle sig som eksperter ved at give dem mulighed for at gøre ting, som de aldrig ville have troet at
de kunne. For eksempel kan genveje, som kombinerer flere fotoeffekter gøre at amatørfotografier ser fantastiske ud
efter et par simple trin.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
33. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Design principper
• Make me amazing - Gør mig fantastisk
• Gør vigtige ting hurtigt/først
• Ikke alle handlinger er lige. Beslut hvad der er vigtigst i din app og gør det nemt at finde og hurtigt at bruge, ligesom
udløserknappen i et kamera, eller på pause-knappen i en musikafspiller.
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
34. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Pause 5 min
App Design 2012 - Charlotte Lærke Weitze - Lektion 3
35. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Wireframes
• Lad os se funktioner og sammenhænge
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
36. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Wireframes
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
37. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Wireframes
http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
38. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Markedsundersøgelser
• I forhold til:
• Hvilke apps der sælger
• appannie.com (iOS/Android)
• topappcharts.com (iOS)
• Hvilke konkurrenter jeres app har
• Find 3 konkurrenter
• Gør rede for forskellen
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
39. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Forretningsmodel
• Betalings apps
• Sæt en lav pris og håb på et stort salg
• Sæt en høj pris
$
• Gratis apps
• Gratis og “in-app-purchases”
• Gratis - evt. tilbud om køb af andre spil/ydelser
$
• Gratis og reklamer (eller betal og ingen reklamer)
• Hvordan formidler du din app? - Markedsføring
$
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
40. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
SWOT Helpful
to achieving the objective
Harmful
to achieving the objective
(attributes of the organisation)
Internal origin Strenghts Weaknesses
(attributes of the environment)
Oppotunities Treats
External origin
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: AlbertHumphrey: “SWOT Analysis for Management Consulting”
41. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
42. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Opgaver til næste gang
• Formulér jeres egen opgave!
• Hvad vil I aflevere sidste gang?
• Poster? F.eks. rent grafisk: http://medialoot.com/blog/how-to-design-an-iphone-app-in-photoshop/
• Video: http://youtu.be/ep-kLD59uVY
• Emner:
• Problemområde • Flow
• Faser i udviklingen • Navigation
• Målgruppe • Funktioner
• Konkurrenter • Wireframes
• Forretningsmodel • Moodboard
• SWOT • Grafik
• Skitser • Programmering?
• Præsentation
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
