Share
Antalet ikoner vi ser på daglig basis är fantastiskt. De är överallt runt oss, både online och offline. Vi älskar att använda dem. De förbättrar våra webbplatsers estetik och kan ge en bättre användarupplevelse. Ibland glömmer vi dock anledningen till att använda en ikon, och det är då det blir lätt för ikoner att förlora sin effektivitet.
Det primära attributet för ikoner är att vara a vanligt visuellt språk som effektivt överbryggar språkgap. De är genast igenkännliga och tar bort öppen tolkning. Detta gör dem perfekta för ett digitalt sammanhang, eftersom Internet delas av många människor och deras motsvarande kulturer.
Skärmdump av The Noun Project Att utforma en ikon som är universellt läsbar är fortfarande en stor utmaning. Våra kulturer har alla grafiska konventioner som kan leda till förvirring kring betydelsen bakom några skräddarsydda ikoner.
Att utforska ett nytt gränssnitt som består av många ikoner kan vara utmanande vid första ögonkastet. Det tar oss ett tag att bli medveten om var allt är och vänja sig vid varje ikons mening. Av denna anledning, märkning ikoner (med hjälp av titel attribut, eller kanske anpassade verktygstips) förbättrar effektiviteten för att lära sig ett nytt gränssnitt och anses vara en bästa praxis. I själva verket är det allmänt accepterat att ikoner i kombination med etiketter behandlas snabbare av användarna.
Ett av de vanligaste misstag som vi gör är att vi använder för många ikoner i en viss inställning. Ikoner är mest effektiva när de förbättrar visuellt intresse och tar tag i användarens uppmärksamhet. De hjälper till att styra användare medan de navigerar på en sida. Använd för många ikoner och de blir ingenting mer än dekoration. Deras användning för navigering på en webbsida kan ofta orsaka utspädning.
Facebook använder så många ikoner, de tjänar inte längre för att skapa visuellt intresse men fungerar mer som dekoration. 
Vissa Windows-gränssnitt använder komplicerade ikoner, vilket inte ger ett rent gränssnitt och därigenom minskar användarvänligheten. Genom att begränsa antalet ikoner du använder, kommer du att fånga användarens uppmärksamhet snabbare, vilket gör navigeringen enklare.
Footen på The Verge gör smart användning av ikoner. Här har ikonerna ett tydligt mervärde och layouten känns inte rörig. 
I denna skärmdump av Behance är ikonerna noggrant balanserade för att förstå sidan snabbare. 
Även om denna konstverkssida på Artsy innehåller många ikoner, på grund av den enkla varumärkningen av webbplatsen fungerar ikonerna perfekt för att hjälpa användaren att göra navigeringsval. Ikonpaket är bra, men ibland är det bättre att försöka skapa egna ikoner eller redigera befintliga ikoner (med tillstånd) som passar dina behov. Utseendet på en webbplats ska återspeglas i ikonerna du använder. Som du kan se i exemplen, borde det inte nödvändigtvis vara en mycket svår uppgift, och det är definitivt något du kan komma ihåg för att förbättra varumärkningen på din webbplats. Det är de små detaljerna som gör skillnaden mellan en bra hemsida och en exceptionell hemsida.
Å andra sidan kan skapa en kontrast från det vanliga varumärket göra det ännu enklare att bygga visuellt intresse. Här är ett exempel från Twitter. Se hur knappen för att skriva en tweet sticker ut?
När det gäller bilder bör gränssnittsikoner vara tillräckligt varierade för att vara särskiljande, samtidigt som de är konsekventa för att fungera som en sammanhängande helhet.
Den största fallgropen är att använda ikoner eftersom de erbjuder en estetisk, inte för att de kommunicerar. Stora ikoner är både visuellt tilltalande och kommunicera med användarna.
Utan ikoner skulle vi vara skyldiga att använda text för att beskriva viss funktionalitet för våra användare. Medan detta gör gränssnitt tillgängligt, kan du föreställa dig en videospelare bara med text som säger "spela", "paus", "som", "fullskärm"? Ikoner ger kända metaforer att kommunicera snabbt.
Kraften i ikoner används för att förstå hur denna videospelare fungerar ganska snabbt och effektivt. 
Kombinationen av färg och en igenkännbar ikon ger feedback: något är fel. Det är också möjligt att ge användare återkoppling genom ikoner, vanligtvis gjort i kombination med färg. Till exempel visar ett grönt kryssrutan användare att ett användarnamn är tillgängligt. Ett kors i en röd ruta berättar användaren att de inte skrev in ett nytt lösenord på rätt sätt. Ikoner kan lägga till underbart stöd, speciellt om den används i realtid. I exemplet ovan får jag meddelande om jag skriver in något som inte är en URL realtid. Konceptet bakom detta har många möjliga ändamål, som alla förbättrar användarupplevelse.
Vi lever nu i en tid med olika skärmstorlekar, vätskeformat och varierande pixeldensiteter. Detta har haft ett stort inflytande på hur vi hanterar bilder och sålunda är det bara meningsfullt att det också påverkar hur vi hanterar ikoner.
Vi har allt oftare för vana att optimera bilder för olika enheter, men vi kan också skräddarsy våra ikoner för att skapa en perfekt upplevelse. En viss ikon kan fungera extremt bra vid 200px, men är meddelandet fortfarande klart framlagt vid 12px, eller blir dess detalj suddig? Nyligen publicerade vi en artikel som behandlar responsiv ikonografi och förklarar detta koncept vidare.
Ikoner missbrukas genom att ignorera vanliga metoder. När användarna är vana vid att känna igen en ikon som något men ändrar åtgärden bakom den ikonen extremt förvirrande.
Därför föreslås ständigt ständiga standarder och befintlig ikonografi raffineras. Ta en titt på vad Andy Clarke har att säga om en ikonstandard för responsiv navigering .
Den viktigaste regeln kvarstår dock: Steg inte bort från befintliga användarmönster. Även om en fin ny menyikon låter som ett bra sätt att utmana dina designkunskaper och komma fram till en unik design, kan det samtidigt vara en katastrof för användbarhet.
Nyligen har ett bloggpost som publicerats på Medium kritiserat användningen av ihåliga ikoner efter den senaste versionen av IOS 7. Den hävdade att användningen av ihåliga ikoner kräver mer "arbete" från användarna. Detta blogginlägg har diskuterats i stor utsträckning i webbdesignsgemenskapen. Det finns olika intressanta synpunkter. Men det som vi alla är överens om är det faktum att ikonografi borde vara meningsfullt för användaren. Det handlar naturligtvis om konventioner.
Jag hade ett mål i åtanke när jag skrev den här artikeln: att påminna oss alla att fråga oss själva Varför Vi använder ikoner på webbplatser som vi skapar. För många av oss har det blivit en automatisering för att inkludera dem i våra projekt som en självklarhet. Nästa gång, fråga dig själv vad mervärdet för den extra ikonen är och hur det jämförs med de andra ikonerna på webbplatsen.
Accentsconagua