Applicaties ontwerpen voor ios en Android

Transcriptie

1 Ontwikkelen van Apps voor ios en Android Applicaties ontwerpen voor ios en Android 2.1 Inleiding Zowel Apple als Google heeft een paar tips gegeven bij het maken van een ontwerp voor een applicatie voor ios en Android. De grote kracht van een goede smartphone-applicatie is dat het er rustig en eenvoudig uitziet, terwijl de applicatie toch veel mogelijkheden heeft. In dit hoofdstuk worden verschillende tips en richtlijnen voor het ontwerp van een goede smartphone-applicatie besproken. 2 Ontwikkelen van Apps 2.23

2 Applicaties Ontwerpen voor ios en Android Index Navigatiebalk Tab-bar 2.2 Schema voor het design en de lay-out van ios-applicaties Bij het ontwerp van een goede, gebruikersvriendelijke lay-out voor een iosapplicatie komen een paar standaarden kijken. In de onderstaande afbeelding zijn de afmetingen gegeven van een native applicatie voor een iphone en een ipod, waarbij gebruikgemaakt wordt van een officiële navigatiebalk en tab-bar aan de onderkant. De applicaties die in dit boek aan de orde komen, maken geen gebruik van de tab-bar aan de onderkant, maar wel van de navigatiebalk aan de bovenkant. Voor een gebruiker is het belangrijk dat hij iets herkenbaars ziet. Daarom is het verstandig om de officiële instellingen voor zowel de navigatiebalk als de tabbar over te nemen Ontwikkelen van Apps

3 Ontwikkelen van Apps voor ios en Android ios-apparaten hebben niet allemaal dezelfde schermafmetingen. In de afbeelding hierboven staan de instellingen van een iphone 4(S) en een ipod van de vierde generatie. In de onderstaande tabel zijn de afmetingen gegeven van alle ios-apparaten die gelanceerd zijn van juni 2008 tot april De nieuwste ios-apparaten hebben een retina display. Dit type display heeft significant meer pixels dan een traditioneel display. Apparaat Breedte (pixels) Hoogte (pixels) Retina display ipod tweede generatie Nee ipod derde generatie Nee ipod vierde generatie Ja Retina display Index iphone 3G Nee iphone 3GS Nee iphone Ja iphone 4S Ja ipad Nee ipad Nee The new ipad Ja Ontwikkelen van Apps 2.25

4 Applicaties Ontwerpen voor ios en Android 2.3 Schema voor het design en de lay-out van Android-applicaties Google heeft een aantal richtlijnen gegeven voor het design van applicaties. In de beginjaren van Android waren er nauwelijks richtlijnen. Hierdoor hebben de applicaties veel verschillende lay-outs, en dat heeft tot gevolg dat gebruikers er langer over doen om de interface van een applicatie te leren. Als een applicatie in Google Play wordt aangeboden, zijn de lay-outrichtlijnen van Google niet verplicht. Deze richtlijnen zijn vooral gebaseerd op versie 4.0 van Android, waarin de interface ingrijpend is gewijzigd. Een van de belangrijkste richtlijnen van Google is dat de applicaties geen stijlelementen van een ios-apparaat of een BlackBerry mogen bevatten, bijvoorbeeld pijltjes naast lijstitems en de tab-bar onderin de applicatie. Een quote van Google over dit punt: Als je het thema van interface-elementen wilt aanpassen, doe dat dan voorzichtig en volgens de richtlijnen van je eigen merk, niet volgens de conventies van een ander platform. Alle richtlijnen die Google geeft voor het ontwikkelen van Android-applicaties, specifiek voor versie 4.0, zijn te vinden op de website: Ontwikkelen van Apps

5 Ontwikkelen van Apps voor ios en Android Bij de ios-apparaten van Apple komen er relatief gezien weinig verschillende schermresoluties voor. Bij Android is dit niet het geval, omdat er veel verschillende apparaten zijn die gebruikmaken van het besturingssysteem Android. In de tabel zie je de afmetingen van de meest populaire Androidapparaten. Apparaat Breedte in pixels Hoogte in pixels Samsung Galaxy S II HTC Sensation XE Samsung Galaxy Ace Sony Ericsson Xperia Ray HTC Wildfire S Sony Ericsson Xperia Arc S Samsung Galaxy Gio LG Optimus 3D Cube Asus Eee Pad Slider Asus Eee Pad Transformer Asus Eee Pad Transformer Prime Samsung Galaxy Tab Samsung Galaxy Tab Ontwikkelen van Apps 2.27

6 Applicaties Ontwerpen voor ios en Android Index 88 bij 88 pixels 2.4 Tips * Vergeet de touchscreen niet! Het belangrijkste aan het ontwerpen van een applicatie voor een mobiel apparaat is dat deze geschikt moet zijn voor het werken met een touchscreen. Dat betekent dat een gebruiker minder nauwkeurig op de knoppen kan klikken dan met een computermuis. Apple geeft zelf als richtlijn aan dat ieder object waarop geklikt kan worden, minimaal 88 bij 88 pixels moet zijn voor een ios-apparaat met een retina display of een ipad. Voor een ios-apparaat zonder retina display is dit minimaal 44 bij 44 pixels. Deze richtlijn is ook aan te raden bij Android-applicaties. In het onderstaande voorbeeld zie je een applicatie die op het eerste gezicht veel weg heeft van een standaard-ios-applicatie, bijvoorbeeld de Instellingenapplicatie. Maar als je goed kijkt, zie je dat de rijen minder hoog zijn. En hierdoor is het moeilijker om de juiste rij aan te klikken. Vermijd een horizontale scrollbalk Als de applicatie te breed is voor het scherm, kan het zijn dat er een horizontale scrollbalk komt. Dit is zeer frustrerend voor gebruikers. Als de applicatie te breed wordt, moet je nagaan of je de applicatie in landscapemodus (liggend) * Vrij naar: Ontwikkelen van Apps

7 Ontwikkelen van Apps voor ios en Android kunt maken. Als dit niet lukt, moet je alle overbodige objecten weghalen, zodat er geen horizontale scrollbalk komt. Houd het simpel Een van de belangrijke succesfactoren van de iphone is de eenvoudige opmaak van de applicaties en de intuïtieve bediening. Het is goed mogelijk om een complexe en veelkleurige lay-out te maken, alleen is dit heel vervelend voor de gebruikers. Zo kan de app minder goed leesbaar worden. Een voorbeeld van een applicatie met veel verschillende kleuren, waardoor het lezen van de tekst erg lastig wordt: Gebruik standaardterminologie Er zijn een paar woorden die in veel ios- of Android-applicaties terugkomen. Gebruik deze woorden ook, en verzin er zelf geen andere voor. Bijvoorbeeld: - Instellingen, in plaats van Voorkeuren. - OK, in plaats van Oké. Plaats invoervelden bovenaan Sommige applicaties maken gebruik van tekstvakken waar de gebruiker tekst kan intypen. Plaats deze tekstvakken altijd zo veel mogelijk bovenaan in de applicatie. Het is vervelend voor gebruikers als ze moeten scrollen voordat ze tekst kunnen invoeren. Ontwikkelen van Apps 2.29

8 Applicaties Ontwerpen voor ios en Android Index WIFIverbinding 3Gverbinding Laadindicatie Er zijn applicaties die gegevens van het internet moeten halen voordat er iets kan worden weergegeven. Als er een WIFIverbinding is, zullen deze gegevens sneller worden geladen dan bij een 3G-verbinding. Als de applicatie gegevens van het internet moet halen, zorg dan voor een laadbalk of een laadindicator. Gebruikers zien dan dat de applicatie niet is vastgelopen, maar informatie aan het ophalen is. Geef de navigatiebalk een goede titel Ieder apart scherm van de applicatie moet een unieke titel hebben in de navigatiebalk. De titel van een eventuele terug-knop moet de naam zijn van het scherm waarnaar teruggegaan wordt Ontwikkelen van Apps