Bouwsteenontwerp: een modulaire ontwerpstrategie voor UXers

Een artikel dat helpt om de gaten van modulaire ontwerpmodellen te vullen vanuit een UX-perspectief.

Ik zal beginnen met een verhaal

Als je verhalen haat, moet je dit deel overslaan. Het gaat om een ​​UX-ontwerper die de taak had om een ​​modulaire ontwerpstrategie voor haar organisatie te verdedigen. Ze heeft kort bruin haar en blauwe ogen. Als je het nu nog niet hebt geraden, ben ik die UX-ontwerper.

Ongeveer acht maanden geleden raakte ons team een ​​modulaire ontwerpstrategie genaamd object-georiënteerde UX (OOUX). In tegenstelling tot andere breed ingrijpende modulaire systemen, vraagt ​​OOUX u zich te concentreren op het modulariseren van uw kerninhoudstypes - wat OOUX objecten noemt - en goed te kijken hoe deze objecten zich tot elkaar verhouden. Dit proces helpt het ontwerpteam om inherente voorbeelden van contextuele navigatie aan het licht te brengen en te streven naar consistente UI-modules.

Nou ... dat is geweldig voor het ontwerpen van informatiearchitecturen en patroonbibliotheken, maar hoe zit het met het ontwerpen van ervaringen. Het mobiliseren van uw inhoud is immers slechts het halve werk. Als je in de frontlinie van UX gaat staan, moet je vragen waarom en hoe.

Het waarom en het hoe

Je zou tegen jezelf kunnen zeggen: “vertel me niet waarom en hoe! Ik ben een UX-onderzoeker, dang nabbit! Ik eet waarom en hoe als ontbijt. ”Dus laat het me uitleggen.

Ik heb het niet over strategie op functieniveau. Ik heb het niet over processtromen, wireframes en prototypes. Ik heb het over applicatieniveau-strategie. Weet je wat we altijd zouden moeten doen, maar waar we op een of andere manier nooit tijd voor hebben? En ik heb het erover om het een integraal onderdeel te maken van onze benadering van onze andere strategieën, zoals modulair ontwerp.

Laten we een voorbeeld doornemen om u wat meer context te geven. Laten we zeggen dat we een dating-app ontwerpen waarbij een van de kerninhoud een profiel is. Met modulair ontwerp zouden we vragen: "waar zou deze inhoud in de gebruikersinterface verschijnen?" - en op basis van ons antwoord zouden we modules ontwerpen voor elk van die scenario's. Misschien zouden we een profiel ontwerpen dat kan worden weergegeven in een lijst of een profiel dat de hele weergave in beslag neemt. Informatie-architectuur. Patronen. Check check.

Een

Maar nu we hebben besloten wat, wat gebeurt er als we ons onvermijdelijk realiseren dat we moeten nadenken over waarom iemand in de eerste plaats een bepaald profiel wil zien? En hoe dat profiel eruit zou zien voor die persoon? Implementeren we die strategieën achteraf en hopen we dat er niets breekt?

Ik hoop dat je je hoofd schudt, want het antwoord is volmondig nee.

In plaats van eerst het hoofd te springen bij het ontwerpen van onze modules, moeten we een strategisch kader bouwen dat onze ontwerpinspanningen vanuit elke invalshoek kan ondersteunen. In plaats van het gezicht van onze inhoud te definiëren - de dingen die in de gebruikersinterface verschijnen - moeten we beginnen met het definiëren van het hoe en waarom dat die inhoud ondersteunen. Dit wordt bouwsteenontwerp genoemd.

Voer bouwsteenontwerp in

In plaats van u te vragen eerst na te denken over de inhoud van uw modules, zoals bij andere modellen, vraagt ​​het bouwblokontwerp u om u in plaats daarvan te concentreren op de strategie achter die inhoud.

Laat strategie bij het ontwerpen van bouwstenen het raamwerk vormen voor ontwerp; niet andersom.

Pas nadat u uw kern UX-strategieën hebt gedefinieerd - het frame dat uw inhoud ondersteunt - kunt u beginnen met het ontwerpen van hoe die inhoud in de interface wordt weergegeven. De "grote afbeelding" -strategie voor elk deel van de kerninhoud is uw bouwsteen. Samen bepalen uw bouwstenen de UX van uw product.

Bouwsteenontwerp is modulair ontwerp voor UXers.

Bouwsteen anatomie

Laten we teruggaan naar het voorbeeld van de dating-app om deze benadering voor het maken van betekenisvolle, gestructureerde inhoud beter te begrijpen. Nu ik een deel van de kerninhoud in mijn toepassing heb geïdentificeerd - een profiel - is het tijd om door te nemen en te identificeren welke strategieën mogelijk van invloed kunnen zijn op hoe dit blok is ontworpen. Door de relatie tussen andere strategische initiatieven en onze inhoud te onderzoeken, kunnen we kritischer nadenken over hoe we het ontwerp en de levering van deze informatie benaderen.

De anatomie van het profielblok begint vorm te krijgen.

Wanneer u relaties tussen strategieën op applicatieniveau onderzoekt, is het het beste om op een hoog niveau te beginnen en naar beneden te werken. Als ik bijvoorbeeld persona's identificeerde als een hoofdcomponent van mijn strategie, zou ik deze strategie verder kunnen uitsplitsen door te identificeren:

  • de specifieke persona's die zich bezighouden met profielen;
  • waar ze in de app omgaan met deze inhoud;
  • hun gebruikscontext;
  • de kernacties die zij op profielen ondernemen;
  • en hoe vaak ze toegang hebben tot deze inhoud.

Het ziet er ongeveer zo uit:

De persona-profielrelatie biedt meer context voor hoe het gezicht van mijn profielblok eruit ziet en voelt.

Zodra ik wat meer context heb gegeven waarom deze inhoud waardevol is voor een specifiek type gebruiker, kan ik kritischer gaan nadenken over welke acties prioriteit moeten krijgen, hoe de module moet worden gestructureerd om persona-specifieke gedragspatronen te promoten, en waar in de ervaring deze inhoud moet worden geleverd.

Met deze techniek kunnen ontwerpers zich concentreren op de dingen die ertoe doen en niet verstrikt raken in visuele aantrekkingskracht, interactieverleiding en andere interface-ontwerppatronen die er goed uitzien, maar geen daadwerkelijk gebruikersgedrag ondersteunen.

Als ik deze oefening herhaal in termen van een tweede strategisch initiatief, zullen extra inzichten worden verkregen. Afhankelijk van het aantal en de complexiteit van strategische initiatieven die u heeft, kan dit snel een tijdrovend proces worden. Ik raad aan om met niet meer dan twee strategieën te beginnen.

Dus daar heb je het. Een voorbeeld van hoe u uw voeten nat kunt maken met het bouwblokontwerp. Als u denkt dat dit een nuttige oefening voor uw ontwerpteam zou zijn, bekijk dan de snelstartgids hieronder voor enkele aanvullende tips. En natuurlijk hoor ik graag je mening over alle dingen die modulair zijn. Voeg hieronder uw opmerkingen toe of neem contact op met LinkedIn.

Snelstartgids

Ik heb gemerkt dat veel modulaire ontwerpmodellen plat vallen op het geven van bruikbare taken aan hun lezers, dus laat me een punt maken van het verstrekken van dat waardevolle stukje informatie:

Stap # 1: Strategie-inventaris.

We doen inhouds- en componentinventarissen, dus waarom geen strategie-inventaris? Maak een lijst van alle strategieën op applicatieniveau die u heeft. Voorbeelden zijn: persona's, gegevens, gebruikscontext en ontwerp van de menselijke omgeving, reactievermogen, enz. Dit is een goede gelegenheid om te pauzeren en te vragen "hebben we een solide strategie voor onze toepassing?" Als het antwoord nee is, is het tijd aan het werk gaan.

Om te doen: Rally teamleden om onafhankelijk hun eigen strategie-inventarissen te maken.

Stap # 2: Definieer uw kerninhoud.

Dit zijn de dingen waarop uw gebruikers acties ondernemen in uw toepassing. Om dit uit te zoeken, moet je wat tijd vrijmaken voor een brainstormsessie met je team. Stel jezelf vragen als: "Waar zoeken mijn gebruikers naar? Uitzicht? Downloaden? ”Zodra u een stuk kerninhoud hebt geïdentificeerd, schrijft u het op een stuk papier en hangt u het aan een muur.

Om dit te doen: Houd een eerste brainstormsessie met uw team.

Stap # 3: Definieer het hoe en waarom.

Nu u uw applicatieniveau-strategieën en kerninhoud hebt geïdentificeerd, is het tijd om de twee samen te brengen! Ga terug naar uw brainstormruimte voor een vervolgvergadering en zorg ervoor dat uw team hun strategie-inventarissen meeneemt. Laat voor dit deel van het proces uw team post-it notities over de kerninhoud plaatsen waar die strategie van invloed kan zijn.

Om dit te doen: Houd een follow-up brainstormsessie met uw team.

Stap # 4: De anatomie van een bouwsteen.

Het is tijd om te verdelen en te veroveren. Wijs teamleden een handvol kerninhoudstypen - of bouwstenen - toe en laat ze de anatomie van deze inhoud herhalen.

Om dit te doen: wijs elk teamlid verschillende inhoudstypes toe. Dat teamlid moet de anatomie van die inhoud definiëren.

Stap # 5: Uitlijnen, uitlijnen, uitlijnen

Als laatste stap brengt u de bende weer bij elkaar in de vorm van een ingehouden presentatie waarbij elk teamlid de anatomie van hun bouwstenen presenteert. Bespaar aan het einde tijd voor vragen, afstemming en beslissingen over de volgende stappen voor het aansturen van de individuele strategische componenten van elke bouwsteen.

Om dit te doen: Plan een tijd in voor teamleden om hun bouwsteenanatomie te presenteren.

Dit artikel wordt u aangeboden door RUXERS. RUXERS is een community van leiders van echte gebruikerservaringen die de nieuwste ontwerpen, gebruikerservaring, bruikbaarheid en onderzoek delen en bespreken. We zijn op Twitter - doe mee!