Har din design blivit gammal? Gamla och omoderna användargränssnitt kan göra en webbplats känner sig mycket daterad än vad den egentligen är.
Här tittar vi på åtta användargränssnitt som du bör eliminera från din designplan. Men det är inte allt; var? kommer med ett förslag för att modernisera din webbplats. Vi får den designen som är uppdaterad på nolltid!
1. Flat? Knappar
Ett av de största problemen med platt design i allmänhet är att allt var bra? platt. För vissa användare gjorde det här svårt att skilja och göra interaktioner svåra. ? Nästan platt? och? platt 2,0? uppstod som en lösning på detta problem, vilket hjälper användarna att bättre hitta och interagera med användargränssnitt.
Prova här istället: Lägg till en antydan av animering eller en svängningseffekt för att ge en platsknapp lite mer tonvikt. Om du gillar utseendet på plattan, överväga ett nästan platt alternativ eller överdimensionerade knappalternativ som är enklare för användarna att hitta och interagera med.
2. Textkaruseller
Karuseller och reglage kan enkelt bli föremål för stora debatter bland designers. Oavsett om de är användbara och fungerar bra beror ofta på innehållet inom.
Textkaruseller eller skjutreglage som visar långa strängar av information är inte så praktiska. Slider som inte ens glider på egen hand och kräver ett klick är inte heller användbara heller. Och ingen av dessa alternativ uppmuntrar användare att klicka.
Prova här istället: Om du vill visa flera objekt använder du den här tekniken som en bildskärm för en handfull visuella men inte som ett samtal till handling och använder det inte för block av text som användare ska läsa i följd. Placera åtgärdselement på annat håll på skärmen med en direkt och lättförståelig åtgärd.
3. Länkar för små evenemang
Att behöva klicka (eller knacka) på webbplatser för att se ytterligare information är en sak från det förflutna. Användare vill kunna se informationen snabbt och utan att förlora sina ursprungliga webbläsarplatser. (Detta gäller webbplatser och appar.)
Om du kan visa information på ett sätt som inte medför att användarna navigerar bort från originalkällan för dessa divottor, ska du göra det på så sätt.
Prova här istället: En popover är ett litet användargränssnitt som relaterar till en viss bit av innehåll. När användaren aktiverar åtgärden framträder ett stilelement med nästan anmälan (och försvinner också). Popovers är en av de spionerade funktionerna i Apple OS X och av goda skäl; tillhandahålla funktionen utan navigering.
4. Flash-baserat Något
Det finns bara en sak att säga om Flash: Om du fortfarande använder den för allt på din webbplats, vänligen sluta.
Prova här istället: HTML5 är inte nytt längre och ger all den funktionalitet du behöver för att spela ljud, video och andra bitar av multimedia. (Plus det fungerar på alla enheter.)
5. Ikoner med långa skuggor
Utvecklingen av plattformsutvecklingen var ganska kortlivad. Medan du fortfarande kan hitta några långa skuggsymboler eller knappar där ute, har stilen redan en daterad känsla.
Prova här istället: Prova att skapa en knapp med en platt stil med några tips om skuggor eller textur. Dessa subtila effekter gör det enkelt att se? än ett element är utformat att interagera med, samtidigt som man behåller en enkel estetik som inte förringar andra visuella.
6. Mega Menus
Medan en mega-meny kan hjälpa användare att navigera på en webbplats med mycket innehåll, är de inte praktiska på mindre enheter. Problemet med dessa överdimensionerade menyer är att det ofta finns så mycket innehåll som användaren inte vet vad man ska göra, blir överväldigad och överger webbplatsen.
Det andra problemet med stora menyer är att många är utformade för att öppna på svävar och sedan täcka upp mycket av skärmen. Detta kan orsaka förvirring för användarna och ytterligare distrahera användare från varför de kom till din webbplats eller flyttades till menyn i första hand.
Prova här istället: Använd stark länk för att leda användare genom bitar av relaterat innehåll. Gör det enkelt för användare att hitta och se mönster i designen för att flytta från ett element eller en bit av innehåll till nästa.
Med hjälp av webbplatsanalys kan du hitta användarflöde och mönster från sida till sida för att skapa starka sidrelationer. Om du känner behovet av att gå stor med navigering, överväga en bildskärm med full skärm som avsiktligt klickas och kan döljas lika enkelt.
7. För många sociala medierikoner
Vid denna tidpunkt vet användarna hur man delar innehåll på sociala medier - även om det inte finns tiotals ikoner starka över hela sidan. Alla dessa ikoner är sannolikt störande från ditt innehåll.
Ännu värre är en stark social media ikoner med alla olika färger och former av olika kanaler. Dessa ikoner dödar din design. Det finns bättre alternativ.
Prova här istället: Lägg till anpassade sociala medier-delningsknappar till din rubrik eller sidfot och håll dem borta från enskilt innehåll. Utforma dem med subtilitet så att de inte distraherar användare från designen och den faktiska anledningen till att du besöker din webbplats.
Eller var lite djärvare och överväga att döda dem helt och hållet. Gravera i dina analyser; hur många personer använder faktiskt delningsknapparna?
8.? Fake? Animering
Snurra, hoppa eller ändra på knappar, element och andra samtal till handling för att få användare att titta på dem? Dessa tekniker kommer att datera din webbplats direkt.
Designen bör rita in användare; uppmärksamhet på grund av en löjlig mängd rörelse, borde det inte.
Prova här istället: Designelement med avsikt. Ge användarna någonstans att fokusera i designen. Varje skärm bör inte innehålla mer än ett handlingsbart objekt (bortsett från share options för sociala medier). Så gör det klart vad användarna ska göra och utforma ett element som kan hjälpa dem att uppnå det målet.
Kort-stil-element är ett bra alternativ här.Eftersom behållarna är större än en standardknapp, ger de gott om klickbart utrymme och information. Detta kan göra det enkelt för användarna att hitta och klicka på lämplig åtgärd. (Och kort är också lyhörda.)
Slutsats
Gör du något av dessa användargränssnitt fel på din webbplats? Enkla lösningar kan hjälpa dig att uppdatera och modernisera designen samtidigt som det blir lättare att använda.
Se till att du tittar på exemplen (och klicka på länkarna för att se hur de fungerar i åtgärd) för att se hur du kan använda olika typer av användargränssnitt. Och se till att du delar med dig av ditt arbete i Design Shack-galleriet.