app design lektion 4 charlotte lærke weitze
DESCRIPTION
Kursus i App Design 2012 Lektion 4TRANSCRIPT
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Lektion 4
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
IdagKl. 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 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
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
• Faser i udviklingen
• Målgruppe
• Konkurrenter
• Forretningsmodel
• SWOT
• Skitser
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Flow
• Navigation
• Funktioner
• Wireframes
• Moodboard
• Grafik
• Programmering?
• Præsentation
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
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
opfind.nu
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
App arkitektur – Flow• Lav et mindmap over dit indhold
• Begynd at strukturere det
• Hvad er over og underordnet?
• Kort sorterings test (Usability)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
App arkitektur – Flow
Flow
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
Pause 10 min
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
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Navigationsformer (eks.)
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Flad struktur
• Tab bar
• Træ-struktur
Kilde: Tapworthy, - designing great iPhone apps, Josh Clark, O’Reilly (2010).
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Flad struktur
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Forholdsvis flad struktur
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Tab bar
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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 KURSUS- et kursus i digital design og konceptudvikling
Træ - struktur
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Gå ned gennem et hierarki af kategoriserede muligheder og/eller indhold
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Blandet navigation
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Bland de forskellige muligheder
• For og imod de forskellige muligheder
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Funktioner/ controls
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Design principper - fra androids principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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
Kilde: http://developer.android.com/design/get-started/principles.html#enchant-me
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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.
Kilde: http://developer.android.com/design/get-started/principles.html#enchant-me
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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.
Kilde: http://developer.android.com/design/get-started/principles.html#enchant-me
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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.
Kilde: http://developer.android.com/design/get-started/principles.html#enchant-me
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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.
Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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.
Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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.
Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Simplify My Life - Forenkl mit liv
• Vis kun hvad jeg har brug for, når jeg har brug for det
Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
• 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 KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Simplify My Life - Forenkl mit liv
• Jeg bør altid vide, hvor jeg er
Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
• 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 KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Simplify My Life - Forenkl mit liv
• Mist aldrig mine ting
Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
• 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 KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Simplify My Life - Forenkl mit liv
• Hvis det ser ens ud, bør det reagerer på samme måde
Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
• 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 KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Simplify My Life - Forenkl mit liv
• Afbryd mig kun, hvis det er vigtigt
Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life
• 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 KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Make me amazing - Gør mig fantastisk
• Giv mig tricks, der virker overalt
Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
• 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 KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Make me amazing - Gør mig fantastisk
• Det er ikke min skyld
Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
• 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 KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Make me amazing - Gør mig fantastisk
• Giv opmuntring!
Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
• 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 KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Make me amazing - Gør mig fantastisk
• Udfør de tunge løft for mig
Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
• 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 KURSUS- et kursus i digital design og konceptudvikling
Design principper
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Make me amazing - Gør mig fantastisk
• Gør vigtige ting hurtigt/først
Kilde: http://developer.android.com/design/get-started/principles.html#make-me-amazing
• 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 KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 3
Pause 5 min
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Wireframes
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Lad os se funktioner og sammenhænge
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Wireframes
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Wireframes
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Markedsundersøgelser
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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 KURSUS- et kursus i digital design og konceptudvikling
Forretningsmodel
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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 KURSUS- et kursus i digital design og konceptudvikling
SWOT
App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: AlbertHumphrey: “SWOT Analysis for Management Consulting”
Strenghts
TreatsOppotunities
WeaknessesEx
tern
al o
rigin
(att
ribut
es o
f the
env
ironm
ent)
Helpfulto achieving the objective
Harmfulto achieving the objective
Inte
rnal
orig
in(a
ttrib
utes
of t
he o
rgan
isat
ion)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Opgaver til næste gang
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• 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
• Faser i udviklingen
• Målgruppe
• Konkurrenter
• Forretningsmodel
• SWOT
• Skitser
• Flow
• Navigation
• Funktioner
• Wireframes
• Moodboard
• Grafik
• Programmering?
• Præsentation