Som webdesignere Vi prøver hele tiden å skape en flott UX-opplevelse og hjelpe brukere å nå sine mål. I vårt daglige arbeid bruker vi mange typer vanlige mønstre og trender. I min erfaring har jeg sett hvordan disse mønstrene og trendene enkelt kan styre kunder og designere / utviklere i feil retning. Det er ingen hemmelighet at vi alle en gang i blant kommer litt av spor med ting som ser ut til å bli sett utrolig . Jeg innrømmer at jeg har falt i disse fellene ved mange anledninger, jeg har valgt å skape noe som er visuelt tiltalende og ofret brukervennlighet for det. Hvorfor gjorde jeg det? Jeg antok det ene øyeblikket wow ville skje, og det ville magisk tiltrekke brukeren. Jeg håpet på denne effekten wow det ville forårsake lang innvirkning. Det høytidelige øyeblikket kom da jeg fant ut at brukerne mine hadde problemer med å forstå grensesnittet jeg hadde opprettet og som jeg var veldig stolt av. Noen ganger lærer du de vanskelige måtene.

Leksjonen jeg lærte var at for å unngå en veldig ujevn reise for brukerne våre, må vi alltid spørre oss selv hva som ligger under den blanke overflaten av brukergrensesnittet vi lager. Det er verdt å stoppe før du blir glad i noen mønstre eller trender og tenker på verdien de gir. Som Kate Rutter briljant uttrykte det, 'stygge men nyttige trumfer ganske men meningsløse.'

Ikke misforstå meg –– Jeg foreslår ikke at vi ikke skal gjøre ting vakre, jeg foreslår at vi bør fokusere på å gjøre ting vakre og slitesterke. Nøkkelen med mønstre og trender er å finne en balanse mellom det som ser bra ut og verdien bak.

I denne artikkelen vil jeg liste opp flere vanlige UX-feil som jeg ser hver dag. Selv om de ikke er dårlige, så å si, kan de være farlige hvis de ikke implementeres med forsiktighet. Jeg vil også dele litt informasjon om hvordan du kan forbedre brukervennligheten når du implementerer disse trendene eller til og med foreslå en løsning. Med ingenting mer å legge til, la oss se på listen.

Vanlig feil nr. 1: store faste hoder

Vi ser flere og flere store og høye overskrifter - bokmerkede blokker og menyer som er fast plassert og tar en stor og betydelig del av visningsvinduet. De holder seg til toppen og blokkerer ofte innholdet under dem. Jeg har sett overskrifter på nettsteder med høy produksjon som er over 150 piksler høye, men ligger det virkelig verdi bak dem? Jeg tvinger kanskje litt, men store faste overskrifter minner meg om skumle og nå gamle HTML-rammer. Puh!

Faste elementer kan ha reelle fordeler , men vær forsiktig når du arbeider med dem - det er en rekke viktige ting å huske på. Når du implementerer faste overskrifter, må du huske på et par vanlige feil du vil unngå så mye som mulig:

For stor til å være komfortabel

Hvis beslutningen om å designe et stort, fast overskrift allerede er tatt, kjør noen tester for å finne ut om 'stort' er 'for stort'. Forsikre deg om at du ikke går overbord og legger mye innhold i overskriften, noe som vil resultere i et element som er for høyt. Med overskriften fast på plass, bør det være raskt og praktisk å surfe for brukerne å gjøre. Hvis du er i tvil om den faktiske størrelsen på toppteksten, kan du prøve å gjøre den mindre uten å ofre for mye på visuell appell og merkevarebygging. Unnlatelse av å finne en god balanse kan resultere i en klaustrofobisk opplevelse for brukerne og gi veldig lite rom for kjerneinnhold.

I fjor har jeg jobbet med et prosjekt der klienten insisterte på å ha fast navigering på desktopversjonen. Selv når baren ikke var spesielt høy, fryktet jeg at noen brukere kan føle seg klaustrofobiske av å føle seg låst inn. Min løsning var enkel –– ved å gi navigasjonsfeltet litt gjennomsiktighet ved hjelp av CSS, kunne brukerne se gjennom linjen, noe som gjorde at innholdsområdet virket større. Her er litt av CSS-koden, hvorfor ikke prøve å se om den også fungerer for deg?

.header { opacity: 0.9; }

Dette eksemplet fant jeg ut der da jeg nylig kom over Roger Federers ATP-profilside .

Den faste toppteksten er omtrent 110 px høy, og når du blar nedover, vises en undernavigasjon som gjør overskriften 160 px høy. Det er mer enn 30% av full sidehøyde på MacBook Pro-maskinen min med dokkingstasjonen åpen.

Ikke løst problem på mobil

Sikker på at mange brukere vil bruke en ganske stor skjerm, og de faste menyene kan være en fordel i store oppløsninger, men hva med mindre oppløsninger og mobilverdenen? Husk at en betydelig del av brukerne dine vil bruke en enhet med liten oppløsning, så for mobil er alternativet position: fixed sannsynligvis ikke den beste løsningen. Heldigvis, responsive teknikker lar oss designe en annen løsning og holde oss til den faste toppteksten bare for store oppløsninger. ‘Mobile-first’-tilnærmingen vil gi oss mange av svarene –– det starter med mobiloppløsningen, bare det essensielle innholdet, og går derfra.

Kaffe med politimann den har også en fast topptekst, men mindre - mindre enn 80 piksler.

Det kan sies at det er en god løsning i store oppløsninger, fordi den tillater enkel og rask navigering. Ved små oppløsninger er overskriften løst og tar betydelig plass på enhetsskjermen. Jeg vil anbefale å ikke bruke et fast overskrift i mobilen, og i stedet bruke et fast hamburgerikon, som kan åpne en meny når du trykker på. Selv om dette mønsteret ikke løser et universelt problem, frigjør det mye plass. På smarttelefoner og nettbrett kan plass være veldig dyrebar.

Vanlig feil nr. 2: tynne skrifttyper

Tynne skrifter ser ut til å være overalt - mange innfødte mobilapper og moderne nettsteder. Med fremrykkende skjermteknologi og en gjengivelse forbedret, mange designere velger å bruke fine eller tynne skrifttyper i designene sine. De er elegante, friske og nye. Imidlertid kan tynne skrifter påvirke lesbarheten og bli et stort problem. Husk at ikke alle vil se nettstedet ditt på en skjerm som gjengir skriften som den skal. For eksempel har jeg funnet ut at tynn type er veldig vanskelig å lese på iPhone og iPad med en netthinneskjerm. Før vi tenker på hvordan et skrift ser ut og føles ut, la oss ta et skritt tilbake et sekund.

Av Apple Human Interface Guides :

Fremfor alt må teksten være leselig. Hvis brukere ikke kan lese ordene i appen din, spiller det ingen rolle hvor vakker typografien din er.

Apple refererer til mobilapper, men det samme prinsippet kan brukes på alle nettsteder. Som Colm Roche sa, lesbarhet ≠ valgfritt , men nødvendig for god brukervennlighet. Det nytter ikke å sette innhold på et nettsted hvis de aller fleste av brukerne dine knapt kan lese det, tror du ikke?

Her er de vanligste feilene du vil være oppmerksom på før du legger skrifttypen på diett:

Bruk tynn typografi fordi ja

Som med enhver trend er det farlig å gjøre eller ha på seg noe fordi andre gjør det. Fontene skal ikke bare se bra ut. Først og fremst bør de være lesbare og et springbrett for god brukervennlighet. Å velge å bruke tynn type bare fordi den ser bra ut, må bake tilbake. I denne utmerkede samtalen, Mer perfekt typografi , Tim Brown snakker om det søte stedet der typografi synger. Dette søte stedet er en kombinasjon av størrelse, vekt og farge der du legger grunnlaget for nettstedet ditt.

For å sikre at du finner en god skrift for innholdet ditt som treffer det søte stedet, kan du kjøre noen tester i forskjellige miljøer. Som bringer oss til følgende feil som er verdt å unngå:

Manglende test av lesbarhet på større enheter

Tynn type kan se bra ut på skjermen, og det kan hende du ikke har problemer med å lese den, men husk det du er ikke din bruker . Invester i brukervennlighetstesting for å finne ut om dine virkelige brukere er fornøyde med typografi på store enheter: stasjonære datamaskiner, bærbare datamaskiner, nettbrett og smarttelefoner. Når du gjør mer mobiltesting, må deltakerne bruke nettstedet ditt på mobile enheter i dagslys - dine virkelige brukere vil ikke alltid ha ideelle forhold for å navigere på nettstedet ditt. Hvis du må lese noe på en mobil enhet på en solskinnsdag, vet du sannsynligvis hvor vanskelig det er. Hvis du bestemmer deg for å bruke tynn skrift på nettstedet ditt, er det en enkel måte å tilpasse den til mobilbrukere. Her er en løsning jeg nylig så på et nettsted:

Eik den gjør en god jobb med å tilpasse seg brukernes behov - ved skrivebordsoppløsning er H1-overskriften veldig tynn. Siden toppteksten er stor og har god fargekontrast, mistenker jeg at lesbarheten ikke lider. På mobil, der topptekststørrelsen er betydelig mindre, er vekten litt tykkere, noe som hjelper til med lesbarheten. Det er tydelig at de har opplevd lesbarhetsproblemer når det gjelder tynne skrifttyper i små størrelser og implementert en tyngre skriftvekt gjennom mediespørsmål . Løsningen hans var enkel, men veldig effektiv.

Vanlig feil nr. 3: Lav kontrast

Lav kontrast har blitt en trend innen design av brukergrensesnitt de siste årene. Vi har allerede snakket om skrifttyper, som skaper lav kontrast, men det er en større felle du kan falle i: en kombinasjon av tynn skrift med lav fargekontrast vil få brukerne til å klø seg i hodet og tenke. Har vi mistet tankene? . Selvfølgelig er ikke alle lave kontraster dårlige, det kan til og med legge til den visuelle appellen hvis du designer nøye. Men i tilfelle med alle UX-feil, er det viktig å ikke overdrive det og tenke på brukervennlighet.

Et par store feil du vil unngå når du arbeider med kontrast, er:

Lav fargekontrast i kroppsinnhold

Selv om den lave kontrasten i farger ikke er utelukkende dårlig, kan det ha en dårlig innvirkning på brukervennligheten til nettstedet ditt og gjøre teksten veldig vanskelig å lese. Hvis denne artikkelen inspirerer deg til å øke fargekontrasten i minst én ting, gjør den tingen til kroppsinnholdet. Det er trolig det minst gunstige området å eksperimentere med.

Cool Springs Financial bruker en tynn variant av Helvetica for hovedteksten til innholdet. Og mens det ser elegant ut og bidrar til estetisk tiltalende brukere, er det vanskelig å lese på mange plattformer.

Jeg gjorde en rask test på en MacBook Pro med en retina-skjerm, samt en iPhone og iPad med en retina-skjerm. Skjermbildet er fra min MacBook Pro som avslører problemer med kontrast og lesbarhet. Jeg hadde vanskelig for å lese nettstedsteksten på alle enhetene mine.

Ikke test kontrasten

Vurder å gjøre litt brukertesting for å unngå problemer på slutten av veien. I seg selv hører jeg allerede noen av mine klienter og kolleger si 'Bojan, brukertester er tidkrevende og dyre'. De kan være, men det det egentlig ikke tar er for lang tid å teste nettstedets kontrast. Start med kroppsinnhold og arbeid deg oppover. Det er et fint verktøy som heter Colorable, som du kan stille inn riktig tekstkontrast i henhold til WCAGs tilgjengelighetsretningslinjer. Når du vet at du bruker riktig kontrast, kan du justere andre farger på nettstedet ditt og kjøre raske brukertester for å sikre at de fleste av brukerne dine får en smertefri opplevelse. Jeg tviler på at den lave kontrasten vil føre til opprør, men det kan frustrere mange av brukerne dine.

Vanlig feil nr. 4: fortrengning

En annen trend som vi ser mye i det siste, er disponering av fordrivelse. Nettsteder som implementerer denne trenden tar kontroll over bla (vanligvis med JavaScript) og overstyrer en grunnleggende funksjon i nettleseren. Brukeren kan ikke lenger kontrollere siderulling og kan ikke forutsi oppførselen, noe som lett kan føre til forvirring og frustrasjon. Det er et risikofylt eksperiment som kan skade brukervennligheten, så jeg anbefaler veldig forsiktig.

Hvis du er overbevist om å implementere dette, bør du prøve å unngå følgende feil:

Bruk denne trenden bare fordi den er populær

Noen nettsteder kan komme unna med å ta kontroll over å bla, men det garanterer ikke at nettstedet ditt også kan gjøre det. Trender og mønstre kan ikke følges og implementeres blindt. For eksempel ser vi mange designere følge med på hva Apple gjør med nettstedets og side-til-side-rullekontroll, parallakseffekter og bilder med høy oppløsning fra forskjellige enheter. Apple har sine egne grunner, sine egne brukere, konsepter og unikt innhold. Og siden hvert nettsted har unike problemer, må du også ha skreddersydd løsninger på disse problemene.

Ikke test med ekte brukere

For å unngå problemer når du låner ideer eller mønstre, må du teste prototypene til nettstedet ditt med dine egne brukere. Enkel brukervennlighetstesting vil avdekke om implementeringen av kontrollert rulling er gjennomførbar eller ikke. Å teste dette vil sikkert svare på mange spørsmål og gi ledetråder til hvordan du kan forbedre ideen din. Uten testing vil du ikke ha noen måte å vite hvilken retning du skal ta, og å utvikle nettsteder basert på antakelser koster ofte for mye senere.

Tumblr bruker dette på sine nettsider. Selv om implementeringen også kan være risikabel, ser det ut til at de forstår sitt publikum, deres innhold og konsept støtter det, og at de har tilfredsstilt mange av brukernes behov. Når en bruker prøver å gå ned, blir rullen kontrollert av nettstedet, men brukeren blir deretter ført til neste del av nettstedet. Innholdet er delt inn i mange seksjoner eller blokker, som er enkle å skille og store indikatorpunkter er satt til høyre for visningsport . Som et resultat av dette hjem det føles som en stor bil du har kontroll over, snarere enn et eksperimentelt nettsted med et eget sinn.

Vanlig feil nr. 5: ikke effektive karuseller

Karuseller er veldig vanlige på nettet, og har vært det lenge. Selv om de er effektive, kan de også være et mareritt hvis de ikke er nøye designet og utviklet. Marerittet for brukerne dine kan være det faktum at de har problemer med å forstå det. Marerittet for deg kan være det faktum at brukerne ikke ser det viktige innholdet i noen av lysbilder av karusellen.

Karuseller uten viktig innhold: ikke den mest effektive måten å bruke plass på nettstedet ditt kvitring

Mange karuseller jeg har sett på har lignende ulemper. Noen av dem er:

Mangel på reell verdi for brukerne

Hva er den virkelige verdien karusellen gir brukerne? Gjort riktig, en karusell skal få kontakt med brukerne dine og hjelpe dem med å fullføre sine mål raskt og smertefritt. Mange ganger ser jeg karuseller som kanskje ikke gir merverdi, men ser ut til å være enkle dekorasjoner. Her er en rask quiz du kan gjøre: ta en post-it og skriv ned tre fordeler som karusellen kan tilby brukeren. Hvis du ikke tenker på tre, er det stor sjanse for at karusellen din trenger mer arbeid.

For mange eller for få lysbilder på karusellen

Mange lysbilder kan ha en negativ effekt på brukerne, og de kan bare velge å ignorere karusellen. Brukbarhetsguruen Jakob Nielsen foreslår følgende:

Inkluder fem eller færre lysbilder i karusellen, fordi det er usannsynlig at brukerne kommer i kontakt med mer enn det. Mens mer enn fem kan være for mye, kan mindre enn tre indikere at en bedre løsning anbefales. Et av premissene for en karusell er det faktum at du trenger mye innhold fylt i en veldig liten plass, men med bare to lysbilder, hvorfor ikke vise begge samtidig og glemme å skyve den ene eller den andre på en gang?

Piler tidligere Y neste og lysbildeindikatorer er ikke så åpenbare og / eller tilgjengelige.

Forsikre deg om at du gjør det dyrebare innholdet ditt tilgjengelig. Viktig informasjon på en karusell kan være skjult hvis pilene på neste Y tidligere de er ikke åpenbare og for store for et behagelig klikk. Åh, og ikke glem kranen - mobilbrukerne vil takke deg for det.

Noen ganger er det ingen piler på en karusell, og punktindikatorene er koblinger for å hoppe mellom skidene. Husk at du må oppgi en trykkområde gjør den fin, klikkbar og stor (jeg anbefaler i det minste 35x35px). Ellers vil små mål føre til en veldig frustrerende målretting, og brukere vil forlate nettstedet ditt.

Nettstedet til Long Forest Foundation har en karusell med bilder i overskriften. Ha Auto spill og fem fotografier presenteres på lysbildene. Piler tidligere Y neste De er små og gjennomsiktige, noe som gjør dem vanskelige å se og klikke eller trykke på. Det er ingen indikatorer for lysbildet du er på, og ingen etiketter som viser hva fotografiet representerer. Bildene er ikke lenker og fungerer bare som dekorasjon. Mens karusellen kan ha noe av verdi i å etablere en forbindelse med brukeren, lar den absolutt mye å være ønsket.

konklusjon

Jeg har listet opp de vanligste UX-feilene i noen aktuelle nettrender. Hvis du har implementert eller tenker å implementere noen av dem, håper jeg inderlig at denne artikkelen har vært nyttig for deg. Som [UX Designer], bruk ditt beste skjønn og ikke vær redd for å improvisere, men husk alltid å huske brukerne.

Start gjerne en samtale nedenfor. Jeg vil veldig gjerne lese om dine erfaringer, synspunkter eller forslag til hvordan du kan gjøre ting bedre.