Elke ontwerper zou bepaalde regels moeten weten voordat hij een mobiele app gaat maken. Specialisten vinden over het algemeen dat al hun kennis voor de hand ligt, maar moeten niet vergeten dat dit, normaal gesproken, niet het geval is voor het grootste deel van de bevolking.
Specialisten kunnen snel beslissingen nemen. Ze doen dit werk al lang en hebben ervaring opgedaan, iets dat niet iedereen heeft. Soms moet een specialist een beetje afstand nemen om het grotere beeld van het leven te kunnen bekijken. Anders blijft hij beperkt tot de gedachten van andere specialisten en maakt alleen kunst voor andere kunstenaars.
De veronderstellingen aanleren die tot beslissingen leiden kan zeer waardevol zijn. Een uitleg van de strikte regels die ontwerpers hanteren zal je ongetwijfeld sneller in het zadel helpen.
Hier komen dus onze 16 top tips omtrent het ontwerpen van mobiele applicaties. Laten we beginnen!
Het staat allemaal op een raster
Op elke oppervlakte heb je een onzichtbare raster. Je kan het niet zien, maar hij is er wel om je te begeleiden.
Elk element bepaalt de afstand
Inhoudsopgave
Op het moment dat je een punt, een komma of een lijn plaatst op je canvas/monitor/ scherm, heb je je marges en vulling gedefinieerd. Elke actie definieert de ruimte waarmee je moet werken.
Daarbij, moet je zorgen dat je consistente breedtes en hoogtes behoudt voor wat betreft marges en vulling. Er moet, bijvoorbeeld, een goede reden voor zijn als je op een plek 60 pixels hebt en op een andere 20 pixels (zoals wanneer die ene sectie een kind van de andere is). Anders moeten ze allemaal hetzelfde zijn.
De kleur creëert een hiërarchie
De kleurwaarde geeft een bepaald doel aan. Laten we, bijvoorbeeld, met zwart en grijswaarden beginnen. Als je een knop zwart maakt, de tweede donkergrijs en de derde lichtgrijs, dan zeg je eigenlijk dat “Knop 1 de belangrijkste knop is voor de bezoeker, knop 2 is minder belangrijk en knop 3 de minst belangrijk.”
Let op dat je niet dezelfde kleur gebruikt voor knoppen als op de website of in de app want dit kan je kleur verzwakken. Maak je ‘KOOP” knop of andere knoppen die tot actie roepen nooit felrood. Rood betekent halt in de VS en kan voorkomen dat de gebruikers erop klikken omdat ze kunnen denken dat het niet zal leiden tot hun gewenste doel.
Ons volgend punt zijn kleurassociaties. Kleurassociaties zijn cultuur gebaseerd en moeten worden overwogen als je de markt definieert. Bijvoorbeeld, we hebben eens in een team gewerkt dat een rode “toegangsknop” in gebruik had. Die knop hebben we later groen gemaakt en hij werd sindsdien twee keer zoveel geklikt.
Rood kan worden gezien als “stop, niet doen, ben je zeker? Als een waarschuwing!”. Wanneer je hiervan bewust bent, zullen je resultaten dichter bij je behoeften zijn.
Kleur hoeft niet te zijn wat jij leuk vindt, kleur gaat over het merk
Een brandmerk is gefocust op de emotionele relatie die je consument of klant heeft met je service of met je product. Kleur is een manier om deze relatie op een subtiele maar doeltreffende manier te definiëren. Je kleuren kunnen doeltreffend zijn ook als je ze zelf niet leuk vindt.
Roze is geen tonaliteit van rood
Leer de betekenis van tonaliteit (kleurintensiteit) en tint want die twee woorden worden heel vaak misbruikt.
Kleur 101: “Hue” is de basiskleur, zoals rood, blauw, groen enzovoort. Als wit aan een kleur wordt toegevoegd, dan is het een tint van dat ene kleur, als zwart wordt toegevoegd, dan is het een tonaliteit. Wanner we een kleur beschrijven, kunnen we zeggen dat hij een rode tint heeft of een kleurtonaliteit, maar niet allebei tegelijk.
Wanner we met klanten praten, gebruiken we weleens kleurennamen zoals robijnblauw, pompoentaart en babyspuug omdat de kleuren, met een passende associatie, menselijker worden gemaakt. Maar technisch gesproken, gebruiken we tint en tonaliteit.
Vraag je soms wat voor kleur baby kots is? Het is een kleur die we onlangs vaak in logo’s zien. Vroeger werd veel gevraagd naar Corporate Blue (zakelijk blauw) en we dachten dat het niet erger kon, maar het is toch gebeurd. De nieuwe boosdoener is baby kots dus.
Logo’s voegen stijl toe, maar ze maken of breken niet
Een merk maakt geen klant en een klant maakt geen merk. Een logo maakt je bedrijf niet beter dan wat het is, maar een logo dat niet goed doordacht en uitgevoerd is zal je bedrijf geen goed doen.
Er wordt gezegd dat een logo tijdloos is. Standaard is een design trendy en een logo kan dus niet tijdloos zijn. Logo’s zijn gebonden aan de tijd waarin ze ontworpen worden en daar is niets verkeerds mee. Coca-Cola, bijvoorbeeld, is niet tijdloos. Het geeft wel een jaren 20 gevoel, rond de tijd dat het werd ontworpen. Het is sindsdien geüpdatet en geschikter gemaakt voor onze gevoeligheid, maar in essentie blijft het vintage, niet modern.
De paginatitel
Paginatitels van een website op het scherm zijn een handige manier om gebruikers te laten weten waar ze zich bevinden wanneer ze 35 tabs hebben geopend en de inhoud even kwijt zijn.
In een app nemen paginatitels veel ruimte in beslag. Ruimte die je zeer goed kan gebruiken. Je zou de paginatitels kunnen overslaan als je denkt dat de gebruiker niet gauw zal vergeten op welk scherm hij kijkt. Eventueel kan je ze laten verdwijnen en weer verschijnen als de pagina’s ververst worden of gescrold.
Een alternatief is om, als de gebruiker deze functie nodig heeft, deze ruimte te veranderen in een zoekgebied. Er moet gezegd worden dat paginatitels het scherm goed omlijsten en een gepolijst uiterlijk geven aan het design.
Definieer alle elementen en herhaal ze
Maak je een “Startknop” paars, dan moet je alle startknoppen paars maken. Geef je een scherm een ruimte van 20 pixels aan alle kanten, dan moeten alle schermen dezelfde consistentie hebben.
Dit is wat we bedoelen met elementen definiëren en ze herhalen. Je zou alle elementen moeten definiëren, net als alle kleuren in je app.
Met simpele trucs kan je teksten scheiden en hiërarchie maken.
Hoofdletters, titels in grote of kleine letters, inspringen, vet maken, onderstrepen enzovoort zijn allemaal stilistische keuzes. Geen een is noodzakelijkerwijs beter dan een andere en je kan ze overal toepassen, maar je moet consequent blijven.
Verouderd is een ander woord voor niet trendy
Design is gefocust op trends en de trend is momenteel flat design of vlakke uitvoering (geen toeters en bellen, maar rechttoe- recht-aan-design). Dat betekent niet dat er geen textuur of schaduwen mogen worden gebruikt en ook niet dat “skeuomorphisme” (voorloper van flat design) inhoudt dat elke aspect een realistische structuur moet hebben. Over het algemeen, moet je bewust zijn van wat je gebruiker te zien verwacht omdat hij je daarvoor zal beoordelen. Gebruikers merken het wel als je app er ouderwets uit ziet.
“Skeuomorphisme is een verzamelnaam voor alle objecten die de decoratieve elementen van oudere, afgeleide iteraties (herhalingen) behouden. Deze elementen zijn niet langer nodig voor de functies van huidige objecten.”
(Austin Carr, design en technologie schrijver voor de Fast Company)
De meeste applicaties zijn gewoon lijsten
Het grootste deel van mobiele apps zijn eigenlijk lijsten waardoor je kan navigeren. De ontwerper moet zien te verbergen dat het slechts om een lijst gaat en zorgen dat hij er een interessante ervaring van maakt die lonend is en leuk om te zien. Dit is het belang van IA (information architecture) en een juiste hiërarchie. Een lay-out kan, met de juiste basis, Zeer gevarieerd eruitzien en toch dezelfde informatie overbrengen.
Hoe kies je een een geschikt lay-out
Online vind je designbibliotheken waarmee je kan bepalen welke lay-out het meest geschikt is voor een bepaald probleem. Hier heb je een aantal goede bibliotheken:
Acties vereisen een snelle feedback
De verwachting van gebruikers is dat hun telefoon snel en doeltreffend reageert op hun interacties. Dit is niet altijd het geval en ontwikkelaars hebben ons vaak verteld dat bepaalde interacties te lang duren. Wat je moet doen is dus een manier vinden om dit te faken.
Er moet een feedback zijn bij elke interactie. Bijvoorbeeld, wanneer de actie van een gebruiker (vegen, tikken, klikken) wordt beantwoord met een animatie, krijgt de gebruiker feedback en weet dat zijn actie is ontvangen en het proces wordt uitgevoerd.
Denk even na hoe dit werkt in een webontwerp. Als een gebruiker over een knop zweeft, verandert de knop en dan weer als daarop wordt geklikt. Dit moet ook op een mobiel apparaat gebeuren. Wanneer de gebruiker iets raakt, moet het verschuiven of gloeien of stuiteren, wat dan ook, als de gebruiker maar weet dat het werkt.
Dit geeft het systeem de tijd om de oorspronkelijke actie of oproep te verwerken en hierdoor zal het lijken alsof het direct gebeurt. Kortom, veel interactie is eigenlijk gooien van rook en spiegels.
Stel de registratie uit
Gebruik één pagina om de registratie te bieden. Laat de gebruiker zich pas aanmelden wanneer hij iets een like heeft gegeven of op een hartje geklikt, laat hem eerst een beetje de boel verkennen en zich engageren. Veel gebruikers zullen afvallen voor de registratie. Meestal heft de registratie toch niet veel waarde voor het merk.
Wanneer een fancy lettertype te gebruiken
Je kan je tijd beter aan iets anders besteden dan het ontwerpen van een uitgebreide lay-out. Terwijl de meeste mensen snel onderscheid kunnen maken tussen serif, sans, decoratief, vet of smal, ze denken vaak dat Egyptienne serif is, Humanist sans en alle lettertypes van Jessica Hische (bekende illustrator, typograaf en ontwerper) decoratief zijn. Als je en lettertype moet kiezen, zijn de belangrijkste overwegingen als volgt:
- Kan ik die lettertype makkelijk op mobiel/web gebruiken?
- Heeft die lettertype verschillende gewichten/waarden?
- Is die lettertype goed leesbaar?
We zijn ervan overtuigd dat je een leven lang nodig hebt om het design van lettertypen onder de knie te krijgen. Kies dus lettertypes van een bekende gieterij, daar zal je geen problemen mee hebben.
Voor je mobile apps moet je rekening houden met het feit dat de meeste gebruikers geen onderscheid kunnen maken tussen Arial, Avenir, Roboto of Helvetica. Het is dus oké als het lettertype die je gekozen hebt, een zuiver beeld heeft en makkelijk te lezen is. Pas wanneer je je meer richt op het merk en minder op de bruikbaarheid, dan kan je aparte lettertypes overwegen. Zo zal een nieuwe, atypische lettertype een bepaald gevoel kunnen creëren, zoals nostalgisch of eigenzinnig. Of je dit doet of niet, hangt van je prioriteiten af, maar is niet iets waar je je aan vast moet houden.
Elk systeem heeft zijn eigen visuele richtlijnen
De designrichtlijnen van Android, Windows en iOS zijn gebaseerd op verschillende designstijlen en zijn behoorlijk gedetailleerd voor wat betreft specifieke informatie zoals, bijvoorbeeld, de spatie tussen de tekst. Deze richtlijnen zijn een geweldige hulpbron in het geval dat je onzeker bent hoe je verder moet.
Deze verzameling van tips zal je goed op weg kunnen helpen bij het maken van je toekomstige mobiele apps. Veel succes!