10 almindelige fejl i design ... og hvordan man undgår dem

Designarbejde er en kompleks virksomhed. Det er alt for let at rodet op.

For at skabe produkter af høj kvalitet er alle de små detaljer meget vigtige. Hver detalje skal tages i betragtning. Det kan være let at gå tabt i detaljerne og miste det store billede. Derfor er der flere utroligt fælles brugergrænseflade (UI) designfejl og svagheder.

Så hvordan kan du undgå disse almindelige fejl? Læs videre for nogle tip og forslag, der fokuserer på at hjælpe dig med at undgå disse alt for udbredte faldgruber.

Ja, alt dette er baseret på min egen smertefulde oplevelse som designer. Og ja, enhver lighed med faktiske begivenheder er rent tilfældigt.

1. Manglende planlægning af kanttilfælde (Sig NEJ til Lorem Ipsum)

Ved hjælp af lorem ipsum og stock-fotos kan du nemt skabe et smukt, harmonisk design ... som hurtigt vil være irrelevant for virkeligheden. Dit smukke design brydes, når det er blevet fyldt med det rigtige indhold.

For at forhindre denne situation og undgå klienters frustration over slutprodukter, der ikke ligner noget, du havde til hensigt, skal du få information. Saml de mest mulige oplysninger om det indhold, der allerede findes, eller det indhold, der vil blive produceret.

Specifikt, inden du begynder at arbejde med et UI-design, skal du vide, hvilken slags indhold der vises i hver del af siden. Du skal også vide minimums- og maksimumstørrelserne på indholdet (dvs. hvor mange tekstlinjer, billedstørrelser). Disse vendepunkter kaldes kantsager, fordi de viser hvornår og hvordan interface skal ændres.

Valg af billeder

Du vil også undersøge billedbegrænsninger. Hvis din klient ikke har nogen brugerdefinerede fotos eller ikke køber nogen, er der ingen mening i at bruge smukke, men meningsløse fotos fra Unsplash.

Hvorfor? Fotos har en tendens til at være konceptuelle. Det er ikke nok at bruge noget smukt. I stedet skal du vælge billeder, der skaber en fortælling eller antyder en dybere mening.

Uanset hvad du gør, skal du ikke bruge fotos, der ikke behøver at være der. I disse dage bliver folk overvældet af enorme mængder information. En ekstra smule unyttig visuel information vil kun irritere dem.

Forstå gentagne blokke

Et andet kanttilfælde er relateret til gentagelse af blokke - for eksempel billede + tekst, ikon + tekst, nummer + tekst og så videre. Du skal tænke over, hvordan disse blokke ser ud med to tekstlinjer og med ti, såvel som om de vil stå en efter en.

For små tekstblokke, der beskriver funktioner, kan du nemt bruge et tre-søjles layout. Men hvis du har mere end fem linjer med tekst, og du skal vise det hele uden ellipser, er du nødt til at komme med en anden visuel løsning. Hvorfor? Fordi at læse lange kolonner med tekst kun er godt til aviser og ikke praktisk på Internettet. Mulige løsninger kan omfatte anvendelse af lysbilleder med vandret rulle eller et to-søjles layout.

Planlægning for skalering

At kende dit indholds kanttilfælde vil hjælpe dig med at bruge skærmplads mere effektivt og vælge den rigtige UI-behandling for hvert stykke af grænsefladen. Men husk, at kantsager ikke kun handler om det, du har i øjeblikket. En god designer skal altid tænke proaktivt, hvilket giver mulighed for, at kunder muligvis skal skalere UI i fremtiden.

2. Utilstrækkelige skærmbemærkninger

Den næste store fejl, der er bedre at undgå, er en mangel på kommentarer i dine designs.

Dit hele team - projektleder, QA-specialister og frontend- og backend-udviklere - ser dine designskærme i deres statiske former, ligesom et sæt smukke billeder. De kan ikke vide, hvilken opførsel du antager for hvert interfaceelement. De kan ikke forudsige, hvordan du har designet det i dit sind. Det, der måske er åbenlyst for dig og dine med-designere, vil ikke være åbenlyst for alle teammedlemmer.

Derfor er det meget vigtigt at medtage kommentarer om hvert enkelt elements adfærd, links 'adresser, animationer og skærminteraktioner. Når du springer over dette trin, risikerer du misforståelser. Du risikerer også en masse unødvendig efterfølgende forvirring, når der er blevet udført meget arbejde på nøjagtigt forkert måde.

Det er let at se, hvordan en lille ting som en skærmnotering kan spilde en masse udviklingstid. Det kan endda påvirke hele projektomfanget og øge udviklingsomkostningerne.

3. Frustrerende fejltilstande

Når du designer en brugergrænseflade, skal du ikke glemme hovedformålet med enhver brugergrænseflade: at give en så smidig som muligt en interaktion mellem brugeren og tjenesten. Grænseflader er intet sted for tvivl, spørgsmål uden svar eller nogen form for usikkerhed.

Designere skal give klar feedback til brugerne om stater, især i tilfælde af fejltilstande. Følgelig skal fejlmeddelelser tilfredsstille følgende enkle regler:

  • De skal være genkendelige og mærkbare (f.eks. Farven rød er et almindeligt brugergrænseflade, der indikerer en fejl).
  • De skal klart forklare, hvad der er sket, og hvordan brugere kan løse fejlen.
  • De skal være kontekstuelle. Det er bedre at vise fejlmeddelelser i nærheden af ​​det element, de vedrører.
  • De skal ikke være irriterende. Er din bruger ikke allerede irriteret nok af fejlen?

Designere skal også passe på uventede fejl (f.eks. Serverfejl, siden findes ikke). Enhver fejlmeddelelse er en hindring for brugerens flow. Derfor er vi nødt til at hjælpe brugeren med at håndtere det, levere mulige løsninger og forsøge at udjævne en dårlig oplevelse - især hvis det ikke er brugerens fejl. For eksempel kan en god løsning være at designe illustrationer eller animationer til 404 og 500 sider.

At være omhyggelig med formkontrol

Når du designer fejltilstande, skal du prøve dit bedste for ikke at irritere dine brugere. Vær især forsigtig med alle mulige former for formkontrol.

Forestil dig for eksempel, at du har en formular med krævede felter. Det betyder, at udviklere har en tilsvarende check, "Alle påkrævede felter skal ikke være tomme." Lad os sige, at brugeren prøver at udfylde formularen, men i tilfældig rækkefølge. Når det første krævede felt mister fokustilstanden, returnerer det en fejl: “Udfyld venligst dette felt. Det kræves! ”

Vores stakkels bruger udbryder: ”Hold fast, kammerat, jeg klikker bare mellem formularfelterne og har ikke engang klikket på 'Indsend'!" Og ting kan blive værre. Lad os f.eks. Sige, at du har en anden kontrol, og knappen "Send" vil blive deaktiveret, indtil alle krævede felter ikke længere er tomme.

Bare tænk over det et øjeblik. Din dårlige bruger gjorde ikke noget og er ikke i stand til at indsende formularen, men du har allerede bebrejdet flere fejl på ham. Dette vil bestemt forvirre nogen, så det er bedst at undgå sådanne situationer.

Vejningsomkostninger og værdi

Lyt ikke til udviklere, der prøver at fortælle dig, at det vil koste en stor indsats at implementere på den måde, du ønsker. Husk: at det ikke koster kunder at undgå at undgå dette problem! Ingen har brug for en service eller et produkt uden kunder. Selvom det var billigt at udvikle sig.

4. For-tomme tomme stater

Dette emne vedrører den foregående - fejltilstande - og er også forbundet med kantsager. En tom tilstand er det absolutte kantsag, så du er nødt til at tænke proaktivt på at undgå dem.

Hvordan vil din UI se ud, når der ikke er data på hver side eller sektion? Vil det være venligt eller frustrerende? Ser det godt ud, eller ser det ødelagt ud? Vil brugerne forstå, hvor de er, og hvad staten betyder?

Den bedste praksis her er at give en dejlig visuel, der inkluderer informativt indhold. Det kan være en illustration, et ikon eller blot en tekstblok med flot typografi, der forklarer situationen.

