Bee Blog


Bee Blog is de weblog van FlyingBeeDesign over User Interface Design.

10 handige tips voor een goede user interface design

Posted on 21-2-2013 by Letty Verhoeve in user interface design tips user interface design advies ui design ui design design webapplicatie

Steeds meer applicaties migreren naar het web. Deze applicaties zijn vaak behoorlijk complex en vragen om een nieuwe interactie met de gebruiker. Hoe zorg je ervoor dat je gebruiker niet verdwaalt in alle prachtige functionaliteiten die zijn ontwikkeld? Hoe ontwerp je een user interface die eenvoudig is in gebruik zonder dat dit ten koste gaat van de beschikbare functionaliteiten?



1) Kies voor eenvoud en overzicht, zonder de functionaliteiten van de webapplicatie te beperken.


Hoe meer functies je laat zien op het scherm in dezelfde tijd, hoe meer tijd je gebruiker kwijt is om uit te vogelen hoe de user interface te gebruiken. Als er minder keuze is, worden de relevante functies duidelijker en gemakkelijker om te zien. Zo is het handig om uitgebreide functionaliteiten te verbergen in pop-ups en controles. Deze zijn alleen zichtbaar als de gebruiker deze functionaliteit werkelijk nodig heeft.

Om te beslissen wat je laat zien en wat je verstopt is afhankelijk van hoe belangrijk een functionaliteit is en hoe vaak deze wordt gebruikt.

2) Gebruik bij eerste gebruik van de applicatie je lege ruimtes voor uitleg over de verschillende functionaliteiten


Bij het ontwerpen van de webapplicatie is het belangrijk dat deze applicatie er ook goed uitziet als er nog geen data aanwezig is.

Als er nog geen informatie aanwezig is voor een pagina of query, dan is het handig om hier uitleg over te geven over hoe de gebruiker kan beginnen met dit onderdeel van de applicatie. Op deze manier nodig je de gebruiker uit om aan de slag te gaan met de webapplicatie.

Op deze manier kun je de gebruiker stap voor stap door de applicatie heen leiden. De gebruiker heeft dan verder geen hand-out of persoonlijke instructie nodig.
Ook een embedded video waarin de stappen worden beschreven met een gesproken uitleg daarbij zijn erg handig.

3) Maak gebruik van icoontjes

Icoontjes versterken je woorden in beeld, zij geven overzicht en structuur en maken de applicatie mooi en plezierig om mee te werken.

4) Gebruik contextgevoelige navigatie

Het is belangrijk om na te denken over wat de gebruiker verwacht te zien en wat de gebruiker werkelijk nodig heeft binnen een bepaalde context. Zo hoef je niet dezelfde navigatie overal te laten zien, als deze niet nodig is.

Contextgevoelige controles maken de webapplicatie veel eenvoudiger in gebruik! Zij laten alleen zien wat de gebruiker nodig heeft en niet alles wat beschikbaar is.

5) Geef meer nadruk aan sleutelfuncties

Niet alles controles zijn even belangrijk. Een voorbeeldje: op een scherm waar je een nieuw item kunt aanmaken is er meestal ook een knopje om deze handeling ongedaan te maken (cancel). Het aanmaken van het nieuwe item is alleen veel belangrijker dan de mogelijkheid om dit toch niet te doen. Maak in zo’n geval een mooie knop voor het nieuwe item en een linkje met rollover voor het cancellen van deze actie.

6) Geef je tekstuele linkjes het gedrag van knoppen

Voor de gebruiker is het duidelijker wanneer je tekstuele linkjes het gedrag van een knop vertonen. Geef de linkjes een rolloverwaarde en pressed buttonwaarde mee, zodat de gebruik ziet en ervaart dat de tekstuele link een knop is.

7) Zorg voor duidelijke pop-ups  


Een schaduw rond pop-up vensters zorgt ervoor dat de pop-up goed te onderscheiden is van de achtergrond. De dimensies van de pop-up worden versterkt en zijn duidelijker te zien voor de gebruiker.


8) Schakel de verzendknop na gebruik uit

Een van de problemen met webapplicaties is het verzendproces van informatie. Een eenvoudige manier om te voorkomen dat gebruiker meerdere malen dezelfde informatie verstuurt, is om de verzendknop uit te schakelen, nadat deze is gebruik.

9) Gebruik gespecialiseerde controles

Sliders zijn een mooi voorbeeld van een gespecialiseerde controle. Je kunt altijd handmatig een nummer invoeren. In sommige gevallen zijn sliders alleen veel handiger dan handmatige invoer van getallen. Ze zijn eenvoudig en snel in gebruik en geven de gebruiker direct inzicht in minimale en maximale op te geven waardes.

10) Neem contact op met FlyingBeeDesign

Mocht je geïnteresseerd zijn in een geheel vrijblijvend advies gebrek over de user interface van je webapplicatie, neem dan gerust contact met me op:

Letty Verhoeve
06-29731970
info@flyingbeedesign.nl
Of vraag een quickscan webapplicatie aan.

Bron: Smashing Magazine

Letty Verhoeve

Commentaar