Return to site

7 VIZUÁLIS TERVEZÉSI ÚTMUTATÓ UX DESIGNERNEKNEK

Az UX ipar óriási hangsúlyt fektet a használhatóságra. Felhasználói történetek, webhelytérképek, drótvázak és használhatósági tesztek minden kiemelkedő élményt nyújtanak, a vizuális megjelenés pedig homályossá válik. De az én tapasztalatom szerint az esztétika fontos szerepet játszik majdnem minden felhasználó tapasztalatában a termékben.

Illumina-ban dolgozom, egy élettudományi cég San Diegóban, Kaliforniában. A genom erejének felszabadításával az emberi egészség előmozdítására törekszünk. Mint UX tervező, az a feladatom, hogy könnyebben megértsem és vizualizáljam a komplex tudományokat. Míg csapatunk a terv funkcionális szempontjain keresztül működik, megszállottan látom a vizuális részleteket, különösen, hogy hogyan tudják javítani ezeket a funkcionális elemeket.

És ez nem csak egy személyes megszállottság. Tanulmányok kimutatták, hogy a szépség megváltoztatja, hogyan gondolkodunk és viselkedünk. Ez pozitív érzelmeket inspirál, örömet teremt, és növeli a boldogságot. Az emberek érzékelik a vonzó dolgokat, hogy jobban működjenek, akár ténylegesen, akár nem. Ez a tervezők számára nagy előny, mert mindkettő növelheti a jól megtervezett termékek használhatóságát, és pótolhatja a hiányosságokat vagy kompromisszumokat a kevésbé jól megtervezett tapasztalatokban.

A szépség megváltoztatja, hogyan gondolkodunk és viselkedünk.

A gesztális pszichológia egy magyarázatot nyújt erre: az emberek a dolgok egészét érzékelik, mielőtt az egyes részeit meglátják. Tehát mielőtt összpontosítanának arra a részletre, amit ez a gomb működik, vagy mi ez a formanyomtatvány kérdése, átfogó esztétikai benyomást kapnak. És ha az oldal gyönyörű, akkor ez a benyomás jó lesz.

Mindezeket szem előtt tartva, itt van a Gestalt pszichológia 8 alapelve, melyekkel a jobb vizuális tervezés révén javíthatja a használhatóságot.

1. Használjon félelmetes rácsrendszert

A közelség elve azt mondja, hogy az emberek egymás közelében álló objektumokat egyetlen egységként érzékelik. És nincs jobb módja a vízszintes közelség szabályozására, mint egy jól megtervezett rácsrendszeren keresztül.

Személy szerint szeretem a Bootstrap csomagban található 12 oszlopos rácsot. Könnyen testreszabható és könnyen reprodukálható a Photoshopban. Fedezheti az Alapítvány, a PureCSS, vagy akár a rácsokat is, amelyek nem kötődnek a keretrendszerekhez, mint például az 1140px.com.

2. Használja ki a tervezési mintákat

A hasonlóság elve kimondja, hogy olyan alakokat próbálunk csoportosítani, amelyek hasonló alakúak, színűek és árnyékosak. Ez tökéletes indoklást biztosít számunkra, hogy ezeket a hasonló elemeket saját tervezési mintáikra fordítsuk.

Meg kell jeleníteni egy projektet az alkalmazásban? Használjon kártyát. Lehet, hogy úgy formálja meg, mint egy fájlmappát. Van egy képed, hogy képviseljen? Használj kártyát, talán úgy nézel ki, mint egy régi Polaroid.

A tervezési minták hatalma az, hogy a memória terhelését csökkenti a gyors felismerés. Eleinte a kártya mintázata csak szórakoztató vizuális díszítésnek tűnik. De a hasonlóság elve alapján úgy találjuk, hogy hatékonyan kommunikál információcsoportokkal.

A tervezési minták hatalma az, hogy a memória terhelését csökkenti a gyors felismerés.

3. A hajtással dolgozni

A bezárás elve azt mondja nekünk, hogy az objektumokat még akkor is teljesnek tekintjük, amikor hiányosak - ami akkor hasznos, amikor az oldal hajtogatásán dolgozik.

Ha a tartalma kiterjed a hírhedt "oldaldobás" alatt, akkor ne aggódjon, ha nyilvánvalóan levágottnak tűnik. Amikor a felhasználó látja a kicsinyített tartalmat, természetesen görgetni fog, hogy befejezze az elméjükben kialakult alakot. Természetesen meg kell győződnie arról, hogy a feltöltött tartalom illeszkedik egy adott alakhoz (például egy dobozhoz vagy szövegblokkhoz), így a felhasználók tudják, mire számíthat.

