← Terug naar alle artikelen

Waarom we de icoontjes verruilden voor één knop: Acties

#Acties-knop #UI-ontwerp #Mobiele bruikbaarheid #Tabellen #Iconen #Product-update
Waarom we de icoontjes verruilden voor één knop: Acties

Er zijn wijzigingen die je meteen opmerkt bij de eerste keer inloggen, ook al is er in de app niets nieuws bijgekomen. Dit is precies zo'n wijziging. Rijen in tabellen — evenementen, diensten, bezoekers, berichtsjablonen — eindigden tot nu toe met een rij kleine icoontjes. Vanaf nu staat op die plek één knop met een label: Acties.

Het lijkt cosmetisch. In werkelijkheid is het een reparatie van wat op de telefoon het meeste stoorde — en een beslissing die een uitleg verdient. Icoontjes zijn toch sneller. Waarom dan een stap terug naar een menu?

Wat er mis was met de icoontjes

Een icoon is geen woord. Een potlood en een prullenbak zijn nog wel te raden. Maar in de lijst met evenementen stonden er zes naast elkaar: downloaden, kalender, delen, kopiëren, potlood, prullenbak. Welke ervan plant data in en welke maakt een kopie van het evenement? Wie het dagelijks gebruikt, onthoudt het. Wie het één keer per maand doet, gokt elke keer opnieuw — en bij een van die icoontjes is een vergissing onomkeerbaar.

Een tekstballon met uitleg is er alleen voor de muis. De uitleg die verschijnt als je de cursor erop laat staan, zie je op een touchscreen nooit — een vinger kan nergens "blijven hangen". Op de telefoon had je dus alleen de vorm van het pictogram, en verder niets. En een deel van de icoontjes had zelfs die uitleg niet: bewerken en verwijderen bij berichtsjablonen hadden er helemaal geen.

Ze waren klein, en het gevaarlijke stond er vlak naast. De knoppen waren 28 pixels, terwijl het aanbevolen aanraakdoel ongeveer 44 is. De prullenbak zat vlak naast het potlood, in dezelfde grootte en dezelfde grijze kleur.

Op de telefoon zaten ze bovendien verstopt achter de breedte van de tabel. Een tabel schuift op een smal scherm zijwaarts, en de kolom met acties stond helemaal achteraan. Om erbij te komen, moest je eerst de hele tabel naar rechts scrollen — en bij de volgende rij weer opnieuw.

Tabelrij vroeger en nu
Tabelrij vroeger en nu

Hoe het er nu uitziet

Op de rij staat één knop Acties. Wat er gebeurt na een klik, hangt af van je apparaat:

  • Op de computer klapt een menu open waarin elk item een icoontje én een woord heeft — Plan je evenement, Delen, Kopiëren, Bewerken, Verwijderen.
  • Op de telefoon schuift van onderaf een paneel over de volle breedte van het scherm, met rijen die groot genoeg zijn voor een duim. In de kop ervan staat de naam van het record waarmee je bezig bent — het e-mailadres van de bezoeker, de naam van het evenement. Bij een lange lijst van gelijkende rijen is dat belangrijker dan het klinkt.
  • Verwijderen en andere onomkeerbare acties staan gescheiden door een lijn en zijn rood. Niet grijs en vastgeplakt aan Bewerken.
  • Op de telefoon staat de kolom met acties vooraan in de rij — meteen na het selectievakje, als de tabel er een heeft. Dus daar waar je hem ziet zonder zijwaarts te hoeven scrollen. Op de computer bleef hij rechts, precies waar hij al stond.
Menu Acties op de computer
Menu Acties op de computer
Op de telefoon schuift een paneel van onderaf omhoog en de kolom Acties staat vooraan
Op de telefoon schuift een paneel van onderaf omhoog en de kolom Acties staat vooraan

Waarom één knop, en geen icoontjes

Icoontjes zijn een afkorting voor iets wat je al weet. Ze werken uitstekend als er weinig van zijn en je ze dagelijks gebruikt — een pijl terug, een kruisje om te sluiten. Bij zes acties, waarvan je de helft maar af en toe nodig hebt, keert het voordeel zich om: je bespaart een halve seconde op een klik en betaalt daarvoor met seconden nadenken en af en toe een verkeerde klik.

Eén knop verdeelt één lastige beslissing ("welke van die zes plaatjes is de mijne?") in twee makkelijke: ik wil iets doen met deze rij — en dan lees ik het gewoon. Lezen is trager dan een vorm herkennen, maar het vergist zich nooit.

Er zijn ook drie praktischere redenen:

  • Een rij gaat over gegevens. Naam, e-mail, datum, capaciteit — dat is de informatie waarvoor je naar de lijst kijkt. Zes icoontjes aan het einde van elke rij zijn visuele ruis, die zich herhaalt zo vaak als je rijen hebt.
  • Overal hetzelfde. We hebben zo 28 tabellen op 18 schermen omgebouwd — inclusief alle zeven op de pagina Bezoekers. Je leert het één keer en het geldt in de hele app.
  • Het is uit te breiden. Een nieuwe actie is voortaan een nieuwe regel in het menu, geen extra icoontje dat de tabel nog verder opzij duwt. Twee acties die eerder om een eigen kolom vroegen — een berichtsjabloon gebruiken en een dienstbestelling bewerken — zijn hierdoor rechtstreeks naar het menu verhuisd, en de tabellen zijn een kolom smaller geworden.

De prijs daarvoor is één klik extra op de computer. Die kenden we toen we de beslissing namen, en we hebben hem geaccepteerd: een klik kost een halve seconde, een per ongeluk ingedrukte prullenbak kost een stuk meer.

Waar je het ziet

Zo hebben we alle lijsten in de app omgebouwd: Evenementen en Diensten, alle tabbladen van de pagina Bezoekers (bezoekers, reserveringen, dienstbestellingen, Lijsten, blacklist), Prepaidpakketten en Lidmaatschapsgebruik, Berichtsjablonen, Formulieren en hun antwoorden, Beschikbaarheid van diensten, Webhooks en ook Accountgebruikers.

Je hoeft niets in te schakelen of in te stellen — de wijziging staat nu al in de app, en in alle 31 talen waarin micali.online draait. Mis je in een menu een actie die je daar zou verwachten, laat het ons weten: de lijst met rijacties staat nu op één plek en is eenvoudig aan te passen.

Probeer micali.online