Älä huoli painikkeiden järjestyksestä tee verkkosovellus, tee tämä sen sijaan

(4. kesäkuuta 2019)

Joten suunnittelet verkkosovellusta. Minkä painikkeen tulee olla? Tässä on joitain ohjeita, joiden avulla voit päättää, minkä painikkeen järjestyksen tulisi olla. Ja näiden tapausten lisäksi sillä ei ole väliä, jos noudatat alla olevia ohjeita.

Aluksi luokitellaan painikkeet ensisijaisiksi ja toissijaisiksi, jotta olemme kaikki samalla sivulla. Useimmissa yhteyksissä ensisijaiset toiminnot ovat positiivisia toimintoja, kuten Tallenna tai Lähetä, ja toissijaiset toiminnot ovat negatiivisia toimintoja, kuten Peruuta tai Poista.

Noudata käyttöympäristön ohjeita

Jos rakennat työpöytää tai mobiilisovellus, vastaus painikkeiden paineluetteloon on yksinkertainen – noudata käyttöympäristön ohjeita.

Tietokoneessa tämä tarkoittaa ensisijaista toimintaa ja sitä seuraavaa toissijaista toimintaa.

Macissa tämä tarkoittaa toissijaista toimintaa, jota seuraa ensisijainen toiminto.

Androidille tämä tarkoittaa toissijaista toimintaa, jota seuraa myös ensisijainen toiminta.

Se oli helppoa. Mutta mitä painikkeiden järjestystä käytät verkkosovelluksessa?

Painikesarja web-sovelluksille

Jos suunnittelet verkkosovellusta, joka tarjoaa palvelua yhden alustan käyttäjille , se ei ole järkevää – jatka seuraamalla kyseisen alustan sopimusta uudelleen.

Jos ei, niin asiat muuttuvat hieman monimutkaisemmiksi. Käyttäjät käyttävät työpöytiä, tabletteja ja matkapuhelimia. Sinulla voi olla PC-käyttäjiä, jotka käyttävät iPhonea tai Android-laitteita, ja sinulla voi olla Mac-käyttäjiä, jotka… No, he todennäköisesti käyttävät iPhonea enemmän kuin Android-laitteita. Kyllä, iOS: n, Androidin ja OSX: n markkinaosuus Windowsille on tällä hetkellä noin 60–40, mutta se ei tarkoita, että optimoit 60% käyttäjille eikä lopuille 40%. Miksi et optimoisi 100% käyttäjistäsi?

Painikkeiden järjestyksellä ei ole merkitystä, jos teet tämän – muodon ja koon kontrastipainikkeet

Voit optimoida 100% käyttäjistä käyttäjiäsi keskittymättä lainkaan painikkeiden järjestykseen. Voit mennä eteenpäin ja itse valita haluamasi tilauksen. Keskity sen sijaan visuaaliseen kontrastiin paitsi värin ulottuvuuden, myös muodon ja koon kautta.

Kun ensisijainen toiminto on tavallinen painike ja toissijainen toiminto vain teksti (alleviivaus on valinnainen, mutta kokemukseni mukaan tämä tyyli myydään paremmin tuotteen omistajille), onnistut luomaan riittävän kontrastin, jotta käyttäjät voivat helposti havaita eron ensisijaisen ja toissijaisen painikkeen välillä.

He eivät Et sekaannu toisin kuin tavalliset painikkeet, joilla molemmilla on sama muoto ja koko ja jotka eroavat toisistaan ​​vain värin mukaan. Tässä on alla olevia esimerkkejä molemmista tilauksista, jotka molemmat ovat yhtä tehokkaita antaessaan käyttäjien erottaa ensisijaiset ja toissijaiset toiminnot.

Kuinka muuttaa tavalliset painikkeet muodoltaan ja kooltaan kontrastipainikkeiksi

Jos sinulla on suunnittelujärjestelmä, päivitä ensisijainen ja toissijainen sovelluspainike tavallisista painikkeista (jos ne on sijoitettu vierekkäin eikä pylväitä toisistaan) muodon ja koon kontrastipainikkeet eivät ole ollenkaan kovia. Sen pitäisi olla myös helppo myydä tuotteen omistajalle tai yrityssuunnittelujärjestelmän neuvostolle, koska ne voidaan päivittää ilman, että sinun on huolehdittava paikannuksesta. Sama koskee CSS: n päivittämistä, jos rakennat verkkoa. Voit käytännössä korvata järjestelmän painikkeet tavallisista painikkeista muodon ja koon kontrastipainikkeisiin ilman, että sinun tarvitsee huolehtia mistään.

  1. Oletetaan, että jompikumpi näistä pareista on alkuperäisiä painikkeitasi.

2. Muuta toissijaisen painikkeen tekstin väriä.

3. Siirrä ne vierekkäin, jotta ne koskettavat toisiaan.

3. Poista toissijaisen painikkeen taustamuoto

4. Valinnaisesti, vaikka suositellaan; alleviivaa toissijaisen painikkeen teksti.

Kiitos lukemisesta.

Ota rohkeasti yhteyttä tai pysy yhteydessä LinkedIn ja Twitter .

Lue lisää UX: stä, lataa UX-resursseja ja saat upeita tarjouksia, joita voit käyttää jokapäiväisessä UX-työssäsi osoitteessa Kartiopuut – Käyttäjätutkimus & Suunnittelu ja UX-lainaukset .

Ja jos tämä artikkeli auttaa sinua, taputa kätesi! 👏

Kuvahyvitykset

Alun perin julkaistu osoitteessa https://www.conetrees.com 4. kesäkuuta 2019.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *