Hur man utformar en bra användargränssnitt
Vid utformning av en webapp placeras funktionalitet över allt annat. För det mesta är det här en bra sak.
Människor (mestadels) använder appar eftersom de är användbara, inte för att de ser bra ut. Men det betyder inte att du kan ignorera bra UI-design, eller bara släppa ihop ett generiskt användargränssnitt. Bra UI-design lägger till den övergripande användarnöjdheten för alla webbapps.
Bra UI-design är på många sätt liknande bra webbdesign. Principer för färgteori, negativt utrymme och layout gäller fortfarande. Men UI-design kräver lite mer tanke i många fall på grund av den interaktivitet som krävs.
Besökare kommer inte bara att titta på din webbplats; de kommer att interagera med det, ibland på sätt som du inte förväntade dig. Det är viktigt att du tar dig tid att verkligen utforska användargränssnittet innan du börjar med en webbappdesign.
Nedan följer ett antal principer och idéer för att utforma ett bra användargränssnitt.
Konsistens är Vital
I användargränssnittet är överensstämmelse mellan sidor, funktioner och alternativ viktigt. Användare kommer att förvänta sig vissa saker som de använder ditt program, och om dessa saker ändras från en sida till nästa, är det både förvirrande och frustrerande.
Om till exempel på hemsidan för dina applikationsanvändare navigera mellan sidor med en översta navigeringsfältet, se till att samma översta navigeringsfältet visas på efterföljande sidor, och att sidorna som är länkade från den visas i samma ordning.
Andra saker som måste hållas konsekvent inkluderar ditt färgschema och allmänna layout samt länkar till viktiga sidor som kanske inte direkt används inom programmet (till exempel en kontosida eller ett vanligt frågor).
Dina användare kommer att göra misstag
Oavsett hur noggrant du utformar ditt användargränssnitt och hur intuitivt det är kommer dina användare att göra misstag ibland. Ibland är det bara för att de oavsiktligt klickade när de inte menade att. Andra gånger beror det på att de inte riktigt uppmärksammade vad de gjorde eller läste inte sidans innehåll.
I båda fallen är det viktigt att användarna enkelt kan ångra de misstag de gör.
Du märker på ett antal webbappar, inklusive Google Dokument, att nästan varje gång du gör något visas en länk för att ångra den senaste åtgärden. På andra appar kan du behöva använda en meny för att ångra en åtgärd, men de bästa webbapparna gör det fortfarande lätt och tillgängligt för att gå tillbaka ett steg eller två när som helst.
Markera ändringar
När ändringar görs under användningen av en webbapp, är det användbart för dina användare om du markerar dessa ändringar. Om din app exempelvis innehåller ett flöde av information från olika källor eller användare, markerar det nya innehållet som det visas en användbar funktion.
Det finns flera sätt att markera innehållet. En av de mest populära är att lägga en skuggig bakgrund bakom nytt innehåll.
Andra appar använder ikoner för att indikera nytt innehåll. Oavsett vad du väljer att göra, se till att indikatorerna för ny innehåll inte stämmer överens med innehållets läsbarhet. Det är också viktigt att göra dessa meddelanden ointressanta så att de inte distraherar användare som inte för närvarande är inblandade i att ändra innehåll.
TitanPad använder färgkodning för att indikera förändringar som gjorts av varje användare.
Aktivera kortkommandon
Inte alla användare där ute kommer att använda kortkommandon, även om du gör dem tillgängliga. Men för andelen användare som används för tangentbordsgenvägar, kan inte de inkludera dem ha en katastrofal effekt på användarnas tillfredsställelse.
Tänk på de vanligaste åtgärderna som användarna ska utföra på din webbplats och se till att snabbtangenter är tillgängliga för dem.
Se till att alla tangentbordsgenvägar du använder är logiska. Vissa genvägar används redan för vissa funktioner (som Ctrl + Z för att ångra eller Ctrl + V klistra in), så se till att de fortsätter att fungera som de gör i andra program.
Välj de nycklar som används i dina genvägar logiskt, så att de är lätta att komma ihåg för dina användare. Se till att du även tar med dem i alla rullgardinsmenyer bredvid deras respektive handlingar.
Använd kända standarder och konventioner
Allmänt använda applikationer har fastställt vissa standarder för hur saker förväntas fungera i en applikation. Till exempel är folk vana att se en mappikon för "Öppna" eller ett urklipp för "Klistra in".
De är också vana vid att ha vissa alternativ och åtgärder visas under specifika applikationsmenyer (skapa ett nytt dokument eller en fil ligger nästan alltid under "File" menyn, och kopiera och klistra finns nästan alltid under menyn "Redigera" menyn) .
Tänk på etablerade appar som gör liknande saker som vad din app ska göra och titta på hur de organiserar åtgärder och vilka ikoner de använder.
Om du ser konsekvenser mellan olika appar, bör du överväga att använda samma eller liknande ikoner för din egen app. Det gör det mer intuitivt för användare som byter från en annan app till din och kommer att förbättra sin upplevelse.
Erbjud personaliseringsalternativ
Många webbapps låter användare göra anpassningar till sitt konto. På vissa webbplatser kan du justera färgschemat eller ladda upp anpassad grafik. Andra låter dig omorganisera layouten eller vad som visas när du loggar in. Ändå kan du skapa anpassade sidor eller liknande innehåll som visar informationen du är intresserad av.
Tänk på eventuella anpassningar som skulle förbättra både dina funktionalitets funktionalitet och användarupplevelse.
Vissa appar kan inte dra nytta av anpassningar, medan andra är fyllda med möjligheter. Även enkla saker som att tillåta användare att ladda upp sin egen logotyp eller ändra färgschema eller typsnitt som passar deras personliga preferenser kan dra dramatisk in på användarupplevelse och tillfredsställelse.
Highrise låter användarna anpassa färgschemat i deras instrumentpanel. Små anpassningsalternativ som detta kan väsentligt öka användarnas tillfredsställelse.
Använd verktygstips och integrerade hjälpmeddelanden
Många apputvecklare innehåller omfattande dokumentation för att använda sina appar, vilket är oerhört användbart för nya användare. Men i många fall hålls denna dokumentation i sin egen, separata sektion på webbplatsen. För att få tillgång till det måste användarna lämna programmet effektivt.
Medan omfattande dokumentation fortfarande är en bra idé för komplicerade appar, ökar användbarheten för majoriteten av användarna med hjälp av verktygstips och integrerade hjälpmeddelanden i modala fönster eller i sidofältet på sidan.
Det är ett smidigt sätt att erbjuda hjälp medan någon faktiskt använder din ansökan, vilket sparar tid och gör hela upplevelsen roligare.
Använd Tabbed Navigation och Knappar för åtgärder
Tabbed navigation har ett antal fördelar jämfört med knappar eller textlänkar. Den viktigaste är dock den subtila psykologiska effekten den har.
Flikar uppmanar med en anteckningsbok eller bindemedel. Varje flik betecknar en ny sektion eller ett ämne. Samma sak gäller online. Flikar gör att människor omedvetet tänker på att fysiskt flytta till en ny del av en webbplats eller app.
Knappar å andra sidan framkalla en åtgärd. Att använda knappar för saker som att skicka in ett formulär är meningsfullt psykiskt, som människor associerar med att trycka på en knapp med att göra något. Så för optimal användarupplevelse, kom ihåg flikar = navigering, knappar = åtgärd.
Skugga allt bakom ett modalt fönster
Detta är en av de riktigt grundläggande saker som ibland blir förbisedda. När du öppnar ett modalfönster, se till att du skuggar ut allt i bakgrunden bakom fönstret. Detta gör att fönstret sticker ut mer och eliminerar störningar.
Ett bra exempel på ett modalfönster med en skuggad bakgrund.
Använd relevanta ikoner och etiketter
Många utvecklare väljer att använda ikoner i sina appar utan att märka dessa ikoner. Annat än de absolut vanligaste ikonerna är det ofta ett misstag och förvirrar endast användaren.
Lägga till i alt-taggar som visas när ikoner svängs över är inte en bra lösning för att undvika förvirring, eftersom det fortfarande kräver alltför stor ansträngning från användarens sida.
Om du placerar etiketter bredvid dina ikoner betyder det att de genast kan identifieras. När användarna blir bekanta med meningen med varje ikon, kan de snabbare hitta vad de letar efter, och tills dess kan de enkelt se exakt vad varje ikon står för.
Ett annat alternativ är att göra det möjligt för dina användare att gömma etiketterna, men se till att standardalternativet är att de ska visas.
Håll saker enkelt
De bästa gränssnitten är lika enkla som de effektivt kan vara. Lägg inte till klockor och visselpipor för att lägga till klockor och visselpipor. Om en funktion har ett tydligt syfte, lägg till det. Om det inte gör det, gör det inte.
Detsamma gäller designelement. Om det finns ett syfte med ett element, är det okej att lägga till det. Men undvik att lägga till saker som bara ser bra ut. De lägger bara till visuell röran och förvirrar dina användare. Välj den enklaste lösningen som gör jobbet gjort.
Det betyder inte nödvändigtvis att din app måste vara minimalistisk. Men kom ihåg att de flesta använder appar för deras funktionalitet, inte för deras design. Så länge som designen inte störa deras förmåga att effektivt använda din app, är det osannolikt att de inte ens lägger stor vikt vid de visuella elementen i appen.
Effektivt arbetsflöde
När du utformar ett användargränssnitt måste du överväga användarnas arbetsflöde. Människor har förutbestämda sätt att de använder särskilda typer av programvara och speciella appar, och du måste designa ditt gränssnitt för att överensstämma med dessa mönster.
Om till exempel om vissa åtgärder i allmänhet tas i samverkan med varandra, gruppera dem tillsammans i samma område i appen.
Undersök arbetsflödet för ett antal användare för att se vad som verkar vara i vägen för deras effektiva genomförande av uppgifter och ta reda på hur man kan förbättra användargränssnittet för att tillgodose deras behov. I vissa fall kan användargränssnittet inte ens lösa dessa problem, men ibland kan det.
15 Exempel på stora användargränssnitt
Det finns hundratals eller till och med tusentals webbapps där ute med fantastiska användargränssnitt. Här är mer än ett dussin för att ge dig några idéer.
Shoply
Shoply gör det ganska enkelt för användare att radera, redigera eller visa produkter som de redan har laddat upp, samt att lägga till nya produkter.
Invoicera
Invoicera använder fliknavigering och knappar för att utföra åtgärder. Det håller också en relativt enkel och rakt framsida och färgschema.
Pandora
Det är uppenbart att designerna bakom Pandora tog hänsyn till gränssnitten som finns på MP3-spelare och andra medieenheter vid utformningen av deras användargränssnitt. Det är en intuitiv och lättanvänd design med praktiskt taget ingen inlärningskurva.
Wufoo
Wufoo s form design interface är ungefär lika intuitivt som en app kan få. Hjälpmeddelanden visas när du börjar utforma en ny blankett för att förklara exakt vad du ska göra utan att behöva lämna sidan.
Grooveshark
Grooveshark använder ikoner för att hjälpa till med navigering och funktionalitet. Vanligt erkända ikoner som "play" och "skip" -knapparna är inte märkta, men andra, liksom ikonerna Hem och Favoriter, är.
Wridea
Wridea använder ett intuitivt gränssnitt som låter dig redigera allt bara genom att klicka på det. De använder också menyer som bara expanderar när du svävar över en idé, vilket minskar visuell röran och de låter användarna välja mellan två färgscheman.
Ryggsäck
Ryggsäck använder knappar för åtgärder och flikar för navigering, vilket gör det mer intuitivt att använda.
Kom ihåg mjölken
Kom ihåg mjölken använder fliknavigering och knappar för åtgärder. De innehåller också användbara noteringar som för det mesta negerar behovet av separat dokumentation.
Ta-da List
Ta-da Lists håller gränssnittet så enkelt som möjligt. Det finns ingen extra information, bara uppgiften till hands. Det är otroligt intuitivt och ger en utmärkt användarupplevelse.
Relenta
Relenta använder flikarnavigering och märkta ikoner. De håller också sig till standardkonventioner för e-postprogram, så det finns praktiskt taget ingen inlärningskurva för sina användare.
Viviti
Viviti använder ett intuitivt användargränssnitt som tar hänsyn till behoven hos sina icke-designer användare. Tips ges när du loggar in och dokumentationen är lättillgänglig och användarvänlig, så att du kan välja vilken typ av hjälp du vill ha innan du lämnar den sida du jobbar på.
Studsa
Bounce s gränssnittet är väldigt rakt fram och enkelt. De tillgängliga verktygen är intuitiva (dra bara över ett område för att göra en anteckning, skriva feedback och dela sedan).
Meetifyr
Meetifyr använder ett sådant intuitivt gränssnitt som praktiskt taget ingen dokumentation behövs. Om du tittar över appen tar det bara några sekunder att genast känna igen hur man använder den och vad de olika ikonerna och färgkoderna betyder.
DoingText
DoingText förenklar användningen genom att inte kräva någon typ av registreringsprocess. Dokument är helt enkelt webbadressbaserade och samarbetare behöver bara webbadressen. Det gör samarbetet en nästan omedelbar process.
Writeboard
Writeboard innehåller användbar stylinghjälp i sidofältet bredvid huvudinnehållsområdet.
Skriven uteslutande för WDD av Cameron Chapman .
Vad är din favorit UI-design? Har du några andra tips för att designa utestående användargränssnitt? Vänligen dela dem i kommentarerna!