Datavisualisering: Design för mobila enheter - dummies

Fram till några år sedan, när en formgivare skapade en pappersbaserad annons eller broschyr, gjorde hon kunde planera exakt hur det skulle se ut efter att det skrivits ut. Designern visste formatet och hur kunder skulle se det. Populariteten hos mobila enheter har dock ökat, och designers har fått möta två nya designproblem:

• Design av gränssnitt för mobila enheter

• Skapande av appar för mobila enheter

Med Internetens tillkomst använde online-designers de få webbläsare som var tillgängliga för att planera hur deras mönster skulle se på skärmen. De tillgängliga verktygen var något råa, men designen var ganska okomplicerad. Om han testade varje webbläsare kunde en designer bestämma vad han behövde för att fixa så att designen skulle se ut direkt online.

Nu måste designers utforma för en mängd mobila enheter, som alla har sina egna utmärkta behov. Följaktligen har komplexiteten i att utforma visualiseringar ökat.

Omfattande responsiv design

För att hantera problemet med flera skärmstorlekar och operativsystem använder designers principen om responsiv design (RD). RD refererar till ett gränssnitt eller en layout som kan omkonfigurera sig baserat på var den ses. Begreppet skapades av Ethan Marcotte i en artikel i 2010 som erkände behovet av designers att ta itu med frågan om flera skärmkrav.

En webbdesign som är responsiv ser fortfarande bra ut om du tittar på den på din stationära dator eller på din smartphone. De rundade kanterna och ikonerna som är vanliga på mindre enheter faller automatiskt på plats.

I sin artikel citerade Marcotte de tre områden där RD kan ha störst effekt i webbdesign:

• Vätskegrid: Nätet är det verktyg som designers använder för att utforma sina design, oavsett om de mönster kommer att ses online eller offline. I den följande figuren har en nätdesign konstruerats för tre skärmformer.

  

  Grid-design översatt till olika skärmar.

• Flexibla bilder: När du har bilder i ett blogginlägg eller på din webbplats vill du se till att de inte är avskurna eller snedvridna. Att se till att dina bilder kan reformera sig är viktigt.

• Mediasökningar: När du anger ett sökord i en sökmotor som Google eller Bing vill du kunna se resultaten på någon av dina skärmar. Detta är en nyckelprincip för RD. Innehållet måste ses på vilken mobil enhet en användare kan ha. Vad som gör att det visas på en rad olika enheter är en utmaning att designern inte har något att veta vad det återkomna resultatet kommer att bli.

Dessa idéer gäller även datavisualiseringar. Du vill se till att ditt nät inte snedvrids när data visas på en mobilenhet. Bilderna måste vara klara och bildförhållandet (längd till bredd) ska anpassas oberoende av vilken enhet användaren arbetar med.

Följande appdesignstandarder

Designers vill inte bara att ett gränssnitt ser bra ut, men vill också att det ska göra alla slags knep. Som ett resultat har appdesign blivit en disciplin för sig själv.

Du kanske undrar varför du bör bry dig om appdesign. Alla som måste visualisera någonting online är föremål för samma standarder som alla appdesigner.

I sin artikel "Apples 6 enkla regler för att designa en Killer iOS App" beskriver Pete Pachal vad han behövde göra för att få sin nyhets app Spun certifierad för Apples App Store. (I det här skrivandet är appen inte tillgänglig i USA App Store.) Pachals team var tvungen att arbeta med Apple i fem månader för att få allt perfekt. Under den tiden kodifierade Pachal sex regler för sitt lag, varav fyra gäller data med design:

• Enkelhet är styrka. Denna regel är förmodligen den viktigaste regeln för datavisualiseringar. Målet är att förklara eller avslöja ny information som kan användas för att utveckla insikter. Om du fokuserar på för många datapunkter kommer historien att gå vilse. Om du skapar en instrumentpanel är den här regeln särskilt viktig eftersom varje del av data behöver stödja hela.

• Offra inte kvalitet för tiden. Denna regel är viktig för datavisualisering. Om du slår samman en visualisering som är svår att dechiffrera eller helt enkelt slarvig, kommer ingen att vilja använda den. Ta dig tid att utveckla något bra, och fortsätt att förfina det med tiden.

• Belöna användaren med varje touch. Varje menyobjekt ska göra något användbart. Skriv ut länken ska fungera, till exempel. Varje klick ska också ge information.

• Detaljer sak. Innan användaren klickar på en länk i en datavisualisering ska det vara uppenbart var den länken kommer att ta henne eller vilken typ av data hon ska se.