UI Design Patterns

Wat zijn UI Design Patterns?

UI(User Interface) Design Patterns zijn veel gebruikte oplossingen voor problemen in de user interface. UI Design Patterns zijn geen kant-en-klare oplossingen maar een algemeen concept. 

Omdat veel van deze design patterns op allerlei websites en apps worden toegepast zijn gebruikers er bekend mee. UI patterns zijn geen verplichting, je kan afwijken van een pattern zodat het beter aansluiten op je product/use case.

Aan de hand van de requirements is er een lijst opgesteld met UI design patterns die gebruikt kunnen worden in het project. De volgende UI design patterns zijn onderzocht:

• File upload (image upload)
• Buttons
• Vertical Navigation
• Identicons or Initials
• Bulk editen/deleten
• Iconen
• Good defaults
• Filter opties
• Zoekfunctie

File upload (image upload) / Drag and Drop

Probleem: De gebruiker moet een file van zijn lokale omgeving naar de applicatie brengen.
Oplossing: 

• Maak gebruik van een WYSIWYG methode. Met behulp van een WYSIWYG methode maak je de complexe taak makkelijker, de gebruiker kan de file/image slepen naar het input veld. 
• Laat de gebruiker bestanden/afbeeldingen slepen naar de applicatie. Het is een instinct van veel gebruikers om bestanden te slepen omdat dit gelinkt is aan het verplaatsen van objecten in de echte wereld. 

Probleem: De gebruiker moet een afbeelding uploaden die moet voldoen aan een aantal criteria. 
Oplossing: 

• Gebruik een real time voorbeeld. Met behulp van een voorbeeld krijgt de gebruiker een visueel real time voorbeeld van hoe de geuploade afbeelding eruit gaat zien.
• Laat de gebruiker richtlijnen zien en laat  visueel zien wanneer de bestand/afbeelding niet voldoet aan de richtlijnen.

Probleem: De gebruiker upload een file/afbeelding naar het systeem en verwacht feedback.
Oplossing: 

• Laat de gebruiker voor het uploaden al weten waar de file aan moet voldoen. Dit voorkomt dat de gebruiker onnodig bestanden hoeft te uploaden die niet voldoen aan de eisen.
• Laat voor het uploaden van een afbeelding een voorbeeld zien. 
• Valideer tijdens het uploaden of het voldoet aan de requirements.
• Laat de gebruiker met een melding weten dat de upload is gelukt/mislukt.
• Laat de gebruiker weten dat de upload is mislukt met een display box.
• Laat de gebruiker weten wat de reden is van de mislukte upload, met een voorbeeld hoe het hoort te zijn.
• Door visuele feedback te geven aan de gebruiker wordt deze op de hoogte gebracht en weet de gebruiker wat en hoe de fout moet worden gecorrigeerd.

Bronnen:
https://medium.muz.li/file-upload-ui-inspiration-a82949ed191b 
https://medium.com/tripaneer-techblog/a-photo-upload-tool-invent-the-ux-patterns-dont-follow-them-fd0f51188f62 
http://ui-patterns.com/patterns/drag-and-drop 
http://ui-patterns.com/patterns/InputFeedback 

Buttons

Probleem: De gebruiker wil een actie uitvoeren.
Oplossing: 

• Maak knoppen clickable en zichtbaar. 
• Maak een visueel verschil tussen primary en secondary acties
• Maak gebruik van bekende button styling, gebruikers zijn hier bekend mee en herkennen buttons gemakkelijker.
• Gebruik één primary button per pagina, zodat de gebruiker niet afgeleid raakt.
• Maak een visueel verschil tussen een hover, active en focused button. Zonder feedback kan de gebruiker denken dat de actie niet wordt uitgevoerd.

Bronnen:
https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4 
https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112 
https://balsamiq.com/learn/articles/button-design-best-practices/ 

Side Navigatie

Probleem: De gebruiker moet navigeren door verschillende delen van de website , maar ruimte om de navigatie is beperkt.
Oplossing: De side navigatie biedt veel ruimte en overzicht voor menu items, een side navigatie neemt vaak meer ruimte in dan een horizontale navigatie, echter maakt het de navigatie een stuk overzichtelijker voor de gebruiker op desktop monitors. Het wordt veel gebruikt in CMS’en.

• Voeg een logo of titel toe aan de navigatie, dit wordt ook gebruikt als hyperlink naar de main pagina.
• Voeg relevante iconen toe. Met toevoeging van relevante iconen kunnen gebruikers de menu items sneller herkennen, ook kan het gebruikt worden in een ingeklapte navigatie.
• Laat zien welke link actief is. Dit maakt het gemakkelijker voor de gebruiker om te zien wat zijn huidige positie is in de applicatie.
• Groepeer de links in relevante functies. 
• Maak gebruik van een uitklapbaar menu, dit zorgt ervoor dat het menu geen onnodige ruimte inneemt dit geeft meer ruimte aan de content op de rest van de pagina. 
• Hick’s law: Hoe meer opties je de gebruiker geeft hoe langer het duurt voor hen om een beslissing te maken. Display alleen items die nodig zijn maar zorg dat het logisch blijft. Maak geen onnodige combinatie pagina’s zoals profiel en systeem settings samen.

Bronnen:
https://uxplanet.org/how-to-design-friendly-sidebar-navigation-f67735f03048 
https://uxplanet.org/tips-for-designing-the-perfect-navigation-bar-784f679ce70d 
https://usabilitygeek.com/app-navigation-design-mistakes/ 
https://medium.com/inspiration-supply/sidebars-in-ui-design-a327e8940dc3 
https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users 

Avatars

Probleem: De gebruiker een visuele identiteit geven om makkelijk herkenbaar te zijn in het systeem.
Oplossing: Een avatar geeft een visuele identiteit aan een gebruiker. Een avatar hoeft geen foto te zijn er zijn ook andere manieren om een gebruiker herkenbaar te maken.

• Maak gebruik van een default afbeelding die voor iedereen persoonlijk is.
• Geef de gebruiker de optie om zijn avatar te veranderen.
• Gebruik een avatar altijd in combinatie met een (user)name.

Bronnen:
https://uxdesign.cc/design-avatars-that-make-sense-and-be-more-inclusive-in-the-process-d4dd6a486ea6 
https://www.geeksforgeeks.org/php-imagecreate-function/ 

Icons

Probleem: De gebruiker wilt snel acties en links kunnen herkennen.
Oplossing: Met behulp van Iconen kan een gebruiker sneller acties herkennen. Een voorbeeld hiervan is het plus (+) icoon. Elke gebruiker weet dat dit staat voor “iets toevoegen”. 

• Gebruik iconen die herkenbaar zijn.
• Gebruik iconen die passen bij de context.
• Gebruik iconen consistent.
• Gebruik dezelfde stijl en kleur iconen.
• Gebruik iconen in combinatie met tekst.

Bronnen:
https://www.smashingmagazine.com/2018/02/user-interfaces-icons-visual-elements-screen-design/ 
https://www.nngroup.com/articles/icon-usability/ 

Good defaults

Probleem: De gebruiker kan de styling instellen in het systeem.
Oplossing: 

• De gebruiker heeft de optie om custom kleuren en logo’s toe te voegen aan het systeem. 
• De velden zijn voorzien van een default waarde. Door het gebruik van default waardes kan de gebruiker optioneel deze velden invullen zonder dat dit effect heeft op de UX. Deze default opties zijn ook een voordeel voor het systeem dat altijd een standaardwaarde mee krijgt. 
• Eventueel kan het toevoegen van een reset optie er voor zorgen dat customization ongedaan wordt gemaakt en terug gaat naar de default.

Bronnen:
http://ui-patterns.com/patterns/GoodDefaults 

Tabellen

De gebruiker gebruikt bijna altijd voor 3 doeleinden een tabel.

1. Informatie opzoeken
2. Acties uitvoeren (toevoegen, editen, verwijderen etc.)
3. Informatie vergelijken

Een tabel kan een ingewikkelde component zijn om te maken. Een tabel bestaat eigenlijk uit verschillende kleinere componenten zoals pagination, filteren, zoeken, etc.

Bronnen:
https://uxdesign.cc/designing-tables-for-reusability-490a3760533 

Bulk bewerken/verwijderen

Probleem: De gebruiker wilt meerdere rijen kunnen bewerken of verwijderen.
Oplossing: Met behulp van een bulk actie kunnen meerdere rijen worden geselecteerd en in één keer worden bewerkt of verwijderd. 

• Met checkboxes kan de gebruiker rijen selecteren. 
• Na het checken van een checkbox zijn alleen de actie die mogelijk zijn om in bulk uit te voeren zichtbaar bijvoorbeeld categorieën toevoegen. 
• De gebruiker krijgt na het bewerken of verwijderen van rijen een melding dat het gelukt/mislukt is.
• De gebruiker krijgt te zien waarom de actie is mislukt.

Bronnen:
https://medium.com/@frannie.yy/bulk-editing-feature-for-web-application-b4ee738acbb2 
https://uxdesign.cc/the-bulk-experience-7fcca8080f82 
https://medium.theuxblog.com/bulk-editing-design-for-web-applications-576f22735201 

Filter opties

Probleem: De gebruiker wilt de data in de tabel filteren op categorieën
Oplossing: 

• Gebruik aparte select (dropdown) fields gerelateerd aan kolommen in de tabel met data waar je op kunt filteren. 
• Toon alleen rijen die gerelateerd zijn aan de geselecteerde waarde. 
• Gebruik meerdere dropdowns voor verschillende categorieën.

Bronnen:
http://ui-patterns.com/patterns/TableFilter 

Zoekfunctie

Probleem: De gebruiker wil globaal kunnen zoeken in de tabel
Oplossing: 

• Zorg dat de volledige zoekbalk zichtbaar is 
• Gebruik een placeholder en een zoek icon.
• Zorg dat de knop om de zoekactie uit te voeren duidelijk zichtbaar is en klikbaar.
• Gebruik autocomplete wanneer mogelijk, dit voorkomt onnodige lege resultaten. data kan vaak op verschillende manieren worden geschreven. Gebruik alleen in datasets met een hanteerbare grootte.
• Geef de gebruiker de optie om de search te verwijderen/cancelen

Bronnen:
https://www.uxbooth.com/articles/best-practices-for-search/ 
https://uxplanet.org/search-interface-20-things-to-consider-4b1466e98881 
http://ui-patterns.com/patterns/Autocomplete 
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c