Modal Panel

Skriven av Martin Östlund november 2017

Vad är det?

En modal panel är en gränssnittskomponent som när den visas tillfälligt stänger av alla interaktionsmöjligheter med programmet förutom de som presenteras i den aktuella modala panelen. Den modala panelen kan och bör innehålla information om varför ett sådant tillstånd har inträffat och vad användaren kan göra för att öppna upp den avstängda funktionaliteten. Ibland beskrivs modala paneler på webben som vilken overlay eller popup som helst. Så är inte fallet. En modal panel är en panel som blockerar annan funktionalitet tills användaren har gjort vad som efterfrågas i den modala panelen.

När används det?

Modala används i situationer där programmet har hamnat i ett läge där den behöver någon form av input eller aktion från användaren för att komma vidare eller hantera någon form av speciell situation eller feltillstånd. Den kan också användas för att medvetet avbryta användarens kontroll av programmet, t ex för att presentera ett erbjudande, eller för att informera användaren om att någon extern händelse har inträffat - en händelse som inte initierats av användaren själv, utan något som uppstått från ett systemtillstånd, t ex slut på hårddiskutrymme, eller en handling utförd av annan part, t ex utdelandet av ett dödande slag på ens spelfigur i ett online-spel.

Modala paneler ska användas sparsamt. Ofta kan man presentera den typ av information och den typ av funktionalitet som man visar i modala paneler utan att blockera andra interaktionsmöjligheter. Här bör man eftersträva att låta användaren behålla så mycket kontroll som möjligt så att användaren därmed känner att hen har kontroll över vad som sker. Det är en viktig egenskap för varje interaktivt system. Men i sådana lägen där det inte går att fortsätta eller där det finns stora risker med att fortsätta att göra andra saker innan man har åtgärdat en något, så är den modala panelen rätt val. Det är dock inte det vanligaste användningsområdet för modala paneler, utan det är istället (tyvärr) nyhetsbrev-popup:en. Den är irriterande i nästan alla sina former. Den dyker upp o-ombedd och den bryter både koncentration och arbetsprocess för användaren - och tar bort kontrollen över vad som sker från användaren. Därmed inte sagt att nyhetsbrevs-popup:en alltid är ovälkommen. Om man lyckas tajma den så att den kommer upp i rätt läge, t ex när man lämnar sajten, eller när man utför någon handling som signalerar att man kanske är mottaglig, t ex söker efter nyhetsbrev i sök/hjälp-funktionen.

Modala paneler som initieras av användaren kan användas för att presentera funktionalitet som behöver ingår i ett förlopp och behöver utföras i sin helhet. Det kan t ex vara att man fyller i adress-uppgifter och då kan den modala panelen användas för att undvika att man tappar sin plats, t ex på en produktsida, men ändå att man låser interaktionen med den underliggande sidan tills man är färdig med inmatningen. Handlar det om en webbsida så kan det upplevas som en både snabbare och enklare hantering för användaren - och för att panelen visas utan att lämna den underliggande sidan så skickar det en tydlig signal att man kommer att kunna återvända till dit man var.

Bra exempel

Dåliga exempel

Eget Exempel

I exemplet demonstreras hur en modal panel kan användas i ett läge där det är absolut nödvändigt att 1) fånga användarens uppmärksamhet och 2) att blockera övrig funktionalitet. I exemplet visas hur den modala dialogen presenterar både vad som hänt och tillhandahåller funktionalitet för att hantera situationen - och märk väl att den presenterar bara denna funktionalitet ingen annan för att både fokusera användaren på uppgiften och att i den typen av akuta situation hjälpa användaren att fatta rätt beslut om åtgärder i en pressad situation.

[Här förväntar jag mig lite längre förklaringar och motiveringar än i det här exemplet som bara demonstrerar typen av presentation - och också att det interaktiva exemplet är lite mer utförligt både vad gäller utformning/design och interaktiva inslag]

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å

• Se till att fånga användarens uppmärksamhet. Placera den modal panelen i det förväntade blickfånget. Överväg också andra uppmärksamhetsfångande mekanismer som ljud och ljus, rörelse (animation) och användning alternativa kanaler för notifikationer, t ex att skicka sms, epost, ringa upp, IM och twitter.
• Var särskilt noga i utformningen av de interaktiva funktioner som visas i den modala panelen så att det är tydligt vad användaren kan göra och inte göra och också vilken effekt användarens handlingar kommer att ha. Ofta handlar det kritiska moment när modala paneler används och då är är det särskilt viktig att vara tydlig.
• Var konstruktiv. Om det finns något användaren kan göra för att åtgärda en felsituation, beskriv vad det är och tillhandahålla funktioner för att göra det man kan direkt i den modala panelen.
• Presentera den modala panelen i sitt sammanhang. Även om delar av funktionaliteten är blockerade kan de fortfarande visas så att användaren behåller sammanhanget.
• Gör det tydligt vilka delar av funktionaliteten som är blockerade och varför de är blockerade. T ex genom att använda så en kallad Lightbox, där man dimmar ned resten av sidan. Det är en vanlig - och tydlig - visuell effekt för att signalera att underliggande funktioner är blockerade.
• En modal panel med en stäng-knapp är väl egentligen i strikt mening inte en modal panel, men om en sådan kan erbjudas utan risk, så är det en bra idé att göra det.
• Även om kontrollen över applikationen oundvikligen åtminstone delvis tas bort från användaren när man använder modala paneler, försök att bibehålla så mycket kontroll och känsla av kontroll som möjligt inom de begränsade handlingsutrymme som erbjuds.
• Undvik - om möjligt - o-ombedda uppdykande av modala paneler, men då modala paneler ofta används i situationer där händelsen som föranleder visningen av panelen är oförutsägbar och utanför användarens kontroll, så kan man inte alltid följa detta råd.
• Glöm inte bort att tillgänglighetsanpassa de modala panelerna. Det särskilt viktigt för modala paneler i och med att de ofta handlar om kritiska situationer.
• Och sista rådet: Ställ dig frågan om det verkligen är nödvändigt att göra denna panel modal. Om inte låt användaren behålla kontrollen.

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

https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c

https://www.smashingmagazine.com/2009/05/modal-windows-in-modern-web-design/ - beskriver visserligen egentligen inte modala paneler i och med att de inte stänger av annan funktionalitet, men många intressanta tips för utformning och implementation