Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2016-12-070 komment

Milyen a hatékony, kártya alapú webdesign?

Telnek-múlnak az évek, azonban még mindig azt látjuk, hogy a kártya-alapú design kitartóan, továbbra is ott szerepel a legmenőbb trendek között. Úgy tűnik, a megoldás működik, és nem csak mobilokon, hanem nagy kijelzőkre is egyre többen választják weboldaluk vagy applikációik alapjául. Te is megpróbálnád a weboldaladon? Segítünk, hogyan tedd!

Olyan cégek használnak kártya alapú designt, mint a Google, a Facebook vagy a Twitter. Az ő weboldalaikat több millió ember látogatja nap mint nap. Miért olyan népszerű a kártya alapú webdesign? Elsősorban azért, mert kitűnő választ adott a reszponzív design elterjedésére.

A kártyák ugyanis olyan információs egységek melyek alakíthatók, mozgathatók és keverhetők már tartalomtípusokkal. Kártyák használatával könnyen reagálhatunk az eltérő kijelzőméretekre: egyhasábos elrendezéssel mobileszközöknél, többhasábos megjelenéssel nagyobb kijelzőkön.

A kártya-alapú design lényege az, hogy a felhasználók érezzék a késztetést a kattintásra, amikor meglátják maguk előtt a kijelzőn az egyes virtuális kátyalapokat. A kártyákon a tartalom egyetlen egységének kell megjelennie – ez lehet egy link, feliratkozás, videó, kép, bármi -, amivel a felhasználók szeretnének interakcióba kerülni.

pinterest

Tervezd fekete-fehérben!

Amikor a weboldalad kártya-alapúra tervezed, akkor érdemes egy fekete-fehér drótvázzal indítani. Végig kell gondolnod, hogy mi a célja az egyes kártyáknak, és azoknak mely része lesz kattintható, vagy hogy linkként funkcionál-e az egész kártya. Ezután meg kell tervezned a a távolságokat, a képeket, a betűtípusokat a kártyákra. Így már látható lesz, hogy miként is néznek ki a kártyák színek és díszítés nélkül, vagyis el tudod képzelni, hogy használhatók-e és miként használhatók.

Ebben a fázisban át kell gondolnod, hogy hova kattintana a felhasználó a weboldalon, amikor valamit meg akar tenni. Teljesen világos, hogy tud előre haladni, vagy éppen visszalépni? Tiszták a felhasználói útvonalak, és hogy milyen eredménnyel járnak? Mindezt anélkül kell megoldani, hogy az egyes gombok valamilyen figyelemfelkeltő színben virítanának, egyértelműen utalva arra, hová kell kattintani. És ez azért fontos, mert ha a weboldal váza nem tűnik működőképesnek fekete-fehérben, akkor színesben sem fog működni.

A whitespace fontossága

Az egyik legnagyobb kihívás a kártya-alapú designnál, hogy az ne hasson zsúfoltnak. Be kell vetni tehát a whitespace-t, mégpedig sokkal nagyobb mértékben, mint azt elsőre elfogadhatónak találnád, vagy ahogy megszoktad a nem kártya alapú weboldalaknál. A whitespace növelése hagyja lélegezni a designt, javítja az olvashatóságot, kellemesebbé teszi az elrendezést.

Behance

Alapvetően kétszer akkor whitespace-szel érdemes indítani, mint amennyit normál esetben az egyes elemek között hagynál. Nagyobb távolságnak kell lennie az egyes kártyák között, de a soroknál is. Ezáltal nyitottá válik a design, és tisztább lesz az elrendezés. A kártyákon csak egy meglehetősen szűk felület áll a rendelkezésedre, hiszen a tartalmukkal együtt illeszkedniük kell az okostelefonok kisméretű kijelzőjéhez, ahogy a tabletekhez és az asztali gépek nagy monitoraihoz is. A nagyobb kijelzőkön a kártyák ráadásul egymással is versenyeznek a figyelemért. A több whitespace-szel viszont könnyebben befogadhatóvá teszed az egész designt.

Színek és árnyékok

Ezután következhet a színeken és az árnyékokon való gondolkodás. Érdemes a természetes megjelenéshez hasonló megjelenést tervezni, a valóságot leképezni, azzal együtt persze, hogy a flat és a material design korában ezt már nem szkeuomorf értelemben értjük. Egyszerűen csak természetesnek ható színeket és árnyékokat kell használni, vagyis úgy megjeleníteni a kártyákat, ahogy azok a valóságban is láthatók. A felhasználók felé ugyanazt az érzetet kell sugározni, mint ha igazi kártyákat használnának.

Ehhez néhány szabályt ajánlott betartani:

  • A fények hatására árnyékok jelennek meg a kártyák mögött és alatt.
  • A design legsötétebb része valószínűleg a kártyák alatti rész lesz, mivel a fény általában felülről érkezik.
  • Az érintési-kattintási pontoknak a fókuszpontokban kell lenniük, hogy könnyen interakcióba léphessen velük a felhasználó.
  • Egy kártya egyetlen információt tartalmazzon.

Ha már a fizikai megjelenésen gondolkodsz, akkor érdemes az egész designt egy magasabb szintre emelni azáltal, hogy egy egységes kártyastílust alkotsz meg a teljes weboldalra. Például olyat, amilyet a Google vázol fel a material design irányelveinek ismertetésénél. E szerint a kártyáknak úgy kell viselkedniük, mint a papírlapoknak a valóságban, hogy az emberek meg akarják őket érinteni, azaz jelen esetben kattintani rájuk.

google-now

Betűtípusok tervezése

Ezután következik a betűtípusok megtervezése, melyeknek lehetőleg egyszerű sans serifnek kellene lenniük. Érdemes kerülni a nagyon vékony vagy tömött betűtípusokat, mert ezeket nehezebb olvasni. A legjobb megoldás kétféle betűtípus kombinálása a kártyákon, melyek akár azonos családból is származhatnak. Az egyik betűtípussal a címet vagy a call to actiont írod, a másikkal pedig a kenyérszöveget.

A legfontosabb a megfelelő kontraszt kialakítása, hogy a szövegeket könnyű legyen olvasni. Ennek érdekében az egyes betűtípusok között, valamint a háttér és a szövegelemek között is kontrasztot kell létrehozni minden kártya esetében.

Dribbble

Korlátozd az UI-elemek számát!

Amit fontos észben tartani, hogy egyetlen kártyának egyetlen akcióhoz kell kapcsolódnia. Ha kártyákat használsz, akkor nincs szükséged különféle elemekre a kártyákon, például gombokra. Ha mégis úgy gondolod, hogy kell valami vizuális jel, ami a legjobban egy gomb formájában manifesztálódhat, akkor egyetlen gombot használj egy kártyán. Annak formája, kialakítása legyen egyszerű, ahogy azt a material design irányelvei is tartalmazzák. Valószínűleg az egy darab gomb az egyetlen elem, amire a kártya-alapú designnál szükséged van.

Nincs olyan képlet, ami a tökéletes kártyát leírná, hiszen az a cél, hogy a felhasználókat kattintásra bírd a kártyáiddal, ez pedig többféle megoldással is elérhető. Tartsd a design középpontjában a valóságot, használj minimalista megközelítést hatalmas terekkel és erős kontrasztokkal, legyen egyszerű a tipográfia, és ne felejtsd, hogy minden kártyához egyetlen információ, egy cselekvés kapcsolódhat csak! Ha ezeket az egyszerű elveket követed, akkor jó esélyed van, hogy olyan kártya alapú designt tervezz, ami működni is fog.

5 hiba, amit ne kövess el kártya alapú design tervezésekor!

1. Különböző hosszúságú tartalmak

Egy tökéletes világban a kártyák azonos méretűek lennének egy weboldalon, így tökéletes látványt nyújtanának. A valóság azonban nem tökéletes. Adott esetben hosszabbak a címek, hosszabbak a leírások. Ezért van az, hogy amikor a kártyák megjelennek egy rácsszerkezetben egy nagyobb kijelzőn, akkor nagy lyukak lehetnek közöttük.

