Ibland gör webbplatser mig grova. Jag klickar med förväntan och då? design katastrof. Medge det, du har grumlat på skärmen mer än några gånger också.
Från dålig typ till saknade länkar till användbarhetsproblem kommer jag att dela de misstag som bara driver mig helt bonkers. Ta hand om dig! Det här är saker att ta itu med och fixa på din egen webbplats innan någon annan kommer över dem!
1. Brist på kontrast
Texten och bilderna på din webbplats måste vara läsbara. Det enklaste sättet att uppnå det är genom kontrast. Men för många designers glömmer detta enkla faktum.
Det största problemet är ofta i brist på kontrast mellan text och bakgrund, vilket gör att bokstäverna är oläsliga. (Är inte det hela innehållet?)
Det är viktigt att säkerställa att varje placering innehåller tillräckligt med kontrast med omgivande element för att ställa det ifrån varandra så att elementen står på egen hand. Kom ihåg några av grunderna i design när du tänker på kontrast - färg, utrymme och storlek. Att använda dessa element hjälper dig att ställa in element från varandra.
Bilden ovan innehåller två kontrastproblem med text. Titta på färgen på länkarna mot bakgrunden. Texten är ganska svår att läsa. Kolla sedan på storleken på texten jämfört med storleken på bilderna på skärmen. Det är alldeles för litet och vitt bokstäver mot en ljus bakgrund förenar problemet.
2. Dålig navigering och flöde
Från det ögonblick jag landar på din webbplats borde jag veta vad du förväntar mig att göra nästa. Klicka på mönster och informationsflödet ska vara ganska uppenbart. (Det här är en anledning till att navigering och menyer ofta finns högst upp på sidan.)
Navigationstryck och effekter ska tydligt märkas och fungera intuitivt. Det här är för dig alla att experimentera med vänster till höger eller andra ovanliga animerade effekter - ge användarna en viss typ av cue om hur det fungerar. Fräckande användare med överkomplicerade designtrick kommer att få dem att överge din webbplats.
3. Dålig fotoanvändning eller behandling
Det finns inget värre än en bra bild som fördjupas av andra designelement. Om du tar tid att använda bra bilder på din webbplats, använd dem utan alltför många överlagda effekter. Lägg till en enkel textrad och sluta. (Därför spökknapparnas popularitet.)
Medan det finns många sätt att det kan hända, händer fällan ofta när konstruktörer försöker vara? Trendiga.? Hero headers är roliga. Glider är bra. Men när du kopplar samman dessa element med text kan de bli farliga. Varje bild i uppsättningen behöver fungera med texten så att varje ord är läsbart och att alla viktiga element i bilden är synliga.
Täck inte över viktiga delar av en bild med text eller knappar. Om du tycker att detta händer i din design kanske det är bättre att välja en enkel bakgrund och använda foton på annat håll.
Vid första anblicken griper bilden ovan, eftersom den ligger i laglig skissstil. Men titta närmare, ansikten är dolda av text och allt blir lite jumbled med hjälp av ett testamente som inte behöver täcka bilden.
4. Använd inte ett nät
Det finns en viss mängd glatt kaos i webbdesignen. asymmetri är ett sådant element. Brist på ett rutnät är inte.
Att använda ett galler är en av de professionella polermedel som sätter den goda designen utöver det dåliga. Grids lägger klarhet och organisation, hjälper till att skapa adekvat och konsekvent avstånd mellan element och hjälpa dig att ge en uppfattning om var och hur man placerar element. Rutnätet kan bidra till att fokusera beslutsfattande för elementstorlek, textstorlek och utrymme, och designa inom proportioner som viktas på lämpligt sätt.
5. Använd inte Responsive Design
Var snäll och använd goda ramar för dina webbplatser. Din webbplats måste arbeta på en mobiltelefon. Period. Omvänt måste det också fungera lika bra på skrivbordet.
Jag fortsätter att komma över webbplatser som gör som fullständiga webbsidor på min telefon. Webbplatser som inte är mottagliga eller som saknar mobilversion åtminstone saknar trafik och omvandlingar varje dag. (Medan mer ovanligt, webbplatser som bara erbjuder mobila versioner är lika frustrerande.)
Och många andra användare är förmodligen som jag, om jag försöker din webbplats på min telefon och det fungerar inte, kommer jag inte tillbaka eller provar den på skrivbordet heller.
6. Saknade länkar
Brutna länkar är en av de största frustrationerna på webben. Få vana att utföra en årlig länkrevision för din webbplats. Det här är något du kan göra manuellt eller med hjälp av ett verktyg som Website Link Checker.
Den andra sak som bara buggar mig? När logotypen inte är en länk till hemsidan från varje sida. Det borde alltid finnas ett hem? fungera. (Och medan du är på det, stäng inte av knappen bakåt.)
När det gäller länkar, tänk på användbarhet. Se till att länkar, särskilt de i text, är synliga och tillräckligt stora för att klicka eller knacka utan att få en angränsande länk av misstag. Ta inte med så många textlänkar av den anledningen eftersom det kan bli svårt att trycka på rätt länk, särskilt på mindre enheter.
7. Spela upp ljud automatiskt
Ljud på din webbplats kan vara kul. Ljud som spelar utan att fråga är inte.
Du bör alltid ge användarna ett ljud på / av-växlingsalternativ och standard till avstängning. Ljudet kan vara uppseendeväckande för användarna, kanske inte säkert för arbetsmiljöer och är generellt irriterande. De flesta användare vill känna sig kontrollerade av webbplatsens upplevelse och automatiskt spela upp ljudet tar lite av den här kontrollen bort. Jag är mycket mer benägna att ingå i ljudet och spela det om jag får möjlighet auto-play får mig ofta att lämna webbplatsen utan att leta efter en plats för att tysta den.
Det finns vissa ställen där det kan vara svårt - t.ex. reklam. Om du har något som innehåller ljud som måste spelas, överväga en popup-rutan med en stor mute-knapp.Användare är mer utbildade? att acceptera några sekunder av annonsspel för att visa innehåll. Det är fortfarande inte en idealisk situation, men kan vara en bättre lösning.
Titta på bilden från webbplatsen ovan. Det spelar ljud automatiskt - de ska vara lugna - men se om du kan fånga ljudet på ett ögonblick. Knappen är ganska liten, särskilt i jämförelse med skalan av andra element.
7 Mer Pet Peeves
Tyvärr finns det många andra små saker som kan göra mig galen när du surfar på webben också. Försök att inte bli offer för något av dessa slarviga misstag.
- Ingen sökning
- Grammatikfel eller felstavningar
- Ingen uppmaning till handling
- För många länkar i kopian
- Hyphenated text
- Super-små knappar
- Dålig typografi och läsbarhet
Slutsats
Att falla i några av dessa designfällor är för lätt och kan hända med någon. (Du hittar även några av dessa misstag som lurar på webbplatser med övergripande bra design.)
Så var försiktig och fokusera på detaljerna genom hela designprocessen och starta så att du kan undvika många av dessa problem. Du vill inte göra mig grumpy eller hur?