Byggestenes design: en modulær designstrategi for UXere

En artikel, der hjælper med at udfylde hullerne i modulære designmodeller fra et UX-perspektiv.

Jeg starter med en historie

Hvis du hader historier, skal du springe over denne del. Det handler om en UX-designer, der fik til opgave at forkæmpe en modulær designstrategi til hendes organisation. Hun har kort brunt hår og blå øjne. Hvis du ikke har gættet på nu, er den UX-designer mig.

For omkring otte måneder siden var vores hold sammen om en modulær designstrategi kaldet objektorienteret UX (OOUX). I modsætning til andre bredt fejende modulære systemer, beder OOUX dig om at fokusere på at modularisere dine kerneindholdstyper - hvad OOUX kalder objekter - og se hårdt på, hvordan disse objekter forholder sig til hinanden. Denne proces hjælper designteamet med at afsløre iboende forekomster af kontekstnavigation og skubbe mod konsistente UI-moduler.

Nå, det er fantastisk til at designe informationsarkitekturer og mønsterbiblioteker, men hvad med at designe oplevelser. Når alt kommer til alt er mobilisering af dit indhold kun halvdelen af ​​slaget. Hvis du vil være på frontlinjen af ​​UX, skal du spørge hvorfor og hvordan.

Hvorfor og hvordan

Du siger måske til dig selv: ”fortæl mig ikke om hvorfor og hvordan! Jeg er UX-forsker, dabb nabbit! Jeg spiser hvorfor og hvordan til morgenmad. ”Så lad mig forklare.

Jeg taler ikke om strategi på funktionsniveau. Jeg taler ikke om processtrømme, wireframes og prototyper. Jeg taler om strategi på applikationsniveau. Du ved, det, som vi altid skal gøre, men på en eller anden måde aldrig har tid til? Og jeg taler om at gøre det til en integreret del af vores tilgang til vores andre strategier, som modulopbygget design.

For at give dig lidt mere kontekst, lad os tale gennem et eksempel. Lad os sige, at vi designer en dating-app, hvor en af ​​de vigtigste indholdsstoffer er en profil. Med modulopbygget design vil vi spørge: ”hvor kan dette indhold vises i UI?” - og på baggrund af vores svar ville vi designe moduler til hvert af disse scenarier. Måske ville vi designe en profil, der kan vises på en liste eller en profil, der tager hele skærmen. Informationsarkitektur. Mønstre. Tjek, tjek.

En

Men nu, hvor vi har besluttet, hvad, hvad sker der, når vi uundgåeligt indser, at vi er nødt til at tænke over, hvorfor nogen ønsker at se en bestemt profil i første omgang? Og hvordan den profil ville se ud for den person? Implementerer vi disse strategier efter det faktum og håber, at intet går i stykker?

Jeg håber, du ryster på hovedet derude, fordi svaret er et rungende nej.

I stedet for først at springe hovedet med at designe vores moduler, bør vi opbygge en strategisk ramme, der kan hjælpe med at drive vores designindsats fra alle vinkler. I stedet for at definere ansigtet for vores indhold - det, der vises i UI - bør vi starte med at definere, hvordan og hvorfor det understøtter dette indhold. Dette kaldes byggesten design.

Gå ind i byggestenes design

I stedet for at bede dig om at tænke over indholdet i dine moduler først, som andre modeller, beder byggestenes design dig i stedet fokusere på strategien bag dette indhold.

Ved bygningskonstruktion skal lad strategien give rammen for design; ikke omvendt.

Først efter at du har defineret dine centrale UX-strategier - den ramme, der holder dit indhold op - kan du begynde at designe, hvordan indholdet skal repræsenteres i grænsefladen. Den "store billed" -strategi for hvert stykke kerneindhold er din byggesten. Sammen definerer dine byggestener UX for dit produkt.

Byggestenes design er modulopbygget design for UXere.

Byggesten blok anatomi

For bedre at forstå denne tilgang til at skabe meningsfuldt, struktureret indhold, lad os vende tilbage til eksemplet med dating-appen. Nu hvor jeg har identificeret et stykke kerneindhold i min applikation - en profil - er det tid til at gå igennem og identificere, hvilke strategier der potentielt kan have indflydelse på, hvordan denne blok designes. Ved at udforske forholdet mellem andre strategiske initiativer og vores indhold er vi i stand til at tænke mere kritisk over, hvordan vi nærmer os design og levering af denne information.

Profilblokkens anatomi begynder at tage form.

Når du udforsker forholdet mellem strategier på applikationsniveau, er det bedst at starte på et højt niveau og arbejde dig ned. For eksempel, hvis jeg identificerede personas som en hovedkomponent i min strategi, kan jeg muligvis nedbryde denne strategi ved at identificere:

  • de specifikke personas, der beskæftiger sig med profiler;
  • hvor i appen interagerer de med dette indhold;
  • deres kontekst af brug;
  • de centrale handlinger, de udfører på profiler;
  • og hvor ofte de får adgang til dette indhold.

Det ser måske sådan ud:

Personoprofil-forholdet giver mere kontekst for, hvordan ansigtet til min profilblok ser ud og føles.

Når jeg har givet lidt mere kontekst til, hvorfor dette indhold er værdifuldt for en bestemt type bruger, kan jeg begynde at tænke mere kritisk på, hvilke handlinger der skal prioriteres, hvordan modulet skal struktureres for at fremme personspecifikke adfærdsmønstre, og hvor i oplevelsen dette indhold skal leveres.

Denne teknik giver designere mulighed for at fokusere på de ting, der betyder noget, og ikke blive fanget i visuel appel, interaktion forførelse og andre interface design mønstre, der ser godt ud, men ikke understøtter faktisk brugeradfærd.

Hvis jeg gentager denne øvelse i form af et andet strategisk initiativ, opnås yderligere indsigt. Afhængigt af antallet og kompleksiteten af ​​strategiske initiativer, du har på plads, kan dette hurtigt blive en tidskrævende proces. Jeg anbefaler at starte med ikke mere end to strategier.

Så der har du det. Et eksempel på, hvordan man får fødderne våde med konstruktion af byggesten. Hvis du mener, at dette ville være en nyttig øvelse for dit designteam, kan du tjekke hurtigstartguiden herunder for nogle flere tip. Og selvfølgelig ville jeg elske at høre dine tanker om alle ting moduleret. Tilføj dine kommentarer nedenfor eller nå ud på LinkedIn.

Hurtig start guide

Jeg har fundet ud af, at mange modulære designmodeller derude falder fladt på at give deres læsere handlingsmæssige to-doser, så lad mig gøre et punkt med at give det værdifulde stykke information:

Trin 1: Strategiinventar.

Vi laver indhold og komponenter, så hvorfor ikke en strategiinventar? Lav en liste over alle de applikationsniveau-strategier, du har på plads. Eksempler inkluderer: Personas, data, kontekst af brug og menneskeligt miljødesign, lydhørhed osv. Dette er en god mulighed for at sætte pause og spørge "har vi en solid strategi på plads til vores anvendelse?" Hvis svaret er nej, er det tid for at komme på arbejde.

Gør: Rally teammedlemmer til uafhængigt at oprette deres egne strategiinventar.

Trin 2: Definer dit kerneindhold.

Dette er det, dine brugere griber ind i din applikation. For at finde ud af dette skal du blokere noget tid til en brainstorming-session med dit team. Stil dig selv spørgsmål som: “hvad søger mine brugere efter? Udsigt? Download? ”Når du har identificeret et stykke kerneindhold, skal du skrive det på et stykke papir og hænge det på en væg.

Sådan gør du: Hold en indledende brainstorming med dit team.

Trin # 3: Definer hvordan og hvorfor.

Nu hvor du har identificeret dine applikationsstrategier og centrale indhold, er det tid til at samle de to! Vend tilbage til dit brainstormingsrum til et opfølgende møde, og sørg for, at dit team medbringer deres strategiinventar. For din del af processen, skal dit team placere strategien efter det-notater om ethvert kerneindhold, hvor denne strategi kan have indflydelse.

Sådan gør du: Hold en opfølgende brainstorming med dit team.

Trin 4: En byggestenes anatomi.

Det er tid til at opdele og erobre. Tildel teammedlemmer en håndfuld kerneindholdstyper - eller byggesten - og få dem til at gentage anatomi af dette indhold.

Sådan gør du: Tildel hvert teammedlem med flere indholdstyper. Dette teammedlem bør definere anatomi for det indhold.

Trin # 5: Juster, juster, juster

Som et sidste trin, få banden sammen igen i form af en nøglepræsentation, hvor hvert teammedlem præsenterer anatomien for deres byggesten. Spar tid ved afslutningen på spørgsmål, justering og beslutninger om næste trin til kørsel af de individuelle strategiske komponenter i hver byggesten.

At gøre: Planlæg et tidspunkt for teammedlemmerne til at præsentere deres byggesten anatomi.

Denne artikel bringes til dig af RUXERS. RUXERS er et samfund af ægte brugeroplevelsesledere, der deler og diskuterer det nyeste inden for design, brugeroplevelse, brugervenlighed og forskning. Vi er på Twitter - vær med!