Crash Course: UI Design

En oversigt over mit designværksted PennAppsXV.

UI vs. UX

Hvis du har foretaget nogen form for forskning om softwaredesign, har du sandsynligvis hørt om udtrykkene "UI" og "UX". Men hvad adskiller UI fra UX?

På deres mest enkle former er UX-design det, der gør et interface nyttigt, og UI-design er det, der gør et interface smukt. For UI inkluderer dette en blanding af visuelt hierarki og interfaceelementer. For at forstå, hvad der adskiller en stor grænseflade fra en god grænseflade, skal man forstå, at UI-designet kun er et lag af hele designprocessen. Måske er det derfor, folk ofte forvirrer UX og UI. I de følgende par afsnit håber jeg dog, at du som publikum eller læser kan forstå, hvor forskellene ligger i konteksten af ​​designprocessen.

I henhold til Garrett i The Elements of the User Experience, kan UX forstås i fem primære planer. Lad os starte med det mest abstrakte plan:

Det første plan for produktdesign

På et højt niveau er det første plan virkelig startblokken for produktdesign. Her anvender du forskellige forskningsmetoder, herunder brugerinterviews, konkurrencedygtige analyser, brugerpersoner og andre forskningsteknikker for at forstå:

  1. Hvad er problemet, du prøver at løse?
  2. Hvad er dine brugerbehov?
  3. Hvordan passer dit produkt inden for en forretningsmæssig sammenhæng (produktmål)?

Det andet plan:

Det andet plan for produktdesign

I dette trin skal du definere funktionelle specifikationer og indholdskrav på din platform. Med andre ord:

  1. Hvordan kan du løse problemerne gennem din platform? Hvad er funktionerne, og hvordan kan du prioritere dem?

Udfordringen her for designere er at prioritere funktioner, samtidig med at afvejninger minimeres. Jo, du har muligvis hundredvis af ideer til at løse et problem, men du kan ikke implementere dem alle.

Det tredje plan:

I dette trin skal dine ideer begynde at danne en struktur. Informationsarkitektur beskæftiger sig med, hvordan informationen i en app er organiseret, og hvordan brugerne kognitivt behandler informationen. Brugerstrømme kortlægger de specifikke rejser, som brugerne går i gennem appen for at hjælpe med at løse deres specifikke behov. Det drejer sig om de mest logiske trin for dine brugere til at tilfredsstille deres behov.

Det næste plan er, hvor tingene bliver mindre abstrakte og mere konkrete:

Skeletplanet søger at opnå strukturen i et interface-design og informationsdesign. Interfacedesign beskæftiger sig med indretningen af ​​specifikke interfaceelementer, så brugerne kan interagere med et systems funktionalitet, mens informationsdesign beskæftiger sig med præsentationen af ​​information på en måde, der letter forståelsen.

I denne fase finder du sandsynligvis UX- eller produktdesignere, der designer, tester og itererer på wireframes. Trådrammer er meget lav trofasthed, ofte gråskala mockups, der demonstrerer intentionen med hvert interfaceelement for brugerne.

Og endelig det mest konkrete plan:

Overfladen plan, som navnet antyder, stræber efter stor sensorisk oplevelse og visuel design. Målet her for designere er at danne en visceral forbindelse med brugerne ved at kommunikere mærket, produktet, værdien og funktionaliteten med succes i et sammenhængende billede.

Dette er flyet, hvor du kan finde UI-designere og visuelle designere, der udfører størstedelen af ​​deres arbejde ved hjælp af værktøjer som Sketch, Photoshop, Adobe Experience Design, Illustrator eller Figma.

Lad os derefter springe ind i nogle grundlæggende principper for UI Design.

Princip 1: Klarhed kommer først.

Der er ikke noget værre end tvetydighed i en app. Hvad gør denne knap? Hvordan kom jeg her? Hvordan går jeg tilbage? For at undgå dette, skal en designer altid spørge sig selv:

Hvorfor er det her? Giver dette mening? Hvilke andre muligheder kan jeg udforske?

Store designere ved, hvordan man udforsker forskellige muligheder for et interfacelayout, de potentielle kompromiser for hver enkelt og forstår, hvilket design der kan hjælpe en bruger bedst med at nå deres mål. Klarhed i design giver en bruger mulighed for at føle sig selvsikker, mens han navigerer gennem din app.

Princip nr. 2: Giv klar, meningsfuld feedback

Vi har alle brugt et websted eller en app, hvor vi vil prøve at klikke på en knap, og vi vil undre os over, om systemet registrerede klikket.

Kort sagt, hver handling har brug for en reaktion. Hvis du f.eks. Er en webudvikler, er det at ændre knappen: hover-tilstand på en knap en almindelig form for feedback, så dine brugere kan forstå deres svævehandling.

Et godt eksempel er Facebook's brug af deres skeletindlæsningstilstand. Mens brugeren venter på, at deres indhold skal indlæses, giver en indlæsningstilstand i form af indholdet meningsfuld og relevant feedback for brugerne for dem at forstå, at deres indhold indlæses.

Princip nr. 3: Konsistensspørgsmål.

Når jeg refererer til konsistens, taler jeg om konsistens i placeringen af ​​interfaceelementer eller sproget i hele produktet. Når dine brugere begynder at lære at bruge et produkt, skal de ikke være nødt til at læse det igen. Lad os se på et eksempel på dårlig konsistens.

Xfinity StartsideXfinity TV-sideXfinity Personal side

Ovenstående eksempel kan ligne 3 websteder fra 3 forskellige virksomheder, men det er det faktisk ikke. Hvad kan få en til at tænke det? Nå, navigationsbjælkerne for hver side bruger et andet sæt farver, layout og skrifttyper. Som bruger kan dette muligvis være forvirrende og desorienterende, og brugere kan glemme, at disse alle er under et enkelt websted.

Hvordan kan du som designer opretholde konsistens i hele din app? Du kan designe din app ved hjælp af et konsistent gittersystem, såsom det almindelige 8-punkts gitresystem, der findes i mobile apps og ikondesign. Du kan også opretholde et konsistent farveskema og navigationselementer på tværs af skærme. Disse elementer kan alle være rodfæstede i en stilguide:

Kilde: https://dribbble.com/shots/1817828-Style-Guide

Pointen er: god konsistens og struktur får dine brugere til at føle sig hjemme.

Princip 4: Brug tvivlsomme designmønstre, når du er i tvivl.

Misforstå mig ikke her - innovation er fantastisk og opmuntret, men den skal ikke være på bekostning af brugeroplevelsen. Det er ikke nødvendigt at opfinde hjulet igen, hvis hjulet gør et godt stykke arbejde ved at gøre sit job. For eksempel, hvis du nogensinde er usikker på, om et ikon nøjagtigt eller intuitivt repræsenterer et ord, skal du bare bruge ordet på dets sted. Eller overhold almindelige farvemønstre, f.eks. En rødfarve for at advare / advare en bruger eller grønt for at markere noget komplet.

Hvorfor bruge etablerede designmønstre? For det første er mange af disse etablerede designprincipper baseret på menneskelig opfattelse. Lad os tage et F-formet læsemønster eller øjescanningsmønster, når det kommer til læseblokke med indhold.

F-formet læsemønster.

Dette er et varmekort genereret af data indsamlet fra et øje-sporing eksperiment. De røde områder repræsenterer de mest viste sektioner, mens de blå er mindst. Som du kan se, ligner varmekortet, der genereres noget, bogstavet F. Men hvad betyder det for designere?

Det betyder, at du skal placere det vigtigste indhold i øverste venstre hjørne.

For eksempel finder du typisk et logo i øverste venstre hjørne. Dette gør det muligt for virksomheder at styrke deres brandidentiteter. I øverste højre hjørne kan du typisk finde siderne til navigation eller måske en søgefelt. Dette gør det muligt for brugere at nemt navigere på forskellige sider uden at søge på hele siden efter navigationselementerne. Her er to eksempler, der overholder dette designmønster:

Når du går længere og længere nede på siden, kan brugerens opmærksomhed muligvis visne. Sæt derfor det vigtigste indhold øverst, og brug dristige overskrifter, der gør dit indhold let scannbart.

Princip # 5: Brug det visuelle hierarki.

Hvad er visuelt hierarki? Det er ordningen af ​​elementer på en måde, der indebærer relativ betydning. det er designerens forsøg på at vejlede i den rækkefølge, i hvilke øjnene opfatter de præsenterede oplysninger.

Kilde: https://dribbble.com/shots/1315388-Dashboard-Web-App-Product-UI-Design-Job-Summary

Den måde, vi opfatter information på, påvirkes af flere faktorer, der bidrager til, hvordan vi rangerer hierarkiet for indholdet i layoutet. Lad os hoppe ind i nogle hierarkiske grundlæggende:

I. Typografi

Hvad gør god typografi? De to primære faktorer er læsbarhed og læsbarhed.

Læselighed er de medfødte egenskaber ved et skrifttype, der gør hver enkelt bogstavsform skelne fra hinanden. Dette er helt afhængigt af skrifttypen, så der er ikke noget, du kan gøre for at gøre et skrifttype mere læseligt, så vælg passende.

Læsbarhed bestemmes af, hvordan du manipulerer en bestemt skrifttype for at gøre det lettere at forstå.

Bemærk, hvordan det øverste skrifttype er sværere at læse end bunden? Hvis ikke…

hvad med nu?

En anden faktor til at bestemme, hvor let noget er at læse, er linjelængden. Hvis linjen er for kort, og læseren konstant springer fra linje til linje, gør det det ekstremt vanskeligt for læseren at absorbere information. Det samme gælder hvis linjelængden er for lang - øjnene bliver hurtigt trætte.

Centrer heller aldrig store kopier. Det er meget lettere for os at læse en tekstblok, der er på linje, fordi øjet ved nøjagtigt, hvor den næste linje begynder.

II. White space (AKA Negative Space)

Har nogen kigget på en menu / et websted / en grænseflade og tænkte: "Dette ser ud og føles godt, men jeg er ikke sikker på, hvorfor?" Nå, det gør du. Svaret er hvidt rum. Det hvide rum hjælper med læsbarheden og forståelsen enormt. En undersøgelse (Lin, 2004) fandt, at god anvendelse af hvidt rum mellem afsnit og i venstre og højre margin øger forståelsen med næsten 20%. Læserne finder det lettere at fokusere på og behandle generøst fordelt indhold.

Positivt rum = Hund. Negativ plads = Kat.

Mange mennesker mener, at hvidt rum afhænger af ”smag”. Jeg synes, det er mere objektivt end det. Vi kan bruge hvidt rum med vilje til at skabe et stærkt hierarki. Lad os se på Helen Trans websted, og hvordan hun bevidst bruger hvidrum:

Kilde: https://dribbble.com/shots/2047524-V5-0-Website-Redesign

Smuk portefølje! Lad os nu se nærmere på:

Bemærk, hvordan der er 4 klare blokke med indhold. Lad os fordele det yderligere:

Helen bruger en kombination af linjehøjde, skriftstørrelse, farve og hvidt rum til at adskille indhold i hver blok. Dette gør det lettere for brugerne at naturligt navigere i sektionerne i disse indholdsblokke.

III. Farve

Farveteori er virkelig, virkelig kompleks. Mit mål er ikke at forklare hele farveteorien, men at give dig et par brede koncepter, som du muligvis kan udnytte i dine UI-design med det samme.

Hvis du stirrer på ovenstående billede, vil du bemærke, at den blå firkant til venstre føles længere væk, mens den røde firkant til højre føles nærmere. Varme farver kommer mod dig, mens kølige farver falmer i baggrunden. Lad os se på dette i et UI-eksempel:

Kilde: Dribbble

I designet ovenfor kan vi se, hvordan designeren bruger en varm rød for at bringe opfordringen til handling (Opdater nu) fremad, mens han bruger en køligere blå til at vende navigationen længere ned i baggrunden. Det samme sker på illustrationen til venstre. Det røde lynikon skiller sig straks ud blandt resten af ​​interface.

Du kan også bruge farver til at gruppere lignende interfacekomponenter sammen:

Kilde: Dribbble

Endelig er mindre mere. Jo flere farver der er, desto mindre indflydelse vil hver enkelt farve have. Et godt eksempel er Instagrams nylige redesign:

Reduktion af farve gør ikke kun, at fotos skiller sig ud mere, men det øger effektiviteten af ​​underretningerne også, fordi de ikke konkurrerer med farverne i øverste og nederste navigationslinjer.

Yderligere ressourcer:

Tak til Kevin Yang og Chen Ye for en fantastisk weekend med undervisning i design PennApps! Og Figma til at levere et fantastisk og intuitivt designværktøj, som vi brugte i vores værksted.

HH Design er et samfund omkring design i forbindelse med teknologi.

bidrage