App Design Lektion 4 Charlotte Lærke Weitze

APP DESIGN KURSUS- et kursus i digital design og konceptudvikling

Lektion 4

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


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?



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


• Flow

• Navigation

• Funktioner

• Wireframes

• Moodboard

• Grafik

• Programmering?

• Præsentation


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?



opfind.nu




App arkitektur – Flow• Lav et mindmap over dit indhold

• Begynd at strukturere det

• Hvad er over og underordnet?

• Kort sorterings test (Usability)



App arkitektur – Flow

Flow



Pause 10 min


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



Navigationsformer (eks.)


• Flad struktur

• Tab bar

• Træ-struktur

Kilde: Tapworthy, - designing great iPhone apps, Josh Clark, O’Reilly (2010).


Flad struktur


• Forholdsvis flad struktur


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”.


Træ - struktur


• Gå ned gennem et hierarki af kategoriserede muligheder og/eller indhold


Blandet navigation


• Bland de forskellige muligheder

• For og imod de forskellige muligheder


Funktioner/ controls



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

Kilde: http://developer.android.com/design/get-started/principles.html#enchant-me


Design principper



• 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.



Design principper



• 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.



Design principper



• 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.



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.

Kilde: http://developer.android.com/design/get-started/principles.html#simplify-my-life


Design principper



• 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.



Design principper



• 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.



Design principper



• 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.


Design principper



• 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.


Design principper



• 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.


Design principper



• 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.


Design principper



• 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.


Design principper


• 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.


Design principper



• 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.


Design principper



• 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.


Design principper



• 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.


Design principper



• 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.



Pause 5 min


Wireframes


• Lad os se funktioner og sammenhænge


Wireframes



Wireframes


http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/


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


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

$$

$


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)




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

• Faser i udviklingen

• Målgruppe

• Konkurrenter

• Forretningsmodel

• SWOT

• Skitser

• Flow

• Navigation

• Funktioner

• Wireframes

• Moodboard

• Grafik

• Programmering?

• Præsentation