7 Gränssnittsdesigntekniker för att förenkla och avbryta dina gränssnitt

Vad är enkelhet? Enkelhet är kvaliteten på att vara naturlig, vanlig och lätt att förstå. Det är inte förvånande då trivs ofta enkelheten i användargränssnittet. De flesta människor tycker naturligtvis inte om komplexitet i enheter och programvara. Ja, vissa människor tycker om glädje för att ta reda på hur något fungerar, men för de flesta av oss är det inte en bra sak att kunna använda en enhet som leder till bortkastad tid och frustration.

Om du kan ta en komplex enhet eller ett program och på något sätt omorganisera, omorganisera och omforma gränssnittet för att göra det enkelt att använda och förstå, så är du väl på väg att leverera en bättre användarupplevelse .

I den här artikeln ska jag prata om 7 praktiska tekniker som du kan använda i webbdesign för att göra dina webbplatser eller webbapplikationer enklare och mindre rotiga.

1. Modala fönster.

Jag är säker på att du kan komma ihåg de dagar innan popup-blockerare introducerades i webbläsare när du var tvungen att slåss mot ett svärm av lilla fönster som alltför ofta bestämde sig för att dyka upp över toppen av ditt webbläsarfönster, syfte att irritera dig. Ingen tyckte om dessa popup-fönster, och blockeringsteknologi infördes för att stoppa dem. Men idag ser vi en ny serie popup-fönster på webben som är mycket renare och fungerar mycket bättre i sitt avsedda syfte. Dessa är modala fönster.

Modala fönster är som popup-fönster, men istället för att visas i ett separat webbläsarfönster visas de direkt inuti den nuvarande, överst i innehållet. Modala fönster kräver interaktion för att fortsätta, så innehållet nedan är vanligtvis mörkat för att indikera detta, samt att blockera innehållets distraherande ljud och flytta visuellt fokus på fönstret ovan .

Så varför skulle du använda modala fönster och hur förenklar de ditt gränssnitt? Tja, om du tittar på alternativet blir deras syfte mycket tydligare. Alternativet till att använda något som ett modalfönster är vanligtvis att ladda en ny sida. Till exempel har vissa webbplatser en inställningssida för ditt konto. När du klickar på länken för inställningar, tas du till en ny sida. Men om det bara fanns några inställningsalternativ - är det verkligen värt att omdirigera användaren till en ny sida?

I många fall kan saker som inställningar, redigeringsrutor och inloggningsformulär visas i ett modalfönster över innehållet. Detta sparar användaren en returresa till en annan sida . Det lindrar också belastningen på webbservern eftersom den har att hantera färre förfrågningar.

ActionMethod , en projekthanteringsapp, visar modala fönster i hela applikationen. Här är värderingsformuläret.

2. Höger kontroller.

Att lägga färre saker på plattan skulle också göra disken lättare att svälja. Om din ansökan har många kontroller måste dina användare skanna igenom de flesta av dem för att hitta vad de letar efter. Chansen är att några av kontrollerna är mindre viktiga än andra, och några av kontrollerna används mycket mindre än andra . Det enklaste du kan göra är att ta bort och gömma dessa kontroller från standardvyn.

Ett smart sätt att göra detta är att dölja kontrollerna, men visa dem när användaren svävar över vissa områden. Dessa är svängreglage. Till exempel visar Twitter, en populär mikrobloggtjänst, ett flöde av vad alla på din följarlista nyligen har sagt. Varje meddelande är inkapslat i sin egen lilla låda. Det finns två åtgärder du kan utföra på varje meddelande: lägg till det i dina favoriter eller svara på det.

Att visa favorit- och svarknapparna på alla meddelanden skulle leda till rodnad. Det är inte troligt att du vill svara på alla meddelanden i flödet, och ännu mindre sannolikt att du vill lägga till dem alla i dina favoriter. Så Twitter visar bara kontrollerna i rätt sammanhang - när du sveper över meddelandet. Detta leder till ett enklare gränssnitt och ingen förlust i funktionalitet . Det finns risk för att nya användare inte märker dessa kontroller när de är gömda. Men många människor tenderar att musen över saker de tittar på, så med tanke på svängytorna är stora nog, kommer dessa kontroller sannolikt att upptäckas snabbt.

Twitter visar tillägget till favoriter och svarknappar för varje meddelande när du sveper över det.

3. Kontroller på begäran.

Ett annat sätt att dölja saker är att använda Javascript och visa en uppsättning kontroller när användaren klickar någonstans. Du kan till exempel ha en sökruta på din webbplats som tillåter vissa anpassade filter eller avancerade sökningar. I stället för att visa dessa alternativ som standard kan du gömma bort dem och göra dem tillgängliga via en knapp i slutet av sökfältet. Om du klickar på den här knappen kan du visa uppsättningen alternativ eller filter. Det innebär att du behåller den avancerade funktionaliteten för de användare som behöver den, och samtidigt förenklar gränssnittet för personer som bara behöver använda den enkla sökningen.

Inte alla använder några av de mer avancerade eller specialiserade kontrollerna på din webbplats. Om du döljer dem gör du gränssnittet renare och lättare att förstå eftersom nya användare har färre element att bearbeta och räkna ut. Att välja vad du ska gömma och vad du ska behålla är inte en lätt uppgift, men det är ditt jobb som designer att hitta en lämplig balans.

Kontain , en bloggarapp, ger avancerade sökfilter för deras sökning, dolda i en rullgardinsmeny i slutet av sökfältet.

4. Expandande formulär.

Jag är säker på att du känner till filöverföringsfältet som vi ofta ser i webbformulär. Det är vanligtvis en liten stapel med en fil bläddringsknapp vid sidan. Föreställ dig en situation där användaren sannolikt kan ladda upp flera filer samtidigt. Du kan visa flera filöverföringsfält, men det är inte idealiskt eftersom det kommer att störa gränssnittet och det finns inget sätt att berätta hur många fält användaren behöver. En bra lösning i detta fall skulle vara att använda en expanderande blankett .

När användaren laddar upp en fil visas ett annat filuppladdningsfält nedan, redo att acceptera mer. Du kan implementera samma teknik för något annat inmatningsfält. Till exempel kanske det här formuläret behöver ett gäng e-postadresser för personer som du vill bjuda in till ett lag eller något annat syfte. I stället för att ha många textfält kan du bara ha ett eller ett par, och sedan användaren fyller i dem skapas nya under . Att expandera formuläret på detta sätt är ett utmärkt sätt att spara utrymme och förenkla ditt gränssnitt .

Gmail Visar endast ett bifogsfält när du skriver ett nytt meddelande. Du kan klicka på länken "Bifoga en annan fil" för att öppna mer när du behöver dem.

5. Etiketter i inmatningsformulär.

Former kan bli komplexa snabbt. Du har textfält, etiketter, textområden, drop downs, kryssrutor och så vidare och så vidare. Dessutom är det inte alltid mycket roligt att fylla i formulär, så att fördjupa processen och göra formulär enklare gör dem mindre skrämmande och enklare att använda. En teknik som du kan använda för att få formulären att bli enklare är att flytta etiketterna utanför inmatningsområdena inåt. Så, istället för att visa en etikett bredvid det här textfältet, visa det som ett förfyllt värde inuti textfältet .

Detta skär ner på rymden avsevärt och krymper den totala storleken på formen. Mindre saker verkar enklare , så formuläret borde vara lättare att fylla i. Det kan inte vara möjligt att göra det för mer komplicerade former där du har olika typer av inmatning (kryssrutor, radioknappar, neddragningar), men om du har några textfält är det väl värt att överväga, till exempel ett inloggningsformulär.

Nu finns det en nackdel med denna metod, som lyckligtvis kan lösas med en mer noggrann implementering. När användaren först laddar sidan, ser de fälten och kommer att kunna läsa etiketterna. När de väl klickar på ett fält kommer de flesta formerna att dölja etiketten helt, så att användaren kan skriva in deras inmatning. Men vad händer om användaren för tidigt klickar på ett fält och sedan glömmer vad det är, var det meningen att de skulle skriva? De kan behöva klicka bort från formuläret för att få etiketten att visas igen (förhoppningsvis).

För att ta itu med det här kan du, i stället för att helt gömma etiketten, dämpa den när användaren klickar på den och sedan gömma den helt när användaren börjar skriva.

MobileMe visar etiketter i inmatningsfälten på deras inloggningsskärm och dämpar dem sedan när du väljer ett fält.

6. Ikoner istället för text.

För att uppnå enkelhet i gränssnittsdesign måste du minska och ta bort alla onödiga eller sällan använda delar . Dessa omfattar inte bara kontroller, men kan också vara saker som textetiketter. Om ditt gränssnitt har många etiketter, titta på det och fråga dig själv - är alla dessa etiketter nödvändiga? Är de flesta av dem helt enkelt uppenbara? Om en etikett pekar på något som är uppenbart med tanke på det här objektets sammanhang, behöver du inte den etiketten - den är föråldrad.

För att ge dig ett exempel på detta, tänk på inlägg i en blogg. Under varje inläggs rubrik kan du ha saker som datum och författare. Bifoga etiketter före var och en som "Författare:" och "Datum:" behövs inte. När någon ser ett namn och ett datum under en artikelns rubrik, är det mycket troligt att de kommer fram till att detta är författaren och det är datumet. Kontexten, liksom det format som de brukar läsa av andra bloggar, ger användarna alla ledtrådar som de behöver för att direkt förstå betydelsen bakom data. Att ta bort dessa etiketter ger dig ett renare gränssnitt .

I vissa fall kan du inte byta ut etiketten med en ikon när du lämnar ut en etikett. En ikon har några fördelar jämfört med en textetikett. Det tar mindre plats. Det är lättare att fokusera på eftersom dess färg och särskiljande form lockar ögat lättare än text. I vissa fall kan betydelsen förmedlas lika effektivt som text. Om du till exempel har en etikett som heter "Taggar:" följt av en lista med taggar, kan du ersätta etiketten med en liten bild av en tagg. Förutsatt att du har en tekniskt kunnig publik, bör betydelsen i det här fallet förbli lika tydlig.

