Hoe UI Design Patterns te gebruiken
Ontwerppatronen zijn optimale oplossingen voor veel voorkomende ontwerpproblemen. Omdat veelvoorkomende problemen rond een gemeenschap worden gesmeten en worden opgelost, komen vaak gemeenschappelijke oplossingen naar voren. Uiteindelijk stijgen de besten boven het lawaai uit, identificeren zichzelf en worden verfijnd tot ze de status van een ontwerppatroon hebben bereikt.
Ik zou een ontwerp niet een trend noemen in webdesign, designpatronen lijken meer te kijken naar hoe gemeenschappelijke ontwerpen achteraf worden geclassificeerd, dan om een nieuw territorium te smeden of naar de dingen te kijken waar het naar toe gaat.
Hoe moet u UI-ontwerppatronen benaderen?
We gebruiken altijd ontwerppatronen, als je daar niet bekend mee bent, heb je je waarschijnlijk niet gerealiseerd dat ze overal om je heen zijn.
Hoe zit het met het klassieke voorbeeld van te veel inhoud om op één pagina weer te geven? We richten onze aandacht op 'Tabs', een ontwerppatroon waarmee we alle inhoud kunnen bedienen die we willen, zonder de gebruiker in een zee van links te laten verdwijnen.
De typische voordelen voor het gebruik van een ontwerppatroon zijn onder meer:
- beginners laten zien hoe je best practices in webdesign kunt gebruiken;
- leren zich aan te passen aan het collectieve begrip van ontwerpers;
- betere communicatie mogelijk maken, het risico verminderen dat gepaard gaat met onbekende keuzes;
- het verminderen van de benodigde tijd- en kostenwerkstroom voor het uitvoeren van specifieke taken;
- vermijden van verspilde tijd aan het bouwen van iets dat eerder is gebouwd;
- de gebruiker een ervaring geven waar hij bekend mee is en waarmee hij ervaring heeft opgedaan (de aard van ontwerppatronen).
In het bovenstaande voorbeeld zien we Clicky Media vandaag twee zeer populaire ontwerppatronen gebruiken:
- Navicon - een universeel symbool voor menu, ook wel sitenavigatie genoemd, wordt steeds populairder in modern webdesign, maar is al volledig aangepast aan mobiele apparaten.
- Parallax-scrollen - een uniek ontwerppatroon waarmee één pagina-website mogelijk is, met een eenvoudig te gebruiken schuifmechanisme, maar ook een lijst met achtergrondsprites die de pagina levendig maken.
Hoewel zowel het Navicon-menu als het algemene menu bovenaan de pagina dezelfde keuzes delen - het zou zeer afleidend zijn om alle links op dezelfde header-balk op te nemen - wordt het duidelijk dat kleine keuzes een groot verschil kunnen maken.
Dit is waar je aan moet denken bij het evalueren van een ontwerppatroon en het aanpassen aan je eigen behoeften:
- Probleemoverzicht: welk gebruikersprobleem lost u op? Blijf gefocust en spreek het uit als een gebruikersverhaal - in slechts één zin.
- Oplossing: hoe hebben anderen dit probleem opgelost? Enkele zaken die gedetailleerd moeten worden behandeld, zijn gebruikersnavigatie (inclusief snelkoppelingen), invoer van gebruikers, gegevensverwerking en integraties met andere diensten of toepassingen en weergave van informatie en inhoud (inclusief standaardinstellingen).
- Voorbeeld: geweldig, kun je me dat laten zien? Soms is een screenshot of mockup voldoende; andere tijden zijn gebruikersstromen en / of aanvullende opmerkingen nodig om het patroon duidelijk te communiceren.
- Gebruik: wanneer moet dit patroon (niet) worden gebruikt? Een paar dingen om te gedetailleerd zijn productarchitectuur, interface-indeling, apparaat (en), programmeertaal, afwezigheid of bestaan van andere ontwerppatronen, type gebruiker en primaire use-cases.
Het vergt oefening en discipline om op deze manier over patronen na te denken als je dat nog niet hebt gedaan. Neem de tijd om deze vragen te beantwoorden bij het ontwerpen van uw product, omdat dit u kan helpen veel tijd te besparen door opnieuw te refactureren wanneer uw gebruikers en team soortgelijke details vragen.
De opkomst van UI-toolkits
UI-ontwerppatronen zijn er altijd over geweest om het voor de gebruiker gemakkelijker te maken om door uw website, applicatie of systeem te navigeren. Als de gebruiker voor de eerste keer leert hoe hij een opmerking moet indienen, is de kans groot dat hij meteen weet hoe hij je een e-mail moet sturen via het contactformulier. Het is hetzelfde repetitieve concept van informatie-invoer.
In de afgelopen jaren hebben we een enorme groei gezien in de toolkit-markt voor UI's. Een UI-toolkit kan eenvoudig worden begrepen als een reeks widgets waarmee u een volledig grafische applicatie vanuit het niets kunt bouwen. Twitter Bootstrap is een perfect voorbeeld van een succesvolle UI-toolkit. Tegenwoordig zal een groot deel van de webontwerpers vertrouwen op Bootstrap-functies om hun eigen workflow te vereenvoudigen. In zekere zin is het niet nodig om het wiel opnieuw uit te vinden!
3 UI-ontwerppatronen om te onthouden
Kortom, ontwerppatronen zijn oplossingen voor terugkerende problemen. Door patronen te gebruiken, kunnen we eenvoudige problemen met de gebruikersinterface overwinnen. Als we goed opletten, merken we dat patronen overal om ons heen zijn. Er is niets bijzonders aan dat specifieke ontwerp, het is de manier waarop het is toegepast waar je enthousiast over bent!
Crystal Clear Calls-to-Action
De eenvoudigste webformulieren (en ook de meest voorkomende) hebben meestal slechts één knop die kan worden geactiveerd: in dit geval 'Website maken'. Het is nogal vanzelfsprekend, en dat is het punt.
Hoe veel gemakkelijker zou het kunnen worden, toch? Ga altijd voor de eenvoudige optie, herontdek het wiel niet alleen om op te vallen tussen de massa.
Broodkruimels om te redden
Broodkruimels tonen het pad van de voorpagina van de site naar de huidige locatie van de gebruiker in de paginahiërarchie van de website. Ze zijn een vorm van secundaire navigatie die gebruikers helpt de hiërarchie en structuur van de website te begrijpen. Broodkruimels beginnen met de startpagina en eindigen met de pagina die momenteel wordt bekeken.
In dit voorbeeld door Tarieven Farhan, we zien hoe hij tegelijkertijd twee UI-ontwerppatronen gebruikt. Ten eerste heeft hij het tabbladenpatroon bovenaan en vervolgens het navigatiepatroon van het paneermeel aan de onderkant. Door ze te combineren, zorgt hij voor een zeer aangename browse-ervaring.
Registratie moet eenvoudig zijn
Tenzij je onder een steen hebt geleefd, ben je op de hoogte van sociale registratie. Registratie op een website is een veelvoorkomende taak, en moet daarom zo gemakkelijk en aangenaam mogelijk worden gemaakt.
Dit is op dit moment een van mijn favoriete registratiepagina's. Het is de GitHub startpagina, en zoals u kunt zien in de schermafbeelding, wordt alles waar het bedrijf voor staat gepresenteerd in minder dan honderd woorden. Je hebt ook de mogelijkheid om onderweg te registreren en het proces duurt minder dan een minuut om te voltooien. U ontvangt een e-mail om uw account te verifiëren, maar dat is iets dat we hoe dan ook gewend zijn!
Laatste woorden
Ik heb meer dan acht jaar websites gebouwd en in die acht jaar heb ik beseft dat eenvoud de sleutel is tot veel ontwerpproblemen.
Ik ben tot de conclusie gekomen dat rommel in het ontwerp, opgeblazen door onnodige elementen en vormen de meest frustrerende ervaring is die je op internet kunt vinden. Ja, design is precies hoe iets werkt, dus waarom zou je het niet goed laten werken? Gebruikersinterface (UI) is ongelooflijk belangrijk voor het succes van uw bedrijf of onderneming.
De beste manier om ervoor te zorgen dat u succesvolle sites ontwerpt, is door te leren van en gebruik te maken van bestaande ontwerppatronen.