När ska man använda ikoner?

Inom gränssnittsdesign är ikoner ett vanligt verktyg. Vid toolbars och menyer används de ofta för att förtydliga betydelsen hos en knapp. Men utan utan en etikett är många av dem oanvändbara, eftersom de sällan kan stå på eget ben. Så när ska man använda ikoner? Och hur?

Låt oss börja med att titta på ett populärt exempel –  Microsofts Officepaket. Sedan lång tid har Microsoft använt mängder av ikoner i sina program. Med Office 2007 lanserade man sin Ribbon Bar, ett koncept bestående av flera toolbars som delades upp med hjälp av flikar.

Designmässigt tar konceptet upp ganska stor del av skärmen, inte minst då man har valt att kombinera ikoner och textetiketter. Och jag kan förstå varför man har gjort det. Här är en skärmdump från (webbversionen) av Microsoft Word 365:

office-toolbar-nolabels

Skärmdump från Microsoft Word 365 där etiketterna har klippts bort. Förstår du vad de föreställer?

Kan du gissa vad ikonerna föreställer? Det är inte helt lätt. Lägger man till etiketter blir det däremot (nåja) enklare:

office-toolbar-labels

Skärmdump från Microsoft Word 365 där etiketterna är synliga.

Detta uppmärksammade man själv i ett blogginlägg som lyfter vikten av textetiketter. Tidigare versioner av deras programvaror hade stora verktygsfält med enbart ikoner, vilket försvårade för användarna.

Det man då kan fundera på är varför man använder ikoner överhuvudtaget? Vilket syfte fyller de om vi ändå behöver en text som förklarar vad de betyder?

När ska man använda ikoner?

Det finns inga lagar om när man ska använda ikoner. Men här är några av de riktlinjer jag brukar följa:

När de kan skapa uppmärksamhet.

Ikoner kan användas för att lyfta intresset för ett särskilt element, exempelvis en knapp. Då är det viktigt att man använder ikoner sparsamt så att användaren förstår vad som är viktigt.

I fallet ovan hade man kunnat använda ikoner på några knapparna, vars funktion man vill lyfta fram.

Om man behöver spara skärmutrymme

Om man designar för lägre skärmstorlekar kan man använda enbart ikoner som ett sätt att spara utrymme. Se då till att använda såna som de flesta känner igen. Är du osäker? Testa på din omgivning.

Vilka ikoner ska användas?

En del av problematiken med verktygsfältet i exemplet ovan är att ikonerna knappast är universella. Det beror främst på att funktionen de avser representera är så pass begränsad. För hur ska egentligen en ikon för ”infoga bilder från webben” se ut?

Om man ska använda ikoner bör dessa vara väl använda på andra webbplatser. Det finns mängder avsåna exempel och här följer ett par av dessa:

Vissa hävdar också att ikoner för social media kan fungera fristående, alltså en Facebook–, LinkedIn– och Twitterikon efter ett blogginlägg och en artikel. Jag skulle hävda att de allra flesta tolkar en sådan uppsättning ikoner som någon typ av dela-funktionalitet på din sajt. Det man ska vara medveten om är att det också skulle kunna vara länkar till din personliga sida på respektive plattform.

Så, för säkerhets skull, lägg dit en etikett.

Vilken designmiss, Apple!

Häromdagen berättade min sambo att hon upptäckt en ordentlig designmiss i Apples mobila operativsystem iOS. Apple kanske är det företag som främst förknippas med med god design, där smarta interaktionslösningar och snygga visuella gränssnitt höjt många ögonbryn. Därför var jag också tvekasm till min sambo när hon berättade att hon upptäckt en designmiss.

En designmiss? Av Apple?

Den borttappade AirPlay-enheten

I vårt hem har vi två enheter med stöd för AirPlay – en Apple TV och en AirPort Express. När hon för ett tag sedan skulle strömma innehåll från sin iPad till vår Apple TV hade enheten försvunnit från menyn där man väljer vilken enhet man ska strömma till. Åtminstone såg det ut att vara så.

airplay-smallHon började felsöka problemet eftersom det kan hända att uppkopplingen tappas och trådlösa enheter försvinner. Det visade sig dock vara så att vår Apple TV fungerade utmärkt, men tack vare Apples märkligt designade dropdown-meny hade den blivit dold.

När man klickar fram sina AirPlay-enheter på sin iPad öppnas en meny som listar enhterna. Under menyns titel finns ett tomrum, på ungefär 30 pixlar. Det fyller ingen funktion utan finns bara där. Vi antog att om fler enheter hade funnits så hade tomrummet utnyttjats till att visa en av dessa. Därför antog vi att vår Apple TV inte var online.

Men titta vad som hände när man scrollade lite:

airplay

I sitt designspråk har Apple valt att inte visa en scroll-list när man inte scrollar. I vanliga fall brukar det inte vara några problem, det fungerar exempelvis bra webbläsaren. Men i samband med tomrummet i dropdown-menyn får man känslan av det skulle få plats en till enhet, utan att man skulle behöva scrolla. Därför kunde man inte se den andra enheten.

Jag har tidigare tagit fram ett exempel på dropdown med scroll som med skuggor gör det tydligt att dold information går att scrolla fram. Inlägget hittar ni här.

InVision gör användarna medvetna om vad de tar bort

InVision är en populär webbapplikation som användas för att skapa klickbara prototyper utifrån designskisser. I programmet kan man skapa olika projekt och däri ladda upp de designskisser som ska utgöra den klickbara prototypen. Sedan kan man knyta ihop dem genom att definiera länkade ytor i respektive designskiss.

Häromdagen slog det mig hur snygg deras lösning var för att ta bort ett helt projekt. När man vanligtvis väljer att ta bort någonting i ett program brukar det dyka upp en enkel dialogruta som bekräftar vårt val – om vi har tur.

När jag väljer att ta bort ett projekt i InVision möts jag av följande dialogruta.

En dialogruta i InVision som visas när jag försöker ta bort ett projekt

InVision kräver att jag själv kryssar i – och därmed bekräftar – konsekvenserna av mitt handlande.

 

Dialogrutan listar ett antal punkter som blir konsekvensen av mitt handlande. Punkterna har gjorts om till klickbara checkboxar. Endast genom att bocka för alla punkter kan jag trycka på delete-knappen. På så sätt tvingas jag att läsa igenom vad som står och undviker därigenom förhastade knapptryck.

 

Runkeeper – delning för högerhänta

Jag är något av en ”jojotränare”. Kanske inte i själva utförandet, utan snarare när det handlar om vilka tillbehör jag använder. När det kommer till löpning brukar jag pendla mellan en vanlig GPS-klocka och appen Runkeeper på min iPhone.  Eftersom det tar olidligt lång tid för min GPS-klocka att göra det den ska, nämligen att hitta GPS-sateliter, faller valet ofta på Runkeeper.

runkeeperPrecis som i de flesta träningsappar brukar ett avslutat pass följas upp av möjligheten att dela sitt träningsresultat i sociala medier.

Efter gårdagens löprunda slog det mig hur genomtänkt Runkeepers funktion för detta är.

När man har avslutat sitt pass visas en vy med rubriken ”Tell Your ”Friends”. Här ges användaren ett alternativ som är långt mycket tydligare än andra, nämligen att trycka på Share, för delning av resultatet.

Knappen är placerad precis som samma sätt som en OK-knapp i en helt vanlig dialogruta. Detta bidrar till att det hela nästan upplevs som en vanlig sammanfattning (inte minst när rubriken är nedtonad) där man endast kommer vidare genom att trycka på den blå knappen.

En struktur för högerhänta

Men det är inte bara färg och form som guidar användarna att dela sina resultat. Placeringen av elementen är också väl avvägd.

runkeeper-overlayVåra två alternativ – Share eller Skip är placerade i motsats till varandra. Share är placerad nere till höger, medan Skip hamnar högst uppe till vänster. För mig som högerhänt blir det således mycket bekvämare att trycka på Share.

Skip nås endast genom ansträngning.

I bilden intill har jag försökt illustrera hur långt mina tummar når på skärmen, när jag håller telefonen i höger respektive vänster hand.

Nu vet jag att man inte måste hålla sin telefon i höger hand, bara för att man är högerhänt. Men jag tror ändå att placeringen av vissa element har detta antagande som utgångspunkt.

Det vore ändå kul att se någon statistik som visar om det finns en korrelation mellan antalet delningar och vilken hand man håller telefonen i.

”Hur använder jag Hangout?”

Google Hangout (bilden är lånad härifrån)

Google Hangout (bilden är lånad härifrån)

Min far var på besök hos oss förra helgen. Han är en person som ibland brottas med tekniken – han hänger med, men ibland kan det vara lite stressigt. Pappa är dock nyfiken på ny teknik.

Vi bor inte i samma stad, men försöker ändå hålla kontakten. Bland annat har vi kört FaceTime från hans iPad, vilket har fungerat ganska bra.

Pappas mobil är en Android-lur. Där har man klämt ihop SMS med Google Hangout (jag tror att det är ungefär som med SMS och iMessages på iPhone). Detta gör att när jag skickar ett SMS till pappa så får han ett meddelande i Hangout.

Det bör tilläggas att han är en person som vill ha allt (och alla begrepp) klart för sig innan han börjar använda någonting. Jag hade till exempel stora problem att förklara vad en blogg var för något ( ”Är det en dagbok på internet? Fast som man kan skriva vad man vill i?”). 

En dag frågade han mig en sak:

– ”Hur använder jag Hangout?”

Jag förstod inte riktigt vad han menade och bad att han skulle förklara. Då tog han upp sin telefon. I den hade han fått ett meddelande från min bror. När han öppnade Hangout för att läsa meddelandet visades en typisk meddelandeapp-vy, med vänster– och högerställda pratbubblor och ett textinmatningsfält.

Där körde han fast.

Klickbara pratbubblor

Min bror hade skickat meddelandet ”Hej!” till pappa. Appen visades således en liten bild på minbror, tillsammans med en pratbubbla som löd ”Hej!”.

Istället för att klicka på textinmatningen för att skriva ett eget meddelande, klickade han på själva pratbubblan med texten. Och här kommer det intressanta – pratbubblan gav ifrån sig respons på klicket.

hangout-message

Det visade sig att när man klickar på pratbubblan blir den mörkare, alltså ett active state. Men därefter händer inget. Det är som att klicka på en länk utan att någonting händer.

Senare ska det visa sig att man kan hålla fingret nedtryckt en stund för att kopiera textmeddelandet. Detta är dock inte helt självklart.

Det som är intressant är hur min pappa tänker. Han har fått ett meddelande, som han vill svara på. Han tänker sig att han ska svara på just det meddelandet och trycker därför på det.

Otydlig textinmatning

När jag ber pappa att istället klicka på textrutan kan han inte hitta den.

Inmatningsfältet består av en helvit rektangel med den ljusgrå texten ”Send a message”. Den är ett exempel på Flat UI och går helt i linje med Googles övriga design. Det är rent och snyggt.

Men jag tänker ändå att man hade kunnat göra det lite enklare att förstå.

Den vänstra bilden är en skärmdump från Google Hangout. I den högra har jag gjort textinmatningen tydligare.

Den vänstra bilden är en skärmdump från Google Hangout. I den högra har jag gjort textinmatningen tydligare.

I denna bild har jag gjort det tydligare att det vita fältet är en textruta. Dessutom har jag förstärkt texten genom att förklara att man ska klicka här för att skriva.

Sammanfattning

Detta är långt ifrån någon empirisk undersökning, utan snarare en observation från vardagen. Google Hangout har en hel uppsjö med användare och uppenbarligen verkar de flesta kunna skicka meddelanden till varandra.

Det är dock intressant att se hur problem kan uppstå när personer som är mindre vana ska anamma tekniken.