5 måsten för Mobile Mashup Design

Ni kan skapa en snygg applikation utan begränsningarna genom att hålla fast vid Qlik Sense-funktionaliteten och användargränssnittet. I Den här bloggen delar vi med oss av våra fem måsten för att designa en Qlik Sense mashup-applikation som kan skalanpassas oavsett enhet.

1. Strategisk layout

Utmaningen i att designa en mobilapplikation är att det inte bara finns olika skärmstorlekar att anpassa sig till men också olika lägen, om det så är i liggande- eller stående läge. När användaren byter från ett läge till ett annat måste applikationen få rätt form, vilket innebär att den ska uppträda på samma sätt som i tidigare läge.

Det finns två olika typer av teknisk lösning att ta hänsyn till:

• En komplett mashup med individuella Qlik Sense-objekt

Eftersom vi använder Qlik Sense-objekten som skiljer sig från andra HTML-element inom applikationen, kan gränssnittet diktera placeringen och utseendet av objekten när enheten ändrar lägen. Gränssnittet behöver därför ta hänsyn till hur objekten kommer att placeras i liggande läge och hur objekten kommer att byta positioner när enheten ändras eller omvandlas till stående läge.

• Mashup använder en iframe

I den här typen av lösningar kommer innehållet på sidan direkt från en Qlik Sense-applikation och de enda HTML-elementen som kan anpassas är applikationens navigering och ram. Detta blir en utmaning för objektplacering och förändringar när läget eller enheten växlas från liggande till stående läge. När du utformar din mashup vet du att när användaren växlar från liggandes till stående läge, eller när användaren byter från en surfplatta till en mobilenhet, lägger Qlik Sense automatiskt objekt från vänster till höger och uppifrån och ner. Objekten måste vara strategiskt placerade så att när läget ändras hamnar alla relaterade KPI-text och diagram ihop och inte staplade i slumpmässig ordning.

För att förklara detta ytterligare, låt oss titta på några exempel nedan med två olika stilar av objektplaceringar.

Exempel 1 – Objekten är utformade i liggande läge för att vara i tre kolumner med avsikt att visa alla relaterade KPI:er, diagram och tabeller tillsammans. Dock när användaren växlar till stående läge eller till en mobiltelefon, ändrar Qlik Sense objektplaceringen automatiskt uppifrån och ner och åt vänster till höger, och idén om att ha de relaterade objekten tillsammans går förlorad.

Exempel 2 – Objekten placeras i liggande läge för att vara i tre rader istället för kolumner då Qlik Sense automatiskt omorganiserar objekt när användaren byter läge från liggande till stående. I denna kommer alla relaterade KPI:er, diagram och tabeller fortfarande att vara tillsammans eftersom de omorganiseras från vänster till höger och uppifrån och ner. Avsikten med designen behålls oavsett lägesförändringen av enheten.

Sammanfattningsvis, när du utformar din mashup-applikation med en iframe för att visa innehållet, var medveten om hur Qlik Sense kommer att ändra objektets position när du byter mellan lägen eller justerar din design därefter.

2. On demand Filters

Skärmstorlekar för surfplattor och telefoner är begränsade, därför är det en bra idé att gruppera alla filter i ett överlappande fönster eller en separat panel och visa filterpanelen endast när användaren behöver det. Detta koncept liknar en online shopping-upplevelse där filtren är synliga via en knapp eller en länk bara vid behov när du söker bland produkter. På samma sätt kan filtren i Qlik Sense-mashups nås med en separat knapp eller en länk som alltid är synlig på era ”sheets”.

Detta kommer inte bara att hålla sidan enkel men också följa teorin om att tillhandahålla information till användaren endast vid behov, så att det inte finns någon informationsöverbelastning från vad som skulle då upplevas som en komplex applikation.

3. Fingerpeksnavigering

När du planerar att designa en mashup kan du behöva skapa en egen Qlik Sense-navigering istället för att använda den inbyggda. Det finns ett antal olika sätt att utforma navigering från flikar till en lista, från dold navigering till ständigt synlig. Var och en har sina fördelar och nackdelar som är ett ämne i sig, men oavsett design är det en gyllene regel att försöka hålla sig till webb-standard.

Med andra ord, utforma navigering på ett sätt som är bekant för användarna eller som de kan ha stött på tidigare och/eller arbetat med i andra vanliga mobila applikationer, istället för att återuppfinna hjulet och kämpa med användartester och användaranpassning. Förutom att göra navigeringen självklar bör den göras tryckvänlig så att aktiva områden och avstånd är stora nog för ett finger att kunna göra val bekvämt utan att klicka på något oavsiktligt.

4. Valmöjlighetsdisplay

En signifikant del av alla applikationer ämnade för ”data discovery” är att användarna kan filtrera och sålla bland data genom olika mätvärden och dimensioner. Den väsentliga delen av denna process är att visa användaren vad de aktuella valen är, genom deras filtrerade data. Eftersom vi har begränsade skärmstorlekar på våra mobila enheter tenderar vi att ge de aktuella valen låg prioritet. Nuvarande val kan dock utformas och hanteras genom att endast visa det som en länk till en separat panel som innehåller alla aktuella val. Ett annat alternativ är att visa den i form av ”brödsmulor” så att användaren vet exakt var den befinner sig inom sin ”data discovery” process. Oavsett utformningen, glöm inte bort den här kritiska delen av applikationen.

5. Less is more

Vi vet att datarika applikationer är väldigt viktiga för att fatta korrekta affärsbeslut, men ta ett steg tillbaka och fundera på olika användningsområden (use cases) för de som är i farten, som bara är intresserade av att konsumera data via en mobilenhet. De flesta av dessa användarna vill att deras applikationer ska hjälpa dem att utföra uppgifter snabbt och enkelt. Att skära ned på onödig fluff, som kontroller och ikoner som inte direkt hjälper användaren, är ett sätt att rensa. Även att omorganisera visualiseringar på olika ark (Sheets) istället för att lägga all information tillsammans i ett ark är ett annat sätt att se till att endast relevant innehåll visas.

Att prioritera vissa delar och bara visa det som är nödvändigt kommer att förbättra förståelsen och överlag ge en bättre användarupplevelse.

En Qlik Sense mashup applikation är avsedd att visa Qlik Sense-objekt i olika slags kreativa miljöer och utföranden, utan några begränsningar. Men om applikationen inte skalas efter det som krävs från en enhet till en annan, förloras ändamålet och skönheten med mashupen. Ha dessa måsten i åtanke inom ditt utformande för att göra övergången sömlös och applikationen helt och hållet responsiv.

Apeksha Pathak, Senior UX Designer