Metodtips för hur man utformar visualiseringar

Rensa upp i appar

Om appen innehåller för mycket information är det svårt att se vad som är viktigt. Det moderna användargränssnittet med platt design är renare och enklare. En förenklad design vägleder diskret användaren så att de kan behålla fokus.

mindre är mer

Användare försöker ofta ta med för mycket information i en app. Linjediagram med flera mått kan vara förvirrande och svåra att tolka. Prova att skapa flera mindre visualiseringar för att sprida ut den här informationen på sidan. Det gör det även lättare för läsaren att effektivt jämföra visualiseringar sida vid sida. Du kan även använda alternativa dimensioner och mått, så att användaren snabbt kan växla mellan mått utan att en visualisering blir överfull. Mer information finns i Ändra data för en visualisering.

Det finns flera olika sätt att förbättra en apps utseende och funktionalitet. Beroende på vilken publik och vilka data som är viktiga, kan själva designen för visualiseringen ha stor inverkan på hur läsaren tolkar data.

Var medveten om dina gränser

Användare av visualiseringar kan ha begränsat skärmutrymme eller begränsad upplösning. Qlik Sense använder responsiv design för att anpassa sig efter dessa begränsningar. Om begränsningarna av skärmutrymme eller upplösning är för stora måste dock vissa designanpassningar göras. Dessa kan inkludera:

• En underuppsättning av data som visas i stapeldiagram och linjediagram. När antalet dimensionsvärden överskrider bredden på visualiseringen visas ett minidiagram med en bläddringslist.
• Menyer med dolda nivåer för att välja datafilter. När antalet dimensionsvärden överskrider utrymmet som finns tillgängligt för filterrutan döljs underliggande nivåer i menyn. Appanvändare måste klicka på dimensionsnamnet i titeln på filterrutan för att öppna en ny ruta. De kan sedan göra sina urval i den nya rutan. Dessutom kan dimensionsnamn visas som ellipser i filterrutstitlar om utrymmet är begränsat. Appanvändare måste klicka på ellipserna för att se namnet på filterrutan.
• Trunkerade namn i diagramförklaringar. Om namnen är för långa för det tillgängliga utrymmet för dimensioner och mått trunkeras de. Tre punkter läggs till i slutet av det trunkerade namnet. När appanvändaren håller muspekaren över det trunkerade namnet visas hela namnet.
• Saknade teckenförklaringar, etiketter och titlar.

Appanvändare kan expandera visualiseringar för att åtgärda några av de här problemen. Vi rekommenderar dock att du testar dina appar på enheter som de kan användas på. Du kan även använda diverse verktyg för att testa, som responsivt designläge i Firefox (Ctrl + Shift + M). Om det behövs kan du flytta visualiseringar till nya ark, minska mängden data som visas i dem och så vidare.

Färghjälpmedel

Personer med nedsatt färgseende har ett snävare färgspektrum. De kanske tolkar din visualisering på ett annat sätt än vad du avsett.

En del uppfattar till exempel färgerna rött och grönt mer som gult eller brunt. Denna rödgröna färgnedsättning är den vanligaste. Det är bra att tänka på eftersom rött ofta har en negativ innebörd vid datavisualiseringar, i synnerhet inom ekonomi.

Att använd rött eller grönt för ett KPI-värdes status kan vara förvirrande. Du kan göra framställningen mer lättolkad genom att använda former och färger för att indikera resultat. Du kan till exempel använda en röd tom cirkel för att beteckna något som är dåligt och en grön fylld cirkel för något som är bra, och lägga till en triangel som en varningssymbol som bara visas när en KPI-status nått en nivå som inte är godtagbar.

Linjer, staplar och cirkelsektorer kan vara svåra att urskilja när färgerna inte stämmer.

Mer information finns i Ändra utseende på en visualisering.

Placering av filter och ikoner

Filter och ikoner är en viktig del av datavisualiseringen men det kan vara svårt att veta var de ska placeras eller hur de ska sorteras. Du kan ofta förutse var användaren kommer att börja läsa baserat på några väletablerade designprinciper.

Placering till vänster

Många populära webbplatser använder navigeringsfält och filter till vänster. Det beror på att många språk läses från vänster till höger. Därför tittar dessa läsare oftast på den vänstra sidan av skärmen. Användare som letar efter innehåll tenderar att titta på vänster sida av skärmen. Ju längre åt höger objekt befinner sig, desto mindre tittar användare på dem. Om alla filter och ikoner är grupperade vertikalt till vänster betonas de lika mycket.

För språk där texten skrivs från höger till vänster gäller motsatsen. Detta är viktigt att tänka på om apparna ska översättas till dessa språk.

Placering överst

Ett annat vanligt placeringsalternativ för ikoner och filter är längs övre delen på en app. Genom att undvika att placera filter och ikoner till vänster får du mer utrymme för större visualiseringar med distraherande menyer. När filter och ikoner placeras ovanför visualiseringar ses de även som separata från innehållet nedan. Det kan göra det tydligt för användaren att du prioriterar filtren eller ikonen. Om alla dina filter och ikoner finns sida vid sida längst upp betonas det som finns längst till vänster mest och prioriteras av användaren.

Mer information finns i Strukturera en app med hjälp av ark.

Informationshierarki

Ibland vill du att läsaren ska prioritera vissa visualiseringar framför andra. Du kan visa information hierarkiskt genom att använda några goda designvanor. Du kan exempelvis använda olika storlekar för att framhäva vissa visualiseringar. Större information ses som viktigare och genom att öka tecken- eller diagramstorleken kan du vägleda läsaren var de ska titta först.

Även sidoplaceringen är viktig för informationshierarkin. Information överst på sidan ses som viktigare än information längst ned på sidan, eftersom den läses först. Information på första sidan ses som viktigare än information på sista sidan.

Visa sammanhang för KPI:er

KPI-värden är ett bra sätt att förmedla stora idéer i din app. KPI-värden ger dock ingen information om siffror och beräkningar som finns bakom kulisserna. En grön lampa vid ett KPI visar inte om målet precis har uppnåtts eller om det överträffades med råge.

Om du vill visa sammanhang för KPI:er kan du ta med hjälpinformation bredvid värdet som visas som en liten text. Till exempel kan du jämföra det nuvarande KPI-värdet med motsvarande värde förra året. Du kan även lägga till ett litet stapeldiagram utan axlar eller värden som ger information om den aktuella trenden.

Undvik fallgroparna inom datavisualisering

För att datavisualiseringen ska vara så bra som möjligt måste du undvika fallgroparna. Några vanliga fallgropar:

För många färger

Överdriv inte med färgerna. Fel färg på fel plats kan förvirra användaren i stället för att förtydliga. Samma färg kan även betyda olika saker i olika delar av världen.

Cirkeldiagram på fel sätt

Undvik att lägga cirkeldiagram sida vid sida för att jämföra dem. Försök att inte fylla dem med alltför mycket information.

Överbelamring

För mycket information kan förvirra användaren. Använd maximalt nio nyckeltal och ta bort allt överflödigt.

Stil framför innehåll

En vacker visualisering är inte nödvändigtvis den bästa. Använd alltid de goda designvanor du har lärt dig.

Dåliga data

Felsök dina data och korrigera dem vid behov innan du presenterar dem. Låt inte din visualisering få skulden för dålig information.