Grafik

Data Driven Design En Enkel Primer

Webapprogram blir allt vanligare på internet. Vissa kan hävda att de är helt enkelt mer komplicerade webbplatser. Oavsett definitionen; vad händer när du utformar för stora mängder av ständigt fluktuerade data?

Det finns några exempel på datadriven gränssnitt och alla måste hantera en mängd olika data som ständigt förändras. De vanligaste är adminområden och analytiska instrumentpaneler. Uppgifterna kan ta många former; grafer, diagram, tabeller eller text. Var och en kan visas på olika sätt beroende på sammanhanget och vad du försöker förmedla med data. En sak att komma ihåg är att du sällan kan vara säker på längden eller belopp av data du behöver tillgodose så tänk enkelt att börja?

Konsistens och förutsägbarhet

En av de viktigaste aspekterna av att utforma kraftigt datadriven gränssnitt är att göra dem konsekventa. Konsistens tillåter användare att bekanta sig med ett område av ett gränssnitt och kunna använda något annat område helt enkelt genom scheman som skapats med föregående område. Så här gör du ett gränssnitt förutsägbart; spela på befintliga mentalmodeller och lärt beteende.

För att göra områdena konsekvent måste du förstå det bredare sammanhanget i gränssnittet och se hur bra dina första gränssnittsidéer kan hålla upp till granskningen av olika data.

Till exempel: En tabell kanske inte behöver filtreras eller sorteras i en vy - men vad händer när du presenteras med en annan tabell i ett annat område? Kan du använda samma gränssnitt som du just skapat om den andra tabellen behöver filtreras och har höjdpunkter som kräver en nyckel eller en legend?

Konsistens handlar om att låta designen anpassas retroaktivt, baserat på din ökande kunskap om komplexiteten. Därför är det bäst att börja med lo-fi-prototyper och testa dina idéer med kantfall (saker som inte kommer att hända mycket ofta men det kan bryta designen).

Ska bordsmönstret användas i andra områden som kan ha extra funktioner? Om de flesta tabeller behöver sorteras ska du designa med det i åtanke. Målet är inte att "skruva på" någonting på en befintlig komponent så att den känns ostörd. Det är lättare att ta bort en knapp från en verktygsfält än för att räkna ut hur man införlivar den utan en verktygsfält.

Återställbara mönster, stater och komponenter

För att göra konsekvensen verklighet måste du bygga smart. Om du inte utformar för varje enskild vy, kan du istället producera en uppsättning regler som kan tillämpas på några se. En färg-vid-nummer om du vill. Detta gör det möjligt för din klient eller andra designers att snabbt montera nya sidor eller layouter med "minimalt".

Mönster

Ett mönster är en liten uppsättning av element som går ihop. Det här kan vara en del av en verktygsfält, eller kanske en uppsättning betygsknappar, och är vanligtvis ett sätt att organisera ansluten information. En etikett och en ingång skulle också vara ett mönster inom en form.

Nedan följer några grupper av mönster från Google-produkter:

  • Sortera rullgardinsmenyn
  • Vänster och höger navigering
  • Datumintervallväljare
  • Checkbox Dropdown

Mönstren är från olika produkter men är konsekventa och så förutsägbara för användarna. Tillsammans bildar de verktygsfältets komponent.

stater

Mönster kan ha olika olika visuella utseende beroende på en viss uppsättning omständigheter. Kanske är det ett fel, en knapp är inaktiverad eller en graf har ingen data. Varje måste beaktas. Vanligtvis faller de i följande kategorier (vissa du kommer att känna igen från olika CSS pseudo-selektorer):

  • Standard
  • Sväva
  • Aktiva
  • Fokus
  • Fel
  • Inaktiverad
  • Tömma

Komponenter

En komponent är större och kan innehålla flera mönster eller till och med flera komponenter. Vid konstruktion för kraftigt datastyrda webbplatser är målet att tillhandahålla en uppsättning flexibla komponenter bestående av återanvändbara mönster. Nedan finns en för http://phosho.co på små skärmar:

Arbeta från en befintlig produkt

Om du arbetar från en befintlig produkt och är begränsad av befintliga användarflöden (och i vissa fall layouten) behöver du göra en "mallrevision". Skriv ut några viktiga användarflöden och ta en skärmdump för varje steg.

  • På en Mac trycker du bara påKommando-skift-3för att spara den aktuella skärmen till skrivbordet.
  • På datorn kan du använda något som heter Problemstegsinspelare för att spela in dina steg i en. Mht-fil. Du kan sedan spara bilderna ur den filen. Det finns en utmärkt handledning här.

När du har slutfört ett användarflöde lägg till skärmdumparna i en mapp som beskriver användarflödet, till exempel "lägg till ny post". Skriv sedan ut dem. Allt. Det finns något att säga för att ha varje skärm involverad i ett användarflöde framför dig. Du kan enkelt hitta likheter och skillnader.

Idén om en mallrevision är att förstå hur många mallar det finns, hur många mönster som finns på varje mall (och vilket tillstånd de är i). Det bästa sättet att göra detta är att stifta dem på väggen i ett rutnät och tilldela ett brev till kolumnerna och ett nummer för raderna (eller vad du är bekväm med). Detta fungerar som en referens när du skriver ned varje komponent.

Till exempel kan du ha:

  • Tabellrubrik (A2)
  • Bordskropp (A2)
  • Tabellfot (A2)
  • Sidomycke - Stängt (A1)
  • Sidan Meny - Öppna (B1)
  • Kalender (C3)
  • Kalender - Inaktiverad (C4)

Det här låter dig lista alla de mönster som finns, men också hänvisa till dem så att du snabbt kan se hur de ser ut. Ett sätt att testa om du har listat alla mönster och komponenter är att välja en mall och se om du kan återskapa den från listan över mönster och komponenter du just har gjort. Om du stöter på något som inte finns på listan lägg till den.

Arbeta från början

När du arbetar från grunden har du friheten att skapa några mönster du gillar, men du kan också vara mycket svårare eftersom du inte har något att gå på i början. Som tidigare sagt Vid utformning av återanvändbara komponenter bör du starta lo-fi med skisser. De behöver inte vara fantastiska men de är snabba och låter dig enkelt utforska olika alternativ utan att bli omhändertagen i detalj som så ofta händer i Illustrator eller Photoshop.

  1. Skapa ett flöde för en uppgift Det måste fyllas i och lista ner innehållet som kan finnas med på sidan.
  2. Skissa ut några olika riktningar och idéer. Desto mer desto bättre. Då kan du börja se om det finns överlappningar med innehållet och hur det kan vara möjligt att lägga ut det.
  3. Förfina dem in i wireframes och bedöma om det finns några områden som har liknande funktioner men olika lösningar. Tänk på hur de kan kombineras för att skapa ett mer konsekvent gränssnitt. Vad är de mönster du använder?
  4. Ta sönder det.嚙 瘩 medvetet lägger djävulens förespråkare och ser vad du behöver göra för att bryta gränssnittet. Bestäm om huruvida det är troligt att brytandet kommer att hända och om det är värt att ta itu med.

Ikonografi

Ikonografi är ett sätt att förstå innebörden av innehållet med hjälp av en bild. Det finns fall där texten är bättre än en ikon; vanligtvis när konceptet är abstrakt och har låga kostnader. Inte varje åtgärd behöver en ikon.

Om du är orolig att användare inte kommer att kunna förstå en ikon. Du är förmodligen höger. Ett snabbt sätt att testa det är att isolera ikonen och fråga folk vad de tycker det gör. Om de har flera gissningar och ingen av dem är fjärrkontakt kan du få problem. Sätta ikonen i sammanhang och upprepa processen. Om kontextens rådighet förstärker den korrekta användningen av ikonen (dvs människor kan gissa vad det gör från sin position på gränssnittet) är det troligen ok. Om folk fortfarande inte kan gissa, överväg då att byta ikon eller lägga till någon medföljande text eller mikrokopi.

Progressiv minskning

Det finns ett intressant begrepp som kallas progressiv minskning som kan tillämpas under omständigheter där du vill träna användare att en ovanlig ikon hänför sig till en specifik åtgärd. Genom att börja med en ikon åtföljd av text (för att göra det uppenbart vid första användningen) och gradvis förenkla gränssnittet ju mer det används, börjar användarna att associera ikonen med en åtgärd som skulle vara omöjlig att gissa genom att bara använda ikonen ensam.