Naturligtvis fungerar det inte för alla fall, och om det finns risk för tvetydighet, bör du spela det säkert och använda en textetikett. Med detta sagt finns det ingen anledning att bara välja den ena eller den andra - du kan dra nytta av ikonernas attraktiva iögonfallande egenskaper tillsammans med tydligheten i texten genom att använda dem tillsammans. även om du i så fall ska handla utanför rymden.

Höghus , en CRM-app, använder en tagikikon istället för en textetikett före en lista med taggar.

7. Kontextbaserade kontroller.

Det finns ett par tillvägagångssätt som du kan använda i gränssnittsdesign som hänför sig till kontext och konsekvens. Man dikterar att du bör hålla kontrollerna konsekventa i dina applikationer eller webbplatser för att säkerställa att människor vet var allt är och inte blir förvirrad. Det andra tillvägagångssättet är att ändra kontroller eller navigering baserat på varje sida eller fönster. Kontextbaserat tillvägagångssätt är ett där du bara visar de saker som användaren behöver för att slutföra den uppgift de jobbar med i det specifika sammanhanget.

En bra illustration av de två strategierna kan ses i den senaste redesignen av Microsoft Office-gränssnittet. Office 2003, liksom dess äldre syskon, följde designprincipen för att hålla saker konsekventa. Du hade hela tiden en uppsättning verktygsfält som visas på skärmen, och de ändrades inte om du arbetade med tabeller, grafik, text eller bilder. Microsoft omdefinierade detta gränssnitt för Office 2007 med hjälp av ett kontextbaserat tillvägagångssätt. På toppen ser du nu ett band - eller en uppsättning flikar. När det väljs, visar e- fliken en uppsättning kontroller som är relevanta för en viss uppgift , vare sig det är korrekturläsning, arbetar med grafik eller helt enkelt skriva.

Det kontextbaserade tillvägagångssättet gör att du kan visa färre kontroller vid varje given tillfälle, men samtidigt, fler kontroller som är relevanta för den aktuella uppgiften . Jag skulle inte rekommendera att använda en kontext-tung strategi för allmän webbdesign eftersom för de flesta webbplatser förväntar sig människor att se konsekvent webbplatsövergripande navigering. Detta beror på att varje webbplats är annorlunda, och det skulle göra surfupplevelsen mycket svårare om alla enskilda sidor på en viss webbplats var annorlunda också.

Med detta sagt kan detta användas för webbapplikationer eftersom de inte bara är enkla webbplatser - de är programvaror som lever i molnet. Människor kommer sannolikt att spendera mycket tid på en webapp och får mer möjlighet att lära sig hur det fungerar . Komplexiteten hos vissa webbapps innebär att du verkligen behöver använda den kontextbaserade metoden, för om du inte gör det kommer det att vara för mycket på skärmen när som helst för att någon ska bearbeta. Genom att bara visa några relevanta kontroller för en given uppgift kan dina användare ta reda på vad man ska göra på mycket mindre tid.

Fräkne , en tidspårningsapp, har en omkopplare högst upp i huvudverktygsfältet. Den växlar mellan tidsinmatningskontroller och rapporteringskontroller, endast visar en uppsättning i taget. Det här är meningsfullt eftersom du antingen skriver in tid eller gör en rapport - inte två saker samtidigt.

För att avsluta ...

Göra ditt gränssnitt mindre, gömmer avancerad funktionalitet och tar upp det självklara är vägen till ett enklare gränssnitt . Längs denna väg kommer du att möta många hinder. För varje funktion du gömmer eller tar bort kommer det att finnas människor som klagar och kräver att du tar tillbaka det. Men var och en av dina användare har olika behov och använder din webbapp eller webbplats på ett annat sätt. Om du lyssnar på alla funktionsförfrågningar och behov, och går så långt som att adressera och implementera dem alla, är det osannolikt att du kommer fram till zenit för mjukvaruutveckling. Mer sannolikt kommer du att snubbla in i en djup grop där det är nästan omöjligt att klättra ut.

När du väl har lagt till en funktion är det väldigt svårt att ta bort det eftersom folk börjar använda det och vissa kommer att bero på det. På så sätt måste du se till att varje funktion och varje gränssnittselement du lägger till är vettigt och lägger till verkligt värde för din produkt . Fler funktioner betyder mer kontroller och innehåll. Fler kontroller och innehåll gör det svårare att göra gränssnittet enkelt och rörigt fritt.

Enkelhet handlar om att minska och omorganisera komplexet till små och hanterbara. Om något skulle du sikta på att ta bort, snarare än att lägga till. En produkt med färre knappar är inte nödvändigtvis mindre kraftfull - det är troligen bara bättre utformad .

Skriven uteslutande för WDD av Dmitry Fadeyev. Han driver en blogg om användbarhet som heter Användbarhet Post .

Användar du någon av dessa tekniker i dina mönster? Tror du att de hjälper användarupplevelsen? Vänligen dela dina erfarenheter med oss.

• ← Bygg bättre webbplatser genom att berätta historier
• 10 användbarhetstips för webbdesigners →