Ontwerpen voor de iPad, iPhone en iPod

Datum: 12 april 2011

Apple producten winnen in grote mate aan populariteit. YTEC ontwikkelt mobiele applicaties voor het iOS (het mobiele operating system van Apple).
In dit artikel een beknopt overzicht van punten waar op gelet dient te worden bij het ontwikkelen van mobiele applicaties voor het Apple platform.

De Interface

Scherm / display

Hieronder een overzicht van de verschillende apparaten en hun bijbehorende resoluties.

Apparaat	Resolutie
Iphone 4	640 x 960
Ipad	768 x 1024
Overige apparaten	320 x 480

 

Oriëntatie

Het opstarten van de applicatie dient in dezelfde richting te gaan als de richting van waaruit het wordt opgestart. De twee richtingen, (oriëntatie) van het apparaat kunnen zijn: landscape (liggend) en portrait (staand).

Vanuit de iPhone en de iPod Touch is de start positie altijd 'portrait' (dus staand), vanuit de iPad kan het vanuit elke richting.

Tip: Zorg ervoor dat de applicatie naadloos over kan gaan van portrait naar landscape positie, en terug.

Gestures

“Gestures” of “gebaren” zijn bewegingen die de gebruiker maakt op het scherm van zijn of haar mobiele apparaat, om bepaalde resultaten te krijgen. Er zijn een aantal beschikbare gebaren, met elk een eigen standaard functie.

Hier een overzicht van die gebaren en het bijbehorende standaard resultaat:

Gesture / Gebaar	Effect
Tap (snelle, lichte aanraking)	Selectie of activatie van een item (bijv. knop)
Drag (slepen)	Scroll / pan
Flick (snelle veeg d.m.v. lichte aanraking)	Scroll / pan (snel)
Swipe (veeg)	Bij 'table-view-row' laat de 'Delete' knop zien
Double tap (dubbele snelle, lichte aanraking)	Zoom in en centreer het element waarop ge-'tapped' is. Nogmaals om weer uit te zoomen
Pinch open (kneep open)	Zoom in
Pinch close (kneep sluiten)	Zoom uit
Touch and hold (vasthoudende aanraking)	In wijzigbare tekst laat vergrootte view van de cursor positie zien
Shake (schudden)	Handeling ongedaan maken of opnieuw doen

 

Tip: Het is aan te raden om de gebruiker altijd te bieden wat er verwacht wordt. Een andere functie toekennen aan een gebaar dan die de gebruiker verwacht leidt tot verwarring. De gebruiker heeft weinig geduld en wil niet eerst ontdekken hoe jouw applicatie in elkaar zit. Wees consistent!

Tip: Maak de applicatie zo dat de gebruiker niet steeds dezelfde bewegingen moet doen bij opvolgende stappen. Beperk het aantal stappen die de gebruiker moet nemen om bij een bepaald punt te komen.

Minimale knop-grootte

Knoppen dienen een bepaalde minimale grootte te hebben willen ze comfortabel zijn voor de gebruiker. Het is niet de bedoeling dat een gebruiker met dikke vingers extra moeite moet doen om precies de gewenste knop in te drukken, zonder daarbij andere knoppen of elementen aan te raken.

Kies voor duidelijke, grote knoppen en zorg voor voldoende afstand tussen verschillende knoppen.

De minimale comfortabele grootte van een knop is 44 x 44 points (punten).

Do's en Don't's

Vele bestaande applicaties proberen de werkelijke wereld voorwerpen na te bootsen met hun interface. Denk bijvoorbeeld aan een agenda applicatie, die “bladzijden” heeft, en een leren patroon als achtergrond heeft.

Tot op zekere hoogte is dit leuk en wenselijk, maar de “metafoor” loopt snel stuk wanneer er elementen in komen die niet thuis horen in de werkelijke wereld equivalent. Voorbeeld: een echte agenda heeft geen leren knoppen. Ook heeft een echte agenda geen scroll balk. Wanneer je een bladzijde van een echte agenda omslaat zal het aantal bladzijden rechts verminderen, en links vermeerderen. Dat verwacht je ook, maar een statische agenda op je scherm kan dit niet nabootsen en dat komt vreemd over op de gebruiker.

De iPad geeft de ontwikkelaar meer schermruimte. Meer ruimte betekent niet dat je  er ook meer elementen en interface moet toevoegen. Hou het simpel, en maak gebruik van slimme navigatie balken en/of menu's om extra functies vanuit aan te roepen.

Gebruikers Profiel

In de eerste plaats moet je je afvragen wie de gebruiker is van de applicatie. Degene die de applicatie ontwerpt is zelden dezelfde persoon als de eindgebruiker.

Een goede oefening is om eerst een soort profiel vast te stellen van de eindgebruiker: hoe leeft je gebruiker, wie is hij/zij, hoe ziet zijn/haar dagelijks leven/werk eruit? Hoe past zijn mobiel apparaat daar in?

Pas je applicatie aan, aan het profiel van de gebruiker. Denk na over hoe jouw applicatie gaat passen in het leven/werk van die persoon.

Voorbeeld: Henk is broeder op de werkvloer van het ziekenhuis en is de hele dag in de weer om patiënten te bezoeken en te voorzien van de juiste sondevoeding, volgens eerder vastgestelde adviezen. Hij is niet heel technisch onderlegt, en maakt gebruik van de computer is daardoor vaak veel tijd kwijt.
Het kost veel tijd om de juiste dossiers en papieren te vinden, en Henk moet steeds terug naar zijn kantoor om nieuwe adviezen te maken.
Met zijn iPhone applicatie kan hij terwijl hij naast de patiënt staat direct adviezen maken en de voeding aanpassen. Met gemak bedient hij zijn applicatie en heeft hij snel de gewenste gegevens voor zich. Hij kan collega's ter plekke makkelijk instructies geven. Alle gegevens zijn bij de hand, en het sjouwen met allemaal dossiers en papieren is voor Henk verleden tijd !
Wanneer Henk klaar is met zijn patiënt, hoeft hij niet eerst terug naar zijn kantoor om van alles bij te werken op de computer en hoeft hij niet zijn dossiers en papieren terug te leggen en nieuwe op te halen.
Henk voelt zich vrijer en beweeglijker en kan meer gedaan krijgen op zijn dag. Hij kan meer patiënten helpen in dezelfde tijd en dit vinden de patiënten fijn maar ook de zorgverzekeraar en het ziekenhuis.

Testen

Test je applicatie veel! Niet alleen zelf maar juist door de eindgebruiker: je doelgroep. Je hebt er niks aan als je zelf weet hoe het werkt, de gebruiker moet het makkelijk en snel kunnen beheersen en gebruiken; hij is tenslotte degene die er het meest gebruik van zal maken.