← Tillbaka till alla artiklar

En knapp i stället för sex ikoner: så fungerar Åtgärder i micali.online

#UX #Åtgärder #Tabeller #Mobilanpassning #Tillgänglighet #Produktnyheter
En knapp i stället för sex ikoner: så fungerar Åtgärder i micali.online

Det finns förändringar som man märker direkt vid första inloggningen, trots att inget nytt egentligen har tillkommit i appen. Den här är precis en sådan förändring. Rader i tabeller — Evenemang, Tjänster, Besökare, Meddelandemallar — slutade hittills alltid med en rad små ikoner. Från och med nu står där i stället en enda knapp med text: Åtgärder.

Det ser ut som kosmetik. I själva verket är det en lösning på det som stört mest på telefonen — och ett beslut som förtjänar en förklaring. Ikoner är ju trots allt snabbare. Varför då ta ett steg tillbaka till en meny?

Vad som var fel med ikonerna

En ikon är inte ett ord. En penna och en papperskorg går att gissa sig till. Men i evenemangslistan stod sex av dem sida vid sida: en nedladdningspil, en kalender, dela, kopiera, en penna, en papperskorg. Vilken av dem schemalägger tider, och vilken skapar en kopia av evenemanget? Den som använder dem varje dag kommer ihåg dem. Den som gör det en gång i månaden gissar på nytt varje gång — och för en av dessa ikoner är ett misstag oåterkalleligt.

En pratbubbla med text fungerar bara för musen. Texten som dyker upp när man håller muspekaren stilla visas aldrig på en pekskärm — fingret har ingenstans att ”stanna”. På telefonen hade du alltså bara ikonens form att gå på, och inget annat. Och en del ikoner saknade textbeskrivningen helt: Redigera och Ta bort i Meddelandemallar hade ingen alls.

De var små, och det farliga satt precis bredvid. Knapparna var 28 pixlar, trots att den rekommenderade träffytan för en fingertryckning är ungefär 44. Papperskorgen satt tätt intill pennan, i samma storlek och samma grå färg.

På telefonen var de dessutom gömda bortom tabellens bredd. Tabellen skrollar i sidled på en smal skärm, och åtgärdskolumnen låg längst ut. För att nå den var du tvungen att först skrolla hela tabellen åt höger — och göra om det för nästa rad.

Tabellraden förr och nu
Tabellraden förr och nu

Så ser det ut nu

På raden finns en enda knapp, Åtgärder. Vad som händer när du klickar beror på enheten:

  • På datorn fälls en meny ut där varje alternativ har både en ikon och ett ord — Schemalägg ditt evenemang, Dela, Kopiera, Redigera, Ta bort.
  • På telefonen kommer en panel upp underifrån och täcker hela skärmens bredd, med rader stora nog för ett tumtryck. Överst i den står namnet på det du arbetar med — besökarens e-post, evenemangets namn. Vid en lång lista med snarlika rader är det viktigare än det låter.
  • Ta bort och andra oåterkalleliga åtgärder är avskilda med en linje och röda. Inte grå och klistrade bredvid Redigera.
  • På telefonen sitter åtgärdskolumnen först på raden — direkt efter kryssrutan, om tabellen har en sådan. Alltså där du ser den utan att behöva skrolla i sidled. På datorn ligger den kvar till höger, precis där den alltid har legat.
Menyn Åtgärder på datorn
Menyn Åtgärder på datorn
På telefonen kommer panelen upp underifrån, och kolumnen Åtgärder ligger först
På telefonen kommer panelen upp underifrån, och kolumnen Åtgärder ligger först

Varför en enda knapp, och inte ikoner

Ikoner är en genväg till något du redan kan. De fungerar utmärkt när det bara är några få och du använder dem varje dag — en pil bakåt, ett kryss för att stänga. Men vid sex åtgärder, där du bara behöver hälften av dem då och då, vänds fördelen om: du sparar en halv sekund vid klicket och betalar för det med sekunder av funderande och enstaka felklick.

En enda knapp delar upp ett svårt beslut (”vilken av de här sex bilderna är den jag vill ha?”) i två enkla: jag vill göra något med den här raden — och sedan läser jag mig till vad. Att läsa är långsammare än att känna igen en form, men det tar aldrig fel.

Det finns också tre mer praktiska skäl:

  • Raden handlar om data. Namn, e-post, datum, kapacitet — det är informationen du egentligen tittar på listan för. Sex ikoner i slutet av varje rad är visuellt brus som upprepas lika många gånger som du har rader.
  • Likadant överallt. Vi har byggt om 28 tabeller på 18 skärmar på det här sättet — inklusive alla sju på sidan Besökare. Du lär dig det en gång, och det gäller i hela appen.
  • Det går att bygga ut. En ny åtgärd är från och med nu en ny rad i menyn, inte ännu en ikon som trycker tabellen längre ut i sidled. Två åtgärder som tidigare krävde en egen kolumn — att använda en meddelandemall och att redigera en tjänstebokning — flyttade rakt in i menyn, och tabellerna blev en kolumn smalare.

Priset för det är ett extra klick på datorn. Det visste vi om när vi bestämde oss, och vi accepterade det: ett klick kostar en halv sekund, en papperskorg som trycks in av misstag kostar betydligt mer.

Var du kommer att se det

Vi har byggt om på det här sättet alla listor i appen: Evenemang och Tjänster, alla flikar på sidan Besökare (besökare, bokningar, tjänstebokningar, Listor, spärrlista), Förbetalda planer och Användning av medlemskap, Meddelandemallar, Formulär och deras svar, Tillgänglighet, Webhooks och Kontoanvändare.

Du behöver varken slå på eller ställa in något — ändringen finns redan i appen nu, på alla 31 språk som micali.online körs på. Om det saknas en åtgärd i någon meny som du hade förväntat dig där, hör av dig till oss: listan över radens åtgärder finns nu på ett enda ställe och är enkel att ändra.

Prova micali.online