5 UX-principes waaraan u zich moet houden voor een geweldig UX-ontwerp

Will Grant, een UI / UX-expert en een digitale productontwerper, legt de 5 principes uit die u moet volgen om een ​​geweldige gebruikerservaring te garanderen.

1. Gebruik niet meer dan twee lettertypen

Alleen amateurs noemen lettertypen "lettertypen", weet je? "Juiste" ontwerpprofessionals noemen ze "lettertypen" Lettertypen zijn de bestanden op het apparaat die de software gebruikt om het lettertype weer te geven. Lettertypen zijn de verf op het palet, terwijl het lettertype het meesterwerk op het canvas is.

Ongeacht, te vaak voegen ontwerpers te veel lettertypen toe aan hun producten. U moet ernaar streven maximaal twee lettertypen te gebruiken: een voor koppen en titels en een voor kopieën die bedoeld zijn om te worden gelezen.

Gebruik nadruk en gewicht in die lettertypefamilie - in plaats van over te schakelen naar een andere familie. Dit betekent meestal dat u het lettertype van uw bedrijfsmerk als kop gebruikt, terwijl u de bedieningselementen, dialoogvensters en in-app-kopie (die duidelijk leesbaar moet zijn) in een beter beproefd, leesbaar lettertype laat.

Het gebruik van te veel lettertypen creëert te veel visuele "ruis" en verhoogt de moeite die de gebruiker moet doen om het zicht voor hem te begrijpen. Wat meer is, veel op maat ontworpen merklettertypen zijn vaak gemaakt met een pittige visuele impact in het achterhoofd, niet leesbaarheid.

2. Gebruikers hebben al lettertypen op hun computer, dus gebruik ze

Ja, het lettertype van je bedrijfsmerk is prachtig. Het is zo speels en charmant, maar het duurt drie extra seconden om de pagina te laden, omdat het lettertype van de server moet worden gedownload en weergegeven - en er verschijnt niets totdat het wordt geladen - waardoor je gebruikers gek worden.

Het is prima om aangepaste displaylettertypen voor koppen en titels op te nemen; het helpt om het product te merken en voegt wat visuele interesse toe. Het gebruik van aangepaste lettertypen voor body copy is echter over het algemeen een slecht idee.

Allereerst moeten deze lettertypen ergens worden geladen, of dit nu Google-lettertypen, Typekit of uw eigen CDN zijn. Dit betekent dat er een overhead is om de lettertypebestanden naar de computer van de gebruiker te halen. Content-zware pagina's zullen vaak breken terwijl de juiste lettertypen worden gedownload en weergegeven - de gevreesde Flash van niet-gestileerde inhoud of Flash van niet-gestileerde tekst (FOUC) (https://en.wikipedia.org/wiki/Flash_of_unstyled_content).

Ten tweede, als je door het opgeven van wilde en prachtige body copy-lettertypen denkt dat je enige controle hebt over het eindresultaat, denk dan nog eens goed na. Dankzij een responsief ontwerp en duizenden verschillende apparaten in het wild, zien uw pagina's er voor iedereen een beetje anders uit.

Gelukkig, of uw gebruiker nu op een telefoon of een desktop, Windows of Mac (of Linux) is, ze hebben al enkele mooie, goed leesbare lettertypen geïnstalleerd en wachten om te worden gebruikt. De "systeemlettertypestapel" is een CSS-regel die moderne browsers vertelt om het type in het systeemeigen lettertype weer te geven.

Door het gebruik van systeemeigen lettertypen verschijnen pagina's in de meeste gevallen sneller en ziet het type er scherper en beter leesbaar uit.

Font-family:
   apple-systeem
   BlinkMacSystemFont
   Segoe UI
   Roboto
   Oxygen-Sans
   Ubuntu
   Cantarell
   Helvetica Neue
   sans-serif

Gebruik alsjeblieft alleen de stapel met systeemlettertypen.

Gebruik Type Grootte om Informatiehiërarchie af te beelden

Dit is een eenvoudige maar effectieve methode om uw weergaven te ordenen en ze direct begrijpelijk te maken voor een breed scala aan gebruikers. Laten we een voorbeeld bekijken van hoe we dit niet moeten doen in een ingebeelde gebruikersinterface van de app 'Agenda':

Door de typegrootte met een merkbare factor te wijzigen, kunnen we de gebruiker eerst de meest relevante informatie tonen:

Schaal de informatie op die u gebruikers eerst wilt laten zien, of waarvan u denkt dat ze het nuttigst zijn, en ze kunnen verder lezen voor extra details. Dit is de reden voor veel nieuws en feitelijke journalistiek die zich op dit formaat vestigt:

Kop die u iets vertelt

Ondertitel die context toevoegt en meer vragen stelt

Dit is de hoofdtekst die het verhaal uitbreidt door geleidelijk details toe te voegen via de kopie. Blijf lezen tot het einde om steeds minder belangrijke details te leren.

Dezelfde techniek kan met groot effect worden gebruikt in het ontwerp van de gebruikersinterface.

Notitie
Pro-tip: zoek een evenwicht en overdrijf het niet. Als er te veel elementen op de pagina groot zijn, verliezen ze elk gevoel van hiërarchie en nadruk.

Gebruik een verstandig standaardformaat voor tekstkopie

Uw klanten lezen veel tekst in uw app of site, dus hoe groot moet het type zijn?

De dagen van het type met vaste grootte zijn al lang voorbij. Met de meeste browsers op desktop en mobiel kunnen gebruikers het type op en neer schalen, overschakelen naar de "leesmodus" en systeembrede toegankelijkheidsinstellingen toepassen, zoals groot type en contrastrijke kleuren.

Met dat in gedachten, is alles wat u hier doet het instellen van de standaardtypegrootte die verschijnt wanneer het product voor het eerst wordt geopend. In het ideale geval moet het type groot genoeg zijn om leesbaar te zijn, maar niet zo groot dat het de gebruiker overweldigt of te veel ruimte in beslag neemt in een volle weergave.

Body copy in 16 px, met een hoogte van 1,5 regel en een "automatische" of "standaard" tekenafstand, is meestal een veilige gok en een goede standaard voor de overgrote meerderheid van uw gebruikers.

Het proberen om uw eigen tekenafstand in te stellen, is meestal niet nodig voor het kopiëren van een hoofdtekst, omdat de browser de tekstweergave beter kan uitvoeren dan u kunt.

Gebruik een ellips om aan te geven dat er nog een stap is

Als uw gebruiker een knop 'Verwijderen' ziet, hoe weet hij dan of het indrukken ervan:

· Het "ding" waar ze naar kijken verwijderen?

· Vraag welk "ding" moet worden verwijderd?

· Vraag ze of ze het "ding" echt willen verwijderen?

· Direct al hun spullen verwijderen?

Label de knop "Verwijderen ..." en de gebruiker heeft een goed idee dat er nog een stap is voordat al zijn spullen worden verwijderd. De meeste gebruikers leiden hieruit af dat de knop het eerste deel van een meerdelig proces is en dat er een tweede stap is om de actie te bevestigen of te annuleren. Als een besturingselement een extra stap vereist om de actie uit te voeren, neemt u een weglatingsteken (...) op in het besturingselement:

Deze kleine puntjes zijn een geweldig voorbeeld van onzichtbaar ontwerp: de meeste gebruikers zullen ze nooit hebben opgemerkt, maar ze geven een subtiele boodschap af naarmate de ervaring van een gebruiker in de loop van de tijd groeit. Ze staan ​​niet in de weg en ze "werken gewoon".

Als je het leuk vond om dit artikel te lezen, kun je 101 UX-principes van Will Grant bekijken om 101 manieren te ontdekken om je UX-ontwerpen te verbeteren. Volgend in de voetsporen van Jakob Nielsen en Don Norman, is 101 UX Principles de gids voor UX-professionals die alles omvat, van wachtwoorden tot het plannen van de gebruikersreis.