21 UI-designhemmeligheder, du har brug for at vide

UI-designhemmeligheder: mand der ser på labyrint
(Billedkredit: Getty)

Ud over sessionstider og afvisningsfrekvenser er det centrale formål med design af brugergrænsefladen at gøre tingene så ubesværede og behagelige som muligt for brugeren. Og ligesom de fleste områder af design kan det have de rette værktøjer at hjælpe (se vores liste over værktøjer til webdesign og top hjemmesidebygere ).

Plus at have ret webhosting service kan gøre forskellen mellem succes og fiasko, så sørg for at vælge klogt. For nu er der dog 21 tip og tricks til UI-design baseret på 10 års erfaring inden for området.



01. Ved hvem du designer til

Opgaver som brugerundersøgelser, wireframing, test og design af informationsarkitektur ses ofte som en UX-designers ansvar, men vi begynder at se en voksende blanding af UX / UI-designerrollen.



Ifølge Invision , “66% af UX-designjobsposter anmoder om UI-færdigheder”, så hvis det er blevet vigtigt for UX-designere at forstå visuelt design, branding og typografi, er det kun rigtigt, at UI-designere bliver involveret eller i det mindste har en grundlæggende forståelse af de førnævnte UX-færdigheder.

En brugergrænsefladesigner, der involverer sig i oprettelsen af ​​eller i det mindste lægger mærke til de personaer, trådrammer og informationsarkitektur, der er udviklet i UX-arbejdsstrømmen, foretager interaktions-, farve- og typevalg, der er påvirket af de mennesker, der bruger produktet eller service snarere end deres egne stilistiske præferencer. Ved at tage sig tid til at forstå de brugere, de designer til, opretter UI-designere grænseflader, der mere sandsynligt passer til brugernes behov, både visuelt og funktionelt.



generere CSS

(Billedkredit: Getty / Future)

Hvis du ønsker at lære de nyeste kreative og praktiske færdigheder til at tage dit klients arbejde, karriere eller bureau til det næste niveau, så slut dig til os på Generer CSS , vores konference for webdesignere og udviklere. Brug kode for særtilbud WEBDESIGNER2 for 10% rabat på billetter.

02. Overvinde valglammelse

UI-designhemmeligheder:



At reducere indstillingerne på øverste niveau i Nike-mega-menuen hjælper med at begrænse valg af lammelse for brugerne(Billedkredit: Nike)

Mark Zuckerberg har en ret simpel garderobe; det er alle grå t-shirts. Med hans egne ord: 'Jeg vil virkelig rydde mit liv for at gøre det, så jeg bliver nødt til at tage så få beslutninger som muligt'. Dette princip kortlægges til interface-design, da det at give brugerne for mange muligheder gør dem overvældede, får dem til at overanalyse og i sidste ende gør dem mindre tilbøjelige til at gennemføre en handling eller proces. Hvor det er muligt, bør vi begrænse de tilgængelige muligheder eller alternativt skjule de muligheder, der er mindre relevante på det tidspunkt i rejsen.

02. Hjælp direkte med standardtilstande

UI-designhemmeligheder:

Skyscanner vælger standardtilstande giver brugerne mulighed for at tilpasse indstillinger(Billedkredit: Skyscanner)

Vores standardtilstande kan gøre mere end bare at bede brugerne om at 'vælge'. Websteder som Skyscanner find den nærmeste afgangslufthavn til brugeren, foreslå datoer, der svarer til kommende helligdage, og vælg på forhånd antallet af flyvende passagerer. Ved at designe standardtilstande baseret på, hvad der ofte vælges, reduceres brugernes krævede kræfter, så de kan tilpasse forvalgte indstillinger.

03. Hurtig handling med tomme tilstande

UI-designhemmeligheder:

Tidals tomme stater viser, at du opdager musik, du måske aldrig har hørt før(Billedkredit: Tidal)

Ufyldte kurve, ubeboede afspilningslister og standardsøgegrænseflader kan ofte efterlade brugerne en følelse af tomhed. Vær opmærksom på Tidevand , der henviser brugere, der 'ikke har nogen album' hen imod deres bedste anbefalinger. I stedet for at skabe blindgange inden for vores grænseflader, skal vi bruge tomme tilstande som en mulighed for at finde nye funktioner og funktioner, der vil være til gavn for vores brugere.

04. Fejler smigrende med fejltilstande

UI-designhemmeligheder:

Kitchen Stories-fejltilstande undskylder for ikke at finde, hvad brugeren ønsker(Billedkredit: Køkkenhistorier)

I digitalområdet går tingene nogle gange galt, og ikke at designe til dette kan føre til, at brugeren føler sig utilfreds. Som UI-designere skal du oprette fejltilstande, der tilskynder til positiv handling og stemning snarere end at kaste uforståelige meddelelser. Det App til køkkenhistorier håndterer dette glimrende, undskylder, når de returnerer et tomt resultat for en køkkenopskrift og giver et opfordring til handling, der giver brugerne mulighed for at indsende nye anmodninger. Se vores favorit 404 sider for flere eksempler.

05. Opdel valgene

UI-designhemmeligheder

Apple nedbryder processen med at vælge en iPhone i klare og koncise trin(Billedkredit: Apple)

Ud over at begrænse og gruppere valg kan vi gøre dem mindre komplekse ved at opdele dem i processer. Man kan forestille sig, at Apples backendebeholdning af iPhone XR'er er en stor matrixliste med hundredvis af produkter med en række farver, størrelser og netværk. Men til brugeren, der vælger en ny Apple iPhone XR via sit websted giver en simpel trinvis grænseflade dem mulighed for at indsnævre deres valgmuligheder et valg ad gangen. Hvis vi præsenterer en masse konfigurationsindstillinger, skal grænsefladen gøre det tunge løft snarere end brugeren.

06. Reducer modstand

UI-designhemmeligheder:

Slacks interface gør det hårde arbejde snarere end brugeren(Billedkredit: Slack)

De grænseflader, vi designer, skal gøre det så let som muligt for brugerne at udføre opgaverne inden for dem. Når du logger ind på deres mobilapp, Slap læner sig på et 'magisk' verifikationslink, der sendes til brugerens e-mail-adresse for smukt at springe over den ubehagelige opgave at huske og indtaste deres komplicerede adgangskode.

At lægge byrden på grænsefladen snarere end brugeren gør dem langt mindre modstandsdygtige for at komme til slutningen af ​​enhver proces på dit websted eller din applikation. Hvis vi har den tilgængelige teknologi til at fremskynde interaktionerne inden for vores grænseflader, skal vi designe med dette i tankerne.

07. Tag kun det, du har brug for

UI-designhemmeligheder:

Tillad brugere at tilmelde sig med minimal information, og lad dem tilføje en gang om bord(Billedkredit: LinkedIn)

For at skabe en sti med mindst modstand, skal vi bede brugeren om så lidt information som muligt på et hvilket som helst tidspunkt inden for vores grænseflader. Jo færre data en bruger skal indtaste, jo mere sandsynligt er det, at de gennemfører en øvelse.

Websteder som LinkedIn beder om bare minimumsdata (fornavn, efternavn, e-mail og adgangskode), når de tilmelder sig deres platform, og gamify derefter oprettelsen af ​​profilen ved at lade dem udfylde et stykke personlige oplysninger ad gangen, når de først er ombord. Der er ingen måde nogen ville tilmelde sig LinkedIn, hvis de skulle indtaste hele deres professionelle historie bare for at komme igennem døren.

08. Giv en følelse af progression

UI-designhemmeligheder:

Pinterest viser fremskridt mod slutmålet om at tilmelde dig med en simpel visuel indikator(Billedkredit: Pinterest)

Der er nogle tilfælde, hvor lange former og processer er en nødvendighed. For eksempel kræver mange økonomiske applikationer omfattende datainput og tid til at gennemføre. Når du tilmelder dig Pinterest app, er der en indikator i grænsefladen for at vise, hvilket trin (af 4) brugeren er i på rejsen, hvilket giver sikkerhed for, at de gør fremskridt mod deres slutmål. Denne følelse af momentum gør brugerne mindre tilbøjelige til at blive frustrerede over ikke at vide, hvornår en proces slutter, og derfor mindre tilbøjelige til at opgive den helt.

09. Vær opmærksom på konventioner

Som UI-designere vil vi naturligvis skubbe vores kreative juice til det yderste og udtænke nye og spændende måder, som brugerne kan interagere med og opleve vores digitale produkter på. Når det er sagt, er vi nødt til at finde en balance mellem originalitet og fortrolighed for at sikre, at vores brugere ikke behøver at bruge for meget tid på at lære, hvordan vi bruger vores grænseflader. Apps som Snapchat - som fik en nyt logo for nylig - har fremmedgjort mange ældre brugere med radikale navigationsmuligheder, så meget, at New York Times skrev en guide til Snapchat for folk, der ikke får Snapchat .

I betragtning af at 'du kan stryge i alle retninger og endda klemme ind og ud for at få adgang til forskellige skærme' ( se mere om Medium ), er der en tid, der skal investeres for at lære interaktionerne, inden du effektivt kan bruge applikationen.

Yngre brugere har taget Snapchat's opdagelighed i betragtning, men voksne, der forstår konventionerne om at trykke og klikke som navigationsmidler, har vedtaget appen i færre tal. Efterhånden som internettet er vokset, er der kommet en række konventioner til elementpositionering (som kurve øverst til højre og hamburgermenuer øverst til venstre) og bør overvejes. Vores grænseflader bør begejstre og glæde brugerne, men bør også være forudsigelige nok til at bruge, hvis vi vil holde konverteringer op og begrænse afvisningsprocenten.

10. Giv visuel feedback

UI-designhemmeligheder:

Rettidig feedback fra Googles snackbarer(Billedkredit: Snackbars)

Feedback er en gave og skal behandles som sådan i vores interface design. Google Snackbarer er en smart lille mikro-interaktion, der lever i dets Material Design-system. Snackbars vises midlertidigt på skærmen i en app eller et webstedsinterface for at give korte kontekstuelle instruktioner, fejl eller kvitteringer, der holder brugeren informeret om eventuelle konsekvenser af de handlinger, de har foretaget, det være sig at gemme et foto, sende en e-mail eller bede om et 'forsøg igen 'når appen har en fejl.

Som UI-designere skal vi give visuel feedback til hver af de vigtigste interaktioner inden for vores grænseflader. Hvis en vare er blevet føjet til brugerens kurv, så lad dem vide det. Hvis deres betaling er gennemført med succes, skal du informere dem med en takkebesked og henvise dem, hvor de skal hen, hvis de har spørgsmål om levering eller returnering. Visuelle signaler og animationer kan hjælpe brugerne med at anerkende færdiggørelsen af ​​opgaver, store og små, inden for dit websted eller din applikation, hvilket giver en følelse af præstation og hjælper med at reducere angst ved at anerkende, at der er taget en handling.

11. Brug brugergenereret indhold

Folk køber baseret på, hvad andre siger, ikke kun den lunefulde tekstforfattere fra mærker. Det er grunden til, at så mange e-handelswebsteder udgør en stor ting med kundeanmeldelser. Solbriller mærke Meller øgede sin konverteringsfrekvens med 13% ved at vise billeder af at nyde deres produkter på deres produktsider sammen med det mere traditionelle e-handelsfotogalleri.

Hvis du har brugergenereret indhold (UGC) tilgængeligt for det mærke eller den virksomhed, du designer til, kan vævning af det på siderne på vores websted eller applikationsgrænsefladen hjælpe med at øge antallet af konverteringer, især hvis publikum er årtusinder.

12. Behandl brugere som advokater

UI-designhemmeligheder:

GoPros hjemmesidehelt bruger video, der er optaget af brugerne til at demonstrere produktets styrke(Billedkredit: GoPro)

At glæde brugere med produkter og tjenester er en ting, men de kan også være vores fortalere eller endda udgøre en del af vores marketingteam. GoPros vigtigste heltevideo på dets hjemmeside har optagelser, der er optaget udelukkende af kunder, der har brugt dets HERO7-kamera (se det bedste GoPro tilbud for at få din egen GoPro).

Brug af film optaget af brugere af produktet demonstrerer kameraets muligheder for potentielle købere i en sammenhængende sammenhæng og belønner også de 25.000 mennesker, der sendte deres videoer med lidt eksponering for GoPro-samfundet. Hvis vi har et loyalt publikum, er der utallige måder, hvorpå vi kan bruge deres stemmer og indhold, så dette skal tages med i design af vores næste grænseflade.

13. Brug billeder til at guide brugerne

UI-designhemmeligheder:

Visionslinje, der beder om tilmelding via e-mail vs modeller, der ser ud i det fjerne(Billedkredit: Sunglasses Hut)

Smukke billeder har styrken til at forbedre en grænseflade visuelt, men kan også bruges til at rette opmærksomhed mod bestemte steder på en side eller skærm (husk at sikkerhedskopiere dine fantastiske billeder ved hjælp af Sky lagring ). Hvis et billede indeholder en person, følger brugerne ubevidst personens synsfelt og giver UI-designere en mulighed for subtilt at rette dem mod opfordringer til handling eller nyttige oplysninger.

Sunglasses Hut-webstedet udnytter dette koncept i sin sidefod med øjenlinjen for to personer, der peger brugere mod deres e-mail-tilmelding. Hvis du vender billedet vandret, er det bare modeller, der stirrer ud i det fjerne.

14. Brug negativ plads på kloge måder

UI-designhemmeligheder:

Der er masser af plads til at trække vejret på Dropbox Business-webstedet(Billedkredit: Dropbox Business)

Det er en almindelig fejl for UI-designere at ønske at skubbe så meget information som muligt ind i hver enkelt grænseflade, men dette kan føre til visuel overbelastning og vil i sidste ende overvælde brugere, hvis opmærksomhed henledes på for mange forskellige områder på en side eller skærm .

Dropbox Business-destinationssiden bruger negativ plads med stor effekt og giver hvert eneste element plads til at trække vejret, samtidig med at det giver et kort overblik over produktets fordele. Strategisk maksimering af pladsen omkring nøgleinformation og opfordringer til handling trækker brugerne hen imod dem uden andre elementer, der kæmper for deres opmærksomhed.

15. Start med mobil

I betragtning af at i 2018 52,2 procent af al websitetrafik over hele verden blev genereret gennem mobiltelefoner, er det stadig vigtigere at skabe digitale grænseflader, der er optimeret til brugere af mobilnettet. Desktop-visningen har ofte været lærredet til valg for UI-designere, startende med videostyrede bannere og interaktioner som rollovers og svævninger, hvorefter vi skal fjerne disse eller udarbejde løsninger, når vi skalerer disse ned til mobil.

Som et alternativ tvinger design af mobilvisningen os til at fjerne al den unødvendige støj og fokusere på de elementer, der er afgørende for brugerne til at udføre opgaverne i grænsefladen. Opskalering giver os mulighed for at tilføje forbedringer til skrivebordsvisningen og tilføje funktioner, der er mere velegnede til den oplevelse, når vi først har nøglekomponenterne på plads.

hvordan man flytter en person fra et foto til et andet i Photoshop

16. Få den rigtige typelicens

Der er intet værre end at polere en smuk grænseflade, forberede aktiverne til udviklingsteamet og derefter indse, at vores skrifttypevalg har et skønt stort licensgebyr - eller endnu værre, ikke er optimeret til internettet. Der findes en række forskellige typer fontlicenser, hvoraf nogle opkræves pr. Bruger, nogle pr. Brugt tid, og andre opkræver et engangsgebyr. Branding agentur Blå æg give en stor opdeling af dette.

Når du foretager valg af skrifttyper, er det vigtigt, at vi overvejer de økonomiske konsekvenser, der vil medføre, samt skrifttypens evne til at gengive på nettet. Hvis budgetterne er stramme, skal open source-løsninger ligesom Google skrifttyper tilbyder hundredvis af skrifttyper, der er gratis at bruge. Se også bedste gratis skrifttyper til designere.

17. Skriv dine grænseflader

Når vi fjerner en grænseflade tilbage til de bare knogler, fjerner farver, skrifttyper, billeder og animationer, er vi i sidste ende tilbage med en ting; kopi. Det er fristende at springe direkte til det visuelle aspekt af interface-design, falde i lorem ipsum og pladsholdertekst, men at tage sig tid til først at skrive vores grænseflader ud, kan gøre det muligt for os bedre at udvikle den overordnede tone og reflektere over de beskeder og historier, vi er verbalt kommunikere til vores publikum.

Vi kan virkelig forstå strømmen af ​​vores sider, når vi læser kopien isoleret og giver os muligheden for at ledsage vores ord med visuelle aktiver, der virkelig understøtter og håndhæver kernen i det, vi prøver at sige.

18. Ombord efter behov

UI-designhemmeligheder:

DuoLingo's app har en pæn onboarding-proces(Billedkredit: DuoLingo)

Onboarding er 'processen med at øge sandsynligheden for, at nye brugere får succes, når de adopterer dit produkt,' ifølge UserOnboard , og som UI-designere spiller vi en nøglerolle i beslutningen om, hvordan vi bedst introducerer vores digitale produkter og tjenester til disse brugere.

App til sprogindlæring Duolingo bruger en indbygget strøm, der slipper brugerne direkte ind i den opgavebaserede grænseflade, så de kan gøre sig bekendt med produktets funktioner og prøve, hvordan det fungerer, alt sammen før de bliver bedt om at tilmelde sig. Brugeren har chancen for at teste produktet, inden han forpligter sig til at oprette en konto.

Når vores grænseflader indeholder uundgåelige, komplicerede eller ukendte interaktioner, er vi nødt til at lære folk, hvordan de bruger dem, uanset om dette gøres gennem lysbilledshow, forklarende videoer eller vejledningsoverlejringer. At give brugerne et udsnit af 'hvordan det fungerer' som en del af ombordtagningen eller introduktionen, vil resultere i mindre forvirring, når de er fuldt nedsænket i oplevelsen og tilskynde til adoption fra dem, der ser værdi i tilbuddet foran.

19. Involver dine udviklere

Som de mennesker, der ender med at opbygge vores designs, betaler det sig at involvere vores udviklere så tidligt som muligt i et projekt. Designere skaber de ting, som brugerne ser, men udviklere forbedrer oplevelsen af ​​grænsefladen ved at maksimere ydeevnen, fremskynde sideindlæsningstider og optimere, hvad der sker under emhætten.

At involvere udviklere kontinuerligt i hele designprocessen giver dem mulighed for at få input til den måde, grænsefladen opfører sig ud over det visuelle aspekt, hvilket giver dem en chance for at tilbyde mere input til, hvordan teknologien som Slap magisk link kan bruges til at gøre vores grænseflader så ubesværet at bruge som muligt.

20. Bruger et designsystem

UI-designhemmeligheder:

IBMs omfattende Carbon Design System(Billedkredit: IBM)

At sikre konsistens på tværs af vores hjemmeside eller applikationsgrænseflader kan være noget af en mission, når flere designere er involveret, og vi kan ofte ende med utallige variationer af de samme UI-komponenter, hvilket betyder replikeret arbejde på tværs af projektet som helhed. Ifølge InVision , et designsystem er “en samling af genanvendelige komponenter, styret af klare standarder, der kan samles for at opbygge et hvilket som helst antal applikationer”.

IBMs Carbon Design System giver for eksempel et omfattende lager af aktiver, kodestykker og dokumentation, som både designere og udviklere har adgang til, når de arbejder på UI-projekter, hvilket sikrer, at designteamet kan arbejde hurtigere og smartere med hinanden. En eller anden form for designsystem eller i det mindste et mønsterbibliotek med alle UI-komponenterne i et specifikt projekt skal bruges til at gøre vores grænseflader konsistente, genanvendelige aktiver og vedligeholdelse lettere.

21. Ryd op i designfiler

Elsker det eller hader det, nogle designere arbejder bare rodet, og selvom dette giver mening under den kreative proces, kan det være frustrerende at hente en designfil for første gang og opdage, at vi har brug for at bruge en betydelig tid på at træne hvilket lag hvert element lever videre.

Monzo har fundet ud af, at “fra den første .sketch-fil, vi oprettede i Monzo, har vi sørget for at organisere vores designfiler meget pænt. Og da vi er vokset fra en enkelt designer til et team på 13, har det virkelig betalt sig at opretholde et fornuftigt designmiljø. ” At tage sig tid til at rydde op i vores designfiler ved at navngive vores lag, tegnebrætter og mapper gør det meget lettere for enhver designer (inklusive vores fremtidige selv) at hente og arbejde på. Dine udviklere vil også takke dig!

Denne artikel blev oprindeligt offentliggjort i nummer 288 af Webdesigner . Køb nummer 288 eller abonner her .

Læs mere: