Oroa dig inte för knappordning i en webbapplikation, gör det istället

(4 jun 2019)

Så du utformar en webbapplikation. Vad ska din knapporder vara? Här är några riktlinjer för att bestämma vad din knapporder ska vara. Och förutom dessa fall spelar det ingen roll, om du följer vad som finns nedan.

Till att börja med så är vi alla på samma sida, låt oss klassificera knappar som primära och sekundära. I de flesta sammanhang är primära åtgärder positiva åtgärder som Spara eller Skicka och sekundära åtgärder är negativa åtgärder som Avbryt eller Ta bort.

Följ plattformens riktlinjer

Om du bygger ett skrivbord eller en mobilapplikation är svaret på knapparnas ordning enkelt – följ plattformens riktlinjer.

För en dator betyder detta primär åtgärd följt av sekundär åtgärd.

För en Mac betyder detta sekundär åtgärd följt av primär åtgärd.

För Android innebär detta sekundär åtgärd följt av primär åtgärd också.

Det var enkelt. Men vilken knappordning för en webbapplikation?

Knappordning för webbapplikationer

Om du utformar en webbapplikation som tillhandahåller en tjänst för användare av en enda plattform , det är ingen idé – fortsätt att följa plattformens konvention igen.

Om inte, blir det lite mer komplicerat. Användare använder stationära datorer och surfplattor och mobiltelefoner. Du kan ha PC-användare som använder iPhones eller Androids och du kan ha Mac-användare som … ja de använder förmodligen iPhones mer än Androids. Ja, marknadsandelen för iOS, Android och OSX till Windows är nu cirka 60–40 men det betyder inte att du optimerar för 60% användare och inte för de återstående 40%. Varför inte optimera för 100% av dina användare?

Knappföljd spelar ingen roll om du gör detta istället – form och storlek kontrasterade knappar

Du kan optimera för 100% av dina användare genom att inte fokusera på knappordning alls. Du kan gå vidare och faktiskt välja vilken beställning du vill. Fokusera istället på visuell kontrast inte bara genom dimensionen av färg utan också form och storlek.

När du har den primära åtgärden som en vanlig knapp och den sekundära åtgärden som bara text (understrykning är valfritt men det känns bättre i min upplevelse att sälja den här stilen till produktägare), du lyckas effektivt skapa tillräcklig kontrast för att användare lätt ska kunna se skillnaden mellan primära och sekundära knappar.

De inte blir inte förvirrad till skillnad från vanliga knappar som båda har samma form och storlek och som bara skiljer sig efter färg. Här är exempel nedan för båda beställningarna, båda lika effektiva för att låta användare skilja mellan primära och sekundära åtgärder.

Så här omvandlar du vanliga knappar till kontrasterade knappar i form och storlek

Om du har ett designsystem uppdaterar du dina primära och sekundära applikationsknappar från vanliga knappar (förutsatt att de är placerade bredvid varandra och inte poler från varandra) för att forma och kontrasterade knappar är inte alls svårt. Det bör också vara lätt att sälja till din produktägare eller företagsdesign systemråd eftersom de kan uppdateras utan att du behöver oroa dig för positionering. Detsamma gäller för uppdatering av dess CSS om du bygger en webb. Du kan praktiskt taget byta ut knapparna i ditt system från vanliga knappar till kontrasterade knappar i form och storlek utan att behöva oroa dig för någonting.

  1. Låt oss säga att något av dessa par är dina ursprungliga knappar.

2. Ändra färgen på texten för den sekundära knappen.

3. Flytta dem bredvid varandra så att de rör varandra.

3. Ta bort bakgrundsformen för den sekundära knappen

4. Valfritt, men rekommenderas; understryka den sekundära knapptexten.

Tack för att du läste.

Ta gärna kontakt eller håll kontakten på LinkedIn och Twitter .

Läs mer om UX, ladda ner UX-resurser och få fantastiska offerter som du kan använda i ditt dagliga UX-jobb på Konsträd- Användarundersökning & Design och UX-citat .

Och jag f den här artikeln är till hjälp för dig, klappa händerna! 👏

Bildkrediter

Ursprungligen publicerad på https://www.conetrees.com den 4 juni 2019.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *