Ikke bekymre deg for rekkefølgen på knappen i en webapplikasjon, gjør dette i stedet

(4. juni 2019)

Så du designer en webapplikasjon. Hva skal knappordren din være? Her er noen retningslinjer for å bestemme hva knappordren din skal være. I tillegg til disse tilfellene, spiller det ingen rolle hvis du følger det som er nedenfor.

Til å begynne med slik at vi alle er på samme side, la oss klassifisere knapper som primære og sekundære. I de fleste sammenhenger er primære handlinger positive handlinger som Lagre eller Send inn, og sekundære handlinger er negative handlinger som Avbryt eller Slett.

Følg plattformens retningslinjer

Hvis du bygger et skrivebord eller en mobilapplikasjon, svaret på knappens rekkefølge på knappene er enkelt – følg plattformens retningslinjer.

For en PC betyr dette primær handling etterfulgt av sekundær handling.

For en Mac betyr dette sekundær handling etterfulgt av primær handling.

For Android betyr dette sekundær handling etterfulgt av primær handling også.

Det var enkelt. Men hvilken rekkefølge for knappene følger du med for en webapplikasjon?

Knappefølge for webapplikasjoner

Hvis du designer en webapplikasjon som gir en tjeneste for brukere av en enkelt plattform , det er ikke bra – fortsett å følge plattformens konvensjon igjen.

Hvis ikke, blir ting litt mer kompliserte. Brukere bruker stasjonære og nettbrett og mobiltelefoner. Du kan ha PC-brukere som bruker iPhones eller Androids, og du kan ha Mac-brukere som … vel, de bruker sannsynligvis iPhones mer enn Androids. Ja, markedsandelen for iOS, Android og OSX til Windows er per nå rundt 60–40, men det betyr ikke at du optimaliserer for 60% brukere og ikke for de resterende 40%. Hvorfor ikke optimalisere for 100% av brukerne dine?

Knappefølge betyr ikke noe om du gjør dette i stedet – form og størrelse kontrasterte knapper

Du kan optimalisere for 100% av brukerne dine ved ikke å fokusere på knappens rekkefølge i det hele tatt. Du kan gå videre og faktisk velge hvilken ordre du vil. Fokuser i stedet på visuell kontrast, ikke bare gjennom dimensjonen av farge, men også i form og størrelse.

Når du har den primære handlingen som en vanlig knapp og den sekundære handlingen som bare tekst (understreking er valgfritt, men det føles bedre etter min erfaring med å selge denne stilen til produkteiere), klarer du effektivt å skape tilstrekkelig kontrast for at brukerne enkelt skal merke forskjellen mellom primær og sekundær knapp.

De gjør ikke ikke bli forvirret i motsetning til vanlige knapper som begge har samme form og størrelse, og som bare er forskjellig etter farge. Her er eksempler nedenfor for begge ordrene, begge like effektive til å la brukerne skille mellom primære og sekundære handlinger.

Slik transformerer du vanlige knapper til kontrasterte knapper i form og størrelse

Hvis du har et designsystem, oppdaterer du de primære og sekundære applikasjonsknappene fra de vanlige knappene (forutsatt at de er plassert ved siden av hverandre og ikke poler fra hverandre) i forhold til knappene i form og størrelse er ikke vanskelig i det hele tatt. Det bør også være lett å selge til produkteieren eller systemutvalget for virksomhetsdesign fordi de kan oppdateres uten å måtte bekymre deg for posisjonering. Det samme gjelder oppdatering av CSS hvis du bygger et nett. Du kan praktisk talt erstatte knappene i systemet fra vanlige knapper til kontrasterte knapper uten å måtte bekymre deg for noe.

  1. La oss si at noen av disse parene er de originale knappene.

2. Endre fargen på teksten til den sekundære knappen.

3. Flytt dem ved siden av hverandre slik at de berører hverandre.

3. Fjern bakgrunnsformen for den sekundære knappen

4. Valgfritt, men anbefalt; understreke den sekundære knappeteksten.

Takk for at du leser.

Ta gjerne kontakt eller hold kontakten på LinkedIn og Twitter .

Les mer om UX, last ned UX-ressurser og få fantastiske tilbud du kan bruke i din daglige UX-jobb på Cone Trees- User Research & Design og UX Quotes .

Og i f denne artikkelen er til hjelp for deg, klapp i hendene! 👏

Bildekreditter

Opprinnelig publisert på https://www.conetrees.com 4. juni 2019.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *