← Tilbake til alle artikler

Én knapp i stedet for seks ikoner: slik fungerer Handlinger i micali.online

#UX #Handlinger #Tabeller #Mobiltilpasning #Tilgjengelighet #Produktnyheter
Én knapp i stedet for seks ikoner: slik fungerer Handlinger i micali.online

Det finnes endringer du legger merke til med én gang ved første innlogging, selv om det egentlig ikke har kommet noe nytt i appen. Denne er nettopp en slik. Rader i tabeller — Arrangementer, Tjenester, Besøkende, Meldingsmaler — endte tidligere alltid med en rekke små ikoner. Fra nå av står det i stedet én knapp med tekst: Handlinger.

Det ser ut som kosmetikk. I virkeligheten er det en løsning på det som forstyrret mest på telefonen — og en beslutning som fortjener en forklaring. Ikoner er tross alt raskere. Hvorfor da ta et skritt tilbake til en meny?

Hva som var galt med ikonene

Et ikon er ikke et ord. En blyant og en søppelbøtte kan du gjette deg til. Men i listen over arrangementer sto seks av dem side om side: last ned, kalender, del, kopier, blyant, søppelbøtte. Hvilket av dem planlegger datoer, og hvilket lager en kopi av arrangementet? Den som bruker dem daglig, husker det. Den som gjør det én gang i måneden, gjetter på nytt hver gang — og ved ett av disse ikonene er en feil ugjenkallelig.

En tekstboble er bare for musen. Teksten som dukker opp når du holder musepekeren stille, vises aldri på en berøringsskjerm — fingeren har ingen steder å «stoppe». På telefonen hadde du derfor bare ikonets form å gå etter, og ikke noe annet. Og noen av ikonene manglet til og med den teksten: Rediger og Slett i Meldingsmaler var helt uten.

De var små, og det farlige satt rett ved siden av. Knappene var 28 piksler, selv om den anbefalte berøringsflaten er rundt 44. Søppelbøtten satt helt inntil blyanten, i samme størrelse og samme grå farge.

På telefonen var de dessuten gjemt bak tabellens bredde. Tabellen skrolles sidelengs på en smal skjerm, og handlingskolonnen lå sist. For å nå den måtte du først skrolle hele tabellen mot høyre — og gjøre det igjen ved neste rad.

Tabellraden før og nå
Tabellraden før og nå

Slik ser det ut nå

På raden er det én knapp, Handlinger. Hva som skjer når du klikker, avhenger av enheten:

  • På datamaskinen folder det seg ut en meny der hvert punkt har både et ikon og et ord — Planlegg arrangementet ditt, Del, Kopier, Rediger, Slett.
  • På telefonen kommer det opp et panel nedenfra som dekker hele skjermens bredde, med rader store nok for en tommel. Øverst i det står navnet på det du jobber med — den besøkendes e-post, arrangementets navn. Ved en lang liste med like rader er det viktigere enn det høres ut som.
  • Slett og andre ugjenkallelige handlinger er skilt ut med en strek og røde. Ikke grå og klistret oppå Rediger.
  • På telefonen ligger handlingskolonnen først i raden — rett etter avkrysningsboksen, hvis tabellen har en. Altså der du ser den uten å måtte skrolle sidelengs. På datamaskinen ble den stående til høyre, akkurat der den alltid har vært.
Menyen Handlinger på datamaskinen
Menyen Handlinger på datamaskinen
På telefonen kommer panelet opp nedenfra, og kolonnen Handlinger ligger først
På telefonen kommer panelet opp nedenfra, og kolonnen Handlinger ligger først

Hvorfor én knapp, og ikke ikoner

Ikoner er en snarvei til noe du allerede kan. De fungerer utmerket når det er få av dem og du bruker dem daglig — en pil tilbake, et kryss for å lukke. Men ved seks handlinger, der du bare trenger halvparten en gang iblant, snus fordelen om: du sparer et halvt sekund ved klikket og betaler for det med sekunder med grubling og et og annet feilklikk.

Én knapp deler én vanskelig beslutning («hvilket av disse seks bildene er mitt?») i to lette: jeg vil gjøre noe med denne raden — og så leser jeg meg til hva. Å lese er tregere enn å kjenne igjen en form, men det tar aldri feil.

Det er også tre mer praktiske grunner:

  • Raden handler om data. Navn, e-post, dato, kapasitet — det er informasjonen du egentlig ser på listen for. Seks ikoner i enden av hver rad er visuell støy som gjentas like mange ganger som du har rader.
  • Likt overalt. Vi har bygget om 28 tabeller på 18 skjermer på denne måten — inkludert alle syv på siden Besøkende. Du lærer det én gang, og det gjelder i hele appen.
  • Det kan bygges ut. En ny handling er fra nå av en ny linje i menyen, ikke enda et ikon som presser tabellen enda lenger ut til siden. To handlinger som tidligere krevde sin egen kolonne — å bruke en meldingsmal og å redigere en tjenestebestilling — flyttet dermed rett inn i menyen, og tabellene ble en kolonne smalere.

Prisen for det er ett ekstra klikk på datamaskinen. Det visste vi da vi bestemte oss, og vi aksepterte det: et klikk koster et halvt sekund, en søppelbøtte trykket ved en feil koster vesentlig mer.

Hvor du vil se det

Vi har bygget om på denne måten alle lister i appen: Arrangementer og Tjenester, alle faner på siden Besøkende (besøkende, bestillinger, tjenestebestillinger, Lister, svarteliste), Forhåndsbetalte planer og Bruk av medlemskap, Meldingsmaler, Skjemaer og svarene deres, Tilgjengelighet, Webhooks og Kontobrukere.

Du trenger ikke slå på eller stille inn noe — endringen er allerede i appen nå, på alle 31 språk micali.online kjører på. Hvis du savner en handling i en meny du hadde forventet den i, skriv til oss: listen over radens handlinger ligger nå ett sted og er enkel å endre.

Prøv micali.online