A bezárás elve azt mutatja, hogy nem kell minden információt megmutatnunk. Ehelyett, hagyja, hogy a felhasználó szeme betöltse a maradékot, és vezesse őket további kutatáshoz.

4. Mérje ki az elrendezést

A szimmetria elve azt mondja, hogy érzékenyen tetszik az objektumok páros számú szimmetrikus részbe való felosztása. Imádom ezt a koncepciót, mert olyan egyszerű, de nagyon hasznos.

Nemrég készítettem egy nagyon kevés tartalmat tartalmazó felhasználói kezelő képernyőt, így rengeteg fehér helyet hagyva nekem. Ahelyett, hogy a tartalmat a képernyő közepén csapolnám, balra állítottam, és a súgószöveggel jobbra kiegyensúlyoztam. Mivel a szemünk természetesen egyensúlyt keres, a szimmetria elve segíthet abban, hogy stabilabb, következetesebb és harmonikusabb módon kommunikáljunk.

5. Animálás

A közös sors elve azt mondja, hogy az objektumokat olyan irányvonalaknak tekintjük, amelyek ugyanabba az irányba mozognak. Ez az egyik oka annak, hogy a rajzolás animációi nagyon hasznosak lehetnek.

Az oldal oldaláról csúsztatható menü azt mutatja, hogy az adott menü összes linkje között a szinkronizált mozgáson keresztül kapcsolódik. A közös sors elve segít a felhasználóknak a tervezés különböző elemei között.

6. Az alkatrészek csatlakoztatásához használjon finom vonalakat

A folytonosság elve azt mondja, hogy csoportokba sorolt ​​objektumokat tekintjük, ha egy objektumon belül helyezkednek el.

Néha több összetevő is nyúlik a képernyő teljes szélességében. Egy pillantásra nem lehetnek nyilvánvalóak a kapcsolataik, még akkor is, ha tökéletesen igazodnak egymáshoz. Annak érdekében, hogy nyilvánvalóbbá váljon, csatlakoztassa őket egy finom vonalhoz, hogy felhívja a felhasználó szemét. A folytonosság elve lehetővé teszi, hogy a tervezet könnyen olvasható legyen, például a szöveg egy bekezdéséből származó vonalak.

7. Használjon sima, nem fényes

A jó gestalt elve azt mondja, hogy egyszerűen, tiszta és rendezett dolgokat szeretünk. Így lapos kivitel.

A lapos kialakítás nem támaszkodik nehéz árnyékokra, szélsőséges gradiensekre vagy összetett fényhatásokra, amelyek mindegyike eltereli a felhasználókat a céljukból. Ahelyett, hogy elgondolkodna azon, hogy mi történik a gomb megnyomásával, irreleváns kérdéseket felvethetnek, mint például: Milyen anyag az a gomb? Üveg vagy fém? Hány fény van rajta? Milyen irányból világítanak? Az árnyék megfelel a fény szögének? A jó gestalt elve alapján a tervek hatékonyabban kommunikálhatnak az egyszerűség révén.

Szeretjük azokat a dolgokat, amelyek egyszerűek, tiszták és rendezettek.

8. Légy következetes

A múltbeli tapasztalat elve szerint a múltban csoportosított elemeket a jövőben ilyen módon fogják látni. Ez magyarázza a terv konzisztenciájának értékét.

Tegyük fel, hogy a következő és törlés gombjait a párbeszédablak egy adott területén helyezi el. Ha pozíciójuk változik a képernyőkön keresztül (például tükröződik), akkor a felhasználó rossz műveletet hajthat végre (például lezárja a dokumentumot mentés nélkül). Az emberek a korábbi ismereteket használják a jelen dolgok megértéséhez. A múltbéli tapasztalatok mesterkedése a felhasználók számára előnyös, ami kevesebb zavarhoz és kevesebb hibához vezet.

A szépség használhatósága

A Gestalt egyes alapelveinek betartásával jobban megérthetjük, mi teszi a terveket olyan kellemes és hatékonyabbá. Személy szerint megnyugtatónak találom, hogy minden embernek természetes a nagy design és a nagy tapasztalatok azonosítása. Ez a mi munkánk, mint a tervezők, hogy kihasználjuk ezt a képességet. Míg a használhatóság rendkívül fontos, nem az egész egyenlet.

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly