Minder denken. Ontwerp beter.

Bevordering van een betere workflow in UI-ontwerp door beheersbare besluitvorming en denkprocessen.

Een goed ontworpen gebruikersinterface is het resultaat van een reeks belangrijke beslissingen die een ervaring niet alleen intuïtief maken, maar ook esthetisch aantrekkelijk maken voor een gebruiker. Door het besluitvormingsproces meer gestroomlijnd te maken, kan het een eenvoudiger workflow en een grotere kans op het produceren van het optimale resultaat mogelijk maken.

Hoe meer mogelijkheden er beschikbaar zijn in het ontwerpproces, des te meer denkwerk vereist is om uit te voeren en te verfijnen.

De Amerikaanse psycholoog Barry Schwartz schreef in The Paradox Of Choice dat het elimineren van keuzes de angst enorm kan verminderen. Hij betoogde dat we normen en criteria moeten hebben, maar ons geen zorgen moeten maken over de mogelijkheid dat er misschien iets beters is. Het was in de context van consumenten, maar ik geloof dat het ook van toepassing is op ontwerpbeslissingen.

De maximaliserende strategie is eigenlijk geen perfectionist te zijn, maar de meest gunstige beslissingen te nemen die samen de optimale ervaring creëren.

1. Beperkende variabelen

Als we alle potentiële variabelen overwegen om een ​​concept van hoge betrouwbaarheid te produceren, en er kunnen er veel zijn, wordt het duidelijk dat we ze vroeg moeten beperken en definiëren. Door het aantal beschikbare keuzes te verminderen, wordt het gemakkelijker om beslissend te zijn.

Met ervaring wordt het gemakkelijker om te voorspellen hoe beperkend bepaalde groepen variabelen een vermenigvuldigend effect hebben in een compositie.

Het verminderen van keuzes houdt geen verband met het verminderen van originaliteit. Onze veronderstelling is dat het creëren van concepten rond vooraf gedefinieerde regels een beperking is, maar als ontwerpers kunnen we onze eigen regels opstellen en volledige controle hebben over het formuleren ervan.

Schaal en afstand

Elk facet van UI-ontwerp moet draaien om een ​​systeem dat ritme bevordert en helpt bij het handhaven van consistentie in schaal en ruimte naarmate een project groeit. Een dergelijk systeem dat ik graag gebruik, is een modulaire schaal, die een schaal uit elke gegeven verhouding kan vergemakkelijken om de grootte van een element of negatieve ruimte in een compositie te meten of in te stellen.

Nadat we een verhouding hebben gekozen, kan de modulaire schaal het eenvoudiger maken schaal en afstand te definiëren

Hoewel het variabelen op rasters, typografie, verticale afstand en de algehele afmetingen van een lay-out tot een beheersbaar niveau kan verminderen, biedt het ook een aangename esthetiek en ritme. Het ontwerpen van UI is veel eenvoudiger.

grids

Grid-systemen zijn geweldig om te beperken hoe inhoud is georganiseerd in het horizontale vlak en een no-brainer als het gaat om UI. Een raster wordt echter vaak gekozen zonder al te veel nadenken, om een ​​one-size-fits-all te zijn. Wat de meeste ontwerpers zich niet realiseren, is dat het beter is om een ​​rastersysteem te maken dat is opgebouwd rond de inhoud.

Een rastersysteem vermindert variabelen in de lay-out

Dit betekent idealiter vooraf een goed begrip van inhoudsscenario's zodat het een beeld schetst van hoe de inhoud van een bepaald raster beter kan worden bediend. Denk aan de zakelijke beperkingen met bestaande activa en merkgidsen, zoals een logo met specifieke regels en vereisten voor afstand, of misschien advertenties met specifieke vaste eenheden.

Het type inhoud speelt ook een rol. Er is een groot verschil tussen het ontwerpen van een lay-out voor een winkel, nieuwspublicatie of blog, of een eenvoudige splash-pagina. Een lay-out die beeld-zwaar versus woord-zwaar is. Het kan nuttig zijn om oogscanpatronen te begrijpen en hoe deze een impact hebben op de visuele hiërarchie.

Hoe meer inzicht in de bedrijfs- en inhoudsbeperkingen vooraf, hoe gemakkelijker het wordt om een ​​rastersysteem te kiezen en lay-outbeslissingen te nemen.

Typografie

Ik zou beweren dat typografie het belangrijkste aspect van het UI-ontwerp is, omdat het tot 95% van het web kan uitmaken en de drijvende kracht van communicatie kan zijn.

Hoewel systemen zoals modulaire schaal kunnen worden toegepast op grootte en toonaangevende, kunnen lettertypefamilies en -stijlen ook worden beperkt. Een gebruikersinterface zou nooit meer dan twee families en een paar gewichten moeten overschrijden. Regels kunnen ook worden uitgebreid tot de manier waarop met rechtvaardiging en titel wordt omgegaan.

Kleur

Het is gemakkelijk om ijverig te worden met paletten. Een klein bereik aan tonen kan een lange weg zijn om voldoende en consistente beelden te produceren. Gewoonlijk hebben we slechts vijf stalen nodig voor een startpunt.

Tools zoals Adobe Color CC maken het gemakkelijk om een ​​palet vooraf te definiëren

De meeste merken moeten een primaire of accentkleur hebben, en een paar neutrale of contrasterende tonen om het te complimenteren. We hebben geen 15 tinten van één toon nodig, vooral in het begin. Het is beter om klein te beginnen en later een schaduw of twee te vergroten.

Afbeeldingen

Hoe we afbeeldingen in de gebruikersinterface opnemen, wordt grotendeels bepaald door de context van de inhoud. Als we een ruw idee hebben van wat dat is, kunnen we een beginpunt voor onze afbeeldingen maken met variabelen voor verhouding, grootte, vorm en behandeling. Het kan zijn dat we er niet zoveel nodig hebben.

Het beperken van onze afbeeldingsvariabelen zorgt voor een betere consistentie en maakt het gemakkelijker om afbeeldingsitems op de lange termijn te beheren. Hetzelfde geldt voor iconografie.

Hoeveel variaties in verhouding en grootte voor afbeeldingen hebben we eigenlijk nodig?

2. Eerder een stijlgids maken

Naarmate een UI-project conceptueel groeit, wordt het steeds belangrijker om een ​​stijlgids of patroonbibliotheek te maken en te onderhouden. Hiermee worden ontwerpprincipes vastgesteld om het project te helpen opschalen, het ritme en de consistentie te behouden. Als we vooraf variabelen definiëren, is het een goede manier om ze te documenteren. Toekomstige besluitvorming wordt gemakkelijker met een stijlgids dan zonder.

Afhankelijk van het project is het maken van een stijlgids een luxe en vaak bedoeld voor toekomstig gebruik. Dit is de reden waarom de meeste stijlgidsen op het laatste moment of nadat het project is voltooid, worden samengesteld en dat is nog steeds een goede gewoonte. Maar hoewel er veel post-rationalisatie en redenering is voor een stijlgids om prospectief ontwerp en ontwikkeling te helpen, kan het in feite helpen om trouw op te bouwen in de vroege stadia van de conceptualisering.

Door vanaf het begin een basisstijlgids te maken, worden niet alleen in een vroeg stadium principes vastgelegd om ontwerpbeslissingen te verminderen, maar helpt het ook als een infrastructuur om te evolueren en de principes van de toekomst te verbeteren.

Aan het begin maken betekent niet dat het compleet moet zijn - verre van dat. Stijlen neigen hoe dan ook meer in de vroege stadia te evolueren, en hoe groter een project wordt, hoe duidelijker en strakker de grenzen worden.

3. Modulaire prioriteit en aanpassing

In modulaire ontwerpsystemen, zoals het Atomic Design van Brad Frost, kan een lay-out worden samengesteld uit specifieke sleutelgebieden. Modules worden herbruikbaar in verschillende indelingen. Interfaces worden behandeld als systemen en niet als pagina's, waarbij op patronen gebaseerd ontwerp en ontwikkeling een groot deel van het proces vormen.

Dit is een geweldige methode en het maakt het ontwerp van de gebruikersinterface veel beter beheersbaar, maar om het effectiever te maken, moeten we prioriteit geven aan de belangrijkste gebieden en al het andere om ons heen aanpassen. Dit zorgt op zijn beurt voor visuele samenhang.

Identificeer sleutelgebieden

Ons ontwerp moet draaien om de belangrijke onderdelen. De prioriteit van elk gebied wordt bepaald door de inhoud of functionaliteit in de interface en is in wezen de sleutel tot de puzzel.

Door ons eerst op de belangrijke gebieden te concentreren, verminderen we daarna de ontwerpbeslissingen, omdat volgende gebieden moeten buigen en zich moeten aanpassen aan de gevestigde omgeving.

Focus op belangrijke gebieden

Als gebieden met een hoge prioriteit eenmaal zijn geïdentificeerd, gaat het om super-focussen op de kritieke delen en ze tot een einde brengen. Het idee is om ervoor te zorgen dat ze intuïtief zijn en aan alle vereisten voldoen voordat de minder belangrijke gebieden worden aangepast.

4. Het voor iedereen laten werken

Al duizenden jaren streven ontwerpers ernaar om één ding te doen - effectief communiceren. We zijn voortdurend bezig met het opnieuw uitvinden en verfijnen van manieren om visueel en hoorbaar beter te communiceren met een publiek.

Met een steeds toenemende toegang tot informatie van een zo breed mogelijk publiek, is het absoluut noodzakelijk om de toegankelijkheid voor zoveel mogelijk soorten mensen te maximaliseren.

Toegankelijkheid is een verhulde zegen

Catering voor een breder publiek klinkt als meer werk en het is verleidelijk om toegankelijkheid te zien als een barrière voor innovatie. Het naleven van de nieuwste normen kan echter een verhulde zegen zijn, vooral als ze een tweede natuur worden.

Voorbeelden hiervan in ontwerptermen kunnen zijn dat we een minimale lettergrootte nodig hebben voor een kopie van het hoofdgedeelte, of een aanzienlijk contrast tussen kopie en achtergrond, of grotere koppelbare gebieden op aanraakapparaten.

Het gaat niet alleen om handicaps

Toegankelijkheid is niet alleen gericht op handicaps, zoals sommigen zouden impliceren, maar ook op gebruikers met oudere apparaten en browsers die niet de nieuwste functies en verbeteringen ondersteunen. Als u zich bewust bent van deze normen en deze in acht neemt, worden ontwerpbeslissingen natuurlijk beperkt.

5. Gebruik van beproefde en geteste patronen

Het feit is dat gebruikers interfaces intuïtief vinden wanneer ze voldoen aan de honderden gemeenschappelijke ontwerppatronen die ze hebben geabsorbeerd door jarenlange oefening en expositie. Zodra we beginnen weg te breken uit typische schimmels en nieuwe wegen betreden, kunnen we merken dat het tijd kost voordat een nieuw patroon volledig intuïtief wordt voor de massa.

Er is een tijd en een plaats voor het maken van originele UI-patronen, maar we moeten algemene technieken niet uit de weg gaan - ze zijn niet voor niets succesvol.

Door de zilveren voering hoeven we ons minder zorgen te maken over opnieuw uitvinden en ons te concentreren op esthetiek. Het is nog steeds mogelijk om origineel werk te maken op basis van gevestigde patronen.

Hoe meer we succesvolle ontwerppatronen leren kennen en integreren, hoe minder keuzes we als ontwerpers moeten maken. We overwegen niet noodzakelijkerwijs wat zou kunnen werken, maar wat wel zal werken.

Laatste opmerking

Sommige van deze benaderingen kunnen individueel ons denken en onze besluitvorming niet sterk verminderen, of onze ontwerpen met een enorme marge verbeteren. Door ze echter samen te integreren en onderweg goede feedback te krijgen, kan het aanzienlijk eenvoudiger worden om een ​​betere gebruikersinterface te ontwerpen.

Volg me op Twitter