Bästa praxis för 6 gemensamma användargränssnitt
Utseendet och användbarheten av vissa gränssnitt och funktionalitet är avgörande för att framgången ska kunna vara på alla webbplatser på dagens marknad.
Studier har visat att även en delad fördröjning av tänkandet på användarens sida kommer att försvaga deras uppfattning och intresse för en webbplats och slutligen sänka webbplatsens omvandlingsfrekvens.
I vissa nischer och industrier kan ha UI-element som inte är uppenbara i deras användning vara helt acceptabla. Blogging och webbutvecklingsindustrin är perfekta exempel.
Men när vi utformar användargränssnitt för icke-tekniskt kunniga publikgrupper, vilket vanligtvis är fallet med klientarbete, måste vi se till att vissa användargränssnitt inte döljer för långt från vad användarna är vana vid.
I den här artikeln diskuteras några bästa metoder och användbarhetsegenskaper för sex användargränssnitt och konventionerna för varje, så att utvecklare kan skapa användarupplevelser som är både vackra och enkla.
1. Utseendet i sökrutan
På stora informationsrika eller produkt-tunga webbplatser är sökningen kung. Användare här förmedlar vanligtvis konventionella navigeringsstänger till fördel för sökrutan.
En sökruta som inte är direkt synlig kommer att ha en av två effekter: 1) användaren antar att ingen sökfunktion är tillgänglig, eller 2) användaren kommer att hitta sökfunktionen efter en försenad och eventuellt irriterande period.
Se till att sökrutan på din webbplats är lätt att se. Mörka bakgrunder och snygg grafik kommer att försämra användbarheten , så det är bäst att hålla den vit eller ljusgrå. Se också till att sökrutan är tillräckligt stor i förhållande till andra viktiga element på sidan, och därmed behålla sin position i den visuella hierarkin.
Sökrutan på Domän genom IP passar det visuella temat på webbplatsen snyggt, är orange och grafiskt förenligt med omgivningen. Men om en sökruta på en livligare webbplats fick denna behandling, skulle det förmodligen vara svårt att upptäcka.
Designen är inte ett hinder för Domain by IP eftersom webbplatsen har en funktion: sökning, som ligger mitt i sidan. Plus, som en tekniknisch har utvecklarna mindre incitament att hålla sig till konventionen. Men denna grad av kreativitet bör undvikas på större webbplatser , vars målgrupper kanske inte är så tekniskt kunniga.
Äventyrsdags , under tiden håller sökrutan vit, bekvämt stor och lätt att hitta på sidan:
Trots att det är på ett främmande språk, har Adventure Time en mycket tydlig sökruta, även för engelsktalande användare. Boxens storlek och färg kompletteras med förstoringsglaset, vilket har blivit den universella symbolen för online-sökning. En användare som letar efter den här funktionaliteten kommer inte att ha något problem här.
Detta mönster ska följas i alla projekt riktade till en mångsidig användarbas.
Vidare läsning:
2. Tydligt markerat fällbart / utökat innehåll
Hemsidor drar nytta av hopfällbara paneler och rullgardinsmenyer eftersom de gör renare och mindre rotiga layouter. Det dolda innehållet i dessa gränssnittselement kan dock försämra webbplatsens användbarhet om deras närvaro inte är tydligt angiven.
När en användare klickar på en ledig länk eller knapp, förväntar de sig att de tas till en ny sida. Men när en användare klickar på en länk eller knapp som har en dold innehållsindikator, förväntar de sig att det nya innehållet visas direkt (via JavaScript eller AJAX) och har möjlighet att dölja det senare. Således bör en webbplats skarpa skilda mellan normala länkar och länkar som avslöjar nytt innehåll via JavaScript .
Fällbart innehåll, som i sidopanel och menyträd, kan anges med en pil, triangel eller Windows Explorer-liknande plus / minusindikator. Panelen som inloggade användare ser på CSS Globe tydligt indikerar att det är hopfällbart:
Nedan är samma sida efter att panelen har utökats för att avslöja en grupp funktioner:
Med innehållet i panelen nu expanderat roteras pilen 90 grader, vilket tyder på att samma innehåll nu kan döljas eller kollapsas. Samma princip kan tillämpas på rullgardinsmenyer eller utflyttningsmenyer, även om dessa inte skulle kräva en roterande pil. Överraskande är denna funktion ofta utelämnad även på professionellt utformade webbplatser.
Vidare läsning:
3. AJAX-laddningsindikator
När du förbättrar användarupplevelsen genom att ladda innehåll genom asynkrona förfrågningar, se till att informera användaren om att en AJAX-förfrågan ska behandlas. Utan denna indikator kan användaren sluta vänta eller undra varför inget har hänt som svar på deras klick.
Du kan uppnå detta på ett antal sätt; Ett sätt är att markera ett "Laddar" eller liknande meddelande i eller nära platsen där åtgärden kommer att inträffa, som Googles RSS-läsare gör:
Överst på skärmdumpen är gul markerad text som visas när "Markera alla som läs" -knappen klickas och berättar användaren att något händer.
Ett annat sätt att ange detta är med animering eller ett roterande timglas, vilket skulle vara bekant för Windows-användare. En animerad indikator används på många webbplatser, inklusive Twitter , där användarna klickar på en "Mer" -knapp för att visa äldre tweets:
När knappen har klickats och beroende på hur snabbt klientens anslutning till servern är, visas en bekant animerad virvlande grafik som berättar för användaren att deras förfrågan behandlas.
AJAX-laddningsgrafik finns gratis från ett antal olika webbplatser, varav många låter dig anpassa grafiken med storlek, färg och andra alternativ.
Denna typ av visuell indikator är viktig för asynkrona förfrågningar som inte innehåller klientlängder om vilken aktivitet som laddas.
En AJAX-liknande indikator kan också användas för att förbättra icke-AJAX-funktionalitet som beter sig som AJAX och tar tid att ladda. Det här kan innehålla ett fotogalleri som laddar upp en större bild när en miniatyrbild är klickad.
AJAX-laddningsgrafik och andra indikatorer förbättrar inte faktiskt en sida, men de förbättrar "uppfattad" laddningstid , vilket ofta är lika värdefullt som att förbättra den aktuella laddningstiden.
Vidare läsning:
4. Placering av kundvagn och inloggning och registreringsfunktioner
När användare skannar en sida för "Shopping cart" -knappen eller "Registrera nu" -länken är den första platsen de ser högst upp till höger på sidan. Om du inte har en tvingande anledning att göra det, behåll denna funktionalitet på sitt bekanta plats, annars riskerar du att sakta ner och störa användarupplevelsen.
Alternativ och funktioner som skulle omfattas av denna kategori inkluderar "Visa kundvagn", "Kolla in", "Logga in", "Logga ut", "Registrera", "Skicka länk", "Glömt lösenord?" Och till och med "Kontakta oss. "Det här föregående objektet brukar vara det sista i en horisontell navigeringsfält.
TasteBook innehåller fyra sådana länkar i det övre högra hörnet av dess layout:
Maui Dykare Smycken är ett annat bra exempel och innehåller också en shoppingväska grafisk:
5. Förfallodatumsformat på kreditkortformulär
När en blankett frågar efter ditt kreditkorts utgångsdatum är formatet alltid detsamma: månaden representerad av två siffror, följt av året, representerad av två eller fyra siffror (t ex 03/11 eller 03/2011). Det fyrsiffriga formatet är hur expirationsdatumet visas på kreditkortset själv.
Det bästa sättet att samla in denna information och stärka användarupplevelsen är att använda två separata väljarkasser, en för månaden och den andra för året. Gör inte användaren in i utgångsdatumet i en enda textruta, även om du ger instruktioner.
Här är ett bra exempel från betalningssida av Maui Dykare Smycken:
Och här är ett exempel på ett dåligt utformat förfallodatumfält:
Dessutom bör månadsväljaren inte visa namnen på månaderna, utan istället bör du lista numren 01 till 12. Det finns ingen anledning att sakta ner användarna genom att få dem att räkna ut att "08" betyder "augusti".
6. Lätt identifierbara länkar
Det här borde aldrig vara ett problem, men tyvärr skiljer sig inte några webbplatser tydligt mellan länkar och vanlig text i huvuddelen.
I de flesta fall är det bästa sättet att indikera denna skillnad genom att koppla en annan färg och understryka dem. I vissa fall är en stark kontrasterande färg ensam nog; men bara underlining eller justering av färgen något är sällan nog och kommer ofta att försämra tillgängligheten.
Cameron.io gör denna skillnad bra:
Dessa länkar skulle inte vara lika synliga om de bara var understrukna men inte ändrade i färg. Du skulle inte utforma en knapp som inte såg ut som en knapp, varför låter textlänkar smälta in i huvudkroppen? Eftersom de flesta användare skannar text på nätet, bör designers se till att alla länkar identifieras länge innan en mus rullas över dem.
Vidare läsning:
Slutsats
Alla användargränssnitt och funktioner som diskuteras i den här artikeln är avgörande för användbarheten på webbplatsen och spelar viktiga roller i användarens uppfattning om ditt varumärke.
Många små förbättringar kan göra stor skillnad i uppfattad hastighet och kan hålla användare frustrerad eller obekväm.
Gör dina användargränssnitt enkelt och strömlinjeformat och följ konventioner där det är möjligt. Du kommer att se reducerade avvisningsfrekvenser, bättre omvandlingar och ett stabilt flöde av returtrafik.
Skriven uteslutande för WDD av Louis Lazaris, frilansskribent och webbutvecklare. Louis körs Imponerande Webs , där han postar artiklar och handledning om webbdesign.
Hur skulle några av dessa eller andra användargränssnitt kunna förbättras? Vänligen dela dina tankar i kommentarerna nedan.