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, så kan den vara välkommen. Det är dock ganska sällan det inträffar.

Modala paneler som initieras av användaren kan användas för att presentera funktionalitet som behöver ingå i ett specifikt stegvis förlopp och utföras i sin helhet. Det kan t ex vara att man fyller i adress-uppgifter. Då kan en modal panel användas för att undvika att man tappar sin plats, t ex på en produktsida. Men ändå då att man låser interaktionen med den underliggande sidan tills man är färdig med inmatningen och således kan fokusera helt och hållet på den.

Hur används det?

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 i de flesta fall utföras i samma grundstil som övriga delar av applikationen, men att man är noga med att använda de signal-färger man har i sitt färgtema för att säkerställa att användaren uppmärksammar innehållet och förstår att det innehåller interaktiva element. Ett undantag är då den modala panelen visar innehåll av kritisk natur – t ex sådant som riskerar att förstöra ens hittills utförda arbete eller sådant som av annan anledning kräver omedelbar åtgärd. Då är det viktigt att man utformar panelen så att den istället avviker från grundstilen och därmed signalerar att något annorlunda och allvarligt har inträffat.

Saker att tänka på kring användningen av modala paneler:

• Se till att fånga användarens uppmärksamhet. Placera modal paneler 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 kan göra – och också vilken effekt användarens handlingar kommer att ha (så att användarens förväntan stämmer överens med resultatet). Ofta handlar det kritiska moment när modala paneler används och då är är det särskilt viktig att vara tydlig med vad som kommer hända.
• 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 eller länkar 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 och känner sig trygg med att man kan återvända till detta sammanhang när den modala panelen stängs.
• Gör det visuellt tydligt vilka delar av funktionaliteten som är blockerade, t ex genom att använda så en så 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 inte är tillgängliga för tillfället.
• En modal panel med en stäng-knapp är i strikt mening inte en modal panel eftersom den inte kräver en åtgärd, 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 ifrån användaren när man använder modala paneler, eftersträva att försöka ge användaren så mycket kontroll – och känsla av kontroll – som möjligt inom det begränsade handlingsutrymme som erbjuds.
• Undvik – om möjligt – o-ombedda 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 att man gör det för modala paneler i och med att de används i situationer med både tidspress och stora konsekvenser om man inte kan utföra en åtgärd.
• Anpassa storlek på panelen efter plattform och skärmstorlek så att inga viktiga delar döljs, vare sig 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 (men utan att man bryter blockeringen av övrig funktionalitet).
• På små skärmar så kan det vara svårt att visa sammanhanget i och med att den modala panelen typiskt upptar hela skärmytan. Fundera på i sådana fall på vilket sätt sammanhanget är viktigt och hur man kanske kan visa de delar som är särskilt viktiga på annat sätt på den modala panelen.
• Och sista rådet:  Ställ dig frågan om det verkligen är nödvändigt att göra en panel modal. Om inte, låt bli.

Bra exempel

Funktionell redigering – CK editor är javascript-baserad rich text editor som gör det möjligt att låta användare redigera formaterad text direkt på webbsidan (kräver en backend som tar emot och uppdaterar den redigerade texten). När man klickar på ett textavsnitt för att redigera det så öppnas en modal panel som begränsar interaktionen till det aktuella textavsnittet. Den modala panelen stängs ned genom att avbryta eller spara ändringarna. Det här skulle kunna vara ett dåligt exempel i och med att det är ju inte nödvändigt att man begränsar interaktionen med andra delar av sidan med man redigerar. Jag har ändå valt att lägga det i bra exempel-högen. Detta eftersom det i sitt sammanhang ger en bra fokusering. Användaren kan fortfarande se sammanhanget (även om den modala panelen kan täcka för annan text för vissa layouter-konfigurationer), men fokus ligger funktionellt och uppmärksamhetsmässigt på innehållet som håller på att redigeras.

Undvika allvarlig risk  – Exemplet är hämtat från ett gammalt windows-program. Övrig funktionalitet blockeras och ett aktivt beslut krävs för att gå vidare. Här riskerar man att göra ett allvarligt och oåterkalleligt fel. Därmed är det motiverat att bryta in och blockera och kräva åtgärd. Här skulle det varit ännu bättre om man haft ett “besvärligare” sätt att välja ja eller nej. Risken med en standard ja/nej-ruta är att användaren ofta klickar på rutin. En variant är att man slumpar positionen på ja och nej, men det är inte heller bra eftersom det är lätt att klicka fel när man halv-automatiskt klickar bort rutan. En annan variant är att man tvingar användaren att skriva in något nyttför varje interaktion, t ex en slumpad sifferkombination. Då tvingar man användaren att stanna upp, men användaren blir snabbt irriterad om det är ruta som dyker upp ofta. Det allra bästa är att se till att rutan bara dyker upp när det är absolut nödvändigt (inte i onödan) OCH att man har någon form av ångra/undo-funktion som mildrar effekten av att klicka fel (som man ju ofta upptäcker precis efter man har tryckt på fel knapp – den så kallade OH NO-sekunden…).

Bra feedback  – Egentligen bör man undvika modala paneler som inte ger användaren några valmöjligheter. I den här panelen finns visserligen två alternativ – man kan välja att starta om sin download eller bara bekräfta. Men i realiteten så handlar det inte om att erbjuda valmöjlighet, utan syftet är att se till att användaren uppmärksammar den förmedlade information – att nedladdningen har startat och var man hittar filen när den laddat färdigt. Och att denna information visas på ett sätt som är starkare visuellt och interaktionsmässigt (i och med att det begränsar interaktionen). Hade man transporterat vidare till en ny sida eller om samma informationstext visats icke-modalt på föregående sida så hade styrkan i budskapet förminskats.

Dåliga exempel

Facebokaviseringar – Aviseringar är alltid störande när de dyker upp i fel läge – och det gör de så gott som alltid om de är modala, eftersom de avbryter de man höll på med. Exemplet är från Facebook och det finns ingen (bra) anledning att den här typen av aviseringar ska vara modal. Kanske har man gjort den modal för att man vet och vill att det ska bryta användarens flöde – detta för att rikta om uppmärksamheten mot något annat som skapar mer användarengagemang och ökar tiden man spenderar på Facebook. Så kanske bra för Facebook, men inte bra för användaren.

Let’s deals lightbox – En modal ruta som dyker upp varje gång man går in på Let’s deals webbsida från mobil webbläsare. Hade jag appen hade jag antagligen använt den och jag behöver inte påminnas varje gång – appen har för övrigt i princip samma funktionalitet som webbversionen. Här finns det säkert anledningar till att man pressar på om appen – kanske ger den bättre conversion, flera återvändande kunder eller bättre möjlighet att tracka användare för företaget. Men från ett användarperspektiv är det en dålig implementation – och därmed ett bra exempel på hur man inte ska använda modala paneler.

Clippy! – Office-paketets ökända assistent utgör det ultimata dåliga exemplet på modal panel. Egentligen var inte Clippy så hemsk – visst den rätt dålig på att gissa vad man ville göra och rätt störande dessutom, men det stora problemet var att den var implementerad som en modal dialog. Det var det som gjorde att den skapade osäkerhet och irritation för att den konstant bröt användarnas arbetsflöde. – Man satt där och skrev i Word eller matade in siffror i Excel och plötsligt slutade programmet reagera. Så dök Clippy upp någon halv-sekund senare med en (ofta dum eller irrelevant) fråga/tips. Och Clippy blockerade då det man höll på med. Hade Clippy inte blockerat, alltså hade interaktionen inte varit modal, så hade nog Clippy fortfarande varit lite irriterande, men i betydlig mindre grad. Och faktiskt kunnat vara lite hjälpsam då och då. Nu börjar Clippy falla i glömska och nya chatbottar och assistenter, som är mycket bättre på att gissa och hjälpa, har dykt upp. Men det är nog ingen överdrift att påstå att assistentens återkomst försenades med åtminstone 10 år för att man rädd att väcka Clippy-spöket till liv igen.

Eget Exempel

I exemplet nedan 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. Här används en modal dialog för att signalera att något allvarligt har hänt på ett kärnkraftverk. Panelen som visas presenterar både vad som hänt och ger råd och valmöjligheter för att hantera situationen. Och märk väl att panelen innehåller enbart sådan funktionalitet som är meningsfull i sammanhanget. All annan funktionalitet blockeras. Detta för att fokusera användaren på den uppgift som kräver omedelbar (akut i det här fallet) uppmärksamhet och för att hjälpa användaren att göra rätt och undvika att göra fel.

Panelen har en grafisk utformning med skarpa kontrasterande färger som i sitt färg- och formspråk dessutom skiljer sig från övriga delar av applikationen. Detta avser att fånga användarens uppmärksamhet och samtidigt signalera att något ovanligt och allvarligt har inträffat. Något som kräver omedelbar åtgärd. Innehållsmässigt ger panelen tydlig och kortfattad information om det uppkomna läget, och erbjuder en serie med åtgärder som användaren kan välja att utföra. Åtgärderna presenteras på ett sätt som tydliggör i vilken ordning de ska utföras och det finns också fysiska spärrar som tvingar användaren att pröva de mildare åtgärderna först. I och med att varje åtgärd har allvarliga konsekvenser är varje panel låst och kräver att användaren fattar ett aktivt beslut att öppna upp funktionaliteten innan den kan användas. Detta för att undvika oförsiktig, ogenomtänkt eller rutinmässig användning.

Varje åtgärd ger feedback i textform. Här skulle ett alternativ kunna vara att feedbacken presenteras i ytterligare ett lager modal panel, men med den utformning, budskap och begränsade funktionalitet som visas på befintlig panel skulle det troligtvis overkill. Det är dock viktigt att feedbacken är utformad på sådant sätt att användaren inte missar den – gärna med kombination av animation och ljud. Den sista nivån har dubbla lås för att ytterligare signalera att det är en åtgärd som enbart ska utföras i katastrofala undantagsfall.

Det är sällan det är så här kritiskt viktigt att begränsa och rikta användarens handlingsutrymme, men modala paneler är ett kraftfullt verktyg och bör aldrig användas rutinmässigt, utan bara i sådana situation där det är viktigt att uppmärksamma användaren, begränsa handlingsutrymmet och avkräva användaren någon form av val eller handling.

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