[Web] Keuze van controls ivm gebruikersvriendelijkheid

[Verwijderd]

Ik zit met een vraag, voor welk soort data is welke control het handigst:

Voorbeeldje
ik moet een groot formulier maken om gegevens in te voeren, nu is er gekozen voor pulldown menu's om bijvoorbeeld ja/nee keuzes te maken, ik vindt dat een gebruiker zo min mogelijk moet klikken om een actie uit te kunnen voeren, dus een pulldown menu voor het kiezen van twee waardes vind ik onzinnig, een radiobutton is veel zinniger (dan hoeft de gebruiker immers maar 1 keer te klikken om een keuze te maken, bij een pulldown menu twee keer. Ook kan een gebruiker in een oogopslag zien wat zijn keuzes zijn. Dus logischerwijs moet het een array van radiobuttons worden.

Er zijn natuurlijk nog veel meer datatypes en keuzes mogelijk, wat zijn hier de stelregels voor om het de gebruiker zo makkelijk mogelijk te maken, ik heb al veel gezocht op internet maar vindt meestal ongefundeerde meningen van mensen. Mij lijkt het leuk om per datatype de meest logische control te vinden.

[Cyphax]

Voor een ja/nee zou ik zelfs geen radiobutton gebruiken maar een checkbox (neemt minder ruimte in, en is logischer). Voor een lijst waarden die vaststaan zou ik een pulldown gebruiken als dat er meerdere zijn, en dat nog uitgebreid zou kunnen worden. Radiobuttons zou ik neerzetten bij een korte lijst (max 3 of 4 items ofzo) die ook vast staat (geslacht bijv.).
Verder kun je proberen bij forms goede defaults te suggereren maar dat valt buiten de scope van je vraag.

[Verwijderd]

Cyphax schreef op maandag 27 februari 2006 @ 09:10:
Voor een ja/nee zou ik zelfs geen radiobutton gebruiken maar een checkbox (neemt minder ruimte in, en is logischer). Voor een lijst waarden die vaststaan zou ik een pulldown gebruiken als dat er meerdere zijn, en dat nog uitgebreid zou kunnen worden. Radiobuttons zou ik neerzetten bij een korte lijst (max 3 of 4 items ofzo) die ook vast staat (geslacht bijv.).
Verder kun je proberen bij forms goede defaults te suggereren maar dat valt buiten de scope van je vraag.

Waarom is een selectbox logischer, de gebruiker kan ten eerste de waardes niet direct zien en moet twee keer klikken, en waardes van radiobuttons kan je naast elkaar plaatsen (ja en nee neemt niet zoveel ruimte in).

Hoeveel geslachten ken je trouwens? Tenzij je een dieren database maakt ken ik er maar 2

[kaassouffle]

checkbox..geen selectbox... is maar een vakje.

Grafisch verantwoord voorbeeld:

Radiobuttons:
Wilt u soep?
( ) ja ( ) nee

Checkbox:
Wilt u soep?
[ ] ja

(open laten is dus 'nee')

Of je stelt de vraag anders:
[ ] Ja, ik wil soep

[ Voor 15% gewijzigd door kaassouffle op 27-02-2006 09:21 ]

[Verwijderd]

kaassouffle schreef op maandag 27 februari 2006 @ 09:20:
checkbox..geen selectbox... is maar een vakje.

Grafisch verantwoord voorbeeld:

Radiobuttons:
Wilt u soep?
( ) ja ( ) nee

Checkbox:
Wilt u soep?
[ ] ja

(open laten is dus 'nee')

Of je stelt de vraag anders:
[ ] Ja, ik wil soep

Sorry niet goed gelezen, maar volgens mij is de stelregel voor selectboxes: meerdere keuzes mogelijk, zoniet dan een radiobuttonset...naar mijn mening geef je bij een selectbox met een keuze niet voldoende weer over wat de consequenties zijn als je de keuze niet maakt. (Tenzij er extra uitleg bij staat, maar dan zou je dus ook meteen kunnen kiezen voor een radiobuttonset).

[ Voor 20% gewijzigd door Verwijderd op 27-02-2006 09:45 ]

[CH4OS]

Bij mij op school had ik een vak met de naam 'User InterFaces'. Heb toen ooit eens wat richtlijnen gekregen:

