Over Frank-ly

Frank-ly is de corporate weblog van Rhinofly en Tribewise. Twee rockende bureaus uit Utrecht met werelddominatie-ambitie op het digitale gebied.

Waarom?

Met gedeelde kennis wordt iedereen beter – dat was de gedachte in 2002 bij de oprichting van Frank-ly.

Een publieke plek waar iedere collega de gevonden parels van het web kan delen, zorgt voor een collectief hoger kennisniveau, wat weer netjes aansluit bij de ambitie voor werelddominatie.Nu (bijna) 10 jaar later staat die gedachte nog steeds en zijn we met 75 auteurs en meer dan 3200+ artikelen volgens onszelf én de awardshows 1 van de leukste blogs van Nederland.
over Frank-ly

Acties op een formulier

4 juni 2009 om 13:57 door in Design

Op een website loopt het contact tussen een bedrijf en zijn klant vaak via een formulier. Dat is opgemaakt uit veldnamen, invulvakken en (meestal) twee knoppen: ‘volgende’ of ‘verzenden’ en ‘vorige’ of ‘annuleren’. Zou er voor het gebruiksgemak mogelijk zijn een standaardpositie voor deze elementen te bepalen zijn?

Er is een grote variatie in de positie van deze elementen en niet alle oplossingen ondersteunen de taak van de gebruiker even goed. Naast de vraag waarom de gebruiker een bepaald veld in moet vullen, is zijn belangrijkst vragen: “Wat is het volgende veld dat ik in moet vullen?”, of “Wat is de volgende stap in de interactie?”. Dat zijn de vragen waarop het formulier al antwoord moet geven vóórdat de gebruiker zich er bewust van is.

Om het antwoord op de eerste vraag te vergemakkelijken, zetten we alle in te vullen vakken van een formulier onder elkaar, ook links uitgelijnd. Daardoor vinden de ogen van de gebruiker recht onder het ingevulde vak het volgende, lege, vak. Dit is een efficiënte manier voor het invullen van formulieren (Jarrett).

In lijn daarmee is het antwoord op de tweede vraag ook makkelijk te geven: de knop die de meest logische actie uitvoert, moet uitgelijnd staan onder deze invulvakken – als volgt:

formulierknoppen_1De veldnamen staan het beste links van de vakken. Door ze links uit te lijnen wordt de lijst makkelijker te scannen, mits de lengte van de veldnamen niet erg groot is (Wroblewski).

Maar waar laat je dan de andere knop? Vaak is er immers nog een tweede actie, waarmee de gebruiker terug kan naar de situatie vóór de klik naar het formulier. Hoewel de ‘back button’ daar nog heel vaak voor gebruikt wordt, is het wel duidelijk om een dergelijke actie ook in het formulier zelf aan te bieden, vooral bij formulieren die uit meerdere pagina’s bestaan.

In het algemeen ging ik er vanuit dat er op basis van onze leesrichting een logische reden is om de knop voor de stap vooruit aan de rechterkant te zetten, en de knop voor de stap achteruit aan de linkerkant. Maar twee artikelen van Luke Wroblewski (bron en bron) brachten mij aan het twijfelen. Hij noemt namelijk het feit dat er in een formulier zelden een ‘heen-en-weer’ navigatie nodig is – vaker is er onderaan het formulier een ‘primary action’ en een ‘secondary action’. Die ‘primary action’ is dan actie die voor de gebruiker het meest voor de hand ligt. En om die reden kan de weergave van die actie anders zijn dan de andere actie. De knop ‘annuleren’ is in dit geval niet zozeer een actie als wel een link naar de vorige pagina, en kan dus als zodanig worden getoond. Daarbij blijft de knop voor de ‘primary action’ wel uitgelijnd aan de invulvakken, zodat het ‘in the line of fire’ voor de gebruiker blijft:
formulierknoppen_2
Wanneer er wel een echte ‘heen-en-weer’ navigatie nodig is (bijvoorbeeld in een wizard), moeten de knoppen wel als gelijke waarden getoond worden:
formulierknoppen_3
Zoals vaker is het dus afhankelijk van de context welke oplossing de beste is. En gelukkig maar: wanneer er één de beste was, zou het ontwerpen van een user interface maar een saaie baan zijn!

Gezocht: enthousiaste lezers die 5 minuutjes van hun tijd willen besteden aan het invullen van het grote Frank-ly lezersonderzoek!

Ja, ik doe mee!

Reacties

  • Interessant stuk, ben ook benieuwd naar je bronnen, want die zijn niet klikbaar.

    Daniel op 04 juni 2009 om 16:49
    http://d-media.nl
  • Daniel, bedankt voor je reactie – en sorry dat ik vergeten was de links erin te zetten. Dat is nu alsnog gebeurd!

    Esther van der Wel op 05 juni 2009 om 9:04
    http://www.frank-ly.nl
  • Hierop inhakend, een aantal stijlvolle designs voor formulieren:
    http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/

    Roland Lamers op 07 juni 2009 om 16:21
  • Het eerste wat me te binnen schoot was: waarom een vorige button nodig. De gebruiker weet de Back button in de browser volgens mij prima te vinden ;)

    Interessante stuk met goede bronnen! Thanks :)

    Michel Kuik op 09 juni 2009 om 17:52
    http://www.michelkuik.nl/wat-ik-doe/webdesign
  • @Esther: dank je voor de links. Ik heb ze bekeken en ik snap nu waarom je dit als bron gebruikt!

    @Michel: Is dat echt zo? En verdwijnt de backbutton niet (ik zie ‘m in mijn firefox niet meer staan)?

    Daniel op 22 november 2009 om 19:38
    http://d-media.nl

Esther den Boer-van der Wel

User interface designer bij Rhinofly

Mijn werk als Usability Consultant bevindt zich tussen alles in: de gebruiker, de opdrachtgever, de techniek... Maar mijn aandacht gaat vooral uit naar de gebruiker. Als hij kan vinden wat hij zoekt, zodat de opdrachtgever daar blij van wordt, ben ik gelukkig!