5. Manglende typografihierarki

Dernæst er et andet emne, der forårsager mange designfejl bedre undgået - typografi.

Tekst er den primære enhed med informationsindhold. Derfor skal det være læsbart, genkendeligt og velorganiseret. Korrekt formateret tekst letter brugernes opfattelse af information og holder dem fokuseret på, hvad der virkelig er vigtigt.

Brug af skrifttyper og skrifttyper

Det kan være sjovt at lege med skrifttyper. Men hvis nogen prøver at læse noget, der ændrer skrifttyper ti gange i et afsnit, bliver det hurtigt trættende og irriterende.

For at undgå denne form for udmattelse af skrifttyper foreslår jeg, at du ikke bruger mere end tre skrifttyper i et enkelt layout. Når det er sagt, skal du huske forskellen mellem skrifttyper og skrifttyper. Hver skrifttype har sit eget sæt stilarter: almindelig, medium, fed, sort, kursiv, fed kursiv og så videre. Når du kombinerer alle disse skrifttyper med store og små bogstaver, er to eller tre skrifttyper mere end tilstrækkelige til at skabe et attraktivt typografisystem.

Vær opmærksom på Kerning

Når du tænker på typografi, skal du ikke glemme kerning. Hvis du aldrig har hørt om kerning før, skal du ikke bekymre dig; det er meget enkelt. Kerning er processen i typografi, hvor mellemrummet mellem tegn justeres enten manuelt eller automatisk.

Kerning er vigtig, fordi justering af rummet mellem karakterer i nogle situationer kan gøre typografien mere læselig og behagelig for øjet. At misbruge kerning - eller ikke være opmærksom på det - kan imidlertid forårsage store problemer. Det kan forårsage fejlagtige fortolkninger eller utilsigtet ødelægge et designs sammenhæng.

Opretholdelse af det visuelle hierarki

Forsøg altid at bevare det visuelle hierarki mellem fontformaterne på din side. Brug kontrast typografi til visuelt at opdele forskellige niveauer af tekst og etablere et strengt hierarki. For at informationshierarkiet skal være synligt på en side, skal hovedoverskrifterne være mest fremtrædende på siden. Underhoveder skal være betydeligt mindre, men stadig tydeligt synlige.

Det samme princip gælder for det visuelle hierarki inden for en logisk blok. Overskriften skal være det største designelement på siden efterfulgt af et mindre, mindre fremtrædende underhoved. Dernæst skal alle funktionstitler, der følger, være mærkbart mindre end overskriften og af samme vægt. De mindste skrifttyper skal bruges til beskrivelser af funktioner osv. Dette visuelle hierarki hjælper besøgende med at skelne mellem mere og mindre vigtig information.

6. Utilstrækkelig polstring og afstand

Korrekt polstring og afstand holder dit layout ser rent og ordnet ud, mens det gør det lettere for læserne at læse og forstå information.

Mellemrum i samme størrelse skal indstilles omkring logiske blokke (f.eks. Øverst og nederst og på venstre og højre side). Hvis mellemrummet er ujævnt, ser din side rodet ud, og brugere vil muligvis ikke tage lige højde for hvert afsnit.

Polstring, der er for lille, betyder, at brugere ikke kan opdele indhold i logiske blokke. For at forhindre, at logiske dele blandes sammen, skal du holde dem adskilt og indsætte et stort mellemrum.

En nem måde at opretholde det visuelle hierarki er at følge denne enkle regel: Polstret mellem forskellige logiske blokke skal være større end polstret mellem overskriften og teksten inde i hver blok. For eksempel kan du sige, at du har en lang tekstblok, der inkluderer overskrifter, underoverskrifter og afsnit:

  • Indstil overskriften polstring nederst til 40px, og følg den derefter med et tekstafsnit.
  • Indstil afsnitens polstring-bund til 10px.
  • Hvis der er et underoverskrift efter afsnittet, skal du give det 30px til polstring (dvs. afstanden mellem afsnittet og toppen af ​​underhovedet er 30 px) og 20 px til polstring (dvs. afstanden mellem underhovedets bund og afsnit) vil være 20px, hvilket er større end mellemrummet mellem afsnittene).

Det vil lægge den ønskede vægt på de vigtigste og største elementer. Den største tekst - overskriften - har den større plads omkring sig. Men dette rum skal være tættere på de relaterede elementer, der følger det.

7. rodet ikonografi

Ikoner er utroligt nyttige, når du har brug for at udtrykke mening via et lille symbol eller kort illustrere en beskrivelse. De er også en grundlæggende del af moderne grænseflader, især på mobil.

I applikationer svarer ikoner ofte til knapper. Bare tjek Instagram: Du ser kun ikoner og tekst.

Derfor er det meget vigtigt at vælge det rigtige visuelle billede for at svare til et elements betydning. Lyder enkelt, ikke? Nix. Enhver designer i verden ved, hvor smertefuldt det kan være at finde nøjagtigt det rigtige ikon.

Du skal fortælle historien ved hjælp af meget enkle og almindelige billeder, der vil være forståelige for alle. Og du skal matche disse ikoner med den overordnede stil for UI. Derefter skal du give dem til udviklere i SVG-format.

Måske har du søgt efter gratis ikoner, og du var begejstret, da du fandt et dejligt billede til hvert element. Du tænker, hvor perfekt de svarer til hinanden! De vil være forståelige for alle! Desværre føles helhedsindtrykket af det ikonsæt, du har valgt, noget rodet og urydeligt. Hvordan kan du undgå denne slags rod? Her er en kort tjekliste til dig:

  • Linjebredde - Efter ændring af størrelse skal alle dine ikoner have lige linjebredde. Ellers vil det være meget mærkbart, at de ikke gør det.
  • Hjørneradius - Hvis dine ikoner inkluderer nogle rektangulære figurer, skal du sammenligne hjørneradius for hvert ikon i dit sæt. Hvis det er anderledes for forskellige ikoner, skal du bedre rette det.
  • Line cap-form (til skitserede ikoner) - Den kan være rektangulær eller afrundet.
  • Hjørner går sammen (for skitserede ikoner) - Det kan være rektangulært eller afrundet.

Det er sandt, at usofistikerede brugere muligvis ikke specifikt bemærker forskellige linjebredder eller hjørneradiuser. Stadig vil det samlede indtryk være forkert, og brugerne vil føle det.

Med andre ord, selvom det ikke er forkert at bruge gratis ikoner, er det bedst at gå let på dem. Brug af gratis ikoner får et projekt til at se billigt og i nogle tilfælde uprofessionelt. Der er desuden masser af gratis ikoner derude, som folk straks vil genkende. Hvorfor? De har allerede set dem bruges overalt.

Derfor er mit råd at være strengt selektiv med gratis ikoner eller - endnu bedre - designikoner selv. Tilpassede ikoner giver altid en overlegen oplevelse.

8. Lav kontrast

Kontrast et grundlæggende princip i grafisk design. Vores øjne kan lide kontrast. Kontrast er et instrument, som designere bruger til at styre brugernes opmærksomhed.

Kontrast opstår, når to elementer på en side er forskellige. For eksempel kan kontrast komme fra at bruge forskellige farver til teksten og baggrundsfarven. Det kan være en overskrift i en stor, fed, grungy skrifttype, der bruges sammen med en elegant sans-serif-font til brødteksten. Det kan være forskellen mellem en stor grafik og en lille grafik, eller det kan være en ru struktur kombineret med en glat tekstur.

Det vigtige ved kontrast er, at de kontrasterende elementer skal være helt forskellige. Ikke bare lidt anderledes - en mærkbar, dristig forskel.

Brug af hvidt rum

Når det er sagt, hvis du placerer to helt forskellige elementer meget tæt på hinanden, forstår brugeren ikke, hvilket element er det "vigtigste". Derfor kan vi sige, at kontrast ikke kun handler om at anvende forskellige visuelle stilarter på elementer, men også om kunsten at bruge det hvide rum. Dette skyldes, at du nogle gange for at skabe elementer i kontrast, skal du adskille dem med tom plads.

Hvid plads er vigtig for at gøre dit indhold let for brugere at læse. Naturligvis kan hvid plads bruges forkert: at have for meget tom plads eller proppe for meget indhold i et lille område. Mange websteder med overdreven reklame mangler også tilstrækkeligt hvidt rum.

Sikring af tilstrækkelig kontrast mellem tekst og billeder

Undgå lav kontrast for tekstkopi, der er placeret på et billede. Der skal være tilstrækkelig kontrast mellem teksten og baggrunden. For at gøre kopi fremtrædende, skal du placere et kontrastfilter over billedet. Sort er en populær farve, men du kan også bruge lyse farver, blande og matche dem.

En anden mulighed er at bruge et kontrastbillede fra starten. I dette tilfælde kan du placere kopien oven på et mørkt afsnit af fotografiet eller billedet.

Undgå kontrastdosis

Undgå at bruge for mange stilarter på en side. For mange typografiske og designformater på en enkelt side gør det ser uprofessionelt - og gør det også svært at læse. For at undgå dette, skal du begrænse dig til en enkelt skrifttype og to muligheder for mætning (f.eks. Normal og fed).

Undgå at fremhæve smalle sideelementer med farve. Det ser bare ikke godt ud. F.eks. Er overskrifter allerede markeret takket være deres størrelse, typen af ​​mætning og polstring. Vil du fremhæve et bestemt punkt på en side? Brug en farvebaggrund for hele blokken, inklusive en relateret overskrift og tekstkopi.

9. Undlader at tænke tværplatform

Ja, ideelt set skulle dette ikke længere være et problem i dagens verden. Vi ved alle, at de fleste brugere får adgang til webservices fra mobile enheder. Desværre har mange designere stadig en tendens til at glemme det faktum. (Eller måske er det, at klienter ikke ønsker at gaffel over pengene for at skabe mobiloptimeret design?)

For designfagfolk bør problemet med ikke at optimere til flere enheder dog ikke opstå. Når du opretter en brugergrænseflade, skal du altid huske på den bredt anerkendte "mobile first" tilgang. Koncentrer dig om det indhold, som enhver brugertype vil se på hver side. Så spørg dig selv: "Er UI-kontrollen, jeg valgte til at vise dette særlige indhold, praktisk eller ej?"

Du kan vælge et pænt brugergrænseflade, der fungerer perfekt på stationære enheder - men det vil ikke være godt for smartphone-brugere. Eller omvendt. Det er derfor, det er vigtigt at altid huske på den brede vifte af enheder, vi skal designe til i dag.

10. For meget design

Bare fordi du kan tilføje noget til dit design, betyder det ikke, at du skal. Enkelhed tilbyder masser af frynsegoder. Så vær forsigtig med at blive vild med stilarter. Selvom overdesign ikke er en større fejl, kan det medføre nogle alvorlige problemer.

Det er forvirrende at bruge for mange farver på en side. det bliver uklart, hvilke bits der er vigtigere. En eller to farver er nok til at give visuel fremtrædelse af det, der virkelig er vigtigt.

Vi kan sige det samme om skrifttyper. Det er nok at understrege overskrifter og underoverskrifter og bruge kontrast til nøglesætninger.

Jo mere "ting" du klemmer ind i dit design, jo sværere skal en bruger tænke for at udtrække de oplysninger, den præsenterer. Et design skal trække vejret og leve af sig selv. Så husk: At have tom plads er ikke nødvendigvis dårligt. I mange tilfælde er det bedre end at udfylde hver kvadrat tomme tom plads.

Har dit design fejl, der skal rettes? Lad os vide! Vores førsteklasses designteam kan hjælpe dig med at undgå designvidenskab, mens du kommunikerer mere tydeligt og smukt.

Om forfatteren

Senior UI / UX Designer Maria Pisarenko blev medlem af Distillery i 2018. Hun bringer over 6 års designerfaring og har bygget utallige grænseflader for kunder over hele kloden. Marias lidenskaber inkluderer ikonografi, typografi og illustration; hun mener, at design spiller en nøglerolle i at gøre verden til et bedre sted.