Ne aggódjon a gombok sorrendje miatt egy webalkalmazást, tegye ezt helyett

(2019.06.04.)

Tehát webalkalmazást tervez. Mi legyen a gombrendelésed? Íme néhány irányelv a gombok sorrendjének eldöntéséhez. Ezen esetek mellett nem számít, ha betartja az alábbiakat.

Először is, hogy mindannyian ugyanazon az oldalon legyünk, osztályozzuk a gombokat elsődlegesnek és másodlagosnak. A legtöbb helyzetben az elsődleges műveletek pozitív műveletek, például Mentés vagy Küldés, a másodlagos műveletek pedig olyan negatív műveletek, mint a Mégse vagy Törlés.

Kövesse a platform irányelveit

Ha asztalt vagy mobilalkalmazás, a gombok sorrendjére a válasz egyszerű – kövesse a platform irányelveit.

PC-nél ez elsődleges műveletet, majd másodlagos műveletet jelent.

Mac esetében ez másodlagos műveletet, majd elsődleges műveletet jelent.

Android esetében ez másodlagos műveletet, majd elsődleges műveletet is jelent.

Ez könnyű volt. De milyen gombrendelést alkalmaz egy webalkalmazáshoz?

Gombrendelés webalkalmazásokhoz

Ha olyan webalkalmazást tervez, amely egyetlen platform felhasználói számára nyújt szolgáltatást. , ez nem okoskodás – folytassa újra a platform konvencióját.

Ha nem, akkor a dolgok kissé bonyolultabbá válnak. A felhasználók asztali számítógépeket, táblagépeket és mobiltelefonokat használnak. Lehet olyan PC-felhasználó, aki iPhone-t vagy androidot használ, és van olyan Mac-felhasználója, aki… Nos, valószínűleg többet használ iPhone-t, mint az Android-ot. Igen, az iOS, az Android és az OSX-től a Windows-ig terjedő piaci részesedés 60–40 körül van, de ez nem azt jelenti, hogy 60% -ra optimalizál, és nem a fennmaradó 40% -ra. Miért ne optimalizálhatná a felhasználók 100% -át?

A gombok sorrendje nem számít, ha ezt csinálja – alak és méret kontrasztos gombok

Optimalizálhatja a felhasználóinak azáltal, hogy egyáltalán nem a gombok sorrendjére koncentrál. Folytathatja, és valóban kiválaszthatja a kívánt sorrendet. Ehelyett a vizuális kontrasztra összpontosítson nemcsak a szín, hanem az alak és a méret dimenzióján keresztül is.

Ha az elsődleges művelet normál gombként, a másodlagos pedig csak szöveget (az aláhúzás nem kötelező, de tapasztalataim szerint jobb, ha ezt a stílust eladom a terméktulajdonosoknak), akkor sikerül hatékony kontrasztot létrehozni ahhoz, hogy a felhasználók könnyedén észrevegyék az elsődleges és a másodlagos gombok közötti különbséget.

Nem Nem keveredik össze, ellentétben a szokásos gombokkal, amelyeknek formája és mérete azonos, és csak színük különbözteti őket. Az alábbiakban bemutatunk példákat mindkét megrendelésre, amelyek egyaránt hatékonyan teszik lehetővé a felhasználók megkülönböztetését az elsődleges és a másodlagos műveletek között.

Hogyan lehet átalakítani a szokásos gombokat kontrasztos formájú és méretű gombokká

Ha van tervezési rendszere, frissítse az elsődleges és a másodlagos alkalmazás gombjait a szokásos gombokról (feltéve, hogy egymás mellett helyezkednek el, és nem oszlik el egymástól) az alak és méret kontrasztos gombjai egyáltalán nem nehézek. Könnyű eladásnak kell lennie a terméktulajdonosnak vagy a vállalati tervezési rendszer tanácsának is, mert frissíthetők anélkül, hogy aggódnia kellene a pozicionálás miatt. Ugyanez vonatkozik a CSS frissítésére, ha webet épít. Gyakorlatilag lecserélheti a rendszer gombjait a szokásos gombokról a formájú és méretű kontrasztos gombokra anélkül, hogy bármi miatt aggódnia kellene.

  1. Tegyük fel, hogy ezek a párok bármelyike ​​az eredeti gombja.

2. Módosítsa a másodlagos gomb szövegének színét.

3. Mozgassa őket egymás mellé, hogy megérintsék egymást.

3. Távolítsa el a másodlagos gomb háttéralakját

4. Opcionálisan, bár ajánlott; húzd alá a másodlagos gomb szövegét.

Köszönjük, hogy elolvastad.

Lépj kapcsolatba velünk, vagy maradj kapcsolatban a LinkedIn és Twitter .

Tudjon meg többet az UX-ről, töltse le az UX-erőforrásokat, és szerezzen csodálatos idézeteket, amelyeket a mindennapi UX-munkájában használhat: > Kúpfák – Felhasználói kutatás & Tervezés és UX Idézetek .

És ha ez a cikk segítséget nyújt Önnek, tapsolja meg kezét! 👏

Képhitelek

Eredetileg a https://www.conetrees.com 2019. június 4-én.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük