6 No-Go's voor UX Designers

Vorig artikel Volgend artikel

Met al die nieuwe platformen en devices lopen veel UX designers elke dag tegen nieuwe uitdagingen aan. Geen wonder dat ze vaak naar hun concurrenten kijken en nieuwe design conventies uit andere webdiensten of apps kopiëren. Denk bijvoorbeeld aan de datumpickers op de website van een resibureau. 

Niks mis met het lenen van een beetje UX inspiratie hier en daar, het zorgt er voor dat we met elkaar nieuwe conventies creeëren en het web voor de gebruiker steeds makkelijker te navigeren wordt. Maar het gaat ook vaak mis, bijvoorbeeld wanneer de verkeerde UX tools massaal worden overgenomen. 'Antipatterns of UX Design' noemt Michael Boeke dat, spreker op SXSW Interactive en designer bij Braintree. 

6 No-Go's voor UX Designers

In zijn keynote vandaag zette hij daarom 7 veel gebruikte antipatterns op een rijtje, om daarmee de toegestroomde groep designers te inspireren voortaan iets langer na te denken over het overnemen van een bepaalde conventie. 

1. Double Jump

Schermafbeelding%202014-03-11%20om%2015.36.03

Veel formuliervelden voor cijfers zijn nog steeds opgebouwd uit meerdere blokken, denk bijvoorbeeld aan het veld waar je je telefoonnummer moet invullen (net)nummer)) of je creditcardgegevens (gesplitst in 4 gelijke blokken). Handig, omdat je ziet dat een nummer is opgebroken in gelijke, herkenbare delen. 

Maar in de praktijk vaak onhandig voor gebruikers die 'tabbend' door een formulier bewegen: Je toetst 4 cijfers in, en slaat de tab toets aan. Maar omdat het formulier een 'auto tab' heeft, zit je ineens twee velden verder en moet je alsnog je muis gebruiken om terug te gaan. 

Handiger is bijvoorbeeld de methodiek die Apple in iOS op veel plekken hanteert: Het cijfer dat je moet invullen is weliswaar 1 veld, maar terwijl je typt worden je gegevens automatisch opgebroken in de gebruikelijke verdeling. Dit soort formulier masks, zijn een fijnere oplossing dan losse formuliervelden. 

2. Mystery Carrousels

Schermafbeelding%202014-03-11%20om%2015.37.44

Mooi, zo'n grote carrousel boven aan een website. Het biedt de website eigenaar de kans om een aantrekkelijke, grote afbeelding boven zijn site te zetten en die afbeelding te laten rouleren. Bijvoorbeeld op Apple.com. Maar voor de gebruiker zijn carrousels totaal onlogisch, omdat niet duidelijk is welke content er allemaal achter schuil gaat. 

Je herkent het vast wel: Op een site zie je een mooie visual van een artikel langs komen die je aanspreekt, maar terwijl je er met je muis naar toe beweegt is de afbeelding alweer verdwenen. Met pijltjes kun je weliswaar heen en terug bewegen, maar het voelt een beetje alsof je op goed geluk door een abri aan het scrollen bent. 

Amazon.com lost dat probleem sinds kort anders op: Met een slider menu rechts naast de carrousel bovenaan de pagina. Zo zijn in 1 oogopslag alle 5 de andere items in de carrousel zichtbaar, en kan de gebruiker zelf navigeren naar welke slide hij wil kijken. 

3. Sharing Warts

Schermafbeelding%202014-03-11%20om%2015.39.18

Een doorn in het oog van elke designer zijn de social media buttons naast een nieuwsartikel. Lelijk niet op de eerste plaats omdat ze de ruimte vervuilen en de aandacht van de content afleiden, maar vooral ook omdat ze de performance van je website danig onderuit trekken. En dat terwijl performance UX regel nummer 1 is. 

Een alternatief is 1 share icoon, waarachter een menu schuil gaat dat je de kans biedt om het artikel direct op diverse sociale netwerken te delen. Zie bijvoorbeeld de Flipboard interface. 

4. Mixed Business

users

Kleur en logica is voor een gebruiker heel belangrijk. In zijn presentatie laat Boeke een voorbeeld zien van Jukebox2, waarin inactieve gebruikers een groene knop achter hun naam hebben staan met de tekst 'Enable'. De groene knoppen wekken echter de indruk dat de users reeds actief zijn. 

Het probleem ontstaat omdat de designer tracht een werkwoord (enablen) en een status (actief zijn) in tekst en kleur met elkaar te mengen. Dat kan, maar vergt wel een ander type interface. Bijvoorbeeld de on / off switch die Apple introduceerde in iOS. 

5. Door Slam

Schermafbeelding%202014-03-11%20om%2015.33.40

Fanatieke Twittergebruikers kennen het probleem maar al te goed: Iemand deelt een link naar een artikel op LinkedIn, maar wanneer jij op de link klikt, verschijnt een grote image van Linkedin in beeld, waarin ze je vragen om de app te downloaden. 

Hetzelfde probleem doet zich voor bij elke link die @MTV deelt, of wanneer je mobiel zoekt naar een recept op de Albert Heijn website: Grote roadblocks zorgen ervoor dat je níet in één klik bij de content komt waar je naar op zoek bent. Een deksel op de neus. 

Deze door slams zouden eigenlijk nooit mogen voorkomen. Als je dan toch wilt dat gebruikers ook je app downloaden, maak dan gebruik van een klein balkje boven in de mobiele browser waarin de app wordt gepromoot. Daaronder toon je de content die de gebruiker wil lezen. 

6. Thumb Stretcher

main-qimg-c48b87f98413b2d68df549bb2ec82783

Drie lijntjes in de linkerbovenhoek van je mobiele scherm, beter bekend als het 'hamburger menu', zijn een populaire navigatietruc in heel veel apps. Maar is een dergelijke navigatie eigenlijk wel handig voor een mobiele telefoongebruiker? Want voor de meeste rechtshandigen betekent het dat ze continu hun duim moeten 'overstretchen'. 

Volgens bovenstaande visual is de linkerbovenhoek van het mobiele scherm de meest lastige plek om te bereiken wanneer je je telefoon in je rechterhand houdt, en is het dus niet zinvol om een uiterst belangrijke knop van je dienst (de hoofdnavigatie) op die plek te zetten. 

Beter is het de knop rechts uit te lijnen, of te kiezen voor een horizontale navigatiebalk onder in de app, zoals Apple en Facebook inmiddels (weer) doen. 

Marjolijn Kamphuis

Marjolijn is de co-founder en hoofdredacteur van Dutchcowgirls. Daarnaast is ze creatief directeur van OKGO.nl, een digitale studio gericht op blogs, webdesign...

Reageren is uitgeschakeld omdat er geen cookies opgeslagen worden.

Cookies toestaan Meer informatie over cookies