5 példák rossz honlap Design, hogyan kell csinálni jobb
a weboldal kialakítása közvetlenül befolyásolja a felhasználói élményt., A rosszul megtervezett webhely kevésbé valószínű, hogy a látogatókat cselekvésre készteti, például egy termék megvásárlására vagy egy levelezőlistához való csatlakozásra.
valójában, ha az oldal lassan vagy nehezen navigálható, a látogatók 95% – a másodperceken belül távozik.
ha nem kapja meg a kívánt eredményeket egy weboldalról, például megnövekedett konverziók és csökkent visszapattanási arányok, értékelje a tervezést.
itt van néhány hiba, amit más webhelyeken elkaptunk. Próbálja meg elkerülni a rossz webhelytervezés ezen öt példájának megismétlését.
hogyan néz ki a rossz Weboldaltervezés?,
lehet, hogy az átlagos cégtulajdonos nem érti a jó és a rossz Webdizájn közötti különbségeket,ezért sok weboldal szörnyű és nem hatékony tervekkel jár.
míg a tervezési trendek folyamatosan változnak, a weboldal alapvető összetevői továbbra is univerzálisak, beleértve:
- könnyen követhető navigáció
- tiszta elrendezés
- Kompatibilitás
- iparági megfelelő kialakítás
a felhasználóknak nem kell kitalálniuk, hogyan találjanak egy oldalt a webhelyén. Mindent világosan meg kell szervezni, egyszerű menükkel és navigációs funkciókkal.,
tiszta elrendezés is ajánlott. Ha az oldal tele van információval, grafikával és videóval, hosszabb időt vesz igénybe a betöltés, és nehezebbé válik az olvasás.
A kompatibilitás kevésbé aggodalomra ad okot, mivel a legtöbb webhely most olyan érzékeny terveket használ, amelyek megfelelnek a felhasználó képernyőjének méretének. Azonban gyakran alapos tesztelésre van szükség annak biztosítása érdekében, hogy az elemek megfelelően töltődjenek be a különböző eszközökön.
a weboldal vizuális megjelenése szubjektív részlet, mivel mindenkinek megvan a saját ízlése. Függetlenül attól, hogy szüksége van egy olyan tervezésre, amely megfelel az iparágnak., Például, míg mutatós grafika nem működik a helyszínen egy ravatalozó, dolgozhatnak a helyszínen egy fél Kölcsönző boltban.
tartsa ezt szem előtt, mivel áttekintjük a legrosszabb weboldal tervezési hibákat.
egyértelmű üzenet nélküli webhelyek
az egyik legrosszabb tervezési hiba, amelyet elkövethet, nem nyújt egyértelmű üzenetet a webhely céljával kapcsolatban. A felhasználóknak azonnal tudniuk kell a vállalkozás nevét és azt, amit eladnak.
például, amikor először meglátogatja a 3D postafiókot, néhány másodpercig tart, hogy megértse, mit néz., Úgy tűnik, hogy egy weboldal valamilyen típusú e-mail szoftver. Nehéz meghatározni, hogy a szoftver játék, Képernyővédő vagy e-mail kliens.
a cyberdsignclan webhely egy másik példa egy webhelyre egyértelmű üzenet nélkül. Egyszerűen megjelenik egy nagy grafika, amely így szól: “ugrás intro.”Az oldalra kattintás után az igazi Kezdőlap betöltődik, ami ugyanolyan zavaró, mint a 3D postafiók.
mindkét oldalon nincs egyértelmű üzenet. Ha többet szeretne megtudni a termékről, a látogatóknak át kell görgetniük az oldalt, vagy kattintaniuk kell más linkekre.,
minden, ami az oldalon megjelenik, mielőtt a felhasználóknak tovább kell görgetniük, a hajtás felett van. Ezt “hős szakasznak” nevezzük.”Ez az a terület, ahol fel kell tüntetni a vállalkozás nevét, valamint azt, hogy mit értékesítenek. Az oldal tetejének valamilyen típusú navigációt is kínálnia kell.
a weboldal látogatói egy másodpercen belül véleményt alkotnak az üzletről. Ha a felhasználóknak át kell görgetniük az oldalt, hogy megtudják, mit csinál a vállalat, akkor valószínűleg elhagyják az oldalt.,
túl sok elem zsúfolja az oldalt
az egyértelmű üzenet mellett a webhelynek világos elrendezéssel kell rendelkeznie. Ha az oldal zsúfolt, nehéz lesz navigálni, ami a látogatókat elhagyja.
Arngren.net jó példa a rossz tervezésre. Ez a minősített weboldal olyan listákat tartalmaz, amelyeket szerkezet nélkül dobtak össze. A listák nem kategóriákba vannak osztva, és úgy illeszkednek egymáshoz, mint egy kirakós játék.
egy másik példa, látogasson Lings autók., A weboldal használt autókra vonatkozik, de olyan sok különböző eleme van, hogy figyelmen kívül hagyhatja a webhely célját. A tervező legalább fél tucat animált elemet tartalmazott a hajtás felett, így hihetetlenül nehéz navigálni az oldalon.
sok tartalom megjeleníthető az oldal rendetlensége nélkül. Egy jó webdizájn például, hogy több termék, nézd meg az Amazon vagy AliExpress. Míg mindkét oldal tartalmaz egy soha véget nem érő tekercset a termékekből, rácsokba vannak rendezve, ahelyett, hogy mozaikként dobnák össze őket.,
azon kívül, hogy az oldalt összekuszálja a linkek hodgepodge-jával, egyes webhelyek tele vannak felugró ablakokkal, lebegő hirdetésekkel, automatikus betöltő videókkal és más elemekkel, amelyek elvonják a látogatókat.
Pages with No Mobile Optimization
a legtöbb internetes forgalom az USA-ban most jön a mobil eszközök, mégis sok honlapok még mindig épült asztali számítógépek első. Ha a webhely nincs optimalizálva mobil eszközökre, a legtöbb látogató nem kap jó felhasználói élményt.,
sok webhely már tartalmaz érzékeny tervezést, amely lehetővé teszi a weboldal számára, hogy az elemeket a felhasználó eszközének képernyőszélessége alapján állítsa be. A webhely elrejtheti az elemeket, megváltoztathatja a betűtípusokat, vagy eltávolíthatja a háttereket, ha kisebb képernyőt észlel.
ezek az adatok lehetővé teszik a webhely bármely eszközön történő működését. Míg a reszponzív tervek gyakoriak, még mindig sok olyan webhely található, amelyek olvashatatlanok a mobil eszközökön.
szinte az összes már tárgyalt példa nem rendelkezik érzékeny kialakítással. Deque Egyetem egy példa a nem reagáló web design.,
Ha ezt olvasod a böngésződben, próbáld meg felkeresni a webhelyet, majd módosítsd a böngésző szélességét. Mivel a böngészőablak kisebb lesz, az oldal nem változtatja meg az elrendezését. A szöveg lehetetlenné válik a jobb oldali görgetés nélkül.
ha példát szeretne látni a reszponzív webdizájnra, látogasson el szinte minden olyan webhelyre, amely egy nagy cég, például a Nike vagy a Microsoft tulajdonában van.
Egyszerű navigáció és linkek hiánya
amikor a felhasználók elérnek egy webhelyet, nem okoz problémát a menü böngészése és a szükséges információk megtalálása., A University of Advancing Technology hivatalos honlapján az oldal tetejét egy nagy Animált kijelző borítja, amely lebegő grafikát tartalmaz.
a lebegő grafika kattintható linkek, amelyeket nehéz kattintani, és lassítani az oldal betöltési sebességét. Bár ez rendkívül innovatív, vannak más kreatív módszerek is a weboldal tervezésére anélkül, hogy megnehezítenék a navigációt. Ahelyett, hogy a lebegő elemek, mint a linkeket, az Egyetem, a fejlődő Technológia koncentráltak létre egy menüt, könnyen nyitva, keresse meg.,
végül sok olyan oldal van, ahol a parallax görgetés és a beágyazott videó elemek nem képesek felülkerekedni az oldalon, és korlátozzák a navigálhatóságot.
olvashatatlan szöveg vagy kattinthatatlan gombok
a webböngésző igényei miatt az előző webhely menüje szinte kattinthatatlan. Ez akkor is probléma, ha a webhelyeket nem optimalizálták mobil eszközökre. Ha az elemek nem igazodnak a kisebb képernyőhöz, átfedhetik egymást, vagy túl kicsiek lehetnek az olvasáshoz.,
a probléma elkerülése egyszerű, ha részletes tesztelést végez a webhely elindítása előtt. Emulátorokkal vagy szoftverekkel emulálhatja, hogyan jelenik meg webhelye különböző mobileszközökön, beleértve a legújabb okostelefonokat és táblagépeket is.
hogyan lehet elkerülni a webhely rossz kialakítását
a tárgyalt példákat viszonylag könnyű elkerülni, most, hogy tudod, mit kell keresni. A szükséges változtatások végrehajtása azonban technikai szakértelmet igényelhet., A WANDR-nál tapasztalt UX tervezők segítségét kapja, akik megértik, mi szükséges a jobb felhasználói élmény létrehozásához.
ha biztosítani szeretné, hogy webhelye ne tartalmazzon a tárgyalt rossz tervezési példákat, fontolja meg a szakemberekkel való együttműködést.