Vad är det?

Responsive Disclosure handlar om att man börjar med ett väldigt minimalt användargränssnitt (UI) där användaren i takt med stegen den fullbordar får se mer av gränssnittet. Det här betyder att den minimala informationen som behövs för det aktuella steget som tas visas, det sker progressivt. Man använder sig av det här mönstret för att inte överväldiga användaren med alternativ. Hade alla alternativ visats samtidigt från början kan det leda till att användaren tappar uppmärksamheten och blir förvirrad. Med hjälp av Responsive Disclosure minskar man även den kognitiva arbetsbelastningen som också hjälper användaren med att bibehålla sitt fokus. 

Responsive Enabling är en metod inom UI-design där man låter ett gränssnitt till stor del vara inaktiverat i början av användarens flöde genom produkten. När användaren interagerar med gränssnittet så aktiveras successivt mer delar och öppnar upp för mer interaktion. Till skillnad från responsive disclosure så kan användaren se kommande steg och därför få en överblick i sin process. Gränssnittet är alltså helt synligt men inte helt aktiverat.

I MacOS när man lägger in en bild i Word så gör en responsive enabling-design det bara möjligt för användaren att välja bildfiler. På det här sättet undviker man att ladda in fel fil. Men, trots det så är det möjligt att låta systemet visa även andra filtyper. Detta antagligen för att försäkra användaren att inga filer mystiskt har försvunnit. 

När används det?

Responsive Disclosure bör användas när användaren gör en komplex uppgift där den kan behöva vägledas steg för steg genom uppgiften. En sådan komplex uppgift kan vara en sorts uppgift som användaren sällan utför, t ex en Wizard, eller om det är något utanför användarens kunskapsområde. Man vill inte tvinga användaren att gå till en ny sida för varje steg utan istället vill man behålla hela gränssnittet på en och samma sida. 

Då Responsive Enabling är mycket likt så har det nästan samma användningsområde. Båda metoderna har samma syfte men enabling används när man fortfarande vill visa kommande steg för användaren. En användare kan ha hjälp av att kunna se var musen ska flyttas härnäst vilket leder till snabbare utförande, särskilt i uppgifter som gjorts flera gånger innan. Det används som en kompromiss mellan för många utspridda val och för många val på samma gång. När man visar de låsta elementen effektiviserar man uppgifter eftersom att man kombinerar få val med mer tydlighet.

Hur används det?

Responsive Disclosure används genom att först enbart visa text och kontrollerna för det första steget. När användaren klarar det steget visas kontrollerna för nästa steg och så vidare. Låt de tidigare stegens kontroller vara synliga så användaren kan gå tillbaka vid behov. Håll allting inom samma sida eller dialogruta så att användaren inte kastas in i en ny separat ”UI space”. I många sådana steg för steg designer är det vanligt att valen som användaren gör i ett steg påverkar resten av uppgiften, det vill säga att uppgiften är grenad, inte linjär. Till exempel kan vid online köp frågas om ens fakturaadress är samma som fraktadressen, svarar man då ja på den kommer gränssnittet inte bry sig om att visa inmatningsrutan för den. Hade man dock klickat nej istället, hade man fått ett till steg i utcheckningsprocessen. 

När Responsive Enabling används startar användaren som “utlåst” från de flesta funktionerna. Hon tvingas att först göra de relevanta uppgifterna för att kunna låsa upp eller aktivera kommande uppgifter. Det är därför viktigt att placera de avaktiverade elementen nära vad det nu är som ska aktivera dem. Är det inte tydligt hur man låser upp nya uppgifter kan metoden motverka sig själv och skapa en extremt frustrerande upplevelse. Det är även viktigt att noga gå över vad det är som ska inaktiveras och vad som bör behållas aktiverat. Bakom allt som inaktiveras ska det finnas en god anledning som i sin tur gör gränssnittet mer användarvänligt eller användbart. 

I inställningarna i Windows 10 kan man hitta flertalet ställen där responsiv enabling används. Här ser vi ett klassiskt sätt att låsa textfältet och knappen för att visa att de inte kan eller bör användas utan att ovanstående växelknapp är satt till ‘on’. Eftersom att sidan innehåller andra inställningar blir det lättare för användare att sålla och hitta de inställningarna de letar efter.

Ovan visas en något mer avancerad responsive enabling där vi även har låsta objekt i flera lager.

Bra exempel

När man checkar ut från Inet.se får man en guide genom utcheckningsprocessen. Först ska man fylla i sina uppgifter i textfälten för att sedan komma till val av fraktsätt. Det här hjälper och underlättar uppgiften för användaren och det sker alltihop på en och samma sida. Om man sedan också fyller i att man är företagskund poppar det upp nya textfält som man ska fylla i. Går man sedan vidare så kommer man till nästa steg som är betalsätt och därefter kan man slutföra sitt köp. Under hela processen kan man också gå tillbaka till tidigare steg om man råkat göra något fel eller liknande.

När man landar på Sixt.com erbjuder de en bokningsfunktion som delvis är inaktiverad och kräver en input i textfältet ‘FIND A LOCATION’ för att låsas upp. De tar alltså hjälp här av responsive enabling för att guida besökaren till att först skriva in vart de vill hämta och lämna sin hyrbil. När användaren tvingas att först hitta rätt plats för upphämtning blir flödet i bokningen tydligare och risken för misstag minskar. Sixt.com erbjuder ett förhållandevis enkelt, men effektivt sätt att leda användaren genom en stegvis process för att hitta en hyrbil som passar deras behov. Det är lätt att överblicka vad som kommer härnäst samt i vilken ordning stegen kan utföras vilket leder till att uppgiften blir mer effektiv.

Dåliga exempel

När man kommer in på Enterprise för att hyra en bil, kommer man till sidan där man ska starta sin bokning. Här verkar det som man vill använda sig av responsive disclosure eftersom man först endast ser första textfältet för utlämningsplats. Problemet här är dock att nästa steg visas oavsett om man skriver in en plats, en felstavad plats eller bara klickar på textfältet. Man låter alltså inte användaren klara av första steget innan man visar det nästa steget. Istället skulle man ha gjort det så att nästa steg visas efter första steget har klarats. Tanken med designen är rätt men timingen är fel.

Ett sämre exempel på responsive enabling är hur Windows 10 har utformat inställningar om datum och tid. De två övre växelknapparna är de som styr ifall kommande inställningar är aktiverade eller inte. So far so good. Men, problemet ligger i att det som ska aktiveras inte ligger nära knappen som aktiverar resterande funktionalitet. Knappen för att styra tid automatiskt (första från toppen) låser upp funktionalitet nedanför sig, men inte direkt nedanför sig, utan ett litet hopp nedanför sig. Med knappen för att sätta tidszon automatiskt (andra från toppen) blir problematiken ännu värre. Användaren måste här scanna hela gränssnittet för att hitta vilken förändring som skett och det blir svårare att förstå om det hänt något över huvud taget. Sitter inte knapparna som aktiverar nära det som ska låsas upp så är risken mycket större för förvirring. Responsive enabling ska underlätta stegen i en uppgift och förebygga onödig fundering. Här riskerar vi motsatsen.

Grupp 3

Bra exempel – Responsive Disclosure

SAS

SAS webbsida är ett bra exempel på hur Responsive Disclosure kan användas för att underlätta för användaren. När man fyllt i avreseort och destination kan man på en gång se vilka priser det är som gäller på olika avresedatum. Att som användare ha möjligheten att se både priser och vilka av resorna som är direktflyg så här tidigt i processen gör det enkelt att välja avresedatum utifrån pris och bekvämlighet. På andra flygbolags sidor måste man ofta klicka sig vidare flera steg innan man får se priser och resedetaljer, vilket man alltså slipper här.

www.sas.se 

Dåligt exempel – Responsive Enabling

Fort digital – https://www.fortdigital.com.sg/web/

Fort Digital är en IT tjänst som kan användas av företag för att underlätta olika delar av sitt arbete, t.ex. email data mining. Bilden ovan visar deras email mining system, vilket använder sig av en del responsive enabling. Dock är stegen för hur man går vidare och aktiverar de inaktiverade delarna väldigt otydliga. Det följer inte ett flöde som känns naturligt för en användare som aldrig sett systemet tidigare. Förutom det så visas väldigt mycket information på en liten yta, vilket lätt känns överväldigande.

Grupp 4 – Distans

Responsive Disclosure

På denna sida sökmotor har huvud fokus som ger flera olika sökalternativ för användaren på första sida utan att behöva öppna en ny sida, genom att gömma den andra information när man byter flik och visar den nya utan att byta sida.

Responsive Enabling

Bra exempel:

Denna bild är från en fönster från windows microsoft “Datum och tid” där När man klickar på checkboxen blir fälten “Server” aktiv där man kan göra ändringar och även knappen “uppdatera nu” fungerar. En informationstext där användaren blir informerad att dator är inställt automatiskt för att synkronisera.

När man klickar bort checkboxen blir oaktiverad fältet “server” så att användaren kan bara trycka på “ok” alternativ.

GRUPP 5 – Distans

Responsive Disclosure/Responsive Enabling: 

Bra exempel:

Responsive Disclosure samt Responsive Enabling kan hittas med gott exempel på tjänsten “MyDhl” där det är möjligt att skicka post för företagskunder . Ju fler kontaktuppgifter som fylls i ju fler fält dyker det upp beroende på användarens val. Det “riktar” användaren att fylla i alla nödvändiga uppgifter och ser till så att ingen viktig information glöms av då det i det här fallet handlar om post och fel uppgifter kan innebära stora konsekvenser. Genom att behöva fylla i de fält som krävs innan det är möjligt att gå vidare blir det tydligare för användaren hur systemet ska användas samt att hen får en bekräftelse på utförd uppgift och kan i lugn takt följa alla nödvändiga steg med hjälp av gränssnittets design som guide för att nå uppsatt mål. Användaren kan även ta sig igenom dokumentet utan att Se nedan två steg i de två figurerna vid i fyllning av “land”:

Fig. 1. Responsive disclosure/Responsive Enabling

Fig. 2. Responsive disclosure/Responsive Enabling

Best practice 

Vi valde att skapa ett exempel på en vinsida, The Winery, där man ska checka ut sitt köp. Man går igenom olika steg där både responsive enabling och responsive disclosure används. Till exempel är det första man gör, när man kommer in på sidan, är responsive disclosure. Man måste välja antingen “Hämta i butik” eller “Skicka hem till mig” för att nästa steg ska visas. Därefter, i nästa steg, måste man ännu en gång först göra ett val i sitt aktuella steg för att nästa steg ska visas och man ska kunna fortsätta. Det här är responsive disclosure. Exempel för responsive enabling är att i slutet måste man godkänna köpvillkoren för att slutför-knappen ska bli fullt synlig. Genom detta är processen för utcheckning på sidan simpel och användaren sätts ut för minimal arbetsbelastning i de olika stegen. Utöver responsive enabling och responsive disclosure har vi även lagt in andra saker som kan finnas i ett gränssnitt, som breadcrumbs och global navigation. 

Länk till vårt exempel https://ltynws.axshare.com/

Fler exempel

För fler bra och dåliga exempel följ länken.

Källor och länktips

Tidwell, J. (2010). Designing Interfaces. O’Reilly Media.

How to Use Responsive Enabling to Simplify Tasks – Interaction Design Foundation