• Dingen aanvinken: Checkbox (Denk hierbij aan dat je bijvoorbeeld een gebruikersovereenkomst hebt gelezen)
• Keuze opties (minimaal 2, maximaal 4): Radiobuttons (Denk hierbij aan ja of nee opties)
• Keuze opties (minimaal 4, maximaal 8): Dropdown (<select>)

Hopelijk heb je hier wat aan...

Dit zijn tevens eigenlijk ook richtlijnen die ik zelf aanhoud, reden hiervoor is eigenlijk ook wel dat het je formulier(en) duidelijker maakt en dat het gewoon voor zich 'spreekt'...

Over het voorbeeldje van de soep, dat zou dan in dit geval dus een radio button zijn, met 2 radio buttons er in...

[ Voor 11% gewijzigd door CH4OS op 27-02-2006 09:48 ]

[Tubby]

GJ-tje schreef op maandag 27 februari 2006 @ 09:47:
Bij mij op school had ik een vak met de naam 'User InterFaces'. Heb toen ooit eens wat richtlijnen gekregen:

• Dingen aanvinken: Checkbox (Denk hierbij aan dat je bijvoorbeeld een gebruikersovereenkomst hebt gelezen)
• Keuze opties (minimaal 2, maximaal 4): Radiobuttons (Denk hierbij aan ja of nee opties)
• Keuze opties (minimaal 4, maximaal 8): Dropdown (<select>)

Hopelijk heb je hier wat aan...

Dit zijn tevens eigenlijk ook richtlijnen die ik zelf aanhoud, reden hiervoor is eigenlijk ook wel dat het je formulier(en) duidelijker maakt en dat het gewoon voor zich 'spreekt'...

Over het voorbeeldje van de soep, dat zou dan in dit geval dus een radio button zijn, met 2 radio buttons er in...

Het kan ook een kwestie van zijn van willen weten of een gebruiker na een bepaalde optie heeft gekeken.

Bij een checkbox weet je niet zeker of een gebruiker er naar heeft gekeken, misschien heeft ie het gezien of misschien was het een bewuste keuze om 'm niet gechecked te hebben. Als je in die situatie een combobox met ja/nee/leeg(default) gebruikt kun je iig controleren of de gebruiker ja of nee heeft geselecteerd (en niet leeg)

[CH4OS]

Tubby schreef op maandag 27 februari 2006 @ 09:54:
Het kan ook een kwestie van zijn van willen weten of een gebruiker na een bepaalde optie heeft gekeken.

Dat weet je bij een radio button natuurlijk ook niet... Maar je controleerd dan de form toch, of de verplichte 'items' een waarde bevatten, dan laat je het posten doorgaan en kan je PHP het gepostte form nogmaals controleren, maar dan voor validiteit, dus of de ingevoerde variabelen wel kloppen met wat je wil / verwacht

Bij een checkbox weet je niet zeker of een gebruiker er naar heeft gekeken, misschien heeft ie het gezien of misschien was het een bewuste keuze om 'm niet gechecked te hebben. Als je in die situatie een combobox met ja/nee/leeg(default) gebruikt kun je iig controleren of de gebruiker ja of nee heeft geselecteerd (en niet leeg)

Dat is bij een radio button ook, die kan een gebruiker ook niet per se geselecteerd hebben, wat je wél kan doen, is een standaard waarde alvast invullen... Dus een checkbox of radio button op 'selected' zetten... Dan hoeft de user er niet per se naar te kijken, omdat je de 'default' waarde al hebt ingevult...

Kleine tip: Zet alleen het minimale vereiste op je form, bepaalde dingen kunnen gebruikers dan eventueel later 'instellen' of je maakt gebruik van 'stappen'...

[Cyphax]

Verwijderd schreef op maandag 27 februari 2006 @ 09:33:
[...]


Sorry niet goed gelezen, maar volgens mij is de stelregel voor selectboxes: meerdere keuzes mogelijk, zoniet dan een radiobuttonset...naar mijn mening geef je bij een selectbox met een keuze niet voldoende weer over wat de consequenties zijn als je de keuze niet maakt. (Tenzij er extra uitleg bij staat, maar dan zou je dus ook meteen kunnen kiezen voor een radiobuttonset).

Heb je het nu weer over een checkbox?
Zo ja: het is ook niet zozeer een vraag die je erbij moet stellen imo, maar een stelling die een gebruiker kan ontkennen of bevestigen. Niet "Wilt u een maandelijkse nieuwsbrief ontvangen? [x]" maar "Ik wil de maandelijkse nieuwsbrief ontvangen [x]" oid.
Ik zou ook altijd zorgen dat het niet heel belangrijk is als een gebruiker daar niet naar heeft gekeken, en een goede standaardwaarde invullen. Als een gebruiker per se EXPLICIET ja of nee moet zeggen kun je altijd nog een set radiobuttons neerzetten en standaar leeglaten, en bij de formcontrole aangeven dat er een keuze gemaakt moet worden. Maar dan heb je dus 3 opties: ja, nee of niet ingevuld en dat kan bij een checkbox niet.

[ Voor 23% gewijzigd door Cyphax op 27-02-2006 10:15 ]

[Verwijderd]

een checkbox geeft een bias en meer kans op foutief invullen. Een (van tevoren blanko) radiogroup dwingt de gebruiker beter te lezen. Afhankelijk van het doel kan je voor het een of het ander kiezen.

(wil je spam door iemands neus duwen, zet dan onderaan een checkbox die standaard checked is, ertussen een lap tekst, en bovenaan een submit met "sluit venster" erop)

[ Voor 5% gewijzigd door Verwijderd op 27-02-2006 10:24 ]

[Verwijderd]

Hier dus een bovenliggend probleem: Wil je de gebruiker sturen of wil je het hem/haar zo makkelijk mogelijk maken?

[CH4OS]

Ik denk eerder, dat je de gebruiker wilt sturen, zodat het voor de gebruiker zo makkelijk mogelijk word...

[Tubby]

GJ-tje schreef op maandag 27 februari 2006 @ 09:59:
[...]
Dat weet je bij een radio button natuurlijk ook niet... Maar je controleerd dan de form toch, of de verplichte 'items' een waarde bevatten, dan laat je het posten doorgaan en kan je PHP het gepostte form nogmaals controleren, maar dan voor validiteit, dus of de ingevoerde variabelen wel kloppen met wat je wil / verwacht


[...]
Dat is bij een radio button ook, die kan een gebruiker ook niet per se geselecteerd hebben, wat je wél kan doen, is een standaard waarde alvast invullen... Dus een checkbox of radio button op 'selected' zetten... Dan hoeft de user er niet per se naar te kijken, omdat je de 'default' waarde al hebt ingevult...

Kleine tip: Zet alleen het minimale vereiste op je form, bepaalde dingen kunnen gebruikers dan eventueel later 'instellen' of je maakt gebruik van 'stappen'...

Bij een Radio Button weet je het wel want die kun je instellen dat er geen optie is geselecteerd, bij een checkbox is de optie "niet checked" altijd geselecteerd.

Verwijderd schreef op maandag 27 februari 2006 @ 10:23:
een checkbox geeft een bias en meer kans op foutief invullen. Een (van tevoren blanko) radiogroup dwingt de gebruiker beter te lezen. Afhankelijk van het doel kan je voor het een of het ander kiezen.

(wil je spam door iemands neus duwen, zet dan onderaan een checkbox die standaard checked is, ertussen een lap tekst, en bovenaan een submit met "sluit venster" erop)

Precies wat ik bedoelde.

Maar het is afhankelijk van de situatie:
- wil je dat de gebruiker zo snel mogelijk invult
- wil je dat de gebruiker zo zinnig mogelijk invult
of een combinatie van beide waarbij het per vraag kan verschillen hoe belangrijk elk punt is.

[ Voor 35% gewijzigd door Tubby op 27-02-2006 11:46 ]

[CH4OS]

Tubby schreef op maandag 27 februari 2006 @ 11:44:
Bij een Radio Button weet je het wel want die kun je instellen dat er geen optie is geselecteerd, bij een checkbox is de optie "niet checked" altijd geselecteerd.

Bij een radio button weet je de value pas, van het veld, als je de form post en dus een radio button geselecteerd hebt...

Bij een checkbox weet je dat ook pas bij het posten, bedenk ik me nu en je kan ook een checkbox een value geven:

HTML:

<input type="radio" name="soep" value="ja" />
<input type="checkbox" name="soep" value="ja" />

Maar het is afhankelijk van de situatie:
- wil je dat de gebruiker zo snel mogelijk invult
- wil je dat de gebruiker zo zinnig mogelijk invult
of een combinatie van beide waarbij het per vraag kan verschillen hoe belangrijk elk punt is.

Je moet je gewoon per vraag afvragen wat het beste is, en dan kan je (bijvoorbeeld) de richtlijnen erbij houden die ik eerder postte, ik zou sowieso nooit uit gaan van 1 van die 2 situaties...

[ Voor 28% gewijzigd door CH4OS op 27-02-2006 11:56 ]

[Tubby]

GJ-tje schreef op maandag 27 februari 2006 @ 11:49:
[...]
Bij een radio button weet je de value pas, van het veld, als je de form post en dus een radio button geselecteerd hebt...

Bij een checkbox weet je dat ook pas bij het posten, bedenk ik me nu en je kan ook een checkbox een value geven:

HTML:

<input type="radio" name="soep" value="ja" />
<input type="checkbox" name="soep" value="ja" />

Je kunt alle input object gewoon checken of er iets geselecteerd/ingevoerd is, kwestie van de submit afvangen en controles uitvoeren voordat je handmatig de submit aanroept.

GJ-tje schreef op maandag 27 februari 2006 @ 11:49:
[...]
Je moet je gewoon per vraag afvragen wat het beste is, en dan kan je (bijvoorbeeld) de richtlijnen erbij houden die ik eerder postte, ik zou sowieso nooit uit gaan van 1 van die 2 situaties...

Klopt, in de praktijk is het ook nooit 1 van de 2, daar verschilt het dus ook per vraag die je de eindgebruiker wilt stellen. Ik denk ook niet dat er 1 beste control is, dat is waarschijnlijk ook de reden waarom er verschillende controls zijn

[ Voor 33% gewijzigd door Tubby op 27-02-2006 12:02 ]

[CH4OS]

Tubby schreef op maandag 27 februari 2006 @ 12:00:
Je kunt alle input object gewoon checken of er iets geselecteerd/ingevoerd is, kwestie van de submit afvangen en controles uitvoeren voordat je handmatig de submit aanroept.

Beste manier voor een form is (vind ik):

• Form presenteren aan de gebruiker
• Form controleren middels JS of de verplichte velden ingevult zijn, kloppen deze niet, kan je middels JS het versturen van de form stoppen...
• Als de form klopt, de input van de form controleren middels een server sided script (PHP, CFM, ASP, noem ze maar op

Klopt, in de praktijk is het ook nooit 1 van de 2, daar verschilt het dus ook per vraag die je de eindgebruiker wilt stellen. Ik denk ook niet dat er 1 beste control is, dat is waarschijnlijk ook de reden waarom er verschillende controls zijn

Is denk ik ook wel afhankelijk van hoe je bepaalde dingen naar de gebruiker brengt... Stel je het als vraag, of maak je er een soort van opmerking van...

Voorbeeldje:
Wilt u soep? (Ja / Nee, radiobuttons)
Ja, ik wil soep ( [ ], checkbox dus)

Ik zou in dit geval het eerste prefereren, omdat dan de gebruiker tot nadenken gezet word en je dus later tegen de gebruiker keihard kan zeggen van "Ja maar ho even, u heeft op de webpagina 'gezegt' dat u soep wilde hebben..."

Kan bij die andere eigenlijk ook wel, maar bij deze geef je de gebruiker een openlijkere keuze en is het (IMO) duidelijker waar je precies heen wilt...

[ Voor 17% gewijzigd door CH4OS op 27-02-2006 12:12 ]

[Tubby]

GJ-tje schreef op maandag 27 februari 2006 @ 12:10:
[...]
Beste manier voor een form is (vind ik):

• Form presenteren aan de gebruiker
• Form controleren middels JS of de verplichte velden ingevult zijn, kloppen deze niet, kan je middels JS het versturen van de form stoppen...
• Als de form klopt, de input van de form controleren middels een server sided script (PHP, CFM, ASP, noem ze maar op

Agree, en met het checken via javascript kun je heel ver gaan.

Zelf gebruik ik ook regexp masks om bijvoorbeeld datum velden te checken. Daarmee kun je tot op zekere hoogte het datum formaat goed checken. De applicatie probeert vervolgens de datum te parsen, en als dat fout gaat komt er pas een echte exception. Welke je vervolgens weer kan afvangen, tonen in een javascript popup en 1x terug gaan in je history om je gegevens niet kwijt te zijn.

Daarmee heb je wel alle checks, maar niet dat de gebruiker al zijn gegevens opnieuw moet invoeren om weer te kunnen submitten.

Wat ook een pluspunt is is dat je alle checks afloopt voordat je je form submit en alle fouten tegelijk toont. Niet dat de gebruiker het bericht krijgt dat veld1 verplicht is. En dat als ie dat heeft aangevuld veld2 verplicht blijkt te zijn. 1 melding met daarin het bericht dat veld1 en veld2 verplicht zijn.

[CH4OS]

Tubby schreef op maandag 27 februari 2006 @ 20:10:
Agree, en met het checken via javascript kun je heel ver gaan.

Ja, maar ik zou alleen middels JS controleren of de velden die je verplicht ingevult wilt zien, of dat die ook daadwerkelijk ingevult zijn, verder hoef je dus niet te gaan, laat je mooi aan PHP over, die kan je namelijk meer vertrouwen dan een clientsided JS-scriptje...

Zelf gebruik ik ook regexp masks om bijvoorbeeld datum velden te checken. Daarmee kun je tot op zekere hoogte het datum formaat goed checken. De applicatie probeert vervolgens de datum te parsen, en als dat fout gaat komt er pas een echte exception. Welke je vervolgens weer kan afvangen, tonen in een javascript popup en 1x terug gaan in je history om je gegevens niet kwijt te zijn.

Of je slaat de geposte variabelen op in een sessie, laat de form opnieuw zien, waardes bepaal je dan aan de hand van de sessie variabelen die je hebt... En laat je via JS een foutmeldings alert-je komen...

Daarmee heb je wel alle checks, maar niet dat de gebruiker al zijn gegevens opnieuw moet invoeren om weer te kunnen submitten.

Jep, en zoals ik hier een klein stukje boven aangeef, hoeft de gebruiker geeneens een pagina meer terug, gewoon lekker opnieuw de form geven, totdat de verplichte velden gevuld zijn...

Wat ook een pluspunt is is dat je alle checks afloopt voordat je je form submit en alle fouten tegelijk toont. Niet dat de gebruiker het bericht krijgt dat veld1 verplicht is. En dat als ie dat heeft aangevuld veld2 verplicht blijkt te zijn. 1 melding met daarin het bericht dat veld1 en veld2 verplicht zijn.

Een gebruiker vertellen dat VeldX of VeldY vergeten is in te vullen is dan vanuit user interface oogpunt (en eigenlijk ook mijn oogpunt) not done. (Denk aan een melding van "VeldX is verplicht om in te vullen") Het komt namelijk beetje aandringend over en dat kan je beter vermijden. Beste manier die je hiervoor kan gebruiken is zeggen dat VeldX en / of VeldY leeg zijn en ingevult dienen te zijn...

[ Voor 3% gewijzigd door CH4OS op 27-02-2006 21:10 ]

[Tubby]

GJ-tje schreef op maandag 27 februari 2006 @ 21:05:
[...]
Ja, maar ik zou alleen middels JS controleren of de velden die je verplicht ingevult wilt zien, of dat die ook daadwerkelijk ingevult zijn, verder hoef je dus niet te gaan, laat je mooi aan PHP over, die kan je namelijk meer vertrouwen dan een clientsided JS-scriptje...
[...]
Of je slaat de geposte variabelen op in een sessie, laat de form opnieuw zien, waardes bepaal je dan aan de hand van de sessie variabelen die je hebt... En laat je via JS een foutmeldings alert-je komen...

Technische invulling is detail, ik doe het beide, maar probeer zoveel mogelijk met javascript te checken voordat ik het naar de server stuur.

GJ-tje schreef op maandag 27 februari 2006 @ 21:05:
[...]
Een gebruiker vertellen dat VeldX of VeldY vergeten is in te vullen is dan vanuit user interface oogpunt (en eigenlijk ook mijn oogpunt) not done. (Denk aan een melding van "VeldX is verplicht om in te vullen") Het komt namelijk beetje aandringend over en dat kan je beter vermijden. Beste manier die je hiervoor kan gebruiken is zeggen dat VeldX en / of VeldY leeg zijn en ingevult dienen te zijn...

Mja, het bericht was ter illustratie, het ging me om het feit dat je alle fouten tegelijk onder de aandacht moet brengen en niet 1 voor 1.