Átolvastuk a nemzetközi szakcikkeket a jövő évre vonatkozóan, és a várható trendekből kiválogattuk azokat, melyek egybevágnak a mi tapasztalatainkkal.
Integral Vision
Átolvastuk a nemzetközi webdesign témájú cikkeket a jövő évre vonatkozóan, és a várható trendekből kiválogattuk azokat, melyek egybevágnak a mi tapasztalatainkkal. Felvázoltunk 5 szempontot, melyre érdemes figyelni a weboldalak fejlesztésekor. 2021-ben a még gyorsabb, biztonságos információátadás lesz fókuszban.
1. Gyors oldalletöltés
A weben egyre kevesebb idő alatt próbálunk még több információhoz jutni. Ami néhány éve még elfogadottnak számított, az ma már lassú. A gyors oldalletöltés évek óta nélkülözhetetlen tényezőnek számít mind a UX-ben, mind a SEO-ban. Ha szeretnél jó konverziót és kiváló rangsorolást, akkor szorítsd le az oldalletöltés idejét 1 mp alá!
Ez az a tényező, ami egyre nagyobb hangsúlyt kap, és amit egyre nehezebb megvalósítani, ahogy növekszik a weboldalak komplexitása.
A legtöbb tanulmányban 2 mp köré teszik a toleranciaküszöböt, ameddig még a felhasználó hajlandó várni, 3 mp-nél nagyobb oldalletöltési idő esetén jó eséllyel elveszítesz felhasználókat az oldaladról.
A Google PageSpeed Insights szolgáltatással megmérhetjük az oldalunk letöltési sebességét, és ajánlásokat kaphatunk arra, hogy mit érdemes optimalizálnunk a javulás érdekében.
A túl nagy felbontású képek használata például tipikusan olyan tényező, amely lényegesen megnövelheti az oldalbetöltés idejét. Nem mindegy, hogy mobilon vagy retina kijelzős asztali kijelzőn kell megjeleníteni a képet. Ha túl alacsony felbontású a fájl, sok esetben ami a mobilon még jó, az a széles képernyőn már „hangyás” lesz. Figyeljünk arra, hogy a megoldásunk képes legyen az eszköztől függően megjeleníteni az optimális képet! Ehhez ma már vannak olyan megoldások, mint például Drupal alatt a Webp modul. Még több info: WebP and Drupal: Performance, the Last Frontier.
Legyen tehát 1 mp alatt az oldalbetöltés! Minél gyorsabb, annál jobb. Az integralvision.hu oldalon például több iterációban egyszerűsítettük a designt annak érdekében, hogy javuljon a betöltési sebesség. Egyebek mellett kigyomláltuk a beágyazott fontokat is, mert ezáltal is értékes tizedmásodperceket nyertünk, ami a statisztikák szerint nagyobb előnyt jelenthet, mint a gyönyörűséges tipográfia.
Ajánlott olvasmány a témában: Why Page Speed Matters and How to Improve It
2. Intelligens oldalbetöltés
Előfordulhat, hogy az egyedi design kialakítása érdekében nagy mennyiségű adatot kell letöltenie a böngészőnek, és lassíthatják a működést a harmadik féltől származó integrációk is. Ma már sokféle megoldás van arra, hogy csak azokat a tartalmakat és adatokat töltse le a webhely, amire a felhasználónak éppen akkor szüksége van.
A lusta betöltés (lazy load) és a végtelen görgetés (infinite scroll) olyan minták, melyeket a közösségi oldalak már évek óta használnak, és egyre nagyobb hangsúlyt kapnak az egyedi megoldásokban is. Ezek tudatos használatával egyszerre javíthatjuk a felhasználói élményt és az oldalbetöltést.
A végtelen görgetést először mobilon használták, és ott valóban jobban is működik, mint a lapozás. A számítógépeken érdemes megfontolni, hogy melyik navigációs mintát akarjuk használni attól függően, hogy mi a cél. A Speakerhub.com oldalon évek óta használjuk ezt a megoldást, és elégedettek vagyunk az eredményekkel.
Akit mélyebben érdekel a téma, ajánlom “Pagination vs. Infinite Scroll: What's the Difference?” cikket.
3. Testreszabott tartalom
Sokféle módon lehet a felhasználónak testreszabott tartalmat kínálni. Egy bejelentkezett felhasználóról tudhatjuk például, hogy milyen szerepkörben használja az oldalt, és ennek megfelelően alakíthatjuk ki a tartalmakat és azok strukturális felépítését.
A weboldal le tudja kérdezni az IP címe alapján a földrajzi helyzetét is, és a böngésző nyelve utalhat arra is, hogy milyen nyelven kínálja a tartalmakat.
Jelentősége van annak is, hogy a felhasználó hányadszor jött vissza az oldalra, az először látogatók számára látványosabb, vonzóbb (képi, videó) tartalmakat érdemes előtérbe helyezni, a visszatérőknek pedig az ő érdeklődési körüknek megfelelőt.
A weben fellelhető óriási információmennyiség arra készteti a felhasználókat, hogy egyre hatékonyabban, gyorsabban találják meg a kívánt információt. Egyre gyorsabban (el)kattintó felhasználókat kell tudnunk az oldalunkon tartani, és ezt a leginkább a perszonalizációval, testreszabott tartalmakkal tudjuk megtenni.
A tartalmak testreszabásához fontos mindenekelőtt szegmentálnunk a célközönségünket, nem árt, ha mérjük a viselkedést többféle módon. Cégünkben a Google Analytics-et használjuk kvantitatív elemzésre, a Hotjar-t pedig kvalitatív célból szoktuk bevetni.
További olvasnivaló: 5 ways to personalize your website content
A „mi legyen a főoldalon” kérdést nem az ügyfeleknek kell feltenni, helyette próbáljuk meg minél alaposabban feltérképezni a célközönséget, és ehhez ajánlani megfelelő megoldásokat. Íme egy remek válogatás UX mintákból: 10 Great Sites for UI Design Patterns
4. Flat design
A jó design az információfeldolgozást segíti. A két dimenziós képernyőn gyakran a valós világ három dimenzióját próbáljuk meg leképezni, vagy legalább nyomokban visszaadni. Ez a törekvés sok esetben az érthetőség rovására megy.
A gyorsaság technológiai aspektusát korábban tárgyaltuk, most fókuszáljunk az információfeldolgozás sebességére! A felhasználók egyre gyorsabban szeretnének információhoz jutni. Ehhez könnyen értelmezhető szövegeket és átlátható felépítésre vágynak.
Jó, ha az oldalunk vizuális nyelve a lehető legkönnyebben befogadható, és alátámasztja a mondandónkat. A flat design egy olyan stílust képvisel, mely megszabadítja a felhasználót az olyan felesleges vizuális zajoktól, amit a 3D imitálása érdekében hozunk (árnyékolás, gradiensek, textúrák alkalmazása). Számos kutatás alátámasztotta, hogy a gyors információbefogadást ez az egyszerűsített megjelenítés megkönnyítheti.
Jó példa a flat design-ra a Shopify oldala, vagy akár a Zanza.tv.
Arra számítunk, hogy 2021-ben még több minimalista oldal lesz, visszafogott színhasználattal, alap fontkészletekkel, 2D-s ikonokkal.
Bővebben: 5 Reasons Why You Shouldn’t Ignore Flat Design for Epic Conversions
5. GDPR, SSL tanúsítványok
A GDPR szabályozás érvénybelépése óta az adatok biztonságos tárolására vonatkozóan konkrét ajánlások és előírások vannak, melyek betartása a felhasználóink érdekét szolgálja.
Egyre több cikk foglalkozik a biztonságos adattárolás kérdésével, és egyre szélesebb körben ismert megállapítás, hogy ahol nem fizetsz a szolgáltatásért, ott te vagy az áru.
Fontos bizalomnövelő üzenet lehet a célcsoportod számára, ha betartod az adattárolás és adatközvetítésre vonatkozó előírásokat, komolyan veszed az információtárolásra és megsemmisítésre vonatkozó GDPR előírásokat.
Bizonyos információknak, mint a hitelkártyaadatok, fiókbelépéshez szükséges adatok és egyéb kényes információk átvitelének titkosítás alatt kell történnie, hogy kizárjuk az adatok kiszivárgását.
Az SSL tanúsítványok arra szolgálnak, hogy oldalainkat biztonságosan, titkosított adatközvetítést használva jelenítsük meg. Különösen fontos ez a hitelkártyaadatok, és a személyes információk tárolása esetén. Az SSL tanúsítvány meglétéről a böngésző tájékoztatja a felhasználókat, ennek hiánya bizalmatlanságot kelthet a szolgáltatás iránt. Az SSL tanúsítvány ma már alapkövetelménynek számít, melyet minden weboldal esetén ajánlunk alkalmazni.
Ugyanakkor érdemes tudatosítani, hogy minél testreszabottabb tartalmat szeretnénk kínálni, annál komolyabb aggályok merülhetnek fel a személyes adatok etikus alkalmazásával kapcsolatosan. Az EU-ban a GDPR sokkal szűkebb mozgásteret tesz lehetővé, és ennek betartása mindannyiunk érdeke.
Cikkajánló
9 stunning web design trends for 2021
Why Page Speed Matters and How to Improve It
WebP and Drupal: Performance, the Last Frontier
Google Switches to Infinite Scrolling Mobile Search Results
Pagination vs. Infinite Scroll: What's the Difference?
5 ways to personalize your website content
10 Great Sites for UI Design Patterns
5 ways to personalize your website content
5 Reasons Why You Shouldn’t Ignore Flat Design for Epic Conversions
Oszd meg ismerőseiddel!