Inhoud
- 01. Optimaliseer fotografie voor HD-schermen
- 02. Maak slim gebruik van animatie
- 03. Koppel alles terug naar de basis
- 04. Maak alle interface-elementen consistent
- 05. Ontwerp knoppen met aanraking in gedachten
- 06. Creëer een hiërarchie met grootte en kleur
App-ontwerp is een oefening in brutaal eenvoudig, gebruikersgericht ontwerp. De sweet spot is een interface die zowel mooi als functioneel is. Het moet intuïtief zijn om te navigeren, snel te laden, maar ook kleine details bevatten die het uniek en gedenkwaardig maken.
Dankzij de platte ontwerprevolutie en de prevalentie van de ingetogen esthetiek waar mensen als Apple en Google de voorkeur aan geven, lopen veel apps het risico er hetzelfde uit te zien.
Tot op zekere hoogte is dit positief, aangezien gebruikers instinctief weten hoe bepaalde functies werken. Maar het legt nog meer druk op visuele elementen zoals illustratie of fotografie om het uiterlijk van de app te helpen bepalen.
Lees verder voor zes tips van experts over hoe u afbeeldingen effectiever kunt gebruiken bij het ontwerpen van apps ...
01. Optimaliseer fotografie voor HD-schermen
Schermen met een hoge resolutie zijn nu de norm bij de meeste smartphones, waardoor de kwaliteit van de afbeeldingen die u wilt gebruiken, hoger ligt, vooral als u fotografie gebruikt. Voor de iPhone X werk je met een enorme resolutie van 1125 x 2436 pixels.
Pixellatie en vaagheid zien er onprofessioneel uit, maar gelukkig zijn deze gemakkelijk te vermijden als u activa van behoorlijke kwaliteit koopt. Houd echter altijd rekening met de laadtijd - mensen verwachten dat dingen binnen een paar seconden worden geladen - dus overdrijf het niet. Zorg dat elke afbeelding telt.
Soms is het natuurlijk onvermijdelijk dat bepaalde functies langer duren. Dat is waar je wat creatiever moet denken, om het wachten aangenamer te maken voor de gebruiker - een laadspinner of voortgangsbalk is beter dan een leeg of statisch scherm. Een andere optie is een ‘skeletscherm’ dat informatie stuk voor stuk laadt.
02. Maak slim gebruik van animatie
Zelfs de meest subtiele hint van animatie kan charme en persoonlijkheid aan uw app toevoegen, of het nu zo simpel is als een functionele overgang, of iets meer karakter- of verhaalgedreven dat de gebruiker kan verrassen en verrukken.
Vanuit functioneel oogpunt kan animatie mensen helpen een statuswijziging in de app te begrijpen - wat de trigger was, het effect dat het heeft gehad en hoe deze indien nodig opnieuw kan worden gestart. Het kan ook de aandacht van een gebruiker naar een bepaald punt van het scherm leiden.
Bepaalde functionele animaties hebben ingebouwde associaties. Als een element bijvoorbeeld verdwijnt, impliceert dit dat het volledig is verwijderd. Een overgang waarbij het naar de zijkant schuift, betekent dat het gewoon verborgen is en later kan worden teruggekeerd.
Het tweede type staat bekend als ‘verrukkelijke animatie’. Dit voegt warmte toe aan uw app en zorgt ervoor dat deze menselijker aanvoelt. Het kan van alles zijn, van een speelse behandeling van een laadscherm of voortgangsbalk tot tutorials over app-functies.
03. Koppel alles terug naar de basis
Een van de meest universele regels voor app-ontwerp is om de rommel te verminderen. Je werkt met een relatief klein scherm, en hoe meer knoppen, opties en functies tegelijkertijd op het scherm aanwezig zijn, hoe minder intuïtief de ervaring zal zijn.
Beperk interface-elementen tot een minimum en laat de gebruiker alleen zien wat hij moet weten. Mensen willen taken zo snel en efficiënt mogelijk uitvoeren, idealiter met een paar tikken, zonder door eindeloze schermen te scrollen of veel gegevens in complexe formulieren in te voeren.
04. Maak alle interface-elementen consistent
Consistentie is ook cruciaal, zowel in termen van visuals als functionaliteit. Een onderscheidende, samenhangende look en feel - zelfs als de elementen die het definiëren relatief subtiel zijn - helpt gebruikers zich vertrouwd en comfortabel te voelen in de app, en maakt het uiteindelijk gemakkelijker en intuïtiever om te navigeren.
Visueel gezien omvat dit structurele elementen zoals kleuren, lettertypen, knoppen en labels. Maar ook het gebruik van illustratie of fotografie: de gekozen stijl, zijn rol in de interface en hoe vaak deze voorkomt.
Externe consistentie is ook belangrijk. Waar mogelijk moet een app de look, feel en functionaliteit van de website van een merk aanvullen, zij het vereenvoudigd. Gedeelde kenmerken helpen niet alleen verwarring te voorkomen, maar bouwen ook merkherkenning op.
05. Ontwerp knoppen met aanraking in gedachten
Een andere gouden regel voor app-ontwerp is om te ontwerpen voor touchscreens, en met name binnen handbereik. De richtlijnen van Apple stellen dat knoppen minimaal 44 x 44 pixels moeten zijn, maar behandel dat als een minimum: als een buffer van een paar extra pixels de frustratie van het tikken op het verkeerde ding verhindert, is het de moeite waard om ruimte te maken.
Houd ook rekening met de ruimte tussen interface-elementen, met name knoppen en andere functionele, interactieve delen van het ontwerp. Zelfs als je knoppen een behoorlijke omvang hebben, kan het onbedoeld tikken waarschijnlijker zijn als ze te dicht bij elkaar staan, waardoor gebruikers geïrriteerd kunnen raken en de kans groter is dat ze de app verlaten.
Verschillende schermformaten spelen ook een rol, vooral omdat high-end smartphones groter worden. Bepaalde delen van een groter scherm worden met één hand vastgehouden en zijn moeilijker te bereiken dan andere, en het kan nodig zijn om ze uit te rekken of zelfs om opnieuw vast te pakken.
Frequente interacties en belangrijke navigatie-elementen moeten gemakkelijk te bereiken zijn, terwijl meer risicovolle opties zoals verwijderen en wissen - die gebruikers niet per ongeluk willen activeren - logischer zijn om iets buiten bereik te worden geplaatst.
06. Creëer een hiërarchie met grootte en kleur
Afgezien van games zijn de meeste mobiele apps in wezen lijsten van een of andere vorm - lijsten met opties; functies; dingen om te doen, kijken of spelen. Als app-ontwerper is een deel van uw rol om dat raamwerk interessanter en gemakkelijker te navigeren te maken.
Zelfs in een eenvoudige, ingetogen interface met minimale ontwerpelementen in het spel, is het belangrijk om een sterke hiërarchie tot stand te brengen om gebruikers naar de belangrijkste informatie te leiden en oproepen tot actie zo duidelijk mogelijk te maken.
Grootte is één oplossing: het grootste element op de pagina moet meestal ook het belangrijkste zijn. Maar kleur kan ook heel effectief zijn. Als ze een lijst met menu-opties krijgen die zijn ingedeeld van zwart naar lichtgrijs, zullen mensen aannemen dat de donkerdere kleur belangrijker is en zich daarnaar aangetrokken voelen.
Er zijn ook bepaalde associaties waarmee u rekening moet houden, met name de kleuren rood en groen. Een ‘bevestigen’ knop in het rood naast een ’annuleren’ knop in het groen zal de verwachtingen van gebruikers verstoren en verwarren. Volgens de toegankelijkheidsrichtlijnen van W3C mag kleur echter nooit de enige betekenaar zijn: tekstlabels of pictogrammen zoals vinkjes of kruisjes helpen allemaal om uw ontwerp toegankelijk te maken.
