Webshark Blog

Webdesign trendek jönnek és mennek. Most egyetlen cikkben áttekintjük azt, amit az elmúlt évek webdesignja kapcsán érdemes tudni. Szóba kerülnek a ’90-es évek, a minimalizmus, a flat design, a material, a 3.0-ás webdesign, és még sok-sok apró trend az elmúlt évekből. (Frissítés, 2021.09.23. – Egy új fejezettel bővítettünk: Kettéosztott weboldal: mikor és hogyan érdemes belevágni?)

De kezdjük az elején:

Webdesign trendek a ‘90-es évektől napjainkig, röviden

Az internet, illetve a web jó pár fejlődési szakaszon van túl a ‘90-es évek közepe óta. Kezdődött a nagyon egyszerű honlapokkal, melyek aztán átcsaptak az őrületbe 2000 környékén, ami után megkezdődött a konszolidáció. Ez végül a mai, sokkal kiegyensúlyozottabb megoldásokhoz vezetett.

Nem kell persze csodálkozni a változáson, hiszen a webdesignerek mozgásterét és kreativitását mindig jelentős mértékben korlátozzák az adott korszak technológiai lehetőségei. A kezdetekben még egy kód megírása is annyira új dolognak számított, hogy nem nagyon törődtek a weboldaltulajdonosok azzal, hogy mennyire jól használható egy weboldal, örültek, hogy működött. Ma már azonban alapkövetelmény a jó felhasználói élmény, a vonzó, mobilbarát és gyors weboldalt. De lássuk a folyamatot, mely idáig vezetett!

Kattints rám korszak! (1995-2003)

Ez volt az az időszak, amikor megjelentek az első weboldalak. Ezek nem úgy néztek ki, mint ma egy weboldal, sokkal inkább valamiféle hirdetőtáblára hasonlítottak. Megjelenésüket a korabeli marketing bevett technikáira alapozták. A flash animációk lehetővé tették, hogy olyan call to action jelenjen meg az oldalon, mely szinte kiégette a felhasználók retináját. Ez volt az az időszak, amikor a web úgy nézett ki, mint egy fényreklámokkal teli utca.

Ennek a harsány trendnek a kialakulásához – az útkeresésen túl – hozzájárult az is, hogy ekkor még erősen korlátozottak voltak a technológiai lehetőségek, miközben kissé elavult marketing-technikákat próbáltak új környezetbe helyezni a weboldaltulajdonosok. Tény, hogy a cégek már ekkor is mindent megtettek, hogy weboldalukra vonzzák az embereket.

Ugyanakkor, ahogy teltek az évek, a fejlesztők eszköztára egyre bővült, és képesek lettek jobban használható és vonzóbb weboldalak készítésére. Ekkor már nem elsősorban arról akarták meggyőzni az embereket, hogy amilyen gyorsan csak lehet, vásároljanak valamit tőlük, hanem arról, hogy miként lehet egy céget megbízhatóként és hitelesként bemutatni a weben.

Negatív tér – 2000-től

A kevesebb néha több. A 2000-es években erre eszméltek rá a fejlesztők, amikor elkezdték vizsgálgatni, hogy miként reagálnak a felhasználók a weboldalaikra. Kiderült, hogy a látogatók szellősebb weboldal-elrendezés mellett hatékonyabban fel tudják dolgozni az ott szereplő információkat. A kutatások hatására a designerek nagyobb whitespace-eket kezdtek alkalmazni, hogy az információk feldolgozását segítő megjelenést adjanak a tartalomnak. Ezáltal hatékonyabban adhatják át az üzenetet is a felhasználóknak, legyen az egy termékinformáció, hír vagy csak szórakoztatás.

A változást tehát az váltotta ki, hogy a fejlesztők rádöbbentek, mennyire fontos a tartalom a weboldalakon. Kiderült, hogy nem lehet akármennyi információt belezsúfolni egy weboldalba, az pedig nem működik, hogy folyamatosan megpróbálsz eladni az embereknek valamit. Ezért visszafogták a színes grafikákat, és egy letisztultabb felület segítségével próbáltak meg kapcsolatot kialakítani a felhasználókkal.

Web 2.0 – 2003-2010

Egy idő után azonban a felhasználók egy kicsit megunták a nagyon alapszintű, kevés információt kínáló és unalmas weboldalakat. Olyan online élményre vágytak, mely szórakoztató vagy tanulni lehet belőle. Ez ahhoz a jelenséghez vezetett, amit most Web 2.0-nak hívunk. A fejlesztők már képesek voltak igazán izgalmas és interaktív tartalmak megjelentetésére, melyek révén megkülönböztethetővé váltak egymástól a weboldalak.

Ahogy az internet egyre inkább képessé vált eladásra, már nem volt elegendő pusztán jelen lenni a weben. A Web 2.0 segítségével a cégek már nem csak meggyőzni akarták a látogatókat, hanem megpróbálták lenyűgözni őket a jól kidolgozott felhasználói élménnyel. Ez a trend azóta sem fejeződött be, 2010 után még kiterjedtebbé vált különféle, egyedi megoldások alkalmazásával.

Szkeuomorf design – 2010-2012

Ahogy a design és a technológia fejlődött, úgy tudtak a fejlesztők egyre hatékonyabb online élményt kínálni a felhasználóknak. Akár háttérről, akár ikonokról, akár gombokról volt szó, a webdesignerek egyre kreatívabbak lettek, és egyre több határt léptek át a weboldalak egyedibbé tételénél. Mindezt annak érdekében, hogy átadhassák a megfelelő üzenetet, illetve egyedi élményt kínáljanak.

A valóságból vettek kölcsön hangokat és textúrákat, melyeket grafikákba, animációkba helyeztek, hogy egyesítsék a digitális és a valós világot. Ennek a trendnek a megjelenésében közrejátszott, hogy ekkoriban egyre népszerűbbé és hatékonyabbá vált a gamification. Hiszen egy videójáték vagy egy mobilapp olyan mértékben tudta megfogni a felhasználókat, melyre más médiaforma nem képes.

A szkeuomorf design azonban csak addig volt népszerű, amíg néhány cég el nem mozdult egy egyszerűbb és gyorsabb megoldás irányába, mely kevésbé függött a jó minőségű grafikától és sokkal inkább magától a webdesigntól, melynek révén könnyebbé vált a navigáció.

Végtelen görgetés – 2014-2016

A minimalista design felé vezető úton a designerek tettek egy kis kitérőt: elkezdték alkalmazni a közösségi média oldalak által használt végtelen görgetést. Ez a megoldás kedvező volt az egyre szaporodó mobilos felhasználók számára, mivel jól illeszkedett a kisebb kijelzők használatához. A designereknek persze nem volt könnyű feladat, hogy egy végtelen hosszúságú oldalon úgy helyezzék el az összes szükséges információt, a legfontosabb üzenetet és a CTA-kat, hogy azt a látogatók meg is találják.

A végtelen görgetés alkalmazása persze visszaélés volt a rendelkezésre álló technikával, miközben egyáltalán nem javította a UX-et és sok esetben megzavarta a felhasználókat, illetve komplikáltabbá tette a navigációt. Ráadásul a végtelen görgetésnél a bugok előfordulása is sokkal kellemetlenebb, hiszen minden egyetlen oldalon jelenik meg, amivel ha gondok vannak, akkor abba mindenki belefut, aki a weboldalra látogat.

Ezért a designerek ismét elmozdultak a felhasználói élmény egyszerűsítése irányába, és megint letisztultabb, SEO-barátabb, kiegyensúlyozottabb oldalak létrehozására törekedtek, melyek több tartalmat kínáltak egyszerűbb navigáció mellett.

Minimalista design – 2012-től

A technológia által egyre inkább túlstimulált életünkben egyre kevésbé vágyunk arra, hogy a weben is olyan weboldalakba fussunk bele, melyek szintén a figyelmünket követelik. Az intelligens technológiák, az egyre tájékozottabbá váló felhasználók és a kifinomultabb esztétikai sztenderdek elvezettek a minimalizmushoz a webdesignban. Pedig alig több, mint 10 év telt el a “kattints rám” korszak óta, aminek gyakorlatilag az ellentéte valósul most meg a weben.

Mindezek mellett persze még számos más webdesign irányzat is megfigyelhető volt az elmúlt években, de most lássuk a közelmúltban és a jelenleg is létező webdesign trendeket!

A flat design

A webdesign világában a 2010-es évek egyik legnagyobb buzzwordje a flat design volt. Azok a felhasználók, akik tényleg csak használták a digitális világot, és nem alakították, csak azt látták, hogy egyre inkább leegyszerűsödnek ebben a világban a dolgok, az elemek elveszítik korábbi 3d-s jellegüket, eltűnnek az árnyékok, a textúrák, a domborulatok, egyre egyszerűbbek, úgymond letisztultabbak az oldalak. De mi az a flat design, és honnan jött?

A flat designt tekinthetjük a webdesign forradalmának, ugyanis megjelenése szükséges volt ahhoz, hogy kibontakozhasson a mobil web forradalma. A kettő együtt járt, egymás nélkül elképzelhetetlen lett volna. Flat design kellett ahhoz, hogy mobilon, tableten és desktopon is egyformán jól nézzen ki egy weboldal reszponzív designja. A mobile first elv gyakorlatba ültetéséhez szükség volt a flat minimalizmusára az oldalméretek csökkentéséhez, a képernyőméretek teljes kihasználásához, és hogy megfelelő méretű felületek jelenjenek meg mobilon az ujjakkal való használathoz.

Sokaknak az iOS7 designja ugrik be, amikor a flat designról hall, vagy annak elemeivel szembesül. Pedig korántsem az Apple volt az, mely megteremtette a flat designt, sőt még csak nem is ő kezdte népszerűvé tenni. Ugyanis amikor a Windows 7 mobil verziója határozottan anti-szkeuomorf kinézetével megjelent, akkor változott meg minden: ekkor robbant be megállíthatatlanul a flat esztétika a design világába. Ismét, mert nem akkor és ott született, hanem már jóval korábban, csak megint elcsábította a világot.

A flat design születése

A flat design gyökerei az 1920-as évek Német- és Oroszországáig nyúlnak vissza, mégis a leginkább Svájchoz köthető. Az 1940-es és 1950-es években ugyanis megjelent az International Typographic Style, vagyis más néven a svájci stílus. Ez volt tulajdonképpen a nyomtatott elődje annak a flat designnak, ami egy időre annyira népszerűvé vált a digitális világban.

Jellemzője a rács-stílus, az asszimetrikus elrendezés, a sans serif betűk alkalmazása, a tipográfia hangsúlyozása, a tartalom világos, hierarchikus felépítése, a fotók helyett sokszor inkább illusztrációkat használtak, viszont ha fotót, akkor azok óriásira nőttek, és tettek mondjuk egy nagyon egyszerű tipográfiával készült szöveget rájuk. A sváci stílus az olvashatóságra helyezte a hangsúlyt és összekapcsolódott a hasonló kortárs törekvésekkel, melyek ezt célozták. Így például a Helvetica betűtípussal, mely 1957-ben jelent meg.

A flat design azonban a svájci stílus mellett a minimalista művészeti stílusból is sokat merített, melynek gyökerei egyébként a Bauhaus révén még egy kicsit korábbi időszakra, és szintén Németországba nyúlnak vissza. A minimalizmus lényege, hogy minden felesleget eltávolított, csak a legszükségesebb elemeket hagyja meg. Világos színek, egyenes vonalak, geometrikus formák jellemzik. Ma egyébként még mindig rendkívül népszerű az építészetben, Magyarországon is, ahol az úgynevezett luxus családi házak körében nem is képzelhető el más lehetőség, mint a minimalista kocka, a beton és az üveg.

A flat design a Microsoft találmánya

A digitális világba a Microsoft hozta be a flat designt, de nem a már korábban említett Windows Phone 7-tel és főleg nem a legtöbbek által emlegetett Windows 8-cal, hanem a nem túl népszerű Zune nevű lejátszójával, még 2006-ban. Ez az Apple iPodjának volt annak idején a riválisa. Ez tekinthető a flat design első megjelenésének, bár a Windows Phone 7 révén terjedt el igazán.

Ekkor még a szkeuomorfizmus uralkodott a digitális világban, ahogy az Apple-nél is: a különböző ábrázolások a való élet tárgyait utánozták. Lekerekítések, árnyékok, három dimenzió, a legapróbb részletekig kimunkált textúrák. A szkeuomorfizmus az Apple találmánya volt, mely még 1984-ből az első grafikus felhasználói felület megjelentéséből ered, mely egy íróasztalt akart ábrázolni, benne olyan ikonokkal, mint a papírlapokat tartalmazó mappák.

Ennek akkor azért volt különös jelentősége, mert a számítógép operációs rendszere teljesen újnak számított, ezért a való világ dolgait utánozta, hogy az ember könnyebb kapcsolódását megteremtse a számítógéppel. Ez számított a tökéletes designnak, mert összeköttetést teremtett a digitális absztrakciók és a fizikai valóság között, ezzel könnyítve meg, téve intuitívvá a használatát a modern technikai eszközöknek. Az Apple ezt a tökéletességig fejlesztette, de idővel – amikor már mindenki számára természetes volt a digitális eszközök használata – teljesen idejét múlttá vált.

A Windows Phone 7 2010 októberében jelent meg erős színeivel, rácsszerkezetével, egyszerű sans-serif betűkkel, lapos ikonokkal, mértani formákkal, a textúrák és a három dimenziós érzés feltűnő hiányával. Ezt nevezték el a Microsoftnál Metro stílusnak.

Viszonylag jó volt az új design fogadtatása, és a Windows 8 számítógépes oprendszer is már ebben a Metro stílusban érkezett, megtartva a rácsot, csempéket használva, éleket, erős színeket, sans-serif betűket, melynél az olvashatóság vált a legfontosabb szemponttá. A Microsoft azóta is ezt a Metro stílust használja – miközben az elnevezés már eltűnt – minden termékénél.

Az Apple tette mainstreammé

2013-ban aztán az Apple a szokásos, jól felépített propagandával elkezdte szivárogtatni, hogy nagy vizuális újításra készül, egy grafikai váltásra, melynek során legalább egy dimenzióval kevesebbet kapnak a felhasználóik, mint amit megszoktak. Szakít tehát az akkorra már végletekig hajtott, elfáradt, indokolatlan szkeuomorf világával.

Nem meglepő, hogy az Apple rajongótábor akkoriban megszokott, fanatikus hozzáállásának köszönhetően 2013 nyarát követően lőtt ki a flat design népszerűsége. Az Apple erős hatással volt a web és az applikációk designjára. A legtöbb tervező ekkor egészen vonzónak és modernnek érezte a flat designt, és úgy vélte, hogy feltétlenül újra kell tervezni az oldalát, applikációját a legújabb elvek szerint. Ebben persze más is közrejátszott, mégpedig az egyre több méretű kijelző, melyre a reszponzív design kínált megoldást.

Reszponzív design

A flat design robbanásszerű terjedéséhez tehát hozzájárult a reszponzív design, melyet magyarul alkalmazkodó designnak nevezhetünk. Lényege nem annyira esztétikumában keresendő, hanem abban, hogy rugalmasan alkalmazkodik mindenféle képernyőmérethez mobiltól a desktopig. A technológia változása egyszerűen szükségessé tette, hogy a weboldalak már reszponzív designnal készüljenek.

A reszponzív design azonban nem nagyon fér össze a szkeuomorf világgal, mivel az ott alkalmazott árnyékok, textúrák, domborulatok nem igazán vagy csak nagy nehézségek árán mozgathatók egy nagy, 19-21 inches monitor és egy 3,5 inches mobil kijelzője között. Ráadásul a flat designnál minden felesleges elem mellőzése miatt az oldalak betöltése gyorsabb lett, és könnyebbé vált az átméretezés a tartalom megtartása mellett.

Ehhez jött még hozzá, hogy a képernyők felbontása is folyamatosan növekedett, és sokkal egyszerűbb volt elfogadható minőségű oldalakat készíteni flat design elvek szerint, mint számtalan méretű képet felhasználni arra, hogy minden kijelzőn jól jelenjenek meg.

Összefoglalva

A flat a szkeuomorfizmus ellen született meg, visszatért az alapokhoz, elhagyta a 3D-s megjelenítést, az árnyékokat, a színátmeneteket és az anyagszerűséget. A megjelenést másodlagossá tette, a legfontosabb a használhatóság lett, de legalább ugyanennyire fontos: gyorsabbá tette a weboldalakat, és minden kijelzőmérethez remekül igazodott, azaz reszponzív tervezésre kiváló alapot nyújtott. Összességében tehát egyszerűbbé tette a dolgokat a designerek és a felhasználók számára is a mobilkorszakban.

De akár öt darab pontba is össze lehet foglalni azokat az előnyöket, melyeket a flat nyújtott:

• Egyszerű és könnyű használat – a flat design teljes mértékben a felhasználó igényeinek van alárendelve. Csak a legszükségesebb elemeket használja, mindenféle felesleges díszítés nélkül. Ez a legnagyobb előnye, és ez az, ami miatt ilyen gyorsan és széles körben teret hódított.
• Tökéletesen alkalmas a kisebb kijelzőkön való megjelenésre – a 21. század elején, a mobilkorszakban igencsak komoly előny, ha egy designirányzat jól alkalmazkodik az okostelefonok és a tabletek kijelzőjéhez, és ott is ugyanolyan élményt nyújt a felhasználóknak, mint laptopon vagy asztali gépen.
• Gyorsaság – a flat design az egyszerűsége és megoldásai miatt kisebb méretet jelent, ami együtt jár a nagyobb gyorsasággal, vagyis egy weboldal tartalmának rövidebb idő alatt történő betöltésével.
• Jobb helyezés a találati oldalakon – egy weboldal keresőoptimalizálásának számtalan tényezője van, azonban az egyik legfontosabb ezek közül a sebesség. A flat design ilyen szempontból az egyik legjobb választás, különösen, hogy jellemzően már együtt jár a mobilra optimalizáltsággal, ami szintén fontos kérdés a Google számára.
• Középpontban a tartalom és a funkciók – végül pedig nagy előnye, hogy nem nyomja el, hanem maximálisan hagyja érvényesülni a célokat, azt nyújtva a látogatóknak, amit a weboldalon valóban keresnek. A felhasználók könnyebben végrehajtják az eltervezett akciókat, például egy megrendelést, ugyanis nincs semmi felesleg, ami eltérítené őket ettől. A weboldalad ezzel válik igazán hatékony eszközzé.

Ugyanakkor a flat designnak vannak árnyoldalai is, így az, hogy viszonylag korlátozott keretet ad a fantáziának, és ha túlpörgetik a designerek, akkor könnyű teljesen egyforma, jellegtelen oldalakat készíteni az alkalmazásával. Ugyanígy nem mindig könnyű dekódolnia a felhasználóknak a flat design jelzéseket: a sokat emlegetett példa erre a gombok esete, melyek flatben nem látszódnak fizikailag gombnak, így nem feltétlenül jön rá a felhasználó, hogy kattintani kellene. Ráadásul mára kicsit meg is kopott a fénye, hiszen már többéves trendről van szó.

Minderre válaszul hamarosan megjelentek az új irányok. A legfontosabb a Google új design-nyelve volt:

A material design

A flat design túlhajtása ellenében született meg a material design (a Wikipédia fordítása szerint anyagszerű megjelenés), mely visszacsempészett elemeket a szkeuomorf designból. Mégpedig azokat, melyek megkönnyítették a használatot, miközben persze alapvetően kitartott az egyszerűség mellett. Elkezdett rétegeket használni, melyeket árnyékok segítségével választott külön és minden elborított az animáció.

De mi is az a material design?

A legegyszerűbben a material úgy érhető meg, ha elképzelünk egy fizikailag létező papírlapot, de olyat, amelyik képes megnőni és összehúzódni, átformálódni, összeolvadni egy másikkal, vagy épp szétválni. Majd ezekből egymásra rakunk egy csomót, amelyek egymás felett lebegnek. Mindez teljesen reszponzív, a részletesen lefektetett iránymutatások alapján sokféleképpen használható design.

Leegyszerűsítve: némi visszalépés a flat designtól a szkeuomorfizmus felé, illetve inkább a kettő keveredése figyelhető meg a material designban. Ennek az a célja, hogy kellően intuitívvá válhasson a használat, amihez kellenek a való életből átemelt elemek. A flat design – és főleg a rossz flat design – legnagyobb hátrányának ugyanis a usability-problémákat tartották.

A Google – mely 2014. június 25-én, az I/O konferencián indította útjára hivatalosan a trendet – persze máshogy definiálja a material designt: egy olyan vizuális nyelvként, mely egyesíti a jó dizájn klasszikus elveit az innovációval, valamint a tudomány és a technológia lehetőségeivel. Még ha ennek sok értelme nincs is, a lényeg az, hogy a felhasználói élmény és a használhatóság minden platformon és eszközön egyformán jó legyen, és ehhez a célhoz bizony felhasználja a valóságból átemelt elemeket, de persze egészen máshogy, mint a szkeuomorfizmus tette.

Usability a középpontban

A material designban megjelentek ismét az árnyékok, a mélységek, az áttűnések, miközben maradt a rács-elrendezés és a reszponzivitás. A fő elemek az úgynevezett kártyák, a jó olvashatóságot megcélzó Roboto betűtípus, a világos és erős színek használata, valamint a mozgás és az animáció. A valós megjelenésre azért van szükség, hogy tiszta és világos legyen a felhasználóknak, mire lehet kattintani és mire nem, vagy hogy mi, hol található egy hierarchiában. Mindez nyilvánvalóan messze állt a néhány évvel azelőtt uralkodó szkeuomorfizmustól, elég csak a Google designnal foglalkozó oldalára pillantani. Sokkal inkább a flat jut eszünkbe róla.

Jon Wiley, a Google designere a material design bevezetésének szükségességét azzal indokolta, hogy amikor valaki interakcióba lép egy szoftverrel, azaz megérint mondjuk egy gombot, akkor számít valamiféle visszajelzésre, van egy elképzelése arról, hogyan fog reagálni. Amennyiben ez a visszajelzés nem érkezik meg, vagy nem megfelelő, akkor elveszik a felhasználói élmény. Ez pedig nem jó.

Flat vagy material?

Sokak szerint a flat weboldalak praktikusabbak, mert gyorsabban töltődnek, mint a komplex grafikákkal és animációkkal terhelt oldalak. Tehát egy olyan weboldal számára, melynek a lehető legszélesebb közönség számára kell könnyen, egyszerűen használhatónak lennie mindenféle eszközön, vagyis a legfontosabb a felhasználóbarát kivitel, akkor a flat volt a jó megoldás.

De ha nem az egyszerűség és a könnyű használat a leges-legfontosabb szempont, hanem már megjelenik az igény az egyediségre, ami lenyűgözi, magával ragadja a látogatót, akkor material animációkkal ez könnyebben ment. De persze az is járható út volt, hogy flat designt kombinálják némi, szerény mértékű animációval a material elvek alapján. A flat 2.0 valami ilyesmit hozott. Lássuk!

A flat 2.0

Mivel a flat design nem csak egy fellángolás volt a webdesignban, hanem szükségszerű alkalmazkodás a változásokhoz, így nem is várható, hogy egyszer csak eltűnik a süllyesztőben. Igaz ugyanakkor, hogy nem is állandó és mozdulatlan, hanem folyamatosan alakul. Érdemes egy pillantást vetni arra, hogy milyen irányúak is ezek a változások.

A flat eredetileg mindent elvetett, ami a szkeuomorfizmusra volt jellemző, ugyanakkor néhány év elteltével a designerek néhány elemet elkezdtek visszacsempészni onnan, valamint előkaptak más elemeket, hogy javítsák a használhatóságot. Így alakult ki egyrészt a Google részéről a material design, másrészt pedig a “majdnem flat”, amit nevezhetünk flat 2.0-nak is, miközben néhányan már nem is nevezik flatnek.

Ryan Allen 2.0-ás flat designról beszélt ennek kapcsán, miután arra figyelt fel, hogy mind többen tesznek némi “díszítést” az egyébként flat munkáikba. Úgy jellemezte a változásokat nagyon találóan, hogy míg a flat design a fenyőfa, addig a flat 2.0 teszi rá a díszeket a szaloncukrokat. Mindenképpen csak fejlődésről lehet beszélni a változások kapcsán, semmiképpen nem egy újabb design-forradalomról.

De mi is a flat design lényege? Ezek közé tartoznak a korábban elmondottak alapján a

• hosszú árnyékok,
• az élénk színek,
• az egyszerű tipográfia,
• a szellemgombok,
• és a minimalizmus.

Ebből lett a flat 2.0

A felsorolt jellemzőket nem dobálta le magáról a flat 2.0, csak csavart rajtuk egyet. A flat megoldásokra ugyanis szükség van, hiszen sokkal jobban működnek a sokféle méretű kijelzőn, mint a pixelpontos design. A flat tehát flat maradt, csak egy kicsit játékosabbá válik. A legegyszerűbben Ryan Allen illusztrációjával lehet bemutatni a különbséget:

Megjelennek benne

• fények,
• árnyékok és
• színátmenetek

minden elemen, ezáltal élőbbé téve a képet. De nem is részleteznénk tovább, tisztán látszik, hogy mi változott a flathez képest a flat 2.0 esetében. Finom, apró változások ezek, a természetes fejlődése egy designirányzatnak. Nem elvágja a gyökereket, hanem inkább kibontja azokat az egyszerű formákkal és árnyékokkal. Szabályokat nem is nagyon fektet le a szerző.

De azért az előbb említetteken túl az új irányra nagyon jellemzőek

• az interakciós és egyéb animációk,
• a parallax görgetés,
• a könnyebb használhatóság,
• és az egyre több és nagyobb fotó.

Mikor és hogyan alkalmazd a flat designt a weboldaladnál?

A flat design használatánál gyakran előfordulnak usability problémák a bizonytalan kattinthatóság miatt. Ezt azonban el lehet kerülni, ha következetesen és világosan meg tudod különböztetni a kattintható és a nem kattintható elemeket.

A Nielsen Norman Group futott neki egy vizsgálatnak a flat designnal kapcsolatban. Róluk tudjuk, hogy elsősorban a konvencionális megoldások hívei a webdesignban, ami talán unalmas a designerek és sok ember számára is, viszont állításaikat alá tudják támasztani. Korábban már érintettük azt is, hogy az NNG szerint egy gombnak, mely kattintható, annak úgy is kell kinéznie, most azonban itt vannak a részletek, és még az is kiderül, hogy mikor nem gond a flat design.

A flat felületek és a gyenge jelzések

Az NNG szerint a flat design használata a digitális felületeken az egyértelmű jelek hiányával jár együtt. Azok a weboldalak, melyek flat designt használnak, eltávolították azokat az egyértelmű jelzéseket, melyekre az emberek támaszkodtak annak megállapítása során, hogy mi kattintható az oldalon. Vizsgálataik során arra voltak kíváncsiak, hogy miként befolyásolja a kattinthatósági jelzések erőssége azt, ahogy a felhasználók feldolgozzák és megértik a weboldalakat.

Abból indultak ki, hogy több tényező befolyásolja, hogy miként lép kapcsolatba a felhasználó egy felülettel. Ahhoz, hogy meg lehessen állapítani, hogy a jelzések különböző erősségének milyen hatása van, az egyéb befolyásoló tényezőket el kellett távolítani. Vettek tehát 9 darab weboldalt, és mindegyikből kialakítottak két, majdnem teljesen azonos verziót: a különbséget az jelentette, hogy erős vagy gyenge volt az interaktív elemek – úgy mint gombok, linkek – jelzése. Ez bizonyos esetekben azt jelentette, hogy flat designnal készül oldalakhoz adtak hozzá árnyékokat és gradienseket, míg más oldalakon a tradicionális elemeket alakították át a flat design szabályai szerint.

A további részletekbe nem mennénk bele, ezek elérhetők az NNG kutatásról szóló beszámolójában. A lényeg, hogy a résztvevőknek jelezniük kellett, mikor veszik észre a kapott feladat végrehajtásához szükséges gombot, miközben figyelték tekintetük mozgását. Így aztán tanulságos heatmapek is kirajzolódtak, melyeken jól látható, hogy hogyan nézelődnek a weboldalakon. Ami még fontos, hogy minden résztvevő csak a kétféle weboldal egyik verzióját látta. A cél pedig az volt, hogy megállapítsák: milyen könnyen találják meg a cél-elemeket a felhasználók (nem pedig az, hogy rámutassanak a használhatósági problémákra).

Az eredmények

Nem túl nagy meglepetésre, kiderült, hogy az átlagos idő, melyet az emberek az egyes weboldalelemek keresésével töltöttek, szignifikánsan – 22 százalékkal – több volt a gyenge jelzéseket alkalmazó weboldalakon. Mérték a megtorpanások számát is, ami 25 százalékos eltérést mutatott.

Mindez azt jelenti, hogy a gyenge jelzéseket használó weboldalakon az emberek sokkal több időt töltenek a weboldal nézegetésével, és több elemet kell átnézniük rajtuk egy feladat végrehajtása érdekében. Ez a több eltöltött idő ugyanakkor nem azt jelenti, hogy a felhasználóknak tetszik az oldal, hanem azt, hogy kihívást jelent számukra beazonosítani elemeket, illetve nem biztosak benne, hogy megtalálták azokat, amikor először rájuk pillantanak.

Arra azonban az NNG is felhívta a figyelmet, hogy a feladatok nagyon specifikusak volt, és a csak egy kis szeletét jelentették a weben valóban elvégzett feladatoknak. Általában, amikor az emberek a webet használják, a valóságban több időt töltenek a feladatok egyéb vonatkozásaival, például azzal, hogy elolvassák a kapcsolódó információkat. Amennyiben ezeket is hozzáadjuk az oldalon eltöltött időhöz, akkor a teljes feladatra (például egy pár cipő megvásárlása) vonatkozó lassulás már kisebb lesz, mint 22 százalék.

Másrészt viszont ott a kattintási bizonytalanság, melynek megnövekedése azt jelenti, hogy az emberek időnként nem oda kattintanak, ahova szerettek volna. Ezt azonban nem mérték a kutatásban. Ugyanakkor a hibás kattintások korrekciója igen sok időt képes felemészteni, különösen, ha a felhasználók nem jönnek rá azonnal, hogy hibáztak. Az időveszteség mellett ilyenkor megjelenik a bizonytalanság érzelmi hatása is, ami végül is azt jelenti, hogy egy rossz felhasználói élmény a márkáról kialakult képet is negatív irányba befolyásolja.

Hőtérképek

Az NNG szerint a 9 pár oldal közül 6 esetében volt megfigyelhető eltérés a felhasználók tekintetének mozgásában. Ebből azt a következtetést vonták le, hogy a jelzések megváltoztatják azt, ahogy az emberek feldolgoznak egy weboldalt egy feladat végrehajtása során. Alapvetően egyébként az volt látható, hogy a gyengébb jelzéseket alkalmazó oldalaknál a felhasználók többet nézelődtek, vagyis több volt a megtorpanás és az oldalon eltöltött idő. Itt látható egy hőtérkép, melyből minden világossá válik:

Mindez azt jelenti, hogy a résztvevőknek több lehetséges elemet is meg kellett vizsgálniuk a gyenge jelzéseket alkalmazó oldalakon. Nyilvánvalóan azért, mert ezeknek a jelzéseknek nincs meg ugyanaz az erejük, amivel felkelthetnék az emberek figyelmét, illetve meggyőzhetnék őket, hogy jó helyen próbálkoznak. Gyakran azt tapasztalták a kutatók, hogy az emberek ugyan megtalálták a célként megjelölt elemet, azonban a tekintetük tovább mozdult, mivel nem ismerték fel azonnal, hogy az lenne a feladat megoldása.

Mikor működhet a flat design?

Ugyanakkor viszont a 9-ből 3 oldal esetében nem volt különbség a felhasználók tekintetének útvonala között a gyengébb és erősebb jelzéseket alkalmazó weboldalak között. Ez azért fontos, mert rámutat arra, hogy mely esetekben működőképes a flat design. Az egyik ilyen ez az oldal volt:

Az első verzióban a hagyományos, aláhúzott kék linkek szerepeltek, míg a másikban a linkek lilával voltak jelölve. A kutatók szerint a kettő egyforma teljesítménye valószínűleg annak köszönhető, hogy megfelelő volt a színkontraszt a szöveg és a link között. Amikor egy másik weboldalon világosszürkét használtak linkelt szavaknál, jelentős mértékben eltért a felhasználói tekintetek útvonala a két verziónál. A következtetésük tehát az, hogy amíg a szövegben szereplő linkek kellően kontrasztosak, addig a felhasználók felismerik a szerepüket, még akkor is, ha nincsenek aláhúzva.

A másik két eltérő, mégis egyforma heatmapet produkáló oldal esetében pedig az alábbi közös jellemzőket találták:

• Alacsony információsűrűség. Vagyis az oldalak viszonylag kevés szöveget tartalmaztak, nagy whitespace-szel. Ez pedig azt jelenti, hogy a más módokon nem megkülönböztetett elemek figyelemfelkeltőek amiatt, hogy nem kell versenyezniük egyéb elemekkel.
• Hagyományos layout. Az elemek (gombok, linkek, navigáció) a megszokott helyen jelentek meg, ott ahol az emberek általában keresik őket.
• Feltűnő, kontrasztos célpontok. A cél-elemek kontrasztosak voltak az őket körülvevői elemekhez képest, ráadásul jelentős tér választotta el őket a többi elemtől. Ezáltal sokkal könnyebben felhívták magukra a figyelmet.

Összességében elmondható tehát, hogy a gyenge jelzések negatív hatása kiküszöbölhető, ha a weboldal információ-sűrűsége viszonylag csekély, hagyományos vagy következetes a felépítése, és olyan helyen jelennek meg az interaktív elemek, ahol ki tudnak tűnni a többi elem közül. Ahhoz, hogy egy flat vagy félig flat oldalnál elkerülhető legyen a kattintási bizonytalanság, mindhárom kritériumnak teljesülnie kell. Ezek egyébként minden jó UX designra jellemzőek. Vagyis, ha egy tapasztalt UX-csapat készít egy flat oldalt a felhasználók figyelembevételével, akkor jobb eredmény születik, mint ha vizsgálatok nélkül készülne el egy hagyományos oldal – szögezte le az NNG, mely úgy véli, hogy felhasználói tesztek segítségével minden flat felületen beazonosíthatók és kiküszöbölhetők a hibák.

Kinek való egy teljesen flat design?

Néhány tényezőt tehát nem árt figyelembe a weboldaladdal kapcsolatban, mielőtt flatre váltanál:

• A flat design jobban működik kis méretű oldalaknál, mondjuk amelyek mindössze 1-10 oldalból állnak.
• Nem szerencsés a használata összetett alkalmazásoknál vagy felületeknél, ahol szokatlan interakciós minták jelennek meg, mert a flattal elveszik egy lehetőség a felhasználók irányítására.
• Ha sok a visszatérő látogatód, akkor nem kockáztatsz nagyot a flat designnal, hiszen ezeknek a felhasználóknak már vannak megszokott interakciós útjai, így nincs szükségük a jelölőkre.
• Akkor sem gond a használata, ha a felhasználói bázisod főleg a tech-témákban jártas emberekből áll (designerek, fejlesztők, akik találkoztak már flat megoldásokkal), hiszen ők jobban tudják dekódolni, mint a széles közönség.

De még akkor is alaposan meg kell fontolnod egy teljesen flat design használatát, ha az előbb felsorolt tényezők nem okoznak számodra problémát. Nyilván persze vannak olyan tipikus esetek, amikor jó döntés flat megoldás, például egy designer portfolió-oldala vagy egy egyszerű landing oldal esetében. Ezek akár még profitálhatnak is belőle, hiszen a flat még mindig trendinek hat, miközben a használhatóság nem tud komolyabb csorbát szenvedni.

Ugyanakkor az átlagos digitális termék bonyolultabb ezeknél, vagyis érdemesebb az eredeti flat elvek helyett a flat 2.0-át használni, melyről szintén szót ejtettünk a linkelt cikkben. Ezeknél ugyanis már megjelennek a finom árnyékok, kiemelések, rétegek, melyek mélységet tudnak adni a felhasználói felületnek.

Hogyan kerüljük el a kattintási bizonytalanságot flat designnál?

Ha flat designt használsz, akkor az a legfontosabb, hogy alaposan átgondold, miként fogod kommunikálni a kattinthatóságot az olyan interaktív elemeknél, mint egy link, egy gomb, egy űrlapmező.

Ami fontos:

1. Soha ne használd ugyanazt a vizuális megoldást egy statikus szövegnél és egy linkelt szövegnél!
2. Ne használd ugyanazt a színt az elsődleges akciógomboknál, mint egy statikus címsor hátterénél!
3. A vizuális design segítségével kell jelezned a felhasználóknak, hogy mi az, amit kattintható a weboldalon, és mi az, ami nem!
4. A következetesség rendkívül fontos.

Mivel jelezheted a kattinthatóságot?

• Próbáld a gombjaidat legalább egy minimális mértékben olyanná alakítani, mint egy valódi gomb.
• Ne használj szellemgombokat (szövegek egy keretben).
• A kisebb elemek növekedjenek meg kattintásnál.
• Használj megszokott, felismerhető ikonokat, és ezekhez lehetőleg tegyél címkét is!

Ezen kívül próbálj meg ragaszkodni a hagyományos elrendezésekhez és megszokott felhasználói felületekhez, amennyire csak tudsz. Hiszen így az emberek könnyebben felismerik az egyes elemek funkcióját. Egy szabványos layout párosítása egy világos vizuális designnal és elegendő whitespace-szel segít a weboldal egyes részeinek az elkülönítésében és érthetővé tételében.

Figyelj a kontrasztra is!

Győződj meg arról, hogy a szövegeid jól olvashatók, az egyes elemek pedig könnyen észrevehetők. A világosszürke a sötétszürkén gyakori megoldás a flat designban, azonban ritkán működik jól. Azzal is legyél óvatos, amikor képet használsz háttérként egy szöveg mögött!

Használd a mélységet!

A flatnak nem kell teljesen flatnek lennie. Használhatsz finom árnyékokat vagy réteg-effekteket, hogy rámutass az egyes elemek közötti kapcsolatra. A Google által megalkotott material design például nagyon jól alkalmazza ezeket az eszközöket, legfeljebb nem mindig használják jól, hiszen gyakran csak esztétikai célból alkalmazzák a felhasználói felületeken az árnyékokat és a rétegeket. Ahhoz viszont nem kell material designra átállni, hogy az előnyeit kihasználhasd. Ha egy flat designt kiegészítesz néhány 3d megoldással, akkor ugyanazt elérheted.

Ha linknek néz ki, legyen link!

Amikor egy felhasználó, okkal azt feltételezi valamely elemről, hogy az linkként működik, akkor annak linknek is kell lennie. Tehát ha például egy linkhez tartozik egy leíró szöveg, egy cím, egy indexkép, akkor egy ilyen egységnek a megfelelő weboldalra kellene vinnie a felhasználót, ha rákattint.

Összefoglalva tehát elmondható, hogy a flat design egy erőteljes design megoldás lehet, ha azt jól használják. Nem szabad elfelejteni, hogy a kattintási bizonytalanság nem csak azért probléma, mert a felhasználók emiatt nem érnek célt, hanem azért is, mert kihagynak olyan fontos lehetőségeken, melyek sokat számítanának a céged bevételei szempontjából. Soha sem szabad a használhatóságot az esztétikának alárendelni, és mindig tesztelni kell, hogy a felhasználók valóban megértik-e a felhasználói felületed!

Mindig ellenőrizd, hogy

• A kattinthatósági jelzések következetesek az egész weboldalon.
• A linkelt elemek szembetűnőek és megfelelő a kontrasztjuk.
• A linkelt elemek ott kapnak helyet, ahol a felhasználók számítanak rájuk.
• Nincsenek félrevezető elemek, azaz olyan elemek, melyek linknek néznek ki, de nem azok.
• Minden elem, ami egy adott tartalomra utal linkelve van, mégpedig ugyanarra az oldalra.
• Gondoskodj visszajelzésről, amikor egy kattintás és hatására bekövetkező akció között jelentős mértékű a válaszidő!

A kártya alapú webdesign

Az elmúlt évek minden webdesign trendjén keresztülívelő hullám a kártya alapú webdesign, mely továbbra is ott szerepel a használható 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.

Olyan cégek használnak kártya alapú designt, mint a Google, a Facebook vagy a Twitter. Miért olyan népszerű a kártya alapú webdesign? Elsősorban azért, mert kitűnő megoldás a különféle kijelzőkön való megjelenésre.

Mi is az a kártya?

A kártya egy olyan eleme a felhasználói felületnek, egyetlen tárggyal kapcsolatban tartalmaz tartalmat és tesz lehetővé felhasználói cselekvést.

A kártyák olyan információs egységek, melyek alakíthatók, mozgathatók és keverhetők általuk a különféle tartalomtípusok. 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.

Egy kártya különféle elemeket tartalmazhat, ugyanakkor mindegyiknek ugyanazon témáról kell szólniuk. Általában a kártyák áttekintést adnak és belépési pontként szolgálnak a részletesebb információk irányába.

A kártyák tartalmazhatnak:

• képeket, videókat
• címsort
• rövid szöveges összefoglalót
• és nem kötelező jelleggel egy cselekvést lehetővé tévő elemet

Mire figyelj egy kártya-alapú designnál?

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.

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. 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.

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 árnyék jelzi a felhasználónak, hogy a kártya kattintható.
• 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.

Betűtípusok tervezése

Ezután következik a betűtípusok megtervezése, melyeknek lehetőleg egyszerű sans serifnek kellene lenniük. A sans serfif általában jól működik kicsi és nagy kijelzőn is. É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.

Priorizáld a szövegeket!

A kártyák az információ összefoglalását tartalmazzák, ezért ne használj olyan kártyát, amin hosszú a szöveg. Olyan szöveget írj, amir arra ösztönzi az embereket, hogy tovább olvassanak kattintás után. Egy rövid összefoglaló számára elég 50-60 karakter, és ha azt vesszöük, hogy ennyi a javasolt sorhosszúság is, akkor ez mindössze egy sornyi szöveget jelent.

Ne kelljen görgetni a felhasználónak kártyán belül!

A kártya tartalma lehet, hogy hosszabb lesz, mint a kártyán rendelkezésre álló hely. Ha ez a helyzet, akkor se legyen görgethető a tartalom a kártyán belül, mert megjósolhatatlan következtménye lesz, amikor görgetésen belül kell görgetniük a felhasználóknak. Ez különösen mobilon okoz gondot.

Ilyen esetben jobb megoldás, ha érintésre kinyíló kártyát használsz, mely feltárja a kártya teljes tartalmát. Ez egy animált átmenettel megoldható, de érdemes az egyszerű animációknál maradni, mert ha túlságosan felhívja magára a figyelmet, akkor az egy idő után fárasztó lesz az emberek számára.

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.

Releváns képeket használj!

A kártya-alapú design általában a képekre épít, mert a vizuális elemek azok, melyekre egyből ráirányul a figyelem. Ezért fontos, hogy releváns képeket válassz, olyanokat, melyek első pillantásra elmondják, hogy miről is szól a kártya.

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.

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.

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.

Mi az a 3.0-ás webdesign?

Oleg Dudkov dobta fel a 3.0-ás webdesign fogalmát egy webdesign-készítő app, a Nicepage mediumos oldalán. Röviden vázolja azt is, hogy mi volt az első két korszaka a webdesignnak, melyeket 1.0 és 2.0 számozással jeleznek.

Webdesign 1.0 és 2.0

Az előbbi nagyjából a web hajnalától, azaz 1992-től tartott úgy a 2000-es évek közepéig, és olyan jellemzői voltak, mint a szöveges design, majd a táblázatok és keretek.

2008-tól aztán átléptünk a 2.0-ás korszakba, mely a “blogdesignnal” vette kezdetét, legfőbb jellemzője a rácsszerkezet valamint a mobilra optimalizáltság, és beletartozott a Bootstrap-design is. 2015-től aztán ennek következtében állandó beszédtémává vált designer-körökben, hogy vajon a webdesign halott-e. A pontos válasz ugyan nem született meg, azonban 2019-re végérvényesen átléptünk a 3.0-ás korszakba, melynek jellemzőit mindjárt vázolja is.

3.0-ás webdesign

Az egész 3.0-ás folyamat azzal kezdődött, hogy 2016-tól egyre több elemet vett át a webdesign a jóval hosszabb múltra visszatekintő print designból. Ennek következtében sajátos jellemzői alakultak ki:

• Szabad elrendezés
• Egymás fedő elemek és képek
• A Bootstrap-szerű keretrendszerek fellazítása
• Szövegek a képek felett
• Függőleges szövegek
• Letisztult elrendezések
• Nem szabályos rácsokba rendezett galériák
• Absztrakt márka-elemek

Összefoglalóan tehát a webdesign 3.0 elhozta a webdesignerek szabadságát. És vizuálisan így lehet összefoglalni, ahogy azt a 83 Oranges tette

De nézzük a két legfontosabb dolgot!

Kitörve a táblázatokból

Mit is értünk ez alatt? Ha képeket akarunk elrendezni, akkor megtehetjük így:

Vagy pedig így:

Ezek a példák olyanok, mint amivel a modern nyomtatott designban vagy a 3.0-ás webdesignban találkozhatunk. De miért is került sor az átalakulásra? Mert mindenki megunta a megszokott táblázatos elrendezéseket. Az emberek egyedi ötletekkel akarnak imponálni, és mindenki ki akarja fejezni kreativitását és az érzéseit a designnal.

Modern rácsszerkezet

Az egyszerű rács is átalakul egy bonyolultabb rendszerré:

De miért találunk viszonylag kevés példát 3.0-ás webdesignra?

Egyrészt azért, mert a webdesign esetében nem annyira egyszerű nyomon követni a trendeket, mint mondjuk a filmek vagy a zenék esetében a YouTube-on. Emiatt kicsit vegyes a kép, sok szakértő megnyilatkozik, de nem látni pontosan egy trendet. A valós adatok és a tényleg megbízható szakértő vélemények hiányában pedig a designerek inkább óvatosak, és megmaradnak a jól bevált stílusoknál.

De főleg az akadályozza a terjedést, hogy a jelenlegi weboldal-készítő alkalmazások nem teszik lehetővé a szabad elrendezések, vagyis a legmodernebb webdesign kialakítását. Ha ilyet akarunk, akkor olyan eszközöket kell használnunk hozzá, mint az Adobe Photoshop, az Adobe XD vagy Sketch App, melyekkel szabadon vázolhatók fel ötletek. Amiket aztán le kell kódolni.

A tervezés és az elkészítés tehát nem a legegyszerűbb folyamat, nem tud mindenki megbirkózni vele. Viszont a jelenleg rendelkezésre álló weboldal-építő alkalmazásokkal nem igazán lehet 3.0-ás, korszerű weboldalakat egyszerűen létrehozni. Hiszen nem teszik lehetővé a szabad pozícionálást vagy a táblázatok keretei közül való kitörést. Erre egyelőre csak kevés alkalmazás képes.

A lényeg azonban az, hogy úgy tűnik nyakunkon a 3.0-ásként definiált korszak, vagyis bekövetkezett egy váltás a webdesignban, amihez alkalmazkodni kell, ha nem akarunk lemaradni. A jellemzők és tulajdonságok világosak, lehet alkotni!

Frissítés, 2021.08.12.:

Brutalizmus és antidesign a webdesignban: mik ezek? És mikor érdemes megfontolni a használatukat?

A brutalizmus és az antidesign olyan webdesign-trendek, melyek reakcióként jelentek meg a weboldalak unformizálódására. A brutalizmus elvei felhasználhatók bármely webdesignnál, ugyanakkor az antidesignnal már óvatosnak kell lenni, és csak ritkán érdemes alkalmazni.

A brutalizmus az elmúlt néhány év egyik legizgalmasabb irányzata a webdesignban, ugyanakkor gyors feltűnése és terjedése miatt egyelőre még mindig nincs pontosan meghatározva, hogy mit is értünk alatta. Tapasztalható egy kis zavar, annál is inkább mert két filozófia jelenik meg egyetlen címke alatt.

A brutalizmus Pascal Deville brutalistwebsites.com weboldalának köszönhetően került reflektorfénybe , mely még a The Washington Posttól is kapott egy cikket, miután a Hacker News felkapta. Ezután egyre több szerző kezdett foglalkozni a brutalista weboldalakkal, számos példát bemutatva, melyek által ugyanakkor nem feltétlenül vált világossá mindenki számára, hogy mi is a lényege ennek az irányzatnak. Annál is inkább, mert a brutalista designereknek csak egy része maradt meg az eredeti elveknél, egy más része antidesignt használ, melynél mások a célok és az eszközök. Utóbbit is gyakran brutalizmusként címkézik, pedig másról van szó, amiről részletesen beszélünk majd.

Honnan érkezett a brutalizmus?

Az egész történet az előző század ‘50-es éveiben kezdődik, egy építészeti irányzattal, mely Le Corbusier elveiből nőtt ki. A brutalizmus ugyanis egy építészeti iskola neve, és az elnevezés a nyers építészeti formákra utal, melyeket olyan jegyek jellemeznek, mint

• az egyszerűség,
• a befejezetlen felületek,
• a geometrikus formák,
• a durva, csupaszon megjelenő építőanyagok látványa,
• a masszív kialakítás
• és az ezzel szemben álló kontrasztos, apró funkciók.

A kifejezés egyébként a francia béton brut szóból származik, mely nyers betont jelent. A brutalista épületeknek ez a legjellemzőbb építőanyaga, amit nem is rejtegetnek, és nem is díszítenek. A formát és az alapanyagot elegendőnek tartják a tervezők.

A brutalizmus jelentős mértékben teret nyert az Egyesült Királyságban. ebben a stílusban épül a Királyi Nemzeti Színház, a Barbican Estate vagy a Balfron torony. Különösen népszerű volt a különböző közintézményeknél, mint a könyvtárak, színházak, iskolák.

Talán az sem véletlen, hogy pont egy brit építészetkritikus, Rayner Barnam volt az, aki egy 1955-ös esszéjében megpróbálta megfogni a stílus lényegét. Ebben azt próbálta elmondani, hogy a brutalista épületek nem törődnek a szépség hagyományos eszméivel, vállalják azt, hogy kemények, haszonelvűek, sőt akár rondák és személytelenek.

A lényeg tehet a nyers valóság, ahogy a nevéből is következik.

A brutalista weboldalak – hasonlóan az épületekhez – a népszerű, kifinomult, de mesterkélt és sablonokra épülő weboldalaknak az ellentétét jelentik. Talán az hívta életre a megjelenésüket, hogy ma már az “érzelmi webdesign” korában élünk, ahol a UI és UX designerek egymásra licitálva kínálnak megértést és empátiát a felhasználóknak. A termékek azzal csábítják az embereket, hogy próbálnak maximálisan barátságosak és a végletekig könnyen használhatók lenni. A színek hívogatók, a képek kifinomultak, a betűk lenyűgözőek.

A brutalista designerek tehát azt akarják, hogy a web ne hazudjon, ne legyen kiagyalt, hanem becsületesen azt mutassa, amilyen valójában. A cél tehát hasonló ahhoz, mint ami a flat designnál megjelent, viszont eltérő módon kívánja azt elérni.

Milyen eszközökkel érik ezt el?

Ebből következik, hogy kötelező az egyszerű betűtípusok használata, de itt ne a “letisztult”, végtelenül kifinomult betűtípusokra gondoljunk, hanem azon idők betűire, amikor ezek még nem is léteztek. A jól bevett Times New Roman és az Arial tökéletesen működik és használható, de sokszor találkozunk a Courierrel vagy a Monospace-szel is.

Ugyanígy a színeknél sem bonyolítják túl a dolgot a tervezők: a web egy jóval egyszerűbb hely volt, amikor még csak 216 böngészőbiztos szín közül választhattak. De elég a szürke, a kék és a piros. És talán még egy bézs és valami bordó árnyalat.

És hát itt vannak a képek, melyek még az Instagram és Snapchat filterek előtti korszakra emlékeztetnek minket, valamint a nyelvezet, amit szintén nem bonyolítanak túl.

A brutalizmus azonban nem merül ki pusztán esztétikai megközelítésben, magában foglalja a weboldalak lényegét: a kódot is. Jellemzőek a nyers, egyszerű jelölések, a beágyazott stílusok megjelenése, az optimalizálás és az összetettség hiánya.

És aki azt hiszi, hogy a bruatlizmus csak valami kisebbség hóbortja, és még nem tört be a mainstreambe, illetve a kereskedelmi piacra, az pillantson be Kanye Westhez, de már olyan weboldalak is átvették a brutalizmus stílusjegyeit, mint például a Bloomberg:

A Bloomberg 2016-ban jött ki egy új designnal, mely 2018-ban kapott egy redesignt, és gyakran említik a brutalizmus mainstreambe való betörésének példájaként.

Nem minden brutalizmus, amit annak hívnak

A webdesignban használt brutalizmus esetében zavart okoz, hogy kétféle filozófia keveredik egyetlen címszó alatt, pedig külön lehet és külön is kell választani a kettőt.

Az egyik maga az eredeti építészeti mozgalom filozófiájához visszanyúló brutalizmus, a másik pedig az antidesign, melynek az előbbitől eltérőek a céljai, és máshogy is fejezi ki magát. Mint Kate Mayer bejegyzéséből kiderül, érdemes a kettőt külön kezelni, mivel az egyiket gond nélkül felhasználhatjuk bármely webdesignnál, a másikkal viszont érdemes óvatosnak lenni.

A brutalista webdesign az építészeti elődből eredeztethető, és az elvek azonosak. Nevezhetnénk is a nyers beton kifejezés alapján nyers internetnek, ahogy a nyersanyag a HTML-kód, és kisebb mértékben a CSS. Ez pedig azt jelenti, hogy minden alapértelmezetten jelenik meg, ahogy a kezdetekben, nincs „designolva”: a háttér világos, a szöveg fekete, a linkek kékek.

Az egésznek az esszenciája megtalálható David Bryant Copeland oldalán, mely a brutalizmust mutatja be. Legjellemzőbb példák rá: Craigslist, Wikipedia, A List Apart, Bloomberg, Freecycle. És habár ezek mindegyike brutalista, azért mégsem néznek ki teljesen egyformán, ugyanis a tartalmuk határozza meg elsősorban a designt, ami eltérő. A formát a funkció határozza meg, és a web nyers elemeit használja átalakítás nélkül.

Az antidesign

Az antidesign viszont már nem annyira a lecsupaszított felhasználói felületre, a nyers stílusra fókuszál, hanem elsősorban arra, hogy a szándékosan ronda, a felhasználókat összezavaró és olykor túlzottan összetett felületeket hozzon létre. A brutalizmus és antidesign első pillantásra könnyen összekeverhető, de ha jobban átgondoljuk a dolgot, akkor kiderülhet számunkra, hogy az antidesign elvek és célok nem igazán azonosak a brutalizmus eredeti – építészetben megjelenő – elveivel és céljaival.

A lényeg, hogy az antidesign weboldalak szándékosan sértik az esztétikát, felrúgják a hagyományokat és az alapelveket. Egyszerűen: direkt rondák és használhatatlanok.

Az antidesign oldalaknál jellemző, hogy szándékosan és teljes mértékben hiányzik a vizuális hierarchia, durva színeket használnak, megtévesztő mintákat, furcsa kurzorokat és olyan animációkat, melyek csak azért vannak, hogy zavarják a felhasználót. A megjelenés ezáltal olyanná válik, mint egy elrontott ‘90-es évekbeli webdesign a végletekig hajtva.

Nem véletlen, hogy jellemzően művészek és grafikus designerek használják a weboldalaikon az antidesignt.

Mikor érdemes az antidesignt használni?

Azaz mikor lehet valakinek az a célja, hogy szándékosan ronda designt hozzon létre, mely befejezetlennek hat és nehéz használni? Például akkor, ha viccből teszi ezt. Az antidesignnal készül weboldalak sok esetben designerek poénjai, akik ironizálni akarnak. Ugyanakkor alkalmas az antidesign a figyelem felkeltésére is. Hiszen egy ilyen oldal kellően provokatív ahhoz, hogy a kifinomult designú oldalak tömegében felhívja magára a figyelmet.

Emellett benne van az újdonság érzete is, hiszen sok designer már megunta az egyszerű, világos, letisztult weboldalakat. Számukra az antidesign egy kis komplexitást, friss szemléletet ad, ami hiányzik az általuk tervezett weboldalakból. Sokan azt hiszik, hogy a felhasználóknak is erre van szüksége, hiszen egy kicsit felrázza őket, kihívást kínál, ezáltal pedig maradandóbb nyomot is hagy bennük az élmény. De a valóságban nem ez a helyzet.

Ez csak akkor igaz, ha a közönséged nagyrészt designerekből, grafikusokból, művészekből áll. Ők valószínűleg megértik a nyers és kaotikus design mögött húzódó okot, és viccként fogják fel. Kellően tapasztaltak is ahhoz, hogy egy bonyolultabb felületet is kezelni tudjanak. Ha őket akarod szórakoztatni, és nem az a cél, hogy az emberek könnyen eligazodva az oldalon végrehajtsák az eltervezett feladatot, akkor használható az antidesign.

Az emberek másként látják a webet, nincs annyi tapasztalatuk a használatában, mint egy designernek. Nekik a tesztek szerint szükségük van a kifinomult egyszerűségre. És ennek az egyszerűségnek nem feltétlenül kell egyformaságnak is lennie. Van arra lehetőség, hogy kreatív legyen a tervező, miközben segít a felhasználóknak abban, hogy könnyebben megértsék a tartalmat és elérjék a céljaikat a weboldalon. Nincs szükség a dolgok megnehezítésére csak azért, hogy egyedi vagy érdekes legyen egy oldal.

Összességében elmondható, hogy a brutalizmust elsősorban a vizuális designra érdemes korlátozni. Nem érdemes feláldozni a vizuális hierarchiát, a navigációt az újdonság kedvéért. Ha késztetést is érzel akár a brutalizmus, akár az antidesign használatára, alaposan át kell gondolni, hogy ez megfelelő-e az adott cég és felhasználói számára. Azért akarod megváltoztatni a designt, mert az javítja a felhasználók viszonyát a termékhez, vagy csak azért, mert unatkozol és új kihívásokat keresel?

Az elmúlt évek egyéb webdesign trendjei

Néhány olyan kisebb webdesingtrenddel folytatjuk, melyek kiegészítik az előbb felsorolt nagyobb folyamatokat, és gyakran találkozhattunk vagy éppen találkozhatunk velük a weboldalakon. Találsz benne olyanokat, melyek már eltűntek, de megtalálod a legújabbakat is köztük.

Szellemgombok

Biztosan láttál már weboldalakon olyan átlátszó négyzetet némi szöveggel, ami kattintható volt, vagyis gombként funkcionált. Ez a szellemgomb, vagyis angolul ghost button. A szellemgombok népszerűsége sok webdesigner számára talán meglepő módon kezdett el növekedni a 2010-es évek közepe táján. A legtöbben nem gondolták volna, hogy valamikor egy olyan alapvető elemből, mint egy kattintható gomb, fog kinőni egy új designtrend.

A szellemgombok először 2010-ben a Windows Phone 7-nél, majd a Windows 8-nál jelentek meg, amelyekkel a Windows bevezette a „Metro” designrendszert – ezt korábban már említettük a flat design kapcsán, hiszen ott is megmutatkozott a hatása. További korai megjelenései közé tartozott 2013-as felbukkanása a Bootstrap 3 oldalán, mely a szellemgomb egy kezdeti verzióját jelenítette meg. Ez még nem egy teljesen átlátszó gomb volt, de számos jellemzőjét magán viselte a szellemgomboknak.

Ugyanekkor megjelent az iOS7-ben is, mely minimalista ikonokat és gombokat sorakoztatott fel rendkívül vékony kék és szürke vonalakat használva. Habár ez a megoldás elsőre nem mindenkit győzött meg, az Apple neve miatt jelentős befolyást gyakorolt a trendekre. De a Google sem maradt ki a szellemgomb-forradalomból: ugyanebben az évben, azaz 2013-ban a Nexus 7 tablet weboldalán már szellemgombokkal találkozhatott a látogató. A keret fehér volt egy sötét háttérre helyezve.

A dolog értelemszerűen azért kapta a szellemgomb nevet, mert egyrészt teljesen vagy részben átlátszó, másrészt viszont gombként funkcionál. Az elnevezést egyébként 2014-ben használták először a Twitteren, ahol az azonos elnevezésű Tumblr blogra történik utalás, ahol különféle szellemgombokat sorakoztatnak fel.

Betraydan: Never knew these buttons types had a name, i always called them wired call to actions:http://t.co/VUmsU1m7wf #ui #ghostbuttons

— Dan (@Betraydan) 2014. március 30.

A szellemgomb formája lehet a megszokott téglalap, de akár négyzet vagy kör is. Általában a weboldal közepén jelenik meg, tipikusan egy nagy fotóra ráhelyezve.

Ami mindjárt látszik rajta, hogy nagyobb mint a megszokott, színnel kitöltött gomb, és így a felhasználó könnyebben megtalálja az oldalon. A célja is ez: felkelteni a felhasználó figyelmét. Mert egyébként semmi nem jelzi, hogy gombról lenne szó, csak a benne lévő szöveg és maga a keret utal rá halványan. Ugyanakkor viszont nem takar ki semmit a mögötte látható képből.

Jellemzően kevés szöveget tartalmaz, mely csak kis részét foglalja el a gombnak. Egyszerű ikon is megjelenhet benne, ezt azonban óvatosan használjuk. Általában a keret egy vékony vonal, jellemzően fekete vagy fehér. Általában a flat vagy legalábbis közel flat, illetve minimalista designhoz illeszkedik a legjobban.

Ezekből a jellemzőkből is következik, hogy milyen honlapokon érdemes használatba venni a szellemgombokat. Elsősorban landing page-eknél a méretük miatt, és azért, mert rendes call to action szöveg is belefér az üres négyzetbe, mégsem lesz zavaróan nagy, ami eltakarja a fél weboldalt, különösen mobiltelefonon.

Gyakran használják másodlagos, tehát kevésbé fontos call to actionként egy hagymományos kialakítású gomb mellett. Ez akár egy oldalon is történhet, mindjárt bemutatva egy hierarchiát a gombok között, mely egyértelműen jelzi, hogy melyik a fontos és melyik kevésbé.

A legfőbb előnyei közé tartozik tehát, hogy

• nem takarja ki a mögötte látható tartalmat,
• ezért különösen jól használható mobilon, ahol minden pixel számít,
• de azért is jó, mert hagyja érvényesülni a mögötte látható képet és a betűtípust,
• ráadásul a fájlméret kicsi, hiszen egy keretből áll,
• a rendezettség és a kifinomultság érzetét sugallja,
• vizuálisan csökkenti egy design súlyát,
• jól párosítható bármilyen webdesign elemmel, és jól illeszkedik a mostani minimalista stílusú weboldalakhoz.

Ehhez persze szükséges, hogy az ilyen szellemgombok kellően letisztultak és jól olvashatóak legyenek.

Hátránya elsősorban az, hogy

• nem mindig tudja a látogató, hogy egy kattintható gombbal áll szemben (ez függ a kontextustól,a látogatók életkorától, no meg a megfelelő tervezéstől),
• mindenképpen kiemelt helyet kell kapnia, és kiemelkedőnek kell lennie,
• ha elveszik egy zajos háttérben, akkor gyakorlatilag megszűnik a gomb jellege,
• gondok lehetnek a színkombinációval vagy a kontraszttal, ha egy fotóra vagy egy mintás háttérre kerül,
• de ugyanezen ok miatt lehet, hogy nehezen olvashatóvá válhat a szöveg.

Mindez pedig gyengébb konverziós arányhoz vezethet, mivel nem tud kiemelkedni a háttérből, hiányzik a hierarchia, elveszik a fontossága. Ez különösen lényeges tényező landing oldalaknál. Az Elevated Third a hírlevelénél vizsgálta a szellemgombok hatékonyságát, és arra jutott, hogy a hagyományos gombok 7 százalékkal jobban teljesítettek. A ConversionXL 20 százalékos eltérést talált a szellemgombok kárára, amikor szellemgombbal kísérletezett a CTA-jánál. De itt érdemes megemlíteni a Nielsen Norman Group vizsgálatát is a flat designnal kapcsolatban, ahol bizonyos esetekben szellemgombokat használt a tesztelt flat oldalaknál. Például itt:

A szellemgomb tehát kétélű fegyver, és nem is illeszthető hozzá minden weboldalhoz megfelelően. Át kell gondolni olyan tényezőket, mint az iparág, a közönség, a forgalom típusa, a gomb helyzete az oldalon, a weboldal szövege. Ugyanakkor megfelelő használat esetén magához vonzza a tekintetet, és jelentős hatást gyakorol a látogatóra. Ezt viszont érdemes A/B tesztekkel ellenőrizni.

Szellemdobozok

Egyre több weboldalon tűnnek fel “szellemdobozok” is, vagyis olyan keretezett dobozok, melyek hasonlóak, mint a szellemgombok.

A moduláris vagy rácsszerű struktúra

A rács a webdesignban egy igazán reszponzív dolog. Hiszen a rácsszerkezetre felhúzott tartalmakat, melyek a kijelző méretének megfelelően változnak, a reszponzív design hozta el, és tulajdonképpen mostanra már nem is kellene újdonságnak számítania. A lényeg tehát az alkalmazkodás, vagyis ahogy változik a kijelző mérete úgy változnak és igazodnak hozzá az egyes modulok annak érdekében, hogy kitöltsék a rendelkezésükre álló teret. A tartalmak ilyen típusú, egyenlő méretű részekre történő felosztásával sokkal egyszerűbbé válik azok hozzáigazítása a mindenféle méretű kijelzőhöz.

További leágazása ennek a megoldásnak, amikor az egyes modulok méretét és elhelyezkedését azok fontossági sorrendje határozza meg. A méret tehát nem azonos minden modul esetében, így egyes tartalmakat ki lehet emelni, egyértelműen dekódolható a felhasználók által a hierarchia.

Minimalizmus

Mostanra már elcsépeltük a minimál és a letisztult jelzőket, ennek ellenére erős trend a webdesignban a csak a lényeges tartalom bemutatására törekvés, és a minden felesleg elhagyása. Mindez persze a most modernnek ható kinézettel: hatalmas whitespace-ekkel, kifinomult tipográfiával és visszafogott színekkel. A minimalista webdesignról itt írtunk.

Scrollozható történetek

Egyre népszerűbbé válik a weboldalakon az a típusú történetmesélés, amikor a felhasználó csak görget lefelé az oldalon és közben kibontakozik egy sztori szöveggel, ábrákkal, izgalmas és könnyen befogadható formában. Jól alkalmazható például cégtörténetek elmesélésénél, bemutatva a különböző mérföldköveket, de akár a termékeinket, szolgáltatásainkat is prezentálhatjuk ilyen módon. Igazán jól parallax designnal mutat jól, amiről itt írtunk korábban.

Görgetés a kattintás helyett

Ezt talán már nem kell bemutatnunk, többször írtunk arról a jelenségről, hogy a mobilok rohamos térhódítása következtében lehetséges egyre hosszabb weboldalakat készíteni, melyeket nem kell feldarabolni linkekkel elérhető részekre. Sőt, kifejezetten rontja a mobilos felhasználói élményt, ha apró linkeket kell nyomogatniuk az embereknek, ahelyett, hogy könnyedén és lazán végiglökdösnék egy weboldal tartalmát az okostelefonjuk kijelzőjén. Úgyhogy várható, hogy egyre több weboldal-tulajdonos ismeri fel ezt, váltanak hosszabb kialakítású weboldalakra, míg a kattintások másodlagossá válnak. A hosszú görgetésű weboldalakról itt találsz bővebb információkat.

Háttérvideók

Már 2014-ben megjelentek, terjedésük oka az lehet, hogy az emberek inkább videókat néznek, mint szövegeket olvasnak, ráadásul sokszor könnyebb elmondani a cég történetét mozgóképeken. Ha nem érted, miről van szó pontosan, itt írtunk róla bővebben.

Animációk

Ahogy a net sebessége egyre növekszik, úgy válik lehetővé, hogy mind több animációt alkalmazzunk a weboldalakon. Annál is inkább szükség van ezekre, mivel a most uralkodó flat design miatt esetleg egy kicsit egyhangúvá, élettelenné válhatnak a weboldalak, melyeket remekül feldob egy-két jól kivitelezett animáció. Ezek használatával ráadásul az adott weboldal könnyebben meg is tudja magát különböztetni a versenytársaktól, ki tud emelkedni a többi weboldal közül.

Az animációk segítenek, hogy egy weboldal kitűnjön, valamint kevesebb helyre több információ kerülhessen. A mobilalkalmazások ma már mozgásokat használnak egy-egy funkció jobb megértése érdekében, és ugyanebbe az irányba tartanak a weboldalak is. A mozgások nem csak egy magasabb minőséget jeleznek, hanem a felhasználói élményt is javítják.

Az olyan új technológiák, mint a CSS animáció, egyszerűbbé teszi a dolgot, hiszen nem kell pluginokat használni, nem csökken a sebesség és nincsenek kompatibilitási problémák. A webkomponensek pedig csak tovább gyorsítják a folyamatot. A GIF-animációk is visszatértek és meglepően hatékonyak. További részleteket itt találsz az animációkról.

Színátmenetes hátterek

Előnye, hogy CSS3 használatával előállítható egy ilyen háttér, és nincs szükség képszerkesztők, például a Photoshop segítségével előállított képekre.

Interaktív webgrafikák

A hagyományos értelemben vett infografikának leáldozott, helyette tért hódítanak az interaktív webgrafikák. Ezek képesek interakcióra bírni a felhasználót, így az sokkal mélyebb benyomást tesz rájuk. Hogy mire gondolunk? Valami ilyesmire: http://futureofcarsharing.com/.

Minimál grafikák és illusztrációk

Sok esetben az ikonok teljes mértékben leváltják a képeket. Ez azért is jó, mert könnyebb összehozni egy egyedi vektorgrafikát, mint egy jó minőségű fotót elkészíteni, ami jól reprezentálja valamely termékünket.

Óriási képek

Megint csak a kisméretű kijelzők az okai annak, hogy az óriási, a teljes kijelzőt beborító képek olyannyira elterjedtek. Okostelefonon nem csak jól mutatnak, hanem praktikusak is, hiszen láthatóvá válik, hogy mi van a képen. Jól néznek ki persze nagyban, asztali gépeken is, ugyanakkor arra figyelni kell, hogy méretük miatt gond lehet a betöltési sebességgel. Így aztán van némi kihatása a felhasználói élményre és a keresőoptimalizálásra is, ami miatt a dolog technikai hátterét alaposan végig kell gondolni.

A teljes kijelző kitöltése

Ennél a megoldásnál az a lényeg, hogy a weboldal mindig teljes mértékben kitölti a teljes kijelzőt. De itt most nem csak arról van szó, amiről a reszponzív design szól, tehát, hogy a szélesség mindig passzol, hanem arról, hogy a hosszúság is. Vagyis még a scrollozó sáv is hiányzik a jobb oldalról, mert nincs rá szükség, hiszen az oldal pontosan egyetlen képernyőnyi felületet foglal el.

Könnyebb megérteni ezt az egészet, ha megnézed mondjuk ezt az oldalt. Egy ilyen megoldáshoz persze kell, hogy a lényegesre tudjunk összpontosítani, egyértelműen lássuk a hierarchiát, és minden felesleget elhagyjunk az oldalról. Ugyanakkor az erőfeszítés eredményeként kapunk egy felszabadítóan letisztult felületet.

Frissítés, 2021.09.23.:

Kettéosztott weboldal: mikor és hogyan érdemes belevágni?

A kettéosztott weboldal már jó pár éve felkapott trendnek számít a webdesignban, így nem is jelent újdonságot, ennek ellenére egy jól kivitelezett megoldás még mindig eredetinek tűnik a weben.

A kettéosztott weboldalak 2015-ben kezdtek trendszerűen terjedni a weben (akkor született meg nálunk az első anyag a témában), és 2017-es, 2018-as designtrendeket bemutató bejegyzéseinkben is előkelő helyen szerepelt a téma.

Úgy néz ki, hogy egy darabig velünk is maradnak, mert jól használhatók olyan weboldalakon, melyeknek két fő tevékenységük van, és ezek egyenlő súlyúak. Ha a Te céged sem csak egyetlen dolgot tart fontosnak a tevékenységei közül, hanem egészen pontosan kettőt, akkor mindjárt itt a lehetőség, hogy éljen a kettéosztott weboldal lehetőségével. Ami egyébként egész jól mutat, és van már belőle jó pár darab a weben.

Miért lett népszerű?

A kettéosztott weboldalak elsősorban újdonságuknak köszönhetik népszerűségüket, amihez persze hozzájárul az is, hogy ha kellő gondossággal vannak kivitelezve, akkor esztétikai élményt is nyújtanak a felhasználóknak.

Ugyanakkor nem szabad elfeledkezni arról, hogy a kettéosztott weboldalak nagyon jól illeszkednek a különböző méretű kijelzőkhöz, azaz nincs gond a reszponzivitással. Hiszen, ami monitoron egy horizontálisan kettéosztott megjelenést kap, az okostelefonon vertikális megosztásként jelenik meg.

Ráadásul akadnak olyan esetek, amikor a kettéosztás sokat segít a navigáción. Egy kettéosztott weboldal alkalmazásával felhívhatod a felhasználók figyelmét a kijelző egy bizonyos részére, egy témára, tartalomra, funkcióra, és arra ösztönzöd, hogy kattintson.

Mikor érdemes kettéosztott megjelenésre váltani?

Általában akkor szokták választani ezt a megoldást, amikor két egyenlően fontos dolgot akar hirdetni, bemutatni egy cég. És ha nem lehet a megszokott módon vertikális hierarchiába rendezni két ilyen dolgot, akkor egyszerre kell megjeleníteni, a felhasználó pedig választhat közülük.

Tehát, ha a termékeid, szolgáltatásaid két csoportra bonthatók, akkor el lehet őket rendezni úgy, hogy egy kettéosztott főoldalról induljon el a látogató a lehetséges kettő közül az egyik úton.

Ugyanakkor az is felmerülhet, hogy a cég profiljának kettősségét akarjuk nyilvánvalóvá tenni a látogató számára, ahogy például az Eight and four, mely nemcsak a szolgáltatásait, hanem a munkatársait is ugyanolyan fontosnak tartja tevékenysége kapcsán, és ezt fejezi ki a kettéosztott honlapjával. Ez pedig meg is határozza a cég imidzsét.

Ez persze nem azt jelenti, hogy csak ilyen esetekben lehet vagy szabad kettéosztani egy weboldalt, hiszen számtalan olyan példát látunk, amikor a weboldal egyik felét egy kép, a másik felét pedig egy szöveg teszi ki. Ilyenkor gyakorlatilag ugyanannyi információ jelenik meg, mint ha egy hero image-re ráhelyeznél egy címsor, alcímet, CTA-t. Ugyanakkor némileg eredetibb módon történik a megjelenítés, és az sincs kizárva, hogy az elrendezés révén több figyelem jut mind a képre, mind a kapcsolódó szövegre.

Persze vannak olyan esetek, amikor nem igazán ajánlott kettéosztott megjelenést használni a weboldaladon. Ilyen az, amikor folyamatosan bővülő tartalom jelenik meg a weboldalon. Ezt ugyanis nem tudja követni, befogadni a kettéosztott megjelenés úgy, hogy ne romlana az esztétikuma. Ugyanígy, a túlságosan sok szöveges tartalommal bíró weboldalakon sem igazán lehet használni.

A kettéosztott megjelenésnél tehát fontos mindig észben tartani az egyszerűség fontosságát, mert egy tartalommal túlterhelt osztott weboldalnak felborulhat az egyensúlya, zsúfoltnak, kaotikusnak fog kinézni. Fontos tehát, hogy alapvetően az egyszerű, minimalista weboldalaknál javasolt a kettéosztott megjelenés használata.

Gondold tehát végig:

• Passzol a tartalmadhoz a kettéosztott weboldal?
• Elegendő negatív tér marad, hogy az elrendezés működjön?
• A felhasználók érteni fogják, vagy zavarba hozza őket?
• Segíti őket, ha megosztod a figyelmüket?

Milyen típusai vannak a kettéosztott weboldalaknak?

Több megoldás is létezik azonban az osztott weboldalak kialakítására.

Klasszikus osztott weboldal design

Ebben az esetben két szimmetrikus panelről beszélhetünk, melyek egyszerűvé teszik a moduláris kialakítást.

Aszimmetrikus osztott weboldal

Egyre több esetben azonban most már nem fele-fele arányban osztják meg a designerek a kijelzőt, hanem aszimmetrikusan. Ehhez persze nagyon finoman kell kialakítani az egyensúlyt a weboldal két fele között, hogy egyik se kerüljön túlsúlyba. Jellemző, hogy a weboldal egyik felét a szöveg és a whitespace határozza meg, míg a másikat egy figyelem-felhívó kép. Ezen megjelenés mögött persze továbbra is a rácsszerkezet áll, mely rendezettséget biztosít a weboldalnak.

Minimalista irány

Míg az első osztott weboldalak viszonylag egyszerűek és szimmetrikusak voltak, itt nem állt meg a fejlődés. Egyes weboldalaknál megmaradt a szimmetria, másoknál változatos felosztások jelentek meg. Néhányan cikk-cakk mintában választották el a két részt, sokan minimalista irányba mozdultak tovább.

Az eredeti kettéosztott weboldalak egy kicsit súlyosak voltak, mivel arra lettek tervezve, hogy egy tartalmi csatornán elindítsák a felhasználók. Ehhez pedig kellett a tartalom segítsége. A választás lehetőségét azonban lehet egyszerűsíteni. Megjelentek az olyan osztott weboldalak, ahol már nincs is egyértelműen elmagyarázva a választási lehetőség.

Osztott weboldal több kattintható területtel

Az egyik érdekes irány az osztott weboldalaknál, amikor ugyan szimmetrikusan ketté van osztva a weboldal, az egyik felén azonban nem egy CTA, hanem több kattintható elem is található.

Nem nyilvánvaló osztott megjelenés

Ma már nem minden osztott weboldalon válik egyből nyilvánvalóvá, hogy osztott weboldalról van szó. Ha annyira minimalista a megjelenés, hogy nincsenek különböző színek vagy képek a két részen, akkor nem egyértelmű az elválasztás. Ilyenkor a két rész, akár egynek is tűnhet elsőre. Mobilon, illetve desktopon a görgetés során válik csak láthatóvá, hogy miként is gondolják az alkotók a felosztást.

Milyen design-technikákat érdemes használni kettéosztott weboldalon?

Erőteljes színek és tipográfia

Az erős színek mindig felkeltik az emberek figyelmét, míg a hangsúlyos tipográfia kiemeli a szöveges tartalmat. Ha a kettőt kombinálod, akkor biztos, hogy vizuálisan érdekes weboldalt sikerül kialakítanod.

Hangsúlyozd a CTA-t

Mint azt már korábban is említettük, egy kettéosztott weboldal a kettéosztottság révén vezeti rá a felhasználót valamilyen útra. Jó megoldás, ha még inkább fel akarod hívni a látogatók figyelmét az itt elhelyezett call to actionre. A kettéosztott oldalakra jellemző a nagy negatív tér, ami jól vezeti a tekintetet a fontosabb részekre.

Kapcsold össze a két felét!

Amikor a megosztott weboldal egyetlen dologról szól, akkor fontos megmutatni a kapcsolatot a két rész között. Az egyik lehetőség erre a színekkel történhet. Egyszerűen csak jelenítsd meg kétszer ugyanazt a színt, és már ki is alakul a kapcsolat. Ez különösen jól működik például a márkaszínekkel, vagy egy erős kontrasztú színnel. Egy másik lehetőség, hogy átvezeted a szöveget mindkét felén az oldalnak, ami ezáltal össze is kapcsolja őket. Ugyanakkor a megoldhatod a kettéosztást-összekapcsolást egy szín overlayjel is.

A keretek, fejléc, lábléc eltüntetése

Egy weboldalon bizonyos elemekkel határol el adott funkciókat, így például egy menüsor, a lábléc, a fejléc, valamilyen formát ölt, dobozba kerül, keretet kap, hogy látható legyen mi, hova tartozik. Ugyanígy a különböző tartalmakat is ilyen megoldásokkal szokták elrendezgetni az oldalon, tehát elválasztani vagy épp összekötni. Egy újfajta megközelítés azonban ezeket az elemeket száműzi az oldalakról, sőt egészen egyszerűen a fejléc és a lábléc is a múlté, de nem különül el keretek, vonalak vagy színek által a menüsor sem, mindössze a whitespace és a betűméretek segítik a felhasználót abban, hogy tudja, mi hova tartozik.

Ezeknél a megoldásoknál jellemzően az történik, hogy a fejléc és az esetlegesen ott elhelyezkedő menüsor helyett a felhasználó először a nagyobb méretű cégnévbe, logóba botlik bele, melyet semmi más nem szorít ki, nem lökdös lefelé a hierarchiában, vagyis jóval nagyobb hangsúlyt kap. Márpedig ha valaki a cég nevét, küldetését szeretné kiemelni, akkor rendezze így az oldalát, és csak a cégnév, jelmondat, cím, stb. után helyezze el a navigációs menüt, már ha egyáltalán akar ilyet.

Monokróm színek, kontrasztos CTA-val

A kontrasztos vagy semleges monokróm színek közül nagyon jól ki tud tűnni egy-egy feltűnő call to action gomb, ez pedig kattintásra késztet.

Fix szélességű, középre rendezett oldalak

A minden kijelzőmérethez igazodó weboldalak előtt fix szélességű weboldalakat használtak. Ezek térnek most vissza, persze némi változással. A trend lényege, hogy ahelyett, hogy mindig kitöltenék a rendelkezésükre álló teret, egy bizonyos kijelzőméret felett már nem teszik ezt, hanem maradnak középen egy adott méretet felvéve.

Mikor vegyél komolyan egy webdesign trendet? És mikor hagyd figyelmen kívül?

Ha figyelsz a trendekre és felhasználod őket a weboldaladnál, akkor nem csak korszerű és frissebb kinézetű lesz az oldal, hanem jó esetben hatékonyabbá is válik. Azt azonban nehéz megmondani, melyik trend az, aminek a hátára érdemes ráülni. Minden trendet nem érdemes követni, ráadásul márkától is függ, hogy egy adott trend alkalmazása jó vagy rossz eredményt hoz.

Hogyan alakul ki egy webdesign trend?

Mint már korábbi linkjeink alapján is láttad, minden évben rengeteg új trenddel találkozhatunk. De honnan tudjuk egyáltalán, hogy mi az, ami ezek közül tényleg trend? A válasz erre az, hogy a trend egy határozott, észrevehető változás a weboldalak egy jelentős részének designjában. Az, hogy hirtelen jelenik meg vagy fokozatosan terjed el, nem számít. Trend például, ha egyszer csak azt látod, hogy a designerek elkezdenek nagy számban gradienseket használni, vagy a menük helyén egy három vonalat tartalmazó ikon jelenik meg.

Sokszor egy trend úgy jelenik meg, hogy szinte észre sem veszed, egészen addig, amíg már mindenhol azt látod. A Forbes szerint három dolog kell egy trend kialakulásához:

• Érzelmi hatás
• Közösségi hatás
• Kulturális fontosság

A trendekre jellemző, hogy erős befolyással bírnak. Például, ha az Apple egyszer csak átvált a minimál webdesignról, vagy a Google a fehér háttér helyett színeset kezd használni, akkor nagy a valószínűsége, hogy mások is elkezdik ezt követni, és már meg is született egy trend. Ez azonban nem mindig ilyen egyszerű, a trendek nem minden esetben egy nagy cég designváltásából eredeztethetők. Néha egyetlen kis projekt indítja be, ami másoknak is megtetszik és elkezdik használni, majd beindul a fokozatos terjedés.

Amennyiben a design-galériákat nézegeted, könnyen ráakadhatsz olyan új elemekre, melyek trendinek számítanak. Olyan jellegzetességekről van szó, melyek korábban nem voltak észlelhetők, de egyszer csak több designer munkáiban is felbukkannak: például a túlhangsúlyozott tipográfia, egy bizonyos szín használata, vagy egy animációs stílus.

Akadnak közöttük olyanok, melyek hosszú ideig velünk maradnak. Ilyen például a minimalizmus, mely hol feltűnik, hol eltűnik. De vannak olyanok is, melyek viszonylag rövid életűek: ilyen volt például az elmúlt években a hosszú árnyékolás vagy a szellemgombok.

Mikor érdemes beszállni egy trendbe?

Egy designtrend alkalmazása nem annyiból áll, hogy találsz egy neked tetsző oldalt, majd készítesz egy redesignt a weboldaladra ez alapján. Olyan trendeket érdemes csak követned, melyek működnek a Te weboldalad esetében is, passzolnak a cégedhez és a tartalmaidhoz. Az erőteljes színek például nem használhatók egy komoly iparágban, még ha népszerűek is. Olyan trendeket kell választanod, melyek probléma nélkül beilleszthetők a már meglévő designodba.

Akkor fontold meg egy designtrend alkalmazását, ha

• Az hozzátesz valamit a weboldalad megjelenéséhez
• Javítja a használhatóságot
• Olyan a stílusa, amely neked tetszik
• Könnyebben megérthető általa a tartalmad
• Passzol a márkádhoz
• Segít a felhasználóknak abban, hogy megértsék mit tegyenek a weboldaladon és hogyan lépjenek vele kapcsolatba
• Korszerűbb megjelenést biztosít
• Vagy ha egy olyan céloldalról van szó, mely csak ideiglenesen létezik (tehát azelőtt megszűnik, hogy idejétmúlttá válna a stílusa)

Mikor hagyj figyelmen kívül egy designtrendet?

Sok olyan designtrend jelenik meg, amely ahogy megszületik, szinte már el is tűnik. Ezek olyan trendek, melyek különböző designerportfoliókban bukkannak fel, és szokatlannak, kockázatosnak látszanak. Sok olyan trend van, mely bevett designelveket borít fel azért, hogy valami újat, szokatlant mutasson. Ezeket jobb óvatosan kezelni.

Akkor maradj távol egy designtrend alkalmazásától, ha

• Nincs semmilyen határozott okod a változtatásra (az nem elég, hogy valami jól néz ki, vagy mások is ezt csinálják)
• Ha nem passzol a márkád megjelenéséhez vagy a weboldalad designjához
• Nehezebbé teszi a tartalmak megértését
• Túlságosan harsány, zsúfolt benyomást kelt, vagy csak egyszerűen nem praktikus
• Túl sok erőforrást igényel (méret, sávszélesség, sok helyet foglal el a kijelzőn a megjelenítése)
• Nem lehet minden eszközre egyaránt jól alkalmazni
• Rontja a weboldal használhatóságát, rontja a weboldal forgalmát, nehezebbé teszi az interakciókat a weboldallal

A lényeg tehát az, hogy ha egy trend használhatóbbá teszi a weboldalad, akkor érdemes alkalmazni. Ha rosszul ítélsz meg egy trendet, akkor a legrosszabb, ami történhet az az, hogy kicsit talán gyorsabban kell majd változtatnod a weboldalad megjelenésén, előrébb kell hoznod a redesignt egy újabb, használhatóbb trendhez igazodva.