Du har förmodligen varit där förut. Hur väljer vi mellan att visa en modal för användare, och när navigerar vi dem till en separat, ny sida? Och spelar det någon roll alls? Det gör det faktiskt. Beslutet påverkar användarnas flöde, deras sammanhang, deras förmåga att leta upp detaljer och därmed felfrekvens och uppgiftsslutförande. Båda alternativen kan vara störande och frustrerande - vid fel tidpunkt och på fel plats. Så det är bäst att vi gör rätt. Nåväl, låt oss se hur man gör just det. Modaler vs. Dialoger vs. Överlagringar vs. Lightboxar Medan vi ofta talar om en enda modal UI-komponent, ignorerar vi ofta fina, intrikata nyanser mellan alla olika typer av modaler. Faktum är att inte alla modaler är desamma. Modaler, dialogrutor, överlagringar och ljuslådor – alla låter likadana, men de är faktiskt ganska olika:
Dialog En allmän term för "konversation" (användare ↔ system). ÖverläggEn liten innehållspanel som visas överst på en sida. ModalUser måste interagera med överlagring + bakgrund inaktiverad. NonmodalUser måste interagera med överlägg + bakgrund aktiverat. Ljuslåda Nedtonad bakgrund för att fokusera uppmärksamheten på modalen.
Som Anna Kaley framhåller visas de flesta överlägg vid fel tidpunkt, avbryter användare under kritiska uppgifter, använder dåligt språk och bryter användarflödet. De är avbrytande till sin natur, och vanligtvis med en hög grad av svårighetsgrad utan ett starkt behov av det.
Säkert måste användare saktas ner och avbrytas om konsekvenserna av deras handlingar har stor inverkan, men för de flesta scenarier är icke-modaler mycket mer subtila och ett mer vänligt alternativ för att uppmärksamma användaren på något. Om något föreslår jag alltid att det är en standard. Modals → För enskilda, självständiga uppgifter Som designers avfärdar vi ofta modals som irrelevanta och irriterande — och ofta är de det! – men de har också sitt värde. De kan vara till stor hjälp för att varna användare om potentiella misstag eller hjälpa dem att undvika dataförlust. De kan också hjälpa till att utföra relaterade åtgärder eller gå ner i detaljer utan att avbryta sidans nuvarande tillstånd. Men den största fördelen med modaler är att de hjälper användare att behålla sammanhanget för den aktuella skärmen. Det betyder inte bara användargränssnittet, utan också redigerad ingång, rullningsposition, tillstånd för dragspel, val av filter, sortering och så vidare.
Ibland måste användare bekräfta ett val snabbt (t.ex. filter som visas ovan) och sedan fortsätta omedelbart därifrån. Automatisk spara kan naturligtvis uppnå samma sak, men det är inte alltid nödvändigt eller önskvärt. Och att blockera användargränssnittet är ofta inte en bra idé. Modaler används dock inte för några uppgifter. Vanligtvis använder vi dem för enskilda, fristående uppgifter där användare ska hoppa in, slutföra en uppgift och sedan återvända till var de var. Föga överraskande fungerar de bra för högprioriterade, korta interaktioner (t.ex. varningar, destruktiva åtgärder, snabba bekräftelser). När modal hjälper: 🚫 Modaler är ofta störande, invasiva och förvirrande.🚫 De gör det svårt att jämföra och kopiera-klistra.✅ Ändå tillåter modaler användare att behålla flera sammanhang.✅ Användbart för att förhindra oåterkalleliga fel och dataförlust.✅ Användbart om det skulle vara störande att skicka användare till en ny sida. ✅ Visa endast en modal om användarna uppskattar störningen.✅ Föredrar som standard icke-blockerande dialoger ("icke-modaler").✅ Tillåt användare att minimera, dölja eller återställa dialogrutan senare.✅ Använd en modal för att sakta ner användarnas hastighet, t.ex. verifiera komplex inmatning.✅ Ge en väg ut med "Stäng", eller klicka på ESC. Sidor → För komplexa arbetsflöden i flera steg Wizards eller navigering med flikar inom modaler fungerar inte så bra, inte ens i komplexa företagsprodukter - där fungerar sidopaneler eller lådor vanligtvis bättre. Problem börjar när användare behöver jämföra eller referera till datapunkter – ändå blockerar modalerna detta beteende, så de öppnar samma sida igen på flera flikar istället.
För mer komplexa flöden och flerstegsprocesser fungerar fristående sidor bäst. Sidor fungerar också bättre när de kräver användarens fulla uppmärksamhet, och hänvisningar till föregående skärm är inte till stor hjälp. Och lådor fungerar för underuppgifter som är för komplicerade för en enkel modal, men som inte behöver en helsidesnavigering. När ska man undvika modaler: 🚫 Undvik modaler för felmeddelanden.🚫 Undvik modaler för funktionsaviseringar.🚫 Undvik modaler för introduktionsupplevelse.🚫 Undvik modaler för komplexa, långa flerstegsuppgifter.🚫 Undvik flera kapslade modaler och använd prev/next istället.🚫 Undvik automatiskt utlösta modaler. Undvik bådaFör upprepade uppgifter I många komplexa, uppgiftstunga produkter kommer användare att finna sig i att utföra samma uppgifter upprepade gånger, om och om igen. Där lägger både modaler och nya sidnavigering till friktion eftersom de avbryter flödet eller tvingar användare att samla in saknad data mellan alla olika flikar eller vyer. Alltför ofta slutar användare med en trasig upplevelse, full av aldrig sinande bekräftelser, överdrivna varningar, utförliga instruktioner eller bara saknade referenspunkter. Som Saulius Stebulis nämnde, i dessa scenarier fungerar utökningsbara sektioner eller redigering på plats ofta bättre - de håller uppgiften förankrad till den aktuella skärmen. I praktiken, i många scenarier, slutför användare inte sina uppgifter isolerat. De behöver slå upp data, kopiera-klistra in värden, förfina poster på olika platser eller bara granska liknande poster när de arbetar med sina uppgifter. Överlägg och lådor är mer användbara för att bibehålla tillgång till bakgrundsdata under uppgiften. Som ett resultat förblir sammanhanget alltid på sin plats, tillgängligt för referens eller copy-paste. Spara modaler och sidnavigering för stunder där avbrottet verkligen tillför värde – särskilt för att förhindra kritiska misstag. Modals vs. Pages: A Decision Tree För ett tag sedan satte Ryan Neufeld ihop en mycket användbar guide för att hjälpa designers att välja mellan modaler och sidor. Den levereras med ett praktiskt PNG-fuskblad och en Google Doc-mall med frågor uppdelade i 7 sektioner. Den är lång, extremt grundlig, men väldigt lätt att följa:
Det kan se skrämmande ut, men det är en ganska enkel 4-stegsprocess:
Skärmens sammanhang. Först kontrollerar vi om användarna behöver behålla sammanhanget för den underliggande skärmen. Uppgiftens komplexitet och varaktighet. Enklare, fokuserade, icke-distraherande uppgifter skulle kunna använda en modal, men långa, komplexa flöden behöver en sida. Referens till underliggande sida. Sedan kontrollerar vi om användare ofta behöver hänvisa till data i bakgrunden eller om uppgiften är en enkel bekräftelse eller val. Att välja rätt överlägg. Slutligen, om ett överlägg verkligen är ett bra alternativ, vägleder det oss att välja mellan modal eller icke-modal (lutar mot en icke-modal).
Avslutning Undvik att blockera hela användargränssnittet när det är möjligt. Ha en flytande dialogruta som delvis täcker gränssnittet, men tillåter navigering, rullning och kopiering och klistra in. Eller visa innehållet i modalen som en sidolåda. Eller använd ett vertikalt dragspel istället. Eller ta med användare till en separat sida om du behöver visa mycket detaljer. Men om du vill öka användarnas effektivitet och hastighet, undvik modal till varje pris. Använd dem för att sakta ner användarna, för att samla deras uppmärksamhet, för att förhindra misstag. Som Therese Fessenden noterade, gillar ingen att bli avbruten, men om du måste, se till att det är absolut värt kostnaden. Möt "Smart Interface Design Patterns" Du kan hitta ett helt avsnitt om modaler och alternativ i Smart Interface Design Patterns, vår 15 timmar långa videokurs med 100-tals praktiska exempel från verkliga projekt — med en live UX-utbildning senare i år. Allt från mega-dropdowns till komplexa företagstabeller — med 5 nya segment som läggs till varje år. Hoppa till en gratis förhandsvisning. Använd koden BIRDIE för att spara 15 % rabatt. Möt Smart Interface Design Patterns, vår videokurs om gränssnittsdesign & UX.
Video + UX Training Endast videoVideo + UX Training$ 495,00 $ 699,00 $
Få Video + UX Training25 videolektioner (15 timmar) + Live UX Training.100 dagars pengarna-tillbaka-garanti. Video endast $ 300,00 $ 395,00
Få videokursen40 videolektioner (15h). Uppdateras årligen. Finns även som ett UX-paket med 2 videokurser.
Användbara resurser
Olika typer av popups, av Anna Kaley Bästa metoder för att designa UI-modaler, av Uxcel We Use Too Many Damn Modals: UX Guidelines, av Adrian Egger Modal & Nonmodal Dialogs, av Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, av James Jacobs Modaler i designsystem
