in products / boostrapping

Het belang van UI design patterns in webapplicaties

Een “design pattern” is een oplossing (stukje code) voor een typisch alom bekend probleem. Een “UI design pattern” oftewel User Interface Design Pattern is een layout die een gekend ontwerp-probleem oplost. Het probleem is steeds hetzelfde, de oplossing ook. Een probleem kan bijvoorbeeld zijn: te veel menu items. Een oplossing kan zijn: ze in intuïtieve sub menus schikken.

Als je een webapplicatie of website ontwikkelt (of laat ontwikkelen) is het zeer belangrijk bestaande design patterns te respecteren. In ons dagelijks leven kennen we allemaal design patterns, zoals bijvoorbeeld een manier voor het openen van een deur. Dit is ooit opgelost door een klink te plaatsen op de deur. Iedereen weet hoe je een klink gebruikt. Het is een gekend design pattern voor een gekend probleem. Het hoeft geen handleiding of uitleg.

deurkruk-gebogen-op-steun-tp_180653891165427982

Bedenk even wat er zou gebeuren moest jij, in al je enthousiasme, een volledig nieuwe interface ontwerpen om een deur te openen. Iets dat bovenaan de deur hangt, met 3 hendeltjes aan. Prettig voor jou? Ongetwijfeld! Leuk voor de mensen die je winkel willen binnenstappen? Neen! Zij hebben namelijk geen zin om uit te vissen hoe jou niet-voor-de-hand-liggende innovatieve deurklink moet worden bediend. Ze hebben gewoon zin om je winkel binnen te stappen.

Hetzelfde geldt voor web design patterns. Er zijn gekende oplossing voor gekende problemen. Respecteer die. Wees niet te creatief in de layout van je website. Kijk naar goed ontworpen websites en webapplicaties, en doe wat zij doen. Ze hebben er allicht veel moeite in gestoken om hun applicatie intuïtief te maken. Wees niet tè creatief, zodat je nieuwe gebruikers niet afschrikt met allerlei ongewone schikkingen, openklappende menus, effecten, verborgen links en over-ingenieuze shortcuts.

Hieronder 2 voorbeelden van betsaande oplossing voor bestaande problemen in web en UI design.

Breadcrumbs

We kennen ze allemaal. Het is de keten van links en pijltjes bovenaan grotere websites die aanduiden waar precies we in de website zitten op dit moment. Ze geven het pad aan vanaf de homepagina tot de huidige pagina, met alle tussenliggende pagina’s. Indien je een manier zoekt om de gebruiker aan te tonen waar ie op dit moment is, niet twijfelen: breadcrumbs!

mac

Hover controls

Te veel buttons, links en acties op één pagina? Het UI design pattern hiervoor zijn hover controls. Acties die pas verschijnen indien de gebruiker met de mouse over een bepaalde plaats “hovert”. Hieronder zien we de Twitter interface, waar de extra acties enkel verschijnen als je met de mouse over het record gaat. Resultaat? Een minder overladen scherm.

hover


Conclusie:

Er zijn massa’s UI design patterns. Volg bestaande design patterns als er geen goede reden is om ervan af te wijken! Verlies geen tijd met het her-uitdenken van problemen die al lang zijn opgelost. Focus je op de core business van je webapplicatie of website.

Write a Comment

Comment

Webmentions

  • Tweets that mention Het belang van UI design patterns in webapplicaties / Over online software, webapplicaties en web startups -- Topsy.com

    […] This post was mentioned on Twitter by Peter Vandenabeele, Pieter Eerlings. Pieter Eerlings said: New Blog Post – Het belang van UI design patterns in webapplicaties http://bit.ly/gFzAkq #in […]