De ultieme UI-ontwerpgids

Inhoud

• 01. Kies je typografie
• 02. Kies het juiste palet
• 03. Stijl links en knoppen
• 04. Creëer je componenten
• 05. Documenteer en werk samen

Wat is het ontwerp van een gebruikersinterface? Een betere vraag zou zijn: wat gaat er eigenlijk in het ontwerp van een gebruikersinterface? Esthetiek? Bruikbaarheid? Toegankelijkheid? Allemaal? Hoe komen al deze factoren samen om een ​​optimale gebruikerservaring mogelijk te maken en wat moet op de eerste plaats komen?

Toegankelijkheid moet altijd op de eerste plaats komen, de basis leggen voor optimale bruikbaarheid (het gebruik van een topwebsitebouwer helpt hierbij). En dan, wanneer een gebruikersinterface zowel toegankelijk als bruikbaar is, zou het er qua esthetiek al behoorlijk fatsoenlijk uit moeten zien (de UI-ontwerptools zullen hier helpen). Om er zeker van te zijn dat uw ontwerp op alle niveaus werkt, moet u het grondig testen, wat u kunt doen met onze selectie van de beste testtools voor gebruikers. Laten we de basiselementen van de meeste ontwerpen eens nader bekijken en bekijken wat er kan worden gedaan om visuele consistentie te garanderen.

01. Kies je typografie

Geweldige typografie (zoals veel aspecten van design) komt neer op toegankelijkheid. Visueel ontwerp draagt ​​zeker bij aan de algehele ervaring van de gebruiker, maar uiteindelijk hebben gebruikers interactie met de gebruikersinterface en zien ze deze niet als kunst. Leesbare letters zorgen voor duidelijkheid en leesbare woorden helpen gebruikers om de inhoud efficiënt te verwerken. Beide zijn belangrijker dan welke visuele esthetiek dan ook.

Een goed ontworpen typografie kan echter nog steeds esthetisch bevredigend zijn. Zwart-op-wit Helvetica (of een soortgelijk lettertype) kan na slechts een paar eenvoudige typografische verbeteringen al een schoonheid zijn. Met verbeteringen bedoelen we het aanpassen van de lettergrootte, regelhoogte, letterafstand enzovoort - niet het lettertype of de kleur van de tekst.

‘Mooie’ typografie is eigenlijk lelijk als het onleesbaar is, want frustratie gaat altijd boven esthetiek. Een geweldig ontwerp is evenwichtig en harmonieus.

Zoals veel aspecten van UI-ontwerp, is het verfijnen van visuals om toegankelijkheid en esthetiek in balans te houden niet de uitdaging. De uitdaging is om de consistentie in het hele ontwerp te behouden. Consistentie zorgt voor een duidelijke hiërarchie tussen elementen van wisselend belang, waardoor gebruikers op hun beurt een gebruikersinterface sneller kunnen begrijpen en zelfs inhoud efficiënter kunnen verwerken.

Als het gaat om leesbaarheid en leesbaarheid, is de minimaal aanvaardbare lettergrootte zoals gedefinieerd door de WCAG 2.0 Web Content Accessibility Guidelines 18pt (of 14pt vetgedrukt). De beste lettergrootte om te gebruiken hangt grotendeels af van het lettertype zelf, maar het is belangrijk om rekening te houden met de visuele hiërarchie en hoe deze basisgrootte zich onderscheidt van samenvattingen en koppen (bijv. h1>, h2>, h3>).

Maak met uw UI-ontwerptool naar keuze (we gebruiken InVision Studio) een reeks tekstlagen (T) en pas vervolgens alle formaten aan om te correleren met de volgende sjabloon:

• h1>: 44px
• H2>: 33px
• h3>: 22px
• p>: 18px

Met InVision Studio (en alle andere UI-ontwerptools) wordt dit gedaan door de stijlen aan te passen met het Inspector-paneel aan de rechterkant.

Kies vervolgens uw lettertype, maar pas op, want wat u bij sommige lettertypen opvalt, is die 18px p> en 22px h3> ziet er niet zo heel anders uit. We hebben twee keuzes: pas de lettergroottes aan of overweeg een ander lettertype voor koppen. Ga voor het laatste als u verwacht dat uw ontwerp tekstzwaar zal zijn.

Houd er rekening mee dat:

• Visueel UI-ontwerp is vaak een onderbuikgevoelige benadering
• Er wordt niets beslist; alles is aan verandering onderhevig

Lijnhoogte

Optimale regelhoogte zorgt ervoor dat regels tekst voldoende ruimte tussen de regels hebben om een ​​behoorlijke leesbaarheid te bereiken. Dit wordt steeds meer erkend als een ’standaard’; De Lighthouse Audit-tool van Google suggereert het zelfs als een handmatige controle (of zelfs als een vlag als de tekst links bevat die mogelijk te dicht bij elkaar staan ​​als gevolg van een suboptimale regelhoogte).

Nogmaals, de WCAG helpt ons hiermee, door te verklaren dat de regelhoogte 1,5x de lettergrootte moet zijn. Dus, in uw UI-ontwerptool onder ’Lijn’ (of iets dergelijks), vermenigvuldigt u eenvoudigweg de lettergrootte met - ten minste - 1,5. Als de hoofdtekst bijvoorbeeld 18px is, is de regelhoogte 27px (18 * 1.5 - u kunt de wiskundige bewerking ook rechtstreeks in het infovenster uitvoeren). Let echter nogmaals op: als 1,6x beter aanvoelt, gebruik dan 1,6x. Onthoud dat verschillende lettertypen verschillende resultaten opleveren.

Het is te vroeg om na te denken over het gebruik van echte gegevens in ons ontwerp, maar we moeten op zijn minst nog steeds enigszins realistische gegevens gebruiken (zelfs lorem ipsum). InVision Studio heeft een native app voor echte gegevens om ons te helpen zien hoe onze typografie eruit zou kunnen zien.

Alinea-afstand

Alinea-afstand is geen stijl die we kunnen aangeven met InVision Studio's Inspector. In plaats daarvan moeten we lagen handmatig uitlijnen met behulp van slimme hulplijnen (⌥). Net als bij de regelhoogte, is de magische vermenigvuldiger 2x (dubbele lettergrootte). Als de tekengrootte bijvoorbeeld 18px is, moet er ten minste 36px ruimte zijn voordat deze naar het volgende tekstblok leidt. De letterafstand moet minimaal 0,12 zijn.

We hoeven ons hier echter geen zorgen over te maken totdat we beginnen met het maken van componenten.

Gedeelde stijlen

Als uw UI-ontwerptool dit ondersteunt (InVision Studio nog niet), overweeg dan om deze typografische stijlen om te zetten in ‘Gedeelde stijlen’ om ze snel herbruikbaar te maken en tegelijkertijd visuele consistentie te garanderen. Dit gebeurt meestal via de inspecteur.

02. Kies het juiste palet

Het selecteren van de perfecte kleuren voor uw ontwerp gaat veel verder dan esthetiek: het kan de hele hiërarchie van uw site informeren.

Als het gaat om UI-ontwerp, is kleur gewoonlijk een van de eerste dingen waar we graag mee bezig zijn, maar we hebben geleerd dat het een slechte zaak is om direct in visueel ontwerp te duiken. Dit is zeker waar, maar als het gaat om visuele consistentie, moet kleur een topprioriteit zijn omdat het een andere rol speelt.

Kleur in UI-ontwerp kan enorm effectief zijn, maar aangezien sommige gebruikers (veel, eigenlijk) lijden aan verschillende soorten visuele handicaps, is het niet altijd betrouwbaar. Dat gezegd hebbende, het gaat niet per se om de specifieke kleur die wordt gebruikt, maar eerder om het type kleur. Dit is misschien niet waar als het gaat om branding, aangezien kleur in dit opzicht wordt gebruikt voor emotionele impact, maar in UI-ontwerp wordt kleur ook gebruikt voor het communiceren van intentie, betekenis en, natuurlijk, visuele hiërarchie.

01. Grimmig
De Stark-plug-in is compatibel met Sketch en Adobe XD en helpt u het kleurcontrast te controleren en kleurenblindheid rechtstreeks vanaf het canvas te simuleren. Ondersteuning voor Figma en InVision Studio komt zeer binnenkort.
02.Kleuren
Colours is een set van 90 kleurencombinaties die de juiste hoeveelheid kleurcontrast hebben om te voldoen aan de WCAG 2.0-richtlijnen - sommige slagen er zelfs in om aan de AAA-norm te voldoen.
03. A11y-project
Het A11y-project is een enorme hub voor alles wat met toegankelijkheid te maken heeft. Het bevat bronnen, tools, tips, tutorials en is gemaakt door de maker van de Stark-plug-in en ontvangt financiering van InVision.

De drie soorten kleur

Kleuren hebben betekenis, dus het is belangrijk om er niet te veel van te hebben. Te veel betekenissen resulteren in meer dingen die de gebruiker moet begrijpen en onthouden - om nog maar te zwijgen over meer kleurencombinaties waar we ons zorgen over moeten maken. Over het algemeen zou dit het aanbevolen formaat zijn:

• Een call-to-action-kleur (ook de hoofdkleur van het merk)
• Een neutrale donkere kleur (beter voor UI-elementen of donkere modus)
• Voor al het bovenstaande een iets lichtere en donkerdere variant

Dit maakt het volgende mogelijk:

• De donkere modus is gemakkelijk haalbaar
• Onze CTA-kleur zal nooit in strijd zijn met andere kleuren
• In elk scenario kunnen we benadrukken en minder benadrukken

Stel je palet samen

Maak met je UI-ontwerptool naar keuze een vrij groot tekengebied (tik op A) voor elke kleur (genaamd ’Merk’, ’Neutraal / Licht’ en ‘Neutraal / Donker’). Maak vervolgens in elk tekengebied aanvullende kleinere rechthoeken die de donkere en lichtere variaties van de kleur en ook de andere kleuren zelf weergeven.

We zouden iets lichter en donkerder beschouwen als respectievelijk 10 procent extra wit en 10 procent extra zwart. Als u klaar bent, geeft u een kopie van de typografische stijlen op elk tekengebied weer. De kleur van deze tekstlagen moet neutraal licht zijn, behalve op het neutraal lichte tekengebied, waar ze neutraal donker moeten zijn.

Contrast

Vervolgens moeten we onze kleuren controleren voor een optimaal kleurcontrast. Er zijn verschillende tools die dit kunnen, bijvoorbeeld de Stark-plug-in voor Sketch en Adobe XD of Contrast voor macOS - maar een online oplossing zoals Contrast Checker of Color Contrast Checker doet het prima.

Controleer het kleurcontrast voor elke combinatie en pas de kleuren dienovereenkomstig aan. Als u niet zeker weet welke kleuren u moet gebruiken, kunt u de aanbevelingen van Color Safe proberen.

03. Stijl links en knoppen

Grootte

Knoppen en links zouden, net als typografie, een paar variaties moeten hebben. Niet alle handelingen zijn immers even belangrijk en, zoals we eerder hebben besproken, kleur is een onbetrouwbare communicatiemethode, dus het kan niet de belangrijkste methode zijn om de visuele hiërarchie te beïnvloeden. We moeten ook met maat spelen.

Een visuele betaalbaarheidstest is een bruikbaarheidstest die wordt gebruikt om te bepalen of tikdoelen klikbaar lijken te zijn. Synchroniseer het ontwerp van Studio naar Freehand (⌘⇧F), stuur de resulterende URL naar testers en laat ze de elementen omcirkelen waarvan ze denken dat ze klikbaar zijn.

Niet-InVision Studio-gebruikers kunnen Freehand ook gebruiken, maar InVision Studio-gebruikers kunnen hun ontwerpen naadloos in Freehand starten vanuit InVision Studio, de snelste en meest efficiënte manier om visuele feedback van gebruikers te verkrijgen.

Over het algemeen raden we aan om knoptekst te declareren als 18px (hetzelfde als de hoofdtekst), maar dat de knoppen zelf drie variaties in grootte hebben:

• Normaal: 44 px hoog (afgeronde hoeken: 5 px)
• Groot: 54 px hoog (afgeronde hoeken: 10 px)
• Extra groot: 64 px hoog (afgeronde hoeken: 15 px)

Dit stelt ons in staat om bepaalde knoppen belangrijker te laten lijken zonder afhankelijk te zijn van kleur en ook om knoppen te nesten (gebruik bijvoorbeeld een knop in een minimaal ogend formulierveld).

Diepte

Ongeacht of het tikdoel een knop of een formulierveld is, schaduwen moeten worden gebruikt om de diepte te vergroten en daarom interactiviteit te suggereren. Een enkele schaduwstijl voor alle varianten van knoppen en formuliervelden is prima.

Interactiviteit

Elk knoptype heeft een variatie nodig om de zweeftoestand aan te geven. Dit maakt de gebruiker duidelijk dat wat ze hebben geprobeerd te doen, helemaal in orde is en zorgt ervoor dat ze zonder vertraging doorgaan.

Dit is eigenlijk een van de meer complexe aspecten van het behouden van visuele consistentie, omdat kleur vaak de favoriete stijl is om te veranderen als het gaat om het creëren van een staat. Gelukkig kunnen deze toestandsveranderingen relatief subtiel zijn, dus het is prima om de kleur te veranderen in een iets lichtere of donkerdere variant - daar zijn ze voor. Dit geldt ook voor links.

Als we hiertegen beslissen, zullen we een kleur gebruiken die ofwel al een significante betekenis heeft, waardoor gebruikers in de war raken, of anders besluiten om met een andere kleur te komen. Het is prima om te beslissen om een ​​secundaire kleur te gebruiken, maar deze moet worden opgeslagen voor marketingvisuals in plaats van UI-elementen. Minder is meer (en gemakkelijker).

Vergeet niet om deze stap voor elk tekengebied te herhalen. Voeg de CTA-knoppen met het merk niet toe aan het tekengebied van het merk. Later bespreken we wat er gebeurt als bepaalde combinaties niet werken.

04. Creëer je componenten

Componenten besparen enorm veel tijd en alle UI-ontwerptools bieden deze functie (in Sketch worden ze bijvoorbeeld symbolen genoemd). In Studio kunnen we componenten maken door alle lagen te selecteren waaruit de component zou moeten bestaan ​​en de ⌘ te gebruikenK snelkoppeling.

Componenten gebruiken

Wireframes zijn erg handig, niet alleen voor het ontwerpen van zeer bruikbare gebruikersinterfaces, maar ook om erachter te komen wat onze gebruikersinterface op de lange termijn nodig heeft. Het is zoiets als toekomstbestendig maken.

Dit betekent niet dat we heel veel componenten moeten ontwerpen of klaar moeten zijn voor elk mogelijk scenario, maar het betekent wel dat we een ‘Wat als?’ - houding moeten aannemen.

Als ons wireframe bijvoorbeeld om een ​​3x1-component vraagt, maar we weten dat de inhoud niet in steen gebeiteld is, kan een beetje contemplatie ons doen afvragen: ‘Wat als deze componenten uiteindelijk 4x1 zijn?’. De vuistregel is: ontwerp alleen voor de gebruikersbehoeften die al bestaan, maar probeer oplossingen relatief flexibel te maken. Anders eindigen we later met een zeer rommelige ‘ontwerpschuld’.

Nu kunnen we dit onderdeel opnieuw gebruiken door het naar het canvas te slepen vanuit Bibliotheken> Document aan de linkerkant, maar houd er rekening mee dat deze workflow kan verschillen, afhankelijk van uw UI-tool.

Deze methode om stijlgidsen te maken (en uiteindelijk het ontwerp zelf te maken) werkt vooral goed met modulaire / op kaarten gebaseerde lay-outs, hoewel ‘gemeenschappelijke gebieden’ zoals kopteksten, voetteksten en navigaties ook uitstekende kandidaten zijn voor een onderdeel.

Net zoals we hebben gedaan met onze typografische stijlen, kleuren en knoppen, moeten we eraan denken om onze componenten zorgvuldig te ordenen.

Gebruikmakend van onze regels

Eerder maakten we een opmerking over het niet gebruiken van merk-CTA-knoppen bovenop de merkkleur, aangezien merk-CTA-knoppen duidelijk moeten opvallen tussen al het andere. Dus hoe gaan we om met het maken van een merkcomponent terwijl we toch een merkgerelateerde CTA-knop kunnen gebruiken? Als we neutrale donkere knoppen gebruiken voor, laten we zeggen, navigatieknoppen of gewoon minder belangrijke knoppen, zou dat tenslotte geen optie zijn, toch?

Rechtsaf. Dit zou dus een ideale gelegenheid zijn om een ​​component te maken, met name een combinatie van kop + tekst + knop. Merk op hoe ik een achtergrond voor een neutrale lichtkaart heb gemaakt om het gebruik van de merkknop mogelijk te maken. Evenzo ziet het neutrale lichte formulierveld (formuliervelden zijn meestal wit vanwege het mentale model dat historisch synoniem is voor papieren formulieren) er niet geweldig uit op de neutrale lichte achtergrond, dus ze kunnen alleen worden gebruikt op de neutraal donkere achtergrond - hetzij direct, hetzij binnenin. een neutraal donkere component. Dit is hoe we ons ontwerp flexibel maken, terwijl we onze regels naleven en de consistentie behouden.

Stress testen

Idealiter is de snelste en meest effectieve manier om robuustheid in ons ontwerp te garanderen, een stresstest. Een ontwerp op de proef stellen, betekent wreed zijn. Laten we zeggen dat we een navigatie hebben met X aantal nav-items omdat dat de vereiste was; probeer, om echt voor flexibiliteit te zorgen, deze vereisten te veranderen door meer nav-items toe te voegen of, om echt roet in het eten te gooien, probeer ook een nav-item toe te voegen met een hogere visuele hiërarchie dan de andere. Kunnen onze regels voor grootte, typografie en kleur zoiets als dit toestaan? Of hebben we een andere regel nodig om optimale bruikbaarheid te bieden?

Houd er rekening mee dat er een verschil is tussen het toevoegen van regels en het buigen van de regels. Meer randgevallen betekent minder consistentie, dus meestal is het omwille van de bruikbaarheid beter om de component gewoon opnieuw te bekijken.

05. Documenteer en werk samen

Hoe maken we onze ontwerpbestanden gebruiksvriendelijker voor zowel onszelf als andere ontwerpers die ons ontwerpbestand zouden kunnen gebruiken? Het is belangrijk om ze veilig op te slaan in betrouwbare, gedeelde cloudopslag, zoals u zult zien.

Kleuren

De eerste stap is om alle kleuren op te slaan in het staal ‘Documentkleuren’ als we dat nog niet hebben gedaan - dit maakt ze gemakkelijker toegankelijk wanneer we ze in ons ontwerp moeten toepassen.Om dit te doen, opent u de kleurkiezer-widget vanuit het infovenster, kiest u ’Documentkleuren’ in de vervolgkeuzelijst en klikt u vervolgens op het + -pictogram om de kleur aan het staal toe te voegen. Dit werkt op dezelfde manier in de meeste UI-tools.

Gedeelde bibliotheken

Vervolgens moeten we ons document - compleet met typografische stijlen, kleuren, knoppen, gemeenschappelijke ruimtes en basiscomponenten - converteren naar een gedeelde bibliotheek.

Dit betekent in wezen dat elk element een component moet zijn, ook al bestaat het uit slechts één laag. Klik op de knop + ‌ in de linkerzijbalk van Bibliotheken en importeer dit document in een nieuw document. Dat klopt: ons document is nu een bibliotheek en kan worden gebruikt om gebruikersinterfaces met gegarandeerde consistentie te ontwerpen.

InVision Studio is enigszins beperkt in die zin dat het nog niet wordt gesynchroniseerd met de officiële Design System Manager-tool van InVision, maar het is eenvoudig genoeg om de bibliotheek in Dropbox onder te brengen zodat andere ontwerpers deze kunnen gebruiken en in de loop van de tijd kunnen bijwerken. Wanneer er een wijziging wordt aangebracht (lokaal of op afstand), zal elk Studio-bestand dat de bibliotheek gebruikt (opnieuw, lokaal of op afstand) vragen of u de kleuren en componenten wilt bijwerken. Dit is hoe ontwerpbibliotheken in teams worden onderhouden.

Als het gaat om het ontwerpen van gebruikersinterfaces die visueel consistent zijn, moet u alles opnieuw gebruiken. Ontwerp knoppen, gebruik vervolgens knoppen om knopcomponenten te maken en gebruik vervolgens
knopcomponenten om andere componenten te maken, zoals waarschuwingen en dialoogvensters.

Maak gewoon geen componenten die niet nodig zijn. Onthoud dat het bouwen van een bibliotheek een voortdurende, gezamenlijke inspanning is. Het hoeft niet in één keer te worden voltooid, alleen door jou voltooid of ooit voltooid. Het hoeft alleen een taal over te brengen.

Ontwerp op schaal

Naarmate een ontwerp groter wordt, wordt het beheren ervan moeilijker. Er zijn verschillende aanpassingen die we misschien willen maken om het efficiënt en onderhoudbaar te houden, vooral omdat InVision's DSM nog niet met Studio werkt.

We zouden bijvoorbeeld tekstlagen kunnen gebruiken om onze bibliotheek te annoteren als een manier om de use-cases van verschillende elementen uit te leggen. Voor de typografische stijlen zouden we zelfs de tekst kunnen bewerken om deze meer beschrijvend te maken (bijv. "H1> / 1.3 / 44px"). Dit zegt dat h1>s moet 44 px zijn en een regelhoogte hebben van 1,3.

Ontwerpoverdracht

Ontwerptools geven de verschillende stijlen weer die door elk element in het ontwerp worden gebruikt, zodat ontwikkelaars de app of website kunnen bouwen. Deze tools bevatten een overzicht van stijlen en ook een kopie van het staal van de ‘documentkleuren’. Ontwikkelaars kunnen deze stijlen zelfs als code kopiëren, wat uitstekend is als u heeft besloten om schriftelijke ontwerpdocumentatie te maken en u graag codefragmentweergaven van de componenten wilt opnemen.

Als u zich zorgen maakt over het oplossen van problemen en het beheren van een website, zal het helpen om ervoor te zorgen dat u de juiste webhostingservice heeft, maar voor uw ontwerpsysteem is de ontwerpoverdrachtstool van InVision, Inspect, iets dat u moet gebruiken. Om het te gebruiken, klikken we op de ‘Publiceren naar InVision’ knop / pictogram in InVision Studio, openen we de resulterende URL en tikken we vervolgens om over te schakelen naar de inspectiemodus. Het is echt handig.

Deze inhoud is oorspronkelijk verschenen in net magazine.