ColorPix och "Less is more" UX-förändringar
2019-07-31
Bakgrund
För ett tag sedan lanserade jag de första releaserna (1.0.0 och 1.0.1) för ColorPix - en webbapp som hjälper användare att upptäcka förgpaletter via bilder från Unsplash. Applikationen genererar färgpaletter utifrån bildernas dominanta färger och låter även användare finjustera färgmättnad och ljusstyrka. Justeringen av färpaletterna görs med olika reglage och jag tänkte gå igenom lite förändringar UX-mässigt som gjorts i och med release 1.1.0 - där en ”less is more” approach har förenklat samt förbättrat färgmanipuleringen i ColorPix.
Hantering i version 1.0.1
I stora drag gick färgmanipulering till på följande sätt i version 1.0.1:
Användaren...
- Expanderar ett bildkort för att komma åt färgmanipuleringsvertyget.
- Väljer om färgmättnad eller ljusstyrka är det som ska manipuleras i de olika flikarna.
- Justerar reglage för vald färgmanipulering.
- Klickar på en knapp för att kopiera en färgpalett till urklippet när denne är nöjd med manipuleringen.
Bilden visar manipuleringsvertyget i version 1.0.1
Begränsningar
Vad finns det för begränsningar med gränssnittet i bilden ovan? På rak arm utifrån punktlistan ovan för hur använaren nyttjar verktygen samt skärmbilden för version 1.0.1 kunde jag identifiera följande begränsningar:
Plottrigt
Gränssnittet känns plottrigt då varje manipuleringsmetod (ökad eller minskad färgmättnad osv) är uppdelat i olika reglage, kopieringsknappar och färgrepresentation.
Dold kopieringsknapp
Knappen för att kopiera en färgpalett är dold bakom en knapp som expanderar färgkorten. Användaren har inte heller något intuitivt sätt att kopiera en färgpalett som inte blivit manipulerad. För att kopiera ursprungsfärgerna måste man låta ett reglage vara på 0 och sedan kopiera färgerna i anslutning med knappen för det reglaget.
Ökning och minskning i samma led
I och med att varje färgmanipulering är uppdelad i separata reglage går både ökning och minskning av ljusstyrka och färgmättnad från vänster till höger i reglagen. Detta kan uppfattas som förvirrande då man kanske hellre vill likna justeringen av färgmättnad med en icke-digital termometer som går från minusgraden till plusgrader.
Endast en manipulering åt gången
En återkommande orsak till begränsningar är den ”UX-skuld” som uppstod i designvalet att just separera reglagen med egna färgrepresentationer. Uppdelningen innebär att användaren inte kan justera färgmättnad samtidigt som ljusstyrka för en och samma färgrepresentation. Det är denna punkt som i mitt tycke var den största begränsningen med gränssnittet.
Möjligheter
Vad finns det för möjligheter med gränssnittet? I och med att jag själv ändrade gränssnittet för just färgmanipuleringen är det kanske ingen slump att jag identifierade fler begränsningar än möjligheter med gränssnittet. Dock identifierade jag ändå följande möjligheter:
Utforska oberoende justeringar utifrån samma bild
Utifrån gränssnittets design kan användaren justera med fler manipuleringar samtidigt utan att ett reglage påverkar ett annat. Detta kan ses som en fördel, beroende på hur man vill utforska och skapa sina färgpaletter.
Potentiellt mindre plotter vid ökning av verktyg
Då manipuleringarna är grupperade under flikar minskar en eventuell risk för ett mer plottrigt gränssnitt om verktyget skulle utökas med fler sorters färgmanipuleringar och ännu mer reglage. Dock går det att argumentera för att en ökning av flikar är minst lika plottrigt och användaren får svårt att veta vilket flik som man är ute efter för stunden. Användare kanske dessutom inte skulle vara överens med grupperingen utan vill gruppera flikar och reglage utifrån andra preferenser.
Förbättrad UX i version 1.1.0
Fyra begränsningar och två möjligheter identifierade jag efter att ha använt ColorPix själv sporadiskt i ungefär en månads tid. Sammanfattningsvis kände jag mig begränsad av hur manipuleringsvektyget var utformat och jag kände att jag behövde ta tag i de identifierade begränsningarna för att skapa en bättre användarupplevlese.
Bilden visar manipuleringsvertyget i version 1.1.0
Åtgärdade begränsningar
I och med att jag hade begränsningarna från version 1.0.1 i åtanke när jag utformade det nya gränssnittet kanske det är enklast att utgå från just den listan och lyfta fram hur de punkterna har behandlats:
Mindre plottrigt
Reglage döljs inte längre bakom flikar och varje reglage har inte längre separata färgrepresentationer.
Synlig kopieringsknapp
Kopieringsknappen är flyttad och är inte längre dold bakom expandering av ett bildkort. Eftersom att knappen är flyttad blir det tydligare hur användaren kan kopiera ursprungsfärgerna.
Ökning och minskning av värden åt olika håll
I och med att reglagen för ökning och minskning inte längre är separerade går inte ökning och minskning ut samma håll - från höger till vänster. Nu följer istället reglagen bättre metaforen för en termometer. Minusvärde på reglaget innebär en minskning av exempelvis färgmättnad och ett plusvärde innebär ökning av färgmättnad.
Multipla manipuleringar samtidigt
I och med att reglagen och färgrepresentationerna inte längre är lika hårt knutna i kodbasen går det att låta flera reglage påverka en och samma färgåtergivning. Detta innebär att användaren kan justera exempelvis ökning av färmättnad samtidigt som en minskning av ljusstyrka.
En följdeffekt av att två reglage nu används för att hantera ökning och minskning av exempelvis färgmättnad är att användare inte behöver separera de två handlingarna rent kognitivt. Man arbetar med "färgmättnad" i sin helhet - inte ökning och minskning av färgmättnad separat.
Gemensamt för mycket av de åtgärder som gjorts åt begränsningarna i föregående version handlar om att ta tag i den ”UX-skuld” som följde med designvalet att separera reglagen från varandra (ökning/minskning) samt att ett reglage var hårt knutet till en färgåtergivning i kodbasen - det gick inte att använda reglage-komponenten utan att få med en färgrepresentation för reglaget på köpet.
What's the catch med det nya gränssnittet då?
Vad finns det då för nya begränsningar med det nya gränssnittet? Tittar man på framförallt en av möjligheterna med gränssnittet i version 1.0.1 - möjligheten till oberoende manipuleringar utifrån samma bild så märker man att denna möjlighet har blivit en potentiell begränsning istället. Dock ser jag en bättre ratio med möjligheter/begränsningar med det nya gränssnittet om man jämför med föregående version. Jag väljer ändå att se version 1.1.0 som ett steg i rätt riktning rent UX-mässigt.
Summering av 1.0.1 till 1.1.0
I ett tidigt stadie av ColorPix gjordes några designval som har lett till en del upplevda UX-problem och begränsningar kring verktyget för färgmanipluering. Efter en del användning av befintlig funktionalitet kunde begränsningar identifieras. Problemen handlade i stora drag kring begränsningar i vad användaren kunde göra - på grund av designbeslut i kodbasen. Verktyget upplevdes även otydligt och hade viss dold funktionalitet.
En ”less is more” approach anammades och en del refraktorering av koden för att ta bort för hårt knutna beroenden mellan komponenter. När komponenterna inte längre var lika hårt knutna med varandra kunde en bättre upplevelse skapas där användare kan på ett enklare sätt än tidigare göra mer avancerade färgmanipuleringar.