Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Wat is een goede app - en hoe maak je die?

Plenaire sessie Surf Summerschool 2012
by

Renske Jongbloed

on 12 February 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Wat is een goede app - en hoe maak je die?

Elevate the content that people care about
Wat maakt een app goed?
De gebruiker
centraal

10 golden rules of (app) design
Locatie
Situatie
Sociaal
Hardware
Browser
Hoe?
Leer de gebruikers kennen
1
2
Analyseer taken en doelen
3
Stel user requirements op
Functioneel ontwerp
Maak en test prototype
Bijschaven en herhalen!
4
5
6
Directe observatie
Enquête
b.v. Survey Monkey
Thinking out loud
Persona´s
Storyboarding
Use case scenario
Als er geen duidelijke user requirements worden opgesteld....
Hoe schrijf je goede requirements?
Functional requirements -> Wat moet de app doen?
Gericht op taken, acties, activiteiten






Non-functional requirements -> Wat moet het systeem kunnen?
Gericht op systeemeisen.
b.v: R1 - De gebruiker komt op zijn persoonlijke pagina via een inlogscherm
b.v: R1 - Het systeem zorgt ervoor dat persoonlijke gegevens beschermd zijn tegen ongeautoriseerde toegang
Voorbeeld

Doel & doelgroep van app

De te behalen doelen (ook: hoe te meten?)

Afhankelijkheden van andere applicaties

Overzicht van alle pagina’s in de app

Beschrijving van de functionaliteit op alle pagina’s

Uitgewerkte schema’s van de flows binnen de
app en de bijbehorende usecases

Wireframes van de key pagina’s
Functioneel ontwerp bevat de volgende elementen:
Low-fidelity
High-fidelity
Sketching

Index cards
usually
paper-based
Look and feel approaches real thing
often hardware / software
En zo makkelijk is het....
"Interaction Design
is about creating user experiences that enhance and augment the way people work, communicate, and interact".
Interaction Design (2011)
Rogers, Sharp & Preece
1
10 Belangrijkste principes
Less is more
4
3
2
Wat is de hoofdfunctie van de app?
b.v. flickr ->
=> focus daar op, laat de rest weg. Evt in later stadium
functionaliteiten toevoegen MITS het de
hoofdfunctie niet in de weg staat.
Bescherm je gebruiker
Don't make me think!
Beperk de opties tot:

Waar de app voor bedoeld is;

Waar de gebruiker OP DAT MOMENT behoefte aan heeft;

Maak input mogelijkheden zo makkelijk mogelijk (bv kiezen ipv zelf invullen)
Gebruiker hoeft niet na te denken (minder cognitieve belasting)

Gebruiker maakt minder snel fouten

Gebruiker snapt meteen hoe app werkt (minder kans op afhaken)
Volg de design standaarden
Vertrouwd = intuitief
Originaliteit is leuk, maar wees voorzichtig bij standaard elementen, zoals b.v.:
Invulschermen
Schuifknoppen
Zoekschermen
Actieknoppen
=> Gebruik bekende symbolen en bekende handelingen
Wees duidelijk
Maak gebruik direct duidelijk
Beperk de opties (zie: 2)

Contrasterende actieknoppen

Gebruik bekende termen

Wijs de weg > logische navigatie
Engage de gebruiker
5
Optimaliseer voor aanraking
Wees consistent
Fouten maken mag
Denk mee
Platform
Ontwerp specifiek voor mobiel platform
Richtlijnen voor touch commands:
Grootte:
iOS: 44 x 44 pixels
Android: +/- 48 x 48 pixels
Windows: 7-10 mm

=> pixels afhankelijk van resolutie!
Maar denk ook aan:

De situatie/omgeving (mbt gevoeligheid, grootte etc)

Belangrijke acties beschermen

Wees voorzichtig met gestures -> bekend bij publiek?

Geen links maar knoppen (liefst vierkant)!

Plaatsing knoppen - belangrijkste in onderste helft!
Belonen ipv straffen
Gebruik als de app aan het laden is ipv een splash screen een scherm dat op het startscherm lijkt

Geef gebruiker meteen iets relevants te zien of doen

Zorg dat gebruiker wordt aangemoedigd ipv afgestraft bij verkeerd gebruik

Stel een login zo lang mogelijk uit => schrikt af
6
Gebruiker neemt ervaring mee
Interne consistentie:
Kleurenschema, grootte fonts, e.d.
Stijlgids (ook mbt app icoon, website e.d.)
Grootte en locatie knoppen & controls (!!)

Externe consistentie (universele betekenis van iconen, knoppen, handelingen)

=> zorgt voor intuïtieve ervaring + geleerde ervaring blijft nuttig
7

Terug naar af -> opnieuw denken

Niet denken vanuit techniek, maar vanuit gebruiker

Maar: vult het een behoefte?
Geef altijd een weg terug
Autosave zo vaak mogelijk (tenzij dit tegen de functie ingaat)

Sla de huidige status op als de app wordt afgebroken

Laat mensen niet weten dat ze iets fout doen, maar leid ze naar het goede
Minimaliseer de focus op controls en knoppen (behalve de actieknoppen)
8
9
Wat wil de gebruiker waarschijnlijk?
Gebruik default instellingen

Richt je op de behoeften van 80% van de gebruikers

Als gebruiker stappen moet doorlopen, zorg dat het eenmalig is

Onthoud keuzes en ingevoerde zaken

Indien mogelijk, gebruik al aanwezige info/mogelijkheden (bv: facebook login)
10
Nieuw medium, nieuwe opties!
Denk niet vanuit de website, maar vanuit de nieuwe mogelijkheden -> touch & sensors

Concentreer je op een hoofdtaak/functionaliteit

Denk vraaggericht, niet aanbodgericht

Scrollen is normaal & geaccepteerd
Wat valt op?
Meer lezen?
Bezoek mijn overzicht van de beste:

literatuur
tools
patterns
inspiratie
guidelines
www.jongbloeddesign.nl/blog/
Context
(paper) prototyping
Even voorstellen.....
Tip!
Na de release:
Bewaar wat leuke toevoegingen voor updates
Luister naar de comments van je gebruikers
Let op gebruikersstatistieken - waar haken mensen af?
Voorbeeld van verwarrende ervaring door gebrek aan consistentie
Full transcript