resultat

Nu när du har skapat några raffinerade trådramar som uttrycker viktiga användarflöden, som omfattar en massa återanvändbara mönster och komponenter. vad visar du klienten?

Det finns ett antal försiktighetsåtgärder som kan påverka vad du levererar, till exempel om du gör HTML / CSS / JS själv, eller om det hanteras av en tredje part. I båda fallen, för att säkerställa designens livslängd och ännu viktigare konsistensen när fler funktioner rullas ut behöver du någon form av referens eller guide som någon kan se och (och till och med uppdatera) som ligger till grund för alla framtida beslut om gränssnittet.

Diskhon

Kökshandfatet är HTML / CSS och ibland JS som visar alla olika komponenter och mönster på en enda sida, så att ingenting bryts (design eller kodvis) när de läggs i olika beställningar. I sin enklaste form är det bara inbyggda HTML-element som säkerställer att grunderna är täckta.

  • HTML Kökshandfat 嚙 箭 y 嚙 瞑 aul Randell
  • Pattern Primer 嚙 箭 y Jeremy Keith

UI-kits

Användargränssnittet är vanligtvis statiska PSD och innehåller stiliserade versioner av grundläggande html-element. De innehåller vanligtvis knappar, ingångar, välj rutor samt reglaget och datumpickers. Vissa kan vara mycket omfattande och levereras vanligtvis när byggprocessen kommer att genomföras av en tredje part. De hindrar dig från att behöva producera en mockup av varje skärm i varje stat.

  • Dribbble UI-kits
  • Genomskinligt UI-paket 嚙 箭 y Victor Erixon
  • Rengör användargränssnittet 嚙 箭 y Matt Gentile
  • Silky Light UI 嚙箭 Ok Okidoci

Visual Style Guide

Visuella stilguider går mycket längre än bara visuella referenser till en design. De är instruktionella och innehåller ofta riktlinjer för när och var mönster och komponenter ska visas och i vilket tillstånd. De produceras bäst i kod och kan uppdateras när tiden går vidare.

Nyckeln till konsistens och hållbarhet i en expanderande, kraftigt datadriven produkt har en utgångspunkt från vilken alla designbeslut stämmer. Att ha en "huvudkopia" och en uppsättning enkla att följa regler innebär att vem som helst kan bygga (nästan) vad som helst och passa in i den befintliga designen.

När du stöter på något som inte är inkluderat i stilguiden kan du skapa en lösning på ditt problem och lägga till ytterligare element, mönster eller hela komponenter med det med några instruktioner som gör det tillgängligt för alla.

Stilguider är evolutionära och är aldrig färdiga. Då behöver behållas dock. Om inte så gradvis kommer folk att sluta använda det eftersom det blir föråldrat och det är då produkterna börjar diverga.

  • Twitter Bootstrap
  • Google Styleguide
  • Paul Robert Lloyd Styleguide
  • BBC Global Experience Language
  • Riktlinjer för Apple Human Interface

Kom ihåg det du ställer dina kunders förväntningar. Om du säger att du ska leverera pixel perfekt mockups så är det vad de ska förvänta sig.

Slutsats

Användarna är uppgiftsfokuserade och är ofta på "kortaste väg till färdigställande" vilket innebär att du måste designa för dem att fullfölja sin uppgift på bästa möjliga sätt med minimala upphetsningar.Återställbara mönster snabbare upp processen genom att tillåta användare att använda det som har lärt sig från en aspekt av gränssnittet och tillämpa det på en annan. De blir fort när de fullgör nya uppgifter eftersom de är mer övertygade om sina handlingar.

Ett försiktighetsord, så att du inte får sopa upp gränssnittets utseende istället för funktionen. Det sätt som något ser ut är det sista som användarna bryr sig om. Så innan du rusar in i Photoshop, kom ihåg det först och främst; Användarna bryr sig om något Arbetar. Konsistens och förutsägbarhet har en stor roll att spela i detta.

Ytterligare läsning

artiklar

  • Front End Styleguides by Anna Debenham
  • CSS Systems by Natalie Downe
  • Designa för en hierarki av behov "av Steven Bradley

Medel

  • Pattern Tap
  • Tomma stater
  • Patternry
  • UI-mönster
  • PTTRNS
  • Element av Design Gallery