Ux - Blog

Ötletek, információk UX témában havonta

UX alapok – Vizuális folyamatok

Vizuális folyamatok tervezésénél a legfontosabb a harmónia és a ritmus létrehozása minden user interface elem között.
Vizuális folyamatok területei:

1. Typography
2. User Interface elemek
3. Színek

1. Typography

Első lépésként pontosan meg kell határozni, hogy ki lesz a célközönsége az oldalnak vagy applikációnak. Ha ez sikerült, akkor már tudjuk, hogy azok a felhasználók milyen tartalmat keresnek és várnak el. Az oldalhoz vagy applikációhoz használhatunk többféle betűtípust. Bátran próbáljunk ki őket, de figyeljünk arra, hogy ne alkalmazzunk túl sokat.

A figyelem megtartása érdekében, valamint az oldalon található tartalom elválasztása céljából is (heading, content, links stb.) igénybe vehetjük a különböző betűtípusokat. A kiválasztásnál vegyük figyelembe, hogy ezek vizuálisan konzisztensek legyenek. Például, ha LATO betűtípust használunk egy H1-es headinghez, akkor figyeljünk oda, hogy ez a H1 heading mindenhol ugyanúgy nézzen ki. A szövegek olvashatóságának szempontjából ugyanolyan fontos tényező a sorok közötti távolság „alignment” megválasztása. Ezt általában érdemes a választott betűtípus 1.4-1.6 szorosára beállítani.

A betűtípusok közötti harmónia a website minden részén hozzásegíti a felhasználót a könnyebb olvashatósághoz és érthetőséghez.

"a vizuálisan egységes honlap, webes felület elérésének lépései a felhasználói igények, elvárások megismerésével kezdődik. Minden UX design egyben egy human centred design fejlesztési folyamat."
3. Színek

Egy weboldal vagy applikáció színkombinációinak a megválasztása az egyik legnehezebb feladat, ezért ez különösen nagy hangsúlyt igényel. Különböző színek más-más érzelmi hatást váltanak ki a felhasználókból. A website vagy applikáció színeinek megtervezéséhez igénybe vehetünk szakértő segítségét vagy online fórumokon is tájékozódhatunk a színek és érzelmek kapcsolatáról.

A legegyszerűbb talán az, ha kiválasztunk egy színpalettát, amelyet használni fogunk a website minden részén, amely természetesen összhangban van a vállalkozás, a szervezet Brand könyvében foglalt irányelveivel. Ha nem szeretnénk kiemelni különböző részeket, akkor hasznos, ha az egyes oldalakon található színek kiegészítik egymást.

Forrás: https://thumbnails-visually.netdna-ssl.com/color-emotion-guide_512d42458efc1_w1500.png
2.     UI (User Interface) elemek

Bill Moggridge - a Designing Interaction című könyvében -, valamint Bill Verplank - MIT professzor és óraadó tanár a Stanford egyetemen - az interaction designt az alábbi kérdések megválaszolásával határozza meg:

Hogyan cselekszünk?
Hogyan érzünk?
Hogyan értünk meg dolgokat?

A User Interface (UI) tervezésnél is érdemes ezt a három dolgot szem előtt tartani.
Egy weboldalon vagy webes felületen a grafikai elemek és ábrák, színek és képek együtt alkotják az adott felület vizuális megjelenését. A tematikus állandóságon felül nagyon fontos, hogy elegendő figyelmet szánjunk a grafikai mechanizmusoknak is.

Elemek térbeli kapcsolata

A vizuális folyamatok egységességének megtartása érdekében nagyon fontos, hogy a különböző elemek konzisztensek legyenek, különben megtörik a folyamatokat.

Képek

A képeknek vizuálisan egységesnek kell lenniük. Tehát nem érdemes különböző megjelenítési formákat alkalmazni, mert ezek is megtévesztőek lehetnek egy felhasználó számára. Ha egyszer eldöntöttük, hogy milyen megjelenítési formát használunk (lightbox, kép megnyitása új oldalon stb.) akkor ugyanazt tartsuk is meg mindenhol.

A felhasználók igényeinek, elvárásainak vagy rejtett motivációinak megismerése az nem akkor szükséges amikor a design már befejezett.  A felhasználók igényeinek, elvárásainak megismerése a teljes tervezési folyamatot végig kell kísérnie.

Méretek

Az egymáshoz kapcsolódó elemek lehetőleg hasonló méretben és formában jelenjenek meg. (Nagyobb méretű elemek sokkal fontosabbnak tűnnek, tehát ha két vizuális elem egymáshoz kapcsolható, akkor azoknak érdemes méretben is hasonlónak lenniük.)

Összegezve

Ahogyan azt már a korábbi írásunkban is összefoglaltuk: a vizuálisan egységes honlap, webes felület elérésének lépései a felhasználói igények, elvárások megismerésével kezdődik. Minden UX design egyben egy human centred design fejlesztési folyamat.

Azért fontos ezt szem előtt tartani, mert az emberi érzékszervek - elsősorban a látás - amelyek a felhasználókat vezérlik és teszik ezt többnyire tudatalatti szinten.

Minden sikeres felület elsősorban vizuálisan kell, hogy meggyőző legyen. Ennek eléréséhez az általunk felsorolt három fő szempont különös jelentőséggel bír. Hiszen, csak azért mert a felhasználók az oldalon található elemekre kattintanak nem biztos, hogy kapcsolatba (interakcióba) is kerültek az oldallal.

Az írásunkban olvasott feladatlista alapján - typography, UI elemek és színek - gondold végig, hogy mi az, amit a felhasználók értékelni fognak, ha ellátogatnak az oldaladra.

Érdekel a UX világa? Akkor gyere el aktuális workshopunkra!

User Experience Design Workshop - Budapest

2016. November 5. (Szombat) 10:00 - 14:00

User Experience alatt nemcsak azt a folyamatot értjük, amikor egy felhasználó ellátogat egy weboldalra és ott használ egy szolgáltatást. User Experience alatt a teljes folyamatot értjük, attól a ponttól kiindulva, ahogy a termékre vagy szolgáltatásra felfigyelt.

HAVE A PROJECT? WE’RE HERE TO HELP YOU CREATE IT.