21 UI-tervezési titok, amelyet tudnia kell

A felhasználói felület tervezési titkai: az ember labirintust néz
(Kép jóváírása: Getty)

A munkameneteken és a visszafordulási arányokon túl a felhasználói felület tervezésének fő célja, hogy a dolgokat a lehető legkönnyebbé és élvezetesebbé tegye a felhasználó számára. És mint a tervezés legtöbb területén, a megfelelő eszközök megléte is segíthet (lásd a webdesign eszközök és tetején weboldal készítők ).

Ráadásul joga van webtárhely A szolgáltatás különbséget tehet a siker és a kudarc között, ezért mindenképpen okosan válasszon. Most azonban itt van 21 felhasználói felület-tervezési tipp és trükk, a területen szerzett 10 éves tapasztalat alapján.

01. Tudd, kinek tervezel

Az olyan feladatokat, mint a felhasználói kutatás, a drótvázasítás, a tesztelés és az információs architektúra tervezése, gyakran az UX tervezőjének felelősségének tekintik, de kezdjük látni az UX / UI tervező szerepének egyre növekvő keverékét.



Az Invision szerint , 'Az UX tervezői álláshirdetések 66% -a igényli a felhasználói felület készségeit', tehát ha az UX tervezői számára fontossá vált a vizuális tervezés, a márkaépítés és a tipográfia megértése, akkor csak az a helyes, ha a felhasználói felület tervezői bekapcsolódnak, vagy legalább alaposan megértik a a már említett UX készségek.

Az a felhasználói felület-tervező, aki részt vesz az UX munkafolyamatában kifejlesztett személyek, drótvázak és információs architektúra létrehozásában, vagy legalábbis odafigyel rá, olyan interakciókat, szín- és típusválasztásokat fog meghozni, amelyeket a terméket használó emberek befolyásolnak, vagy szolgáltatás helyett saját stílusbeli preferenciáikat. Ha időt szán arra, hogy megértse azokat a felhasználókat, akiket terveznek, a kezelőfelület-tervezők olyan felületeket hoznak létre, amelyek vizuálisan és funkcionálisan is jobban megfelelnek a felhasználók igényeinek.

CSS generálása

(Kép jóváírása: Getty / Future)

Ha szeretné megtanulni a legújabb kreatív és gyakorlati készségeket, hogy az ügyfél munkáját, karrierjét vagy ügynökségét magasabb szintre emelje, akkor csatlakozzon hozzánk CSS létrehozása , webes tervezőknek és fejlesztőknek szóló konferenciánk. Használjon akciós kódot WEBTERVEZŐ2 10% kedvezmény a jegyek árából.

02. A választási bénulás legyőzése

Felhasználói felület tervezési titkai:

A Nike mega menü legfelső szintű opcióinak csökkentése segít korlátozni a választási bénulást a felhasználók számára(Kép jóváírása: Nike)

Mark Zuckerbergnek elég egyszerű ruhásszekrénye van; mind szürke pólók. Saját szavai szerint: „Nagyon szeretném megtisztítani az életemet, hogy minél kevesebb döntést kell meghoznom”. Ez az alapelv illeszkedik az interfész tervezéséhez, mivel a felhasználóknak túl sok lehetőség biztosítása túlterheli őket, túlzott elemzésre készteti őket, és végül kevésbé valószínű, hogy elvégeznek egy műveletet vagy folyamatot. Ha lehetséges, korlátoznunk kell a rendelkezésre álló lehetőségeket, vagy alternatív módon el kell rejteni azokat a lehetőségeket, amelyek kevésbé relevánsak az utazás adott szakaszában.

02. Segítsen az alapértelmezett állapotok irányításában

Felhasználói felület tervezési titkai:

A Skyscanner az alapértelmezett állapotokat választja, így a felhasználók testreszabhatják az opciókat(Kép jóváírása: Skyscanner)

Alapértelmezett állapotaink nem csak arra kérik a felhasználókat, hogy 'kérjük, válasszanak'. Weboldalak, mint Skyscanner használatával keresse meg a felhasználóhoz legközelebbi indulási repülőteret, javasoljon dátumokat, amelyek korrelálnak a közelgő ünnepekkel, és előre válassza ki a repülő utasok számát. Az alapértelmezett állapotok általánosan kiválasztottak alapján történő megtervezése csökkenti a felhasználók által igényelt erőfeszítéseket, lehetővé téve számukra az előre kiválasztott opciók testreszabását.

03. Azonnali cselekvés üres állapotokkal

Felhasználói felület tervezési titkai:

Tidal üres állapota azonnal felfedezi a zenét, amelyet még soha nem hallott(Kép jóváírása: Tidal)

A kitöltetlen kosarak, a lakatlan lejátszási listák és az alapértelmezett keresési interfészek gyakran ürességérzetet okozhatnak a felhasználóknak. Vigyázzon Dagály , akik a „nem rendelkeznek albumokkal” rendelkező felhasználókat a legfontosabb ajánlásaik felé irányítják. Ahelyett, hogy holtpontokat teremtenénk az interfészeinken belül, üres állapotokat kell használnunk, mint lehetőségeket olyan új funkciók és funkciók felfedezésére, amelyek előnyösek lesznek a felhasználóink ​​számára.

04. Nem hízelgő hibaállapotokkal

Felhasználói felület tervezési titkai:

A Kitchen Stories hibaállapotai elnézést kérnek, mert nem találták meg a felhasználó vágyait(Kép jóváírása: Konyhai történetek)

A digitális világban néha rosszul alakulnak a dolgok, és ha erre nem tervezünk, elégedetlenkedhet a felhasználó. Felhasználói felület tervezőként hozzon létre hibahelyzeteket, amelyek pozitív cselekvésre és hangulatra ösztönöznek, és nem érthetetlen üzeneteket dobnak. A Kitchen Stories alkalmazás ezt remekül kezeli, elnézést kérve, ha üres eredményt adnak vissza egy konyhai recepthez, és cselekvésre ösztönzést nyújt, amely lehetővé teszi a felhasználók számára, hogy új kéréseket nyújtsanak be. Nézze meg kedvencünket 404 oldal további példákért.

05. A választási lehetőségek lebontása

UI tervezési titkok

Az Apple világos és tömör lépésekre bontja az iPhone kiválasztásának folyamatát(Kép jóváírása: Apple)

A választások korlátozása és csoportosítása mellett kevésbé bonyolulttá tehetjük őket azáltal, hogy folyamatokra bontjuk őket. El lehet képzelni, hogy az Apple iPhone XR-k hátsó leltára egy nagy mátrixlista, amely több száz terméket tartalmaz, különböző színekkel, méretekkel és hálózatokkal. De annak a felhasználónak, aki újat választ Apple iPhone XR a weboldalán keresztül egy egyszerű, lépésről lépésre történő kezelőfelület lehetővé teszi számukra, hogy egy-egy választással szűkítsék lehetőségeiket. Ha sok konfigurációs lehetőséget mutatunk be, akkor az interfésznek kell a nehéz emelést végrehajtania, nem pedig a felhasználónak.

06. Csökkentse az ellenállást

Felhasználói felület tervezési titkai:

A Slack kezelőfelülete végzi a kemény munkát, nem pedig a felhasználó(Kép jóváírása: Slack)

Az általunk tervezett interfészeknek a lehető legegyszerűbbé kell tenniük a felhasználók számára a bennük lévő feladatok elvégzését. Amikor bejelentkezik a mobilalkalmazásba, Laza támaszkodik egy „varázslat” ellenőrző linkre, amelyet elküldünk a felhasználó e-mail címére, hogy gyönyörűen kihagyja azt a furcsa feladatot, hogy emlékezzen és írja be bonyolult jelszavát.

Ha a kezelőfelületre hárítja a terheket, nem pedig a felhasználót, akkor sokkal kevésbé ellenállnak annak, hogy a webhelyén vagy az alkalmazásán belül bármilyen folyamat végére jussanak. Ha rendelkezünk a rendelkezésre álló technológiával az interfészeinken belüli interakciók felgyorsítására, ezt szem előtt tartva kell megterveznünk.

07. Csak azt vegye, amire szüksége van

Felhasználói felület tervezési titkai:

Engedje meg, hogy a felhasználók minimális információval regisztráljanak, és engedjék meg, hogy egyszer felvegyék őket a fedélzetre(Kép jóváírása: LinkedIn)

A legkevésbé ellenálló útvonal létrehozásához meg kell kérnünk a felhasználótól a lehető legkevesebb információt az interfészek bármelyik szakaszában. Minél kevesebb adatot kell bevinnie a felhasználónak, annál valószínűbb, hogy teljesít egy gyakorlatot.

A LinkedIn-hez hasonló webhelyek a minimális adatot (keresztnév, vezetéknév, e-mail és jelszó) kérik, amikor feliratkoznak a platformjukra, majd eljátszják a profil létrehozásának folyamatát azzal, hogy hagyják, hogy egyszerre csak egy személyes adatot töltsenek ki. fedélzetre. Semmilyen módon nem jelentkezhet be a LinkedIn-be, ha egész szakmai történetét be kell írnia, csak azért, hogy bejusson az ajtón.

08. Adjon egyfajta előrehaladást

Felhasználói felület tervezési titkai:

A Pinterest előrelépést mutat az egyszerű vizuális mutatóval történő regisztráció végső célja felé(Kép jóváírása: Pinterest)

Vannak olyan esetek, amikor a hosszú formák és folyamatok szükségszerűek. Például sok pénzügyi alkalmazás kiterjedt adatbevitelt és időt igényel a befejezéséhez. Amikor feliratkozik a Pinterest alkalmazás, van egy mutató a felületen, amely megmutatja, hogy a felhasználó milyen lépésben van (4-ből) az utazás során, biztosítva, hogy haladnak a végcéljuk felé. A lendület ezen érzése miatt a felhasználók kevésbé fognak csalódni, ha nem tudják, hogy egy folyamat mikor fejeződik be, és ezért kevésbé valószínű, hogy teljesen elhagyják azt.

09. Ügyeljen az egyezményekre

Felhasználói felület-tervezőként természetesen szeretnénk a végsőkig szorgalmazni a kreatív gyümölcsleveket, és új és izgalmas módszereket találni a felhasználók számára, hogy kapcsolatba léphessenek digitális élményeinkkel és megtapasztalhassák azokat. Ennek ellenére egyensúlyt kell találnunk az eredetiség és a megszokottság között annak érdekében, hogy a felhasználóinknak ne kelljen túl sok időt tölteniük az interfészek használatának megtanulásával. Olyan alkalmazások, mint a Snapchat - amely a új logó az utóbbi időben - sok idős felhasználót elidegenített radikális navigációs lehetőségekkel, olyannyira, hogy a New York Times írta útmutató a Snapchathoz azok számára, akik nem kapják meg a Snapchat-et .

Tekintettel arra, hogy „ellophat minden irányba, sőt be is csípheti a különböző képernyők eléréséhez” ( lásd még a Medium ), van egy bizonyos idő, amelyet be kell fektetni az interakciók elsajátításához, mielőtt hatékonyan használhatná az alkalmazást.

A fiatalabb felhasználók magukévá tették a Snapchat felfedezhetőségét, de azok a felnőttek, akik értik a koppintás és a kattintás mint navigációs eszköz konvencióit, kevesebb számban fogadták el az alkalmazást. Ahogy az internet nőtt, számos elrendezés alakult ki az elemek elhelyezésére vonatkozóan (például kosarak a jobb felső sarokban és a hamburger menük a bal felső sarokban), és ezeket figyelembe kell venni. Felületeinknek izgatnia és örömmel kell töltenie a felhasználókat, ugyanakkor elég kiszámíthatóaknak kell lenniük ahhoz, hogy használni tudják, ha meg akarjuk tartani a konverziókat és korlátozni akarjuk a visszafordulási arányokat.

10. Nyújtson vizuális visszajelzést

Felhasználói felület tervezési titkai:

Időben visszajelzés a Google Snackbars-tól(Kép jóváírása: Snackbars)

A visszajelzés ajándék, és ilyennek kell kezelni az interfészterveinken belül. Google Snack bárok egy intelligens kis mikro-interakció, amely a Material Design rendszerében él. A snack bárok ideiglenesen megjelennek az alkalmazás vagy a webhely felületén, hogy rövid kontextusbeli utasításokat, hibákat vagy nyugtákat adjon meg, amelyek tájékoztatják a felhasználót az általuk végrehajtott műveletek következményeiről, legyen szó akár fénykép mentéséről, e-mail küldéséről vagy az újrapróbálkozásról ', ha az alkalmazásnak hibája van.

Felhasználói felület-tervezőként vizuális visszajelzést kell nyújtanunk az interfészeink minden egyes legfontosabb interakciójáról. Ha egy elem felkerült a felhasználó kosarába, tájékoztassa erről. Ha a befizetés sikeresen teljesült, akkor köszönő üzenettel tájékoztassa őket, és irányítsa őket, hová menjenek, ha bármilyen kérdésük van a szállítással vagy a visszaküldéssel kapcsolatban. A vizuális jelzések és animációk segíthetik a felhasználókat abban, hogy tudomásul vegyék a kis és nagy feladatok elvégzését a webhelyen vagy az alkalmazáson belül, teljesítményérzetet adva, és segíthetnek csökkenteni a szorongást azáltal, hogy tudomásul veszik a cselekvést.

11. Használja ki a felhasználók által létrehozott tartalmat

Az emberek más emberek véleménye alapján vásárolnak, nem csak a márkák szeszélyes szövegírása alapján. Ez az oka annak, hogy ilyen sok e-kereskedelmi webhely nagy ügyfelek véleményét alkotja. Napszemüveg márka Meller 13% -kal növelte konverziós arányát azáltal, hogy termékeikkel élvezetes képeket mutat be termékoldalain, a hagyományosabb e-kereskedelmi fotógaléria mellett.

Ha rendelkezésre áll a felhasználó által létrehozott tartalom (UGC) az általad tervezett márkához vagy céghez, akkor annak beillesztése webhelyünk vagy alkalmazásunk felhasználói felületének oldalaiba növelheti a konverziók számát, különösen, ha a közönség évezredes.

12. Kezelje a felhasználókat szószólóként

Felhasználói felület tervezési titkai:

A GoPro honlapjának hőse a felhasználók által készített videókat használja a termék erejének bemutatására(Kép jóváírása: GoPro)

A felhasználók öröme termékekkel és szolgáltatásokkal egy dolog, de ők is szószólóink ​​lehetnek, vagy akár marketing csapatunk részei is lehetnek. A GoPro főhős videója honlapja a HERO7 fényképezőgépet használó ügyfelek által készített felvételeket tartalmazza (lásd a legjobbakat) GoPro üzletek hogy megkapja a saját GoPro-ját).

A termék felhasználói által leforgatott filmek használata bemutatja a kamera képességeit a leendő vásárlók számára egy viszonylagos kontextusban, és megjutalmazza azt a 25 000 embert is, aki videóit beküldte egy kis kitettséggel a GoPro közösség számára. Ha hűséges közönségünk van, számtalan módon tudjuk felhasználni hangjukat és tartalmukat, ezért ezt figyelembe kell venni a következő felületünk megtervezésekor.

13. Használja a képeket a felhasználók irányításához

Felhasználói felület tervezési titkai:

Az e-mailes regisztrációra késztető látóvonal vs a távolba tekintő modellek(Kép jóváírása: Napszemüveg kunyhó)

A gyönyörű képek képesek javítani a felületet vizuálisan, de felhasználhatók arra is, hogy a figyelmet az oldal vagy a képernyő bizonyos helyeire irányítsák (ne feledje, hogy a lenyűgöző képekről biztonsági másolatot készítsen felhőtároló ). Ha egy kép tartalmaz egy személyt, a felhasználók tudat alatt követik az illető látóterét, lehetőséget biztosítva a felhasználói felület felhasználói számára, hogy finoman irányítsák őket cselekvésre ösztönzés vagy hasznos információk felé.

A Napszemüveg Hut webhely felhasználja ezt a koncepciót a weboldal láblécében, két ember szemvonala az e-mail feliratkozásuk felé mutat. Ha vízszintesen elforgatja a képet, akkor ők csak a távolba bámuló modellek.

14. Használja okosan a negatív teret

Felhasználói felület tervezési titkai:

Rengeteg hely van a lélegzésre a Dropbox Business webhelyen(Kép jóváírása: Dropbox Business)

Gyakori hiba, hogy a kezelőfelület-tervezők a lehető legtöbb információt akarják összezsúfolni az egyes kezelőfelületekbe, de ez vizuális túlterheléshez vezethet, és végső soron elárasztja azokat a felhasználókat, akik figyelmét túl sok különböző területre hívják fel egy oldalon vagy képernyőn. .

A Dropbox Business céloldal nagy hatással használja a negatív teret, minden elemnek elegendő helyet biztosít a lélegzéshez, miközben tömör áttekintést nyújt a termék előnyeiről. A kulcsfontosságú információk és a cselekvésre ösztönzés körüli tér stratégiai maximalizálása a felhasználókat magához vonzza, anélkül, hogy más elemek küzdenének a figyelmükért.

15. Kezdje a mobilal

Tekintettel arra, hogy 2018-ban A világ összes webhely-forgalmának 52,2 százaléka mobiltelefonokon keresztül generálták, egyre fontosabb a digitális interfészek kialakítása, amelyeket a mobil web felhasználói számára optimalizáltak. Az asztali nézet gyakran a vászonra esett a kezelőfelület-tervezők számára, kezdve a videó által vezetett szalaghirdetésekkel és az interakciókkal, például az áthúzásokkal és az egérmutatókkal, majd ezeket le kellett vetniük vagy ki kellett alakítaniuk a megoldásokat, amikor ezeket mobilra méreteztük.

Alternatív megoldásként a mobil nézet megtervezése először arra kényszerít minket, hogy szüntessük meg az összes felesleges zajt, és azokra az elemekre összpontosítsunk, amelyek kulcsfontosságúak a felhasználók számára az interfészen belüli feladatok elvégzéséhez. A nagyítás lehetővé teszi számunkra, hogy az asztali nézethez továbbfejlesztéseket hozzunk, olyan funkciók hozzáadásával, amelyek jobban megfelelnek ennek a tapasztalatnak, amint a legfontosabb összetevők a helyükön vannak.

16. Szerezze be a megfelelő típusú engedélyt

Nincs annál rosszabb, mint egy gyönyörű felület kikészítése, az eszközök előkészítése a fejlesztőcsapat számára, majd rájönni, hogy a betűkészlet-választásunkhoz óriási licencdíj jár - vagy ami még rosszabb, nincsenek webre optimalizálva. Számos különböző típusú betűtípus-licenc létezik, amelyek közül egyesek felhasználónként, mások felhasználási időnként, mások pedig egyszeri díjat számítanak fel. Márkaügynökség Kék tojás adj egy nagy bontást erről.

A betűkészlet megválasztásakor elengedhetetlen, hogy vegyük figyelembe az ebből fakadó pénzügyi következményeket, valamint a betűtípus webes megjelenítési képességét. Ha a költségvetés szűk, akkor a nyílt forráskódú megoldásokhoz hasonlóan Google betűtípusok több száz betűtípust kínál, amelyek ingyenesen használhatók. Lásd még a legjobb ingyenes betűtípusok tervezőknek.

17. Írja meg az interfészeit

Amikor a csupasz csontig visszavetjük a kezelőfelületet, eltávolítjuk a színeket, a betűtípusokat, a képeket és az animációkat, akkor végül csak egy dolog marad bennünk; másolat. Csábító egyenesen az interfész tervezésének vizuális aspektusára ugrani, lorem ipsum és helyőrző szövegbe esni, de ha időt szánunk arra, hogy először felírjuk a felületeinket, akkor jobban fejleszthessük az általános hangot, és átgondolhassuk azokat az üzeneteket és történeteket, amiket éppen verbálisan közöljük közönségünkkel.

Valójában megérthetjük az oldalaink áramlását, amikor a példányt elkülönítve olvassuk, lehetőséget adva számunkra, hogy olyan vizuális eszközökkel kísérjük szavainkat, amelyek valóban alátámasztják és érvényesítik a mondanivalónk lényegét.

18. A fedélzeten megfelelő

Felhasználói felület tervezési titkai:

A DuoLingo alkalmazásának ügyes beszállási folyamata van(Kép jóváírása: DuoLingo)

A beillesztés „annak a valószínűségnek a növelése, hogy az új felhasználók sikeresek legyenek a termék átvételénél” UserOnboard , és felhasználói felület-tervezőként kulcsszerepet játszunk annak eldöntésében, hogyan lehetne a legjobban bemutatni digitális termékeinket és szolgáltatásainkat a felhasználók számára.

Nyelvtanító alkalmazás Duolingo olyan beépített folyamatot használ, amely a felhasználókat egyenesen a feladatalapú felületre juttatja, lehetővé téve számukra, hogy megismerkedjenek a termék jellemzőivel és kipróbálják annak működését, még mielőtt regisztrálást kérnének. A felhasználónak lehetősége van tesztelni a terméket, mielőtt elkötelezi magát a fiók létrehozása mellett.

Amikor interfészeink elkerülhetetlen, bonyolult vagy ismeretlen interakciókat tartalmaznak, meg kell tanítanunk az embereket azok használatára, akár diavetítéseken, magyarázó videókon vagy oktatófedvényeken keresztül. Ha a felhasználóknak egy mintát adunk a „működéséről” a bevezetés vagy bevezetés részeként, akkor kevesebb zavart okozunk, ha teljes mértékben elmerülnek a tapasztalatokban, és ösztönözni fogják azokat az örökbefogadásra, akik értéket látnak a kínálatban.

19. Vonja be a fejlesztőket

Mint olyan emberek, akik végül elkészítik a terveket, érdemes a lehető legkorábbi szakaszban bevonni fejlesztőinket egy projektbe. A tervezők létrehozzák a felhasználók által látott dolgokat, de a fejlesztők javítják a felület élményét a teljesítmény maximalizálásával, az oldal betöltési idejének felgyorsításával és a motorháztető alatt történők optimalizálásával.

A fejlesztők folyamatos bevonása a tervezési folyamatba lehetővé teszi számukra, hogy hozzájáruljanak az interfész viselkedéséhez a vizuális aspektuson túl, lehetőséget adva számukra, hogy minél több információt nyújtsanak arra vonatkozóan, hogy az olyan tech, mint a Laza varázslat felhasználhatók arra, hogy az interfészeinket a lehető legkönnyebb használni tudjuk.

20. Tervezési rendszert használ

Felhasználói felület tervezési titkai:

Az IBM átfogó Carbon Design System(Kép jóváírása: IBM)

A weboldalunk vagy az alkalmazásfelületeink közötti konzisztencia biztosítása küldetés lehet, ha több tervező is részt vesz, és gyakran ugyanazok a felhasználói felület összetevőinek számtalan variációjával állhatunk elő, ami a projekt egészének replikált munkáját jelenti. Alapján InVision , a tervezési rendszer „egyértelmű szabványok által vezérelt újrafelhasználható alkatrészek gyűjteménye, amelyek összeállíthatók tetszőleges számú alkalmazás elkészítéséhez”.

Az IBM Carbon Design System például átfogó eszközöket, kódrészleteket és dokumentációt biztosít mind a tervezők, mind a fejlesztők számára, hogy hozzáférhessenek a felhasználói felület projektjein, biztosítva, hogy a tervezőcsoport gyorsabban és okosabban tudjon dolgozni egymással. Valamilyenfajta tervezési rendszert, vagy legalábbis egy minta projektkönyvtárat kell tartalmaznia az összes felhasználói felület összetevőjével egy adott projekten belül, hogy interfészeink következetesek, újrafelhasználhatók és karbantarthatók legyenek.

21. Tisztítsa meg a tervfájlokat

Szereted vagy utálom, egyes tervezők csak rendetlenül dolgoznak, és bár ennek van értelme a kreatív folyamat során, elkeserítő lehet, ha először veszünk fel egy tervfájlt, és rájössz, hogy jelentős időt kell fektetnünk a kidolgozásba. hogy az egyes elemek melyik rétegben élnek tovább.

Monzo megállapította, hogy „a Monzóban létrehozott első .sketch fájl óta gondosan ügyeltünk a tervfájljaink rendezésére. És amint egyetlen tervezőből 13 tagú csapattá nőtünk ki, az ésszerű tervezési környezet fenntartása valóban megtérült. ' Ha időt szán a tervfájljaink megtisztítására rétegek, rajztáblák és mappák megnevezésével, akkor minden tervező (beleértve a jövőbeli önmagunkat is) sokkal könnyebben felveheti és dolgozhat rajta. Fejlesztői is köszönetet mondanak neked!

Ezt a cikket eredetileg a Web designer . Vásárolja meg a 288. számot vagy iratkozzon fel ide .

Olvass tovább: