Responsive Discloure

Vad är det?

Responsive Disclosure går ut på att man hjälper användaren/besökaren att lätt se relevanta valmöjligheter. Man tar bort alla val som inte absolut måste vara med. Man börjar med en enkel fråga och efter den kommer fler frågor angående det valet. Det här innebär att man har sållat bort många irrelevanta alternativ redan i första frågan. Om alla alternativ hade visats i samma formulär hade det varit överväldigande att fylla i.

Responsive Enabling innebär att man ger användaren/besökaren valet att påverka mer om innehåll och funktioner om de vill. Ju mer en person kan om något desto större blir behovet och viljan att göra det personlig anpassat.

När används det?

Responsive Disclosure Det passar bra när användaren ska hjälpas att utföra en komplex uppgift som denne troligen inte utför speciellt ofta. Man låter inte användaren gå igenom ett steg för steg-förfarande med nya sidor utan vill hålla sig kvar på en enda sida. De kommande stegen är dolda för användaren tills användaren har gjort sitt val.

Responsive Enabling används till exempel för ovana användare eller när en mindre vanlig uppgift ska göras. Man vill ha all information på en sida, men också hjälpa användaren att förstå att man behöver fylla i ett annat steg innan man kommer vidare till nästa val. Till skillnad mot responsive disclosure så visas det kommande stegen men det är inte valbara/klickbara förrens användaren kommer till det aktuella steget. Sidan ska inte vara dynamisk på samma sätt som vid responsive disclosure där gränssnittet skapas efterhand.

Responsive Disclosure Man vill inte göra gränssnittet för komplext. När användaren ser gränssnittet skapas medan denne fyller i får den ett sammanhang på ett annat sätt än tex wizzards.

Man vill hålla gränssnittet rent och inte pråttra till det som det skulle kunna bli med Responsive enabling. Göra det lätt för användaren att unvika att gör fel.

Bra exempel

Dåliga exempel

Making it look good...

Tänk på att sammanhanget är viktigt för modala paneler och om det finns saker som är viktiga att de syns i den underliggande/omgivande applikationen, så kan de begränsa designmöjligheterna för den modala panelen - både vad gäller storlek och placering. Annars bör utformningen av den modala panelen utföras i samma grundstil som övriga delar av applikationen förutom - och här är en mycket viktig modifikation - att använda de signal-färger som man använder i sitt färgtema för att säkerställa att användaren både uppmärksammar innehållet i den modala panelen och förstår att det är viktigt innehåll som kräver en åtgärd. För övrigt bör man använda samma färgtema, stil och layoutkonventioner som man använder i övriga delar av applikationen.

Saker att tänka på

• Placering av fält och rubriker bör ligga på samma ställe på alla delar. Detta för att användaren förväntar sig att det ska dyka upp på samma plats.
• Viktigt att veta i vilket steg man är på så att man inte känner sig vilse. Det är också bra för att man ska veta hur mycket man har kvar att fylla i.
• Det är viktigt för att minimera risken för användaren att fylla i fel information. Om man tar det stegvis är det lättare att få överblick.
• Gå steg för steg så gränssnittet inte innehåller för mycket information eller för många val.
• Ge feedback till användaren beroende på valen som har gjorts.
• Det ska vara enkelt att gå tillbaka i stegen man har gjort tidigare,

Anpassning till olika plattformar

• Anpassa storlek på panelen efter plattform och skärmstorlek så att inga viktiga delar döljs, varesig i panelen eller i underliggande delar. Är skärmytan begränsad eller svår att förutsäga, kan det vara bra att göra panelen flyttbar och/eller skalbar.
• På små skärmar så kan det vara svårt att visa sammanhanget i och med att den modala panelen tar upp hela skärmytan. Fundera på i så fall på vilket sätt sammanhanget är viktigt och hur man kanske kan visa delar av detta på den modala panelen istället.

Källor och länktips

http://www.asos.com/

Bonus - Responsive disabling

Tänk på att sammanhanget är viktigt för modala paneler och om det finns saker som är viktiga att de syns i den underliggande/omgivande applikationen, så kan de begränsa designmöjligheterna för den modala panelen - både vad gäller storlek och placering. Annars bör utformningen av den modala panelen utföras i samma grundstil som övriga delar av applikationen förutom - och här är en mycket viktig modifikation - att använda de signal-färger som man använder i sitt färgtema för att säkerställa att användaren både uppmärksammar innehållet i den modala panelen och förstår att det är viktigt innehåll som kräver en åtgärd. För övrigt bör man använda samma färgtema, stil och layoutkonventioner som man använder i övriga delar av applikationen.