Nagy hézagok a kártyák között

Nagy hézagok a kártyák között

Ilyenkor következetlenül megjelenő whitespace-ről van szó, mely megnehezíti a felhasználók számára, hogy átfussák a kártyákat.

Az első megoldás a szövegek rövidítése. Kérdés azonban, hogy a címek és a leírások vajon akkor is értelmesek maradnak, ha lerövidíted őket? Vagy fontos információkat veszít ezáltal a felhasználó? Egy másik megoldás, ha egyszerűen megszünteted a hézagokat, és egyforma távolságokat alakítasz ki a kártyák között. Ez azonban nem ideális megoldás akkor, ha az olvasóid tipikusan csak átfutják a kártyáidon szereplő tartalmakat. Végül pedig az is megoldás lehet, hogy a kártyákat egyetlen hasábba rendezed minden eszközön. Így bármekkora lehet a magasságuk, nem lesz zavaró.

2. Túl sok kártya

Sokan arra törekszenek, hogy a lehető leghatékonyabban kihasználják a teret egy weboldalon, így annak minden felületére kártyákat helyeznek. Ugyanakkor az emberek számára nyomasztó és nehezen befogadható lehet, amikor a kijelzőt teljesen elborítják a kártyákon szereplő tartalmak.

Túl sok kártya

Túl sok kártya

Végig kell tehát gondolnod, hogy mi az a mennyiség, ami a felhasználóid számára még befogadható egy pillantással, azaz mennyit hajlandó mozdítani a tekintetét vízszintesen. Erre sajnos nincsen ökölszabály, Neked kell megtalálnod tesztek segítségével azt az optimális mennyiséget, mely még feldolgozható az emberek számára.

3. Túl sok lehetőség a kártyákon

A kártyák lényege, hogy egységnyi információkat tartalmaznak, melyek kapuként működnek hosszabb tartalmak vagy más lehetőségek felé. Sokan ezért megpróbálnak minél több lehetőséget egy kártyára zsúfolni, azaz több call to action is helyet kap rajta. Ez azonban inkább csak zavarja a felhasználót, mintsem segítené őt. Ezért gondold végig, hogy melyek azok a cselekvések, melyeket feltétlenül ki akarsz váltani a kártyával.

4. Tartalommal túlterhelt kártyák

A kártyák remek megoldást jelentenek a nagy mennyiségű információk kisebb, feldolgozhatóbb egységekbe történő szervezésében. Gyors bepillantást engednek egy dokumentumba, egy hírbe. Sokan azonban visszaélnek a lehetőséggel, és teletömik információval: elhelyeznek benne képet, gombokat, leírást, adott esetben egy grafikont, táblázatot. Az első akár praktikusnak is  tűnhet, de nem az. A felhasználó így csak elveszíti a fókuszt.

Megoldásként határozd meg, hogy a tartalmadból mi a legfontosabb, és add meg a lehetőséget, hogy a kártyára kattintva jussanak el az emberek a további, kibővített tartalmakhoz.

5. Minden kártyán egy vizuális elem, még ha nincs is rá szükség

Ideális esetben minden kártyán megjelenik egy azonos méretű vizuális elem, így kapja a legesztétikusabb kinézetet. Hiszen így egyformák a kártyák, így kerül egyensúlyba a design. A gyakorlatban azonban akadnak olyan tartalmak, melyek nem igénylik a vizuális kiegészítést. Ilyenkor nem segíti a tartalom jobb megértését a felhasználók számára, ha egy irreleváns képet vagy ikont ráerőltetünk a kártyára, mindössze vizuális zaj keletkezik, mely zavarja az embereket. Meg kell tehát próbálni úgy kialakítani egy jó összhangot a képes és kép nélküli kártyák között, hogy ne kelljen túlterhelni a weboldalt feleslegesen vizuális elemekkel.

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.