Vad är det?

Presenterar en lista eller meny av objekt på en enda sida där ytterligare information kräver aktiva val från användaren för att ytterligare information ska exponeras. När användaren väljer ett specifikt objekt från de presenterade objekten på sidan, presenteras objekt ytterligare detaljer eller innehåll på samma sida och ersätter bakomliggande informationslager. 

När används det?

One Window Drilldown används när designern har en lista av objekt att visa och där vardera innehåller intressant innehåll associerat till det specifika objekt. Detta kan till exempel vara texten i ett meddelande, bilder kopplat till ett objekt eller övrig information som hör ihop med objekt. Detta används även när designern har ett begränsat utrymme att arbeta med, till exempel när en design till en liten mobilskärm skall utformas, eller när listan med presenterade objekt är väldigt stor och kräver ett stort utrymme på sidan. I till exempel ett nyhetsflöde kan listan av artiklar och nyheter presenteras med hjälp av titel och bild, men där övrig information först avslöjas när användaren aktivt väljer att klicka på en specifik nyhetsartikel. Först då presenteras artikelns övriga innehåll men på samma sida där användaren redan befinner sig och där bakomliggande lager ersätts av den nya informationen. Vidare används denna funktion vid onlineforum där sidans fulla vidd krävs för att rymma olika ämnen och dess innehåll. 

Hur används det?

One window drilldown har två typer av “grundtillstånd” som presenteras för användaren, en översiktsvy över alla listobjekt/items och en item-specifik/detaljerad vy över det valda list-itemet. Mönstret används genom att presentera en lista med objekt, som t.ex. ens inkorg. Där användaren genom att t.ex. klicka, swipa eller på andra sätt väljer ut ett objekt i listan kan öppna det valda objektet, och på så sätt filtrerar vad som presenteras på skärmen. Detta ger användaren en bättre överblick över valt objekt och samtidigt är detta också ett effektivt sätt att minska mängden information som presenteras för användaren så hen kan fokusera på det valda objektet vilket således också verkar för att minska användarens kognitiva arbete. 

Efter att användaren öppnat valt list-objekt bör  användaren ges möjlighet att genom avbryt eller tillbakaknapp gå tillbaka till listans fulla bredd. Användaren kan dock även ges mer flexibilitet genom att t.ex. svepa till höger eller vänster bläddra bland de list-items som visats i översiktsvyn men att detta sker på en mer detaljerad nivå där varje list-item presenteras i full vy, separerat från övriga objekt. 

En nackdel med mönstret är att användaren på ett översiktligt sätt inte kan jämföra fler än ett listitem åt gången, som användaren t.ex. kan göra med List inlay eller two-panel selector där användaren istället kan få en översikt över både strukturen över listan av alla list-items och samtidigt se information som det valda list-itemet innehåller, detta kräver dock en större skärm och är inte ett optimalt mönster för mindre smartphone modeller, därav kan detta vara ett alternativ för design för smartphone där man inte har tillräckligt med yta för att presentera två vyer med tillräckligt med information om list-items och den information de innehåller. Genom att använda t.ex. funktioner för att välja Nästa och Föregående objekt i den item specifika/detaljerade vyn  kan användaren ta sig fram mellan list-objekten. 

Användaren behöver även tillräckligt med information presenterat i översikts – list-item vyn  för att på ett kontrollerat och effektivt sätt kunna välja ut vilket list item som hen vill öppna. Då användaren efter klickat på ett valt list-item dirigeras till en ny kontext bör information baserat på användarens behov, som t.ex. avsändare eller huvudämne, när inlägget postades eller vad användaren kan förvänta sig av att klicka på itemet  presenteras i listvyn för att användaren ska kunna identifiera dess relevans och område. 

Bra exempel:

1. Omni (applikation) https://omni.se/ 

Bilden visar ett nyhetsflöde från en Omni:s applikation där bilden till vänster visar ett skrollbart flöde med samtliga nyhetsartiklar och bilden till vänster hur det ser ut när användaren klickat sig in på specifik artikel. Gränssnittet presenterar ett antal val och uppgifter (tasks) som användaren kan göra utan att dessa tar upp plats från det huvudsakliga målet, att ta del av ett nyhetsflöde. Samtliga nyheter presenteras i ett långt “skrollbart” flöde med rubriker, underrubriker och tillhörande bilder. Samtliga nyheter presenteras gradvis genom att avslöja dess rubriker, underrubriker och början på reportage. På så sätt får användaren en hint om vad nyheten handlar om utan att behöva aktivt klicka sig in på den. Vidare kan användaren enkelt klicka sig in på önskad nyhetsartikel genom att trycka på denna. Nyhetsreportaget presenteras då i ett större format och användaren bjuds här in till att fortsätta ta del av nyhetsflödet genom att “slidea” höger eller vänster eller att gå tillbaka till översiktsvyn. 

2. Gmail inkorg 

Användaren får en tydlig överblick över de alternativ och val som kan göras på sidan. Användaren ges möjlighet att få denna överblick genom en lista med inkomna mail där information presenteras genom avsändare, ämnesrad samt de första skrivna raderna i mailet. Vidare kan användaren klicka sig in på samtliga mailkonversationer för att exponera samtlig information om vald mailkonversation. När användaren befinner sig på en specifik konversation kan hen enkelt gå tillbaka till den första vyn som ger en överblick över inkorgen.  

Dåliga exempel:

1. Forum “Utsidan” https://www.utsidan.se/forum/  

Forum ”Utsidan” har mycket innehåll som är grupperad i större ämnesgrupper ”Allmänt”, ”Cykling”, ”Klättring” osv. med tillhörande underrubriker i varje ämne. Detta är en relativt tydlig gruppering men när användaren väljer att gå in på ett av de ämnena kommer man till ytterligare en lång lista med alla ämnen i den kategorien istället av att se innehållet direkt. Detta gör att användaren får navigera väldigt mycket fram och tillbaka för att se innehållet och få en överblick över alla ämnen. Användaren kan inte heller växla till nästa eller föregående ämne utan är tvungen att använda tillbaka-knappen för att navigera till den ursprungliga listan med alla kategorier. Dessutom presenteras sök-funktionen på forumet inte på bästa sätt och märks inte direkt. 

Som man kan se på bilden har webbplatsen väldigt mycket tom plats runt omkring sidans innehåll. Denna tomma plats skulle kunna användas för att utveckla en bättre struktur och överblick över alla forumets innehåll och minska navigeringen för användaren.   

2. Reddit https://www.reddit.com/ 

Reddit:s webbsida presenterar en lista över alla inlägg och artiklar men listan saknar struktur. Det är svårt att greppa för användaren om innehållet är sorterat efter något ämne. Varje rad i listan innehåller dessutom väldigt mycket ytterligare information vilket skapar ett rörigt intryck. 

Funktionerna ”sök” och ”skapa ett nytt inlägg” presenteras på nästan exakt samma sätt högst upp på sidan vilket är lätt förvirrande.   

“Best practice”

https://11wxf3.axshare.com

Grupp 1

Bra exempel – Grupp 1. Telefonboken i iPhone, en lista på kontakter visas och då användare klickar på en kontakt visas dennes uppgifter samt relevanta funktioner.

Dåligt exempel – Grupp 1 AllaStudier.se – https://allastudier.se/utbildningar/hogskola-universitet/a320

Dåligt exempel där användaren letar efter en utbildning. Det blir väldigt mycket scrolling och måste klicka fram och tillbaka för att få mer information, då informationen visas i ett nytt fönster. Boxarna kunde ha varit mindre och förslagsvis kunde information (som syns i bilden under listan) istället “vikas ut”. Alternativt haft listan som en meny vid sidan och visat informationen till höger.

Grupp 2

Bra exempel – Grupp 2

Omni erbjuder en enkel lista med klickbara nyheter. Varje nyhet rullar in från höger och går att gå tillbaka från med knappen uppe till vänster i höger bild. Jenifer Tidwell menar att problemet med detta mönster är att användare måste hoppa fram och tillbaka i listor för att gå från artikel till artikel. Omni har dock löst detta med svepande interaktion väl inne på en nyhet. För att gå till nästa artikel är det bara att svepa med fingret över skärmen och “bläddra” till nästa artikel.

Dåligt exempel – Grupp 2

I MyMoodles kursöversikt finns en lista med kurser som man kan klicka på för att ta sig till respektive kurssida. Det som kan behöva ändras är att varje kurs har en stor rektangel över sig som tar väldigt mycket plats och kan leda till mycket scrollande för att komma till önskad kurs. Det borde finnas alternativ för att möjligtvis ta bort dessa helt eller annat sätt som minskar scrollandet.

Grupp 3

Bra exempel – Grupp 3. Inställningsappen för mobilen Huawei Honor 8.

• 

• 

One-windowed drilldown menyn är det som visas på första sidan av appen. Vi anser att detta är ett bra exempel på grund av dessa tre anledningar.

1. Listan som visas på första sidan är uppdelad i bra kategorier med tillhörande beskrivande undertexter och tydliga ikoner. Samt att alla inställningar under varje kategori stämmer bra in på kategorins namn, text samt bild.

2. Med tanke på det höga antalet inställningsalternativ som varje kategori innehåller, samt att skärmens storlek är väldigt begränsad är one-windowed drilldown en passande lösning.

3. Det är lätt att navigera sig mellan de olika sidorna med hjälp av tydliga pilar.

Dåligt exempel – Grupp 3

Åre Trails

Åre Trails är en digital guide till längdåkning, turskidåkning, vandring, cykling och löpning över Årefjällens leder med 2D-kartor och visuella 3D-kartor. Tjänsten finns på webben och som mobilapplikation.

I det här exemplet är för mobilapplikationen men webben beter sig på lika dåligt sätt. Det första som gör Åre Trail brister i sin applikation är att namnen på kategorierna inte syns helt. Användaren får själv fylla i där det står “…”. För det andra är första och sista kategorin väldigt lika i sin beskrivning och vi ser ingen anledning att ha två kategorier med liknande namn. 

När man sedan som användare tycker på en av dessa kategorier är det svårt att gå tillbaka eftersom det inte finns någon tillbaka knapp. För att komma tillbaka till de olika alternativen måste man trycka på hamburgermenyn och sedan aktiviteter. Det är inte helt självklart att man som användare förstår att man kan kommer tillbaka till föregående sida om man tycker på “Aktiviteter”.  Detta gör leder till både förvirring och att det blir svårt för användaren och röra sig smidigt i applikationen. 

Länk till webbplatsen: https://aretrails.com/home

Grupp 4

Bra exempel (grupp 4): Appen Wonderlist använder one-window drill-down mönstret på ett mycket enkelt men effektivt sätt. Tillbaka-knappen är lättillgänglig, informationen är koncentrerad och visar inte mer än vad som behövs och de använder sig av flera nivåer – men inte så många att användaren blir tappar bort sig eller har svårt för att komma tillbaka. I första skärmen får vi en överblick över våra att-göra listor; i sista skärmen får vi mer detaljerad information om det klickade elementet. I varje skärm har vi också tillgång till relevanta actions – create new list, add a to-do, add a sub-task, etc – vilket gör det snabbare att utföra viktiga uppgifter i appen.

Dåligt exempel (grupp 4): Detta exempel från appen AllTrails är både bra och dåligt. I bilderna ovan ser ni första skärmen – efter att användaren klickar på ett av korten, ersätts denna skärm med mer detaljerat innehåll om vandringingsspåret. Designen är tydlig och enkel, men något som kunde göra det enklare för användare att få en snabb överblick över innehållet, är att i första skärmen göra korten något mindre, eller ge hen en chans att anpassa layouten så att endast t.ex. titlarna syns. Detta hade minskat scrollandet och gjort det snabbare för framför allt vana användare att hitta rätt spår.