Bruk og misbruk av ikoner i den moderne tid

Antall ikoner vi ser på daglig basis er fantastisk. De er overalt rundt oss, både online og offline. Vi elsker å bruke dem. De forbedrer estetikken til våre nettsteder og kan gi en bedre brukeropplevelse. Noen ganger glemmer vi grunnen bak med et ikon, og det er da det blir enkelt for ikoner å miste effektiviteten.


Universell kommunikasjonsmekanisme

Den primære egenskapen for ikoner er å være a vanlig visuelt språk som effektivt broer språkgap. De er umiddelbart gjenkjennelige og fjerner åpen tolkning. Dette gjør dem perfekte for en digital kontekst, da Internett deles av mange mennesker og deres tilsvarende kulturer.

Skjermbilde av The Noun Project

Å designe et ikon som er universelt lesbart er fortsatt en stor utfordring. Våre kulturer har alle grafiske konvensjoner som kan føre til forvirring om meningen bak noen skreddersydde ikoner.

Å utforske et nytt grensesnitt som består av mange ikoner kan være utfordrende ved første øyekast. Det tar oss en stund å bli klar over hvor alt er og bli vant til hvert ikons betydning. Av denne grunn merker ikoner (ved hjelp av tittel attributt eller kanskje tilpassede verktøytips) vil forbedre effektiviteten for å lære et nytt grensesnitt og regnes som en god praksis. Faktisk er det allment akseptert at ikoner i kombinasjon med etiketter blir behandlet raskere av brukere.


Lag visuell interesse

En av de vanligste feilene vi gjør er at vi bruker for mange ikoner i en gitt innstilling. Ikoner er mest effektive når de forbedrer visuell interesse og griper brukerens oppmerksomhet. De hjelper brukerne veilede mens de navigerer på en side. Bruk for mange ikoner, og de blir ingenting mer enn dekorasjon. Deres bruk for navigering på en nettside kan ofte føre til fortynning.

Facebook bruker så mange ikoner, de tjener ikke lenger for å skape visuell interesse, men fungerer mer som dekorasjon. Enkelte Windows-grensesnitt bruker kompliserte ikoner, som ikke gir et rent grensesnitt og dermed reduserer brukervennligheten.

Ved å begrense mengden ikoner du bruker, vil du gripe brukerens oppmerksomhet raskere, noe som gjør navigasjonen enklere.

Foten av The Verge gjør smart bruk av ikoner. Her har ikonene en klar merverdi, og utformingen føles ikke rotete. I dette skjermbildet av Behance er ikonene nøye balansert for å gjøre siden raskere. Selv om denne artikkelsiden på Artsy inneholder mange ikoner, på grunn av den enkle merkevaren til nettstedet, fungerer ikonene perfekt for å hjelpe brukeren å gjøre navigasjonsvalg.

Ikonpakker er flotte, men noen ganger er det bedre å prøve og designe dine egne ikoner eller redigere eksisterende ikoner (med tillatelse) for å dekke dine behov. Utseendet på et nettsted bør gjenspeiles i ikonene du bruker. Som du kan se i eksemplene, bør dette ikke nødvendigvis være en svært vanskelig oppgave, og det er definitivt noe du kan huske på for å forbedre merkevaren til nettstedet ditt. Det er de små detaljene som gjør forskjellen mellom en flott nettside og en eksepsjonell nettside.

På den annen side kan det skape en kontrast fra vanlig merkevarebygging enda enklere å bygge visuell interesse. Her er et eksempel fra Twitter. Se hvordan knappen for å skrive en tweet skiller seg ut?

Når det gjelder visuals, bør grensesnittikoner være varierte nok til å være særegne, samtidig som de er konsekvente nok til å fungere som en sammenhengende helhet.

Den største fallgruva er å bruke ikoner fordi de gir opp en estetisk, ikke fordi de kommuniserer. Store ikoner er både visuelt tiltalende og kommuniserer med brukerne.


Gi funksjonalitet og tilbakemelding

Uten ikoner vil vi være forpliktet til å bruke tekst for å beskrive visse funksjoner til brukerne våre. Selv om dette gjør grensesnitt tilgjengelig, kan du forestille deg en videospiller bare ved å bruke tekst som sier "spill", "pause", "like", "fullskjerm"? Ikoner gir kjente metaforer til å kommunisere raskt.

Kraften til ikoner brukes til å forstå hvordan denne videospilleren fungerer ganske raskt og effektivt. Kombinasjonen av farge og et gjenkjennbart ikon gir tilbakemelding: noe er galt.

Det er også mulig å gi brukere tilbakemeldinger gjennom ikoner, vanligvis gjort i kombinasjon med farge. For eksempel viser et grønt merke til brukere at et brukernavn er tilgjengelig. Et kryss i en rød boks forteller brukeren at de ikke skrev inn et nytt passord på riktig måte. Ikoner kan legge til fantastisk støtte, spesielt hvis det brukes på sanntid. I eksemplet ovenfor blir jeg informert om jeg skriver inn noe som ikke er en nettadresse sanntid. Konseptet bak dette har mange potensielle formål, som alle forbedrer brukeropplevelsen.


Tekniske begrensninger

Vi lever nå i en tid med forskjellige skjermstørrelser, væskeoppsett og varierende pikseldensiteter. Dette har hatt stor innflytelse på hvordan vi håndterer bilder, og dermed er det bare fornuftig at det også påvirker hvordan vi håndterer ikoner.

Vi er stadig vane med å optimalisere bilder for ulike enheter, men vi kan også skreddersy ikonene våre for å skape en feilfri opplevelse. Et bestemt ikon kan virke ekstremt godt ved 200px, men er meldingen fremdeles klart overført til 12px, eller blir detaljene sløret? Nylig publiserte vi en artikkel som omhandler responsiv ikonografi, og forklarer dette konseptet ytterligere.


Ignorerer konvensjoner

Ikoner misbrukes ved å ignorere vanlige praksis. Når brukere blir vant til å gjenkjenne et ikon som betyr noe, er endring av handlingen bak det ikonet ekstremt forvirrende.

Derfor blir standarder kontinuerlig foreslått og eksisterende ikonografi raffinert. Ta en titt på hva Andy Clarke har å si om en ikonstandard for responsiv navigering .

Den viktigste regelen forblir skjønt: ikke gå bort fra eksisterende brukermønstre. Selv om et fancy nytt menyikon høres ut som en fin måte å utfordre designkunnskapene på, og kommer opp med et unikt design, kan det samtidig være en katastrofe for brukervennlighet..

Diskutere Hollow ikoner

Mer nylig har et blogginnlegg publisert på Medium kritisert bruken av hule ikoner, etter den nylige utgivelsen av iOS 7. Det hevdet at bruken av hule ikoner krever mer "arbeid" fra brukere. Dette blogginnlegget har blitt omtalt mye i webdesign fellesskapet. Det er forskjellige, interessante synspunkter. Selv om det vi alle er enige om, er det at ikonografi skal gi mening til brukeren. Det handler selvsagt om konvensjoner.


Aubrey Johnsons animerte GIF, som demonstrerer det arbeidet våre hjerner forplikter seg til å behandle ikoner

Konklusjon

Jeg hadde et mål i tankene når jeg skrev denne artikkelen: å minne oss alle om å spørre oss selv Hvorfor Vi bruker ikoner på nettsteder vi lager. For mange av oss har det blitt en automatisering for å inkludere dem i våre prosjekter som en selvfølge. Neste gang, spør deg selv hva verdien av det ekstra ikonet er, og hvordan det sammenlignes med de andre ikonene på nettstedet.


Nyttige ressurser

  • Ikonhåndboken
  • Alt om Responsive Iconography
  • Hackdesign på Iconography
  • Interessant Photoshop / Illustrasjon Utvidelse
  • Iconmonstr
  • Noun-prosjektet
  • Slik bruker du ikoner for å støtte innhold i webdesign (Smashing Magazine, '09)