Du skal ikke bekymre dig om knapbestilling i en webapplikation, gør dette i stedet

(4. juni 2019)

Så du designer en webapplikation. Hvad skal din knapbestilling være? Her er nogle retningslinjer for at beslutte, hvad din knapbestilling skal være. Og udover disse tilfælde betyder det ikke noget, hvis du følger det, der er nedenfor.

Til at begynde med, så vi alle er på samme side, lad os klassificere knapper som primære og sekundære. I de fleste sammenhænge er primære handlinger positive handlinger såsom Gem eller Send, og sekundære handlinger er negative handlinger såsom Annuller eller Slet.

Følg platformens retningslinjer

Hvis du bygger et skrivebord eller en mobil applikation, svaret på knappernes rækkefølge på knapper er simpelt – følg platformens retningslinjer.

For en pc betyder det primær handling efterfulgt af sekundær handling.

For en Mac betyder det sekundær handling efterfulgt af primær handling.

For Android betyder dette også sekundær handling efterfulgt af primær handling.

Det var let. Men hvilken knapordre går du med til en webapplikation?

Knapordre til webapplikationer

Hvis du designer en webapplikation, der giver en service til brugere af en enkelt platform , det er en no brainer – gå videre efter platformens konvention igen.

Hvis ikke, så bliver tingene lidt mere komplicerede. Brugere bruger desktops og tablets og mobiltelefoner. Du kan have pc-brugere, der bruger iPhones eller Androids, og du kan have Mac-brugere, der … godt de bruger sandsynligvis iPhones mere end Androids. Ja, markedsandelen for iOS, Android og OSX til Windows er lige nu omkring 60–40, men det betyder ikke, at du optimerer til 60% brugere og ikke for de resterende 40%. Hvorfor ikke optimere til 100% af dine brugere?

Knappens rækkefølge betyder ikke noget, hvis du gør dette i stedet – form og størrelse kontrasterede knapper

Du kan optimere til 100% af dine brugere ved slet ikke at fokusere på rækkefølgen på knapper. Du kan gå videre og faktisk vælge hvilken ordre du vil. I stedet skal du fokusere på visuel kontrast ikke kun gennem dimensionen af ​​farve, men også form og størrelse.

Når du har den primære handling som en almindelig knap og den sekundære handling som bare tekst (understregning er valgfri, men det føles bedre i min erfaring med at sælge denne stil til produktejere), det lykkes dig effektivt at skabe tilstrækkelig kontrast til, at brugerne let bemærker forskellen mellem primære og sekundære knapper. ikke blive forvirret i modsætning til almindelige knapper, som begge har samme form og størrelse og kun er differentieret efter farve. Her er eksempler nedenfor for begge ordrer, begge lige så effektive til at lade brugerne skelne mellem primære og sekundære handlinger.

Sådan transformeres almindelige knapper til kontrasterede knapper til form og størrelse

Hvis du har et designsystem, opdaterer du dine primære og sekundære applikationsknapper fra de almindelige knapper (forudsat at de er placeret ved siden af ​​hinanden og ikke poler fra hinanden) med hensyn til form og størrelse kontrasterede knapper er slet ikke svært. Det burde også være let at sælge til din produktejer eller virksomhedsdesign systemråd, fordi de kan opdateres uden at skulle bekymre sig om positionering. Det samme gælder for opdatering af sin CSS, hvis du bygger et web. Du kan praktisk talt udskifte knapperne i dit system fra almindelige knapper til kontrasterede knapper uden at skulle bekymre dig om noget.

  1. Lad os sige, at et af disse par er dine originale knapper.

2. Skift farve på teksten til den sekundære knap.

3. Flyt dem ved siden af ​​hinanden, så de rører hinanden.

3. Fjern baggrundsformen for den sekundære knap

4. Valgfrit, men anbefalet; understreg den sekundære knaptekst.

Tak for læsningen.

Du er velkommen til at kontakte eller forblive forbundet på LinkedIn og Twitter .

Læs mere om UX, download UX-ressourcer og få fantastiske tilbud, du kan bruge i dit daglige UX-job på Kegletræer – Brugerundersøgelse & Design og UX-citater .

Og jeg f denne artikel er til hjælp for dig, klapp i hænderne! 👏

Billedkreditter

Oprindeligt offentliggjort på https://www.conetrees.com den 4. juni 2019.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *