Category Archives: Design

Intressanta gränssnittsdetaljer

Posted on by
Reply

Här följer ett utplock av mer eller mindre intressanta gränssnittsdetaljer jag har stött på den senaste tiden. Huruvida tjänsternas användare faktiskt förstår dessa designlösningar låter jag dock vara osagt…

Buzzword

Buzzword är Adobes flashbaserade ordbehandlare. Snyggare än Google Docs men å andra sidan segare att ladda in. Buzzword har valt att visa antalet sidor i scrollbaren:

Scrollbaren i Buzzword visar dokumentets antal sidor

Att det finns många användare på nätet som uppskattar gulliga bilder används på detta sätt:

En bild som visar när anslutningen till Buzzword har blivit avbruten

Boken Mental Models

Nedan följer ett exempel på hur boken Mental Models visualiserar hur långt varje kapital är. Det kan dock ifrågasättas om det är ett kapitels sidantal som motsvarar hur lång tid det tar att läsa något…

En visualisation i boken Mental Models som visar hur långt ett kapitel är

Classics

Classics, ett iPhone-bokprogram som innehåller många av de gamla bokklassikerna, indikerar på ett diskret sätt hur långt man har läst en bok.

En bild på bokprogrammet Classics

All Recipes

Ett annat snyggt och smidigt iPhone-program är All Recipes. Förutom en sökfunktion erbjuder också programmet en så kallad ”Dinner spinner” för den som vill ha ett förslag på ett recept. Roligt, snyggt och framförallt effektivt.

En "Dinner Spinner" används i receptprogrammet All Recipes när man ska leta efter recept.

Skim

Om du är en flitig PDF-läsare, macanvändare samt tycker att Förhandsvisning/Preview inte riktigt räcker till kan jag rekommendera PDF-läsarprogrammet Skim. Programmet visar ett spår av hur du som användare har klickat i innehållsförteckningen genom att ändra kapitlens bakgrundsfärg. Mörk bakgrundsfärg betyder att du nyligen har klickat på kapitlet, ljus att du klickade på kapitlet för ett tag sedan. Smidigt när man tex. har glömt bort vilket kapitel som redan har blivit skumläst.

Innehållsförteckningen i Skim visar ett spår över hur du tidigare har klickat.

Gränssnittsdesign och prioriteringar

Posted on by
5

Två tydliga exempel på hur annorlunda Apple respektive Microsoft tänker (eller inte tänker…) när det kommer till gränssnittsdesign är hur man startar en presentation i deras presentationsprogram.

I Apples Keynote så finns det en tydlig Play-knapp i början på menyraden:

Keynote

Microsofts PowerPoint 2003 är överbelamrat med ikoner. En av de viktigaste, nämligen knappen för att starta en presentation, ligger dock gömd nere i det vänstra hörnet (ikon nummer 3 sett från vänster). Metaforen är också i mitt tycke mycket sämre:

PowerPoint

Varför det ska vara så svårt att luska ut hur man startar en presentation i PowerPoint är för mig obegripligt. Användaren kan visserligen starta sin presentation genom att gå in i menyn (vilket hon även kan göra i Keynote) men det visar ändå på en markant brist i funktionalitetsprioriteringen vid designen av gränssnittet. Man kan inte visa alla funktioner på en gång, utan man måste välja ut de som användaren har mest nytta av och placera övriga i underkategorier.

Det ska även tilläggas att den senaste versionen av PowerPoint, som har fått versionsnamnet 2007, inte är mycket bättre – trots att ett av mottona just var att prioritera och gömma undan funktioner. Se till exempel dessa skärmdumpar där knappen nu istället finns att hitta nere till höger i fönstret.

Ett abstrakt koncept för antal

Posted on by
3

Förra veckan upptäckte jag något intressant när jag testade nyhetsläsaren NewsLife. De flesta (alla?) nyhetsläsarapplikationer till OS X visar antalet olästa blogginlägg i form av siffror i sin dockikon. Det gör även NewsLife, men när antalet olästa inlägg har passerat 1000 visas texten ”Lots” istället.

Nedan ser du en jämförelse för hur dockikonerna för NewsFire och just NewsLife ser ut vid över 1000 olästa inlägg:

‘Nyhetsläsaren NewsLife visar texten Lots istället för att explicit skriva antalet olästa poster

Personligen tycker jag att NewsLifes gräns är lite väl hög. Behöver användaren verkligen veta om det är 132 eller 245 olästa inlägg?

Vad föredrar du?

Detalj i tvättstugan

Posted on by
3

Jag gillar smarta detaljer. Små och (oftast) enkla lösningar som får en att tänka ”aha, detta var smart tänkt”.

En detalj som jag gillar finns på undersidan av locket till tvättmedelsfacket på en av tvättmaskinerna i min tvättstuga.

Locket har på ovansidan två bilder, det till vänster symboliserar förtvätt och det till höger huvudtvätt.

Ovansidan av locket till tvättmedelsfacket

Att komma ihåg vilket fack som hör till vilken typ av tvättmedel är nog något de flesta glömmer bort så fort de öppnar luckan (det heter korttidsminnet av en anledning…). Detta lock är dock smart designat, när man öppnar det finns likadana symboler även på undersidan.

Undersidan av locket till tvättmedelsfacket

En knapp mindre

Posted on by
2

Alla borde sträva efter att göra saker enklare. Ett smart sätt att minska antalet knappar i en kundkorg är att göra som Acne Jeans (eller snarare deras e-handelsleveratör Panagora Room).

De flesta e-handlare har både ett fält för antal samt en ta bort-knapp:

NetonNet:s kundkorg

Amazons kundkorg

Acne Jeans slår två flugor i en smäll genom att kombinera antal och ta bort till en enda funktion. Klickar du på pluset ökas antalet, klickar du på minuset (förutsatt att antalet är 1) så tas varan bort:

Acne Jeans kundkorg

Ny karta över SL:s trafik

Posted on by
2

SL:s nya karta

För några dagar sedan såg att jag att en ny karta över SL:s spårbundna linjer var uppsatt på Fridhemsplans t-banestation.

Jag googlade lite ikväll och hittade en intressant diskussion på Svenska Spårvägssällskapets Forum där kartan både får ris och ros.

Just kartor över tunnelbanesystem är intressanta ur ett informationsdesign perspektiv. Londons tunnelbanekarta, skapad av Harry Beck, är en klassiker i denna genre. Krisin Hammerberg från Lumano, berättar mer om detta i artikeln ”Informationsdesign runt omkring oss”.

På min Flickrsida finns förresten en bild av Paris tunnelbanekarta samt en annan på kartan över stadens pendeltåg.