Utseende - nuvarande färgdesign av flikar leder till klick på fel knapp

  • 2
  • Idé
  • Uppdaterades för 1 år sedan
  • Inte planerade
Det här inlägget berör utseendet i Visma och hur det påverkar användningen och potentiellt leder till felhantering. Jag är medveten om att utseendet delvis är en fråga om tycke och smak och att vi alla ser/uppfattar detaljer i ett gränssnitt på olika sätt. Med det skrivet...

Bakgrund
Flertalet programdelar i eEkonomi har vyer som internt uppdelade i flikar. Dessa flikar är idag utformade som något som bäst beskrivas som en rad (linje) med knappar. Den flik som är aktiv/visas representeras av en knapp i intryckt läge och övriga, icke-visade, flikar representeras av knappar utan särskild märkning.
Den aktiva, "intryckta", knappen har samma bakgrundsfärg som omkringliggande bakgrund. De icke-aktiva/ej-visade flikarna/knapparna har en ljusare färg än den aktiva flikens knapp och därmed även ljusare färg än omkringliggande bakgrund.

Problem
Ögat (blicken) riktas hos människan (mer eller mindre omedvetet) mot ljusare fläckar. Det är en allmänt vedertagen faktor som vägs in många sammanhang, tex militära kamouflage. Det gör att i Vismas nuvarande design så lägger ögat snabbare märke till de icke-aktiva flikarna. Eftersom den aktiva flikens knapp dessutom har samma bakgrundsfärg som omgivningen så smälter den nästan helt ihop med bakgrunden. Dess två faktor tillsammans gör att risken ökar markant att användaren "läser" webbsidan på fel sätt. Man uppfattar helt enkelt det som att man har en annan flik uppe än det man egentligen tittar på.

Utvecklarna tycks försökt att motverka detta genom att markera den aktiva flikens knapp med en grön rand i nederkanten av knappen. Min personligen bedömning är att det inte hjälper. Snarare så leder det till ett annat designproblem - vad står grönt för i gränssnittet? Det tycks ofta användas för att lyfta fram det primära alternativet bland knappar användare kan klicka på men här markerar det istället en knapp som är helt inaktiv och som inte går att klicka på.

Förslag (Idé)
Alternativ 1: Ändra utseende till att mer verkligen likna flikar. Låt den aktiva flikens knapp se ut som en verklig flik och som inte har någon skiljelinje ("border") mellan knappen och vyn som visas. Övriga flikar/knappar bör ha en mörkare bakgrundsfärg för att på så sätt markera att det är "bakom" den nuvarande fliken.
Alternativ 2: Vilken annan utformning som helst som inte är den nuvarande färgdesignen. :-)

Kommentar
1. Det finns många andra varianter i gränssnittet med knappar på rad eller i kolumn men min upplevelse att på övriga platser fungerar det därför ofta har att den aktiva knappen en avvikande färg än bakgrunden och/eller övriga knappar/alternativ är mörkare än omgivningen. Att de är mörkare än omgivningen är viktigare än att de är mörkare än den aktiva knappen/alternativet.
 
2. Mitt statistiska underlag är visserligen väldigt litet, det är bara två användare, men jag märker att vi båda två i vårt företag gång på gång klickar fel eller missar att klicka på grund av den nuvarande designen. Vi är två användare som är väldigt olika som personer och som "läser" av en websida på helt olika sätt. ("Röd" respektive "blå" beteenden :-)) Ändå blir detta fel för oss båda. Det är därför min tro att det är ett "fel" som drabbar även andra användare.

3. Detta gäller naturligtvis för alla Vismas system som har samma design.
Foto på Khedron Wilk

Khedron Wilk, Champion

  • 16,034 poäng 10k badge 2x thumb

Publicerades för 2 år sedan

  • 2
Foto på Lars R

Lars R

  • 10,370 poäng 10k badge 2x thumb
Jag håller fullständigt med. Tror alltid att det är en annan flik som är aktiv än den som visas! 
Det här är en effekt, dels av att man gjort en "minimalistisk" design med ett så utslätat utseende som möjligt, dels att man helt enkelt tänkt fel när det gäller hur ögat fungerar.
Tacka vet jag hur allt såg ut före den "stora förbättringen"!
Foto på Jenny Sjöström Sannéus

Jenny Sjöström Sannéus, Application Specialist eEkonomi/Website/Webshop

  • 7,686 poäng 5k badge 2x thumb
Hej på er!

Att eEkonomi ser ut som det gör är för att vi följer guidelines som är framtagna för alla våra Vismatjänster, så precis som du skriver Khedron har alla våra tjänster samma design. 

Vi håller med om att det inte är helt optimalt i vissa lägen men just nu är det inte planerat att förändra. Men sker det någon ändring så uppdaterar självklart i tråden:)

Ha en fin dag!
/Jenny