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

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

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

App Design 2012 - Charlotte Lærke Weitze - Lektion 4 Kilde: AlbertHumphrey: “SWOT Analysis for Management Consulting”

Strenghts

TreatsOppotunities

WeaknessesEx

Helpfulto achieving the objective

Harmfulto achieving the objective

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

App Design Lektion 4 Charlotte Lærke Weitze

Design

Charlotte Brontë - Ebooks gratuits · 2012-10-22 · Charlotte Brontë Shirley Tome I La Bibliothèque électronique du Québec Collection À tous les vents Volume 1023 : version

Verlagsgruppe Beltz Presse - Charlotte Kerner€¦ · Interview mit Charlotte Kerner (aus: NAUTILUS 10/2011) Einladungsflyer Buchpremiere in Lübeck . Verlagsgruppe Beltz Presse Pressekontakt:

Hedwig Elisabeth (Amalie) von Pfalz-Neuburg · 4 Jakob Ludwig, Luise Charlotte und Karl III. Philipp von Pfalz-Neuburg Sein Vater wollte Jakob dann mit der Fürstin Luise Charlotte

Lady Charlotte Blennerhassett (1843–1917)

App Design Lektion 3 Charlotte Lærke Weitze

Sex-Åutorin Charlotte Roche Bittere Vorwürfe des ... · Sex-Åutorin Charlotte Roche Bittere Vorwürfe des Stiefvaters avaS OO Heidi Klum und Ehemann Popstar Seal Hollywood-St r

Christel Weber / Charlotte Weber Reisebericht Kusini B ... · 1 Christel Weber / Charlotte Weber Reisebericht Kusini B / Tanzania 15.02.-26.02. 2014 „Einen anderen Grund kann niemand

Herzlich Willkommen! Sophie-Charlotte- Oberschule Charlottenburg-Wilmersdorf Kursphase 2011

El uso de los pronombres personales sujeto - Charlotte Rouges · El uso de los pronombres personales sujeto - Charlotte Rouges 5 0. Introducción La lengua española, junto con su

ENNETBADEN Wie Designerin Charlotte Bollag den «Schwanen» … · 2019. 5. 16. · «Schwanen»-Designerin Charlotte Bollag spricht im Interview über Ehrgeiz, Mut und erzählt von

318 Circle Ave, Charlotte, NC 28207 - summithdmedia.com · 318 Circle Ave, Charlotte, NC 28207 Katie Strohschein, Realtor katie@nestlewoodrealty.com 704.577.1130

Präsentation MK Bentfeld niedrig - Militaria / Helmut Weitze · PDF filePolizeipräsidium Bielefeld Mordkommission „Bentfeld“ Der Militaria-Händler Ingo Gratzik und seine Ehefrau

Lægehjælp, Meditation & Ayurveda | Læge Charlotte Bech mavesyre. 5-2009.pdfLæge Charlotte Bech, Gentofte +45 33 31 5444 ... (acetylsalicylsyre og gigtmedi- cin). Kombinationen

AUF DER HERZOGIN SoPHIE CHARLOTTE 1903/04 · SOPHIE CHARLOTTE war nach der Tochter des Großherzogs benannt worden. Im Mai/] uni 1903 wurde die HERZOGIN SOPHIE CHARLOTTE in Bremerhaven

Christian Kehrt, Peter Schüßler, Marc-Denis Weitze (Hg ...€¦ · eines scheinbar uneinholbaren Rückstands im Bereich Neuer Techno-logien im Vergleich mit anderen Nationen wuchs

Jugendmeisterschaften 2011 des TC Penzberg U9 … · Annika Schneider Charlotte Handel Mia Weidner, Emily, 2002 TC Penzberg Zarnt, Annika, 2001 TC Penzberg Schneider, Charlotte, 2002

Prof. Charlotte Braun-Fahrländer Swiss School of Public Health+ Wie kann man sich in der Schweiz im Bereich Public Health aus-und weiterbilden? Prof. Charlotte

Social Media und digitale Wissenschaftskommunikation · Geschwister-Scholl-Straße 2, 55131 Mainz Koordination PD Dr. Marc-Denis Weitze, acatech Redaktion ... Im Sinne einer besseren

KOGNITIVE STÖRUNGEN Regine Bader Charlotte Brüser

App Design Lektion 2 Charlotte Lærke Weitze