Tænk mindre. Design bedre.

Fremme af bedre arbejdsgang i UI-design gennem håndterbar beslutningstagning og tankeproces.

Et veludviklet brugergrænseflade er resultatet af en række nøglebeslutninger, der ikke kun gør en oplevelse intuitiv, men også æstetisk tiltalende for en bruger. Ved at gøre beslutningsprocessen mere strømlinet kan den muliggøre en lettere arbejdsgang og en større chance for at producere det optimale resultat.

Jo flere muligheder der er tilgængelige i designprocessen, desto mere tænkning kræves for at udføre og finesse.

Den amerikanske psykolog Barry Schwartz skrev i The Paradox Of Choice, at eliminering af valg i høj grad kan mindske angst. Han argumenterede for, at vi skulle have standarder og kriterier, men ikke bekymre os om muligheden for, at der kan være noget bedre. Det var i forbrugernes kontekst, men jeg mener, at det også gælder designbeslutninger.

Den maksimerende strategi er faktisk ikke at være en perfektionist, men tage de mest fordelagtige beslutninger, der er tilgængelige, der samlet skaber den optimale oplevelse.

1. Begrænsning af variabler

Hvis vi overvejer alle de potentielle variabler for at producere et højt troværdighedskoncept, og der kan være mange, bliver det klart, at vi er nødt til at begrænse og definere dem tidligt. At reducere mængden af ​​tilgængelige valg vil gøre det lettere at være afgørende.

Med erfaring bliver det lettere at forudsige, hvordan begrænsning af bestemte grupper af variabler har en multiplikerende virkning gennem en sammensætning.

At reducere valg korrelerer ikke med at reducere originaliteten. Vores antagelse er, at skabelse af koncepter omkring foruddefinerede regler er en begrænsning, men som designere kan vi etablere vores egne regler og være i fuld kontrol med formuleringen af ​​dem.

Skala og afstand

Hver facet af UI-design skal dreje sig om et system, der fremmer rytme og hjælper med at opretholde konsistens i skala og rum, når et projekt vokser. Et sådant system, jeg elsker at bruge, er modulskala, som kan lette en skala fra et givet forhold til at måle eller indstille størrelsen på et element eller negativt rum i en komposition.

Når vi først vælger et forhold, kan modulær skala gøre det lettere at definere skala og afstand

Selvom det kan reducere variabler på gitre, typografi, lodret afstand og de samlede dimensioner af et layout ned til et håndterbart niveau, giver det også behagelig æstetik og rytme. Det er langt lettere at designe UI.

gitre

Netnettet er fantastisk til at begrænse, hvordan indhold er organiseret i det vandrette plan og en no-brainer, når det kommer til UI. Dog vælges et gitter ofte uden for meget tanke til at være en i én størrelse-passer-alle. Hvad de fleste designere ikke er klar over, er, at det er bedre at oprette et gittersystem, der er bygget rundt om indholdet.

Et gittersystem reducerer variabler i layout

Dette betyder ideelt at have en klar forståelse af indholdsscenarier på forhånd, så det maler et billede af, hvordan man bedre betjener indholdet fra et bestemt gitter. Tænk på forretningsbegrænsningerne med eksisterende aktiver og mærkevejledninger, såsom et logo, der har specifikke afstandsregler og krav, eller måske annoncer med specifikke faste enheder.

Indholdstypen er også en faktor. Der er en stor forskel mellem at udtænke et layout til en butik, nyhedspublikation eller blog eller en simpel splashside. Et layout, der er billedet tungt mod ordetungt. Det kan være nyttigt at forstå øjescanningsmønstre, og hvordan de har indflydelse på det visuelle hierarki.

Jo mere forståelse af virksomheden og indholdet begrænser på forhånd, desto lettere vil det være at vælge et gittersystem og træffe layoutbeslutninger.

Typografi

Jeg vil hævde, at typografi er det vigtigste aspekt af UI-design, da det kan udgøre op til 95% af internettet og være drivkraften for kommunikation.

Selvom systemer som modulær skala kan anvendes til størrelse og føring, kan skrifttypefamilier og stilarter også begrænses. En brugergrænseflade skal aldrig have brug for at overstige to familier og et par vægte. Regler kan også udvides til at behandle begrundelse og titel.

Farve

Det er nemt at blive for ivrig med paletter. Et lille udvalg af toner kan gøre en lang vej til at producere tilstrækkelig og konsistent visuals. Normalt er alt, hvad vi har brug for et udgangspunkt, fem farveprøver.

Værktøjer som Adobe Color CC gør det nemt at foruddefinere en palet

De fleste mærker skal have en primær eller accentfarve og et par neutrale eller kontrastfarvede toner for at komplimentere det. Vi har ikke brug for 15 nuancer af en tone, især i starten. Det er bedre at starte i det små og øge en skygge eller to senere.

Billeder

Hvordan vi inkorporerer billeder i UI bestemmes i vid udstrækning af indholdets kontekst. Hvis vi har en grov forestilling om, hvad det er, kan vi oprette et udgangspunkt for vores billeder med variabler for forhold, størrelse, form og behandling. Vi finder måske ud, at vi ikke har brug for så mange.

Begrænsning af vores billedvariabler håndhæver bedre konsistens og gør det lettere at styre billedaktiver i det lange løb. Det samme gælder for ikonografi.

Hvor mange variationer i forhold og størrelse for billeder har vi faktisk brug for?

2. Oprettelse af en stilguide tidligere

Når et UI-projekt vokser konceptuelt, bliver det stadig vigtigere at oprette og vedligeholde en stilguide eller mønsterbibliotek. Dette vil etablere designprincipper for at hjælpe projektets skala, bevare rytme og konsistens. Hvis vi definerer variabler på forhånd, er det en god måde at dokumentere dem. Fremtidig beslutningstagning bliver lettere med en stilguide end uden en.

Afhængig af projektet er oprettelse af en stilguide en luksus og ofte beregnet til fremtidig reference. Dette er grunden til, at de fleste stilguider bliver sammensat i sidste øjeblik eller efter at projektet er afsluttet, og det er stadig god praksis. Men selvom der er masser af post-rationalisering og begrundelse for en stilguide til hjælp til fremtidig design og udvikling, kan det faktisk hjælpe med at opbygge troskab i de tidlige stadier af konceptualisering.

Oprettelse af en grundlæggende stilguide lige i begyndelsen vil ikke kun etablere principper tidligt for at reducere designbeslutninger, men også hjælpe som en infrastruktur til at udvikle og forstærke rektorer fremover.

At lave en i starten betyder ikke, at den skal være komplet - langt fra det. Stilarter har en tendens til at udvikle sig mere i de tidlige stadier alligevel, og jo større et projekt bliver, desto tydeligere og strammere bliver grænserne.

3. Modulbaseret prioritering og tilpasning

I modulbaserede designsystemer, såsom Brad Frosts Atomic Design, kan et layout formuleres ud fra specifikke nøgleområder. Moduler kan genbruges gennem forskellige layouts. Grænseflader behandles som systemer og ikke som sider, hvor mønsterbaseret design og udvikling er en stor del af processen.

Dette er en fantastisk metode, og det gør UI-design meget mere håndterbart, men for at gøre det mere effektivt er vi nødt til at prioritere de vigtigste områder og tilpasse alt det andet omkring dem. Dette vil igen sikre, at der er visuel sammenhæng.

Identificer nøgleområder

Vores design skal dreje sig om de vigtige dele. Prioritet for hvert område bestemmes af dets indhold eller funktionalitet i grænsefladen og er i det væsentlige nøglen til puslespillet.

Ved først at fokusere på de vigtige områder reducerer vi designbeslutninger derefter, da efterfølgende områder skal bøjes og tilpasse sig etablerede omgivelser.

Fokus på nøgleområder

Når først områder med høj prioritet er blevet identificeret, handler det om at superfokusere på de kritiske dele og finesse dem til færdiggørelse. Ideen er at sikre, at de er intuitive og opfylder alle krav, før de mindre vigtige områder tilpasses.

4. At få det til at fungere for alle

I tusinder af år har designere bestræbt sig på at gøre en ting - kommunikere effektivt. Vi genopfinder og finjusterer konstant måder til bedre at kommunikere visuelt og hørbart til et publikum.

Med stadig stigende adgang til information fra det bredest mulige publikum er det blevet bydende nødvendigt at maksimere tilgængeligheden for så mange typer mennesker som muligt.

Tilgængelighed er en velsignelse i forklædning

At tage højde for et bredere publikum lyder som mere arbejde, og det er fristende at se tilgængelighed som en barriere for innovation. Imidlertid kan overholdelse af de nyeste standarder være en velsignelse i forklædning, især hvis de bliver anden karakter.

Eksempler på dette i designbetingelser kan omfatte at kræve, at vi har brug for en minimum skriftstørrelse på kropskopi, eller en betydelig mængde kontrast mellem kopi og baggrund eller større sammenkædelige områder på berøringsenheder.

Det handler ikke kun om handicap

Tilgængelighed er ikke kun catering til handicap, som nogle antyder, men også for brugere med ældre enheder og browsere, der ikke understøtter alle de nyeste funktioner og forbedringer. At være opmærksom på disse standarder og overholde dem vil naturligvis reducere designbeslutninger.

5. Brug af prøvede og testede mønstre

Faktum er, at brugerne finder grænseflader intuitive, når de overholder de hundreder af fælles designmønstre, de har absorberet fra mange års praksis og eksponering. Så snart vi begynder at bryde væk fra typiske skimmelsvampe og trætte ny jord, kan vi opleve, at det tager tid, før et nyt mønster bliver fuldstændigt intuitivt for masserne.

Der er et tidspunkt og et sted til at oprette originale brugergrænseflademønstre, men vi bør ikke vige sig væk fra almindelige teknikker - de har succes af en grund.

Sølvforet er for os at bekymre os mindre om at genopfinde og koncentrere os om æstetik. Det er stadig muligt at skabe originalt arbejde baseret på etablerede mønstre.

Jo mere vi lærer at kende og integrere succesrige designmønstre, jo mindre valg skal vi tage som designere. Vi overvejer ikke nødvendigvis hvad der kan fungere, men hvad der fungerer.

Endelig note

Nogle af disse fremgangsmåder kan individuelt ikke reducere vores tænkning og beslutningstagning i høj grad eller forbedre vores design med en enorm margin. At inkorporere dem sammen, sammen med at få god feedback undervejs, kan gøre det betydeligt lettere at designe bedre UI.

Følg mig på Twitter