Дизайн на изграждащ блок: модулна стратегия за дизайн на UXers

Статия, която помага да се попълнят пропуските на моделните дизайнерски модели от UX гледна точка.

Ще започна с една история

Ако мразите историите, трябва да пропуснете тази част. Става въпрос за UX дизайнер, на когото беше възложена задачата да разработи модулна стратегия за дизайн на своята организация. Има къса кафява коса и сини очи. Ако досега не сте се досетили, че аз съм дизайнер на UX.

Преди около осем месеца нашият екип се обедини върху модулна стратегия за дизайн, наречена обектно-ориентиран UX (OOUX). За разлика от други широкомащабни модулни системи, OOUX ви моли да се съсредоточите върху модулирането на вашите основни типове съдържание - това, което OOUX нарича обекти - и да разгледате здраво как тези обекти се свързват един с друг. Този процес помага на дизайнерския екип да изложи присъщи случаи на контекстуална навигация и да се насочи към последователни модули на потребителския интерфейс.

Е ... това е чудесно за проектиране на информационни архитектури и библиотеки на модели, но какво да кажем за проектирането на опит. В крайна сметка мобилизирането на съдържанието ви е само половината от битката. Ако ще сте на първите линии на UX, трябва да се питате защо и как.

Защо и как

Може би си казвате: „не ми казвайте защо и как! Аз съм UX изследовател! Ям защо и как за закуска. ”Така че нека да обясня.

Не говоря за стратегия на ниво функция. Не говоря за технологични потоци, кадри и прототипи. Говоря за стратегия на ниво приложение. Знаеш ли, нещото, което винаги трябва да правим, но някак си никога нямаме време? И аз говоря за това да го направим неразделна част от нашия подход към другите ни стратегии, като модулен дизайн.

За да ви дадем малко повече контекст, нека поговорим с пример. Да речем, че създаваме приложение за запознанства, където едно от основните части на съдържанието е профил. С модулен дизайн бихме задали въпроса: „къде би могло да се покаже това съдържание в потребителския интерфейс?“ - и въз основа на нашия отговор ние бихме проектирали модули за всеки от тези сценарии. Може би бихме проектирали профил, който може да бъде показан в списък или профил, който заема целия дисплей. Информационна архитектура. Шарки. Проверете, проверете.

„Този“ и „онзи“ стил на профил

Но сега, когато решихме какво, какво се случва, когато неизбежно осъзнаем, че трябва да помислим защо някой иска да види конкретен профил на първо място? И как ще изглежда този профил за този човек? Прилагаме ли тези стратегии след факта и се надяваме, че нищо не се нарушава?

Надявам се, че клатите глава там, защото отговорът е оскъден „не“.

Вместо да подскачаме главата първо в проектирането на нашите модули, трябва да изградим стратегическа рамка, която може да помогне да насочим нашите дизайнерски усилия от всеки ъгъл. Вместо да определяме лицето на нашето съдържание - нещата, които се появяват в потребителския интерфейс - трябва да започнем с дефинирането на това как и защо поддържат това съдържание. Това се нарича дизайн на строителни блокове.

Въведете дизайн на строителния блок

Вместо да ви помоля да помислите първо за съдържанието на вашите модули, подобно на други модели, дизайнът на изграждащ блок ви моли да се съсредоточите вместо върху стратегията зад това съдържание.

При проектирането на строителни блокове нека стратегията предоставя рамката за проектиране; а не обратното.

Едва след като сте определили основните си UX стратегии - рамката, която поддържа съдържанието ви, можете да започнете да проектирате как това съдържание ще бъде представено в интерфейса. Стратегията „голяма картина“ за всяко парче основно съдържание е вашият градивен елемент. Заедно вашите строителни блокове определят UX на вашия продукт.

Дизайнът на строителния блок е модулен дизайн за UXers.

Анатомия на строителния блок

За да разберем по-добре този подход за създаване на смислено, структурирано съдържание, нека се върнем към примера за приложение за запознанства. Сега, когато идентифицирах част от основното съдържание в моето приложение - профил - е време да преминем и да идентифицирам какви стратегии биха могли да повлияят върху това как е проектиран този блок. Изследвайки връзката между други стратегически инициативи и нашето съдържание, ние сме в състояние да мислим по-критично как да подходим към проектирането и предоставянето на тази информация.

Анатомията на профилния блок започва да се оформя.

Когато проучвате връзките между стратегиите на ниво приложение, най-добре е да започнете от високо ниво и да продължите надолу. Например, ако идентифицирах персоните като основен компонент на моята стратегия, бих могъл да я разбия по-нататък, като идентифицирам:

  • специфичните персонажи, които участват с профили;
  • къде в приложението те взаимодействат с това съдържание;
  • техния контекст на използване;
  • основните действия, които предприемат върху профилите;
  • и колко често имат достъп до това съдържание.

Може да изглежда така:

Връзката персона-профил осигурява повече контекст за това как изглежда лицето на блока ми от профили.

След като дам малко повече контекст защо това съдържание е ценно за конкретен тип потребители, мога да започна да мисля по-критично за това какви действия трябва да бъдат приоритетно определени, как модулът трябва да бъде структуриран така, че да насърчава специфичните за персонала модели на поведение, и където в опита това съдържание трябва да бъде доставено.

Тази техника позволява на дизайнерите да се съсредоточат върху нещата, които са от значение, и да не се увличат във визуална привлекателност, прелъстяване на взаимодействието и други модели на дизайн на интерфейса, които изглеждат добре, но не поддържат действителното поведение на потребителя.

Ако повторя това упражнение по отношение на втора стратегическа инициатива, ще се получи допълнителна информация. В зависимост от броя и сложността на стратегическите инициативи, които имате, това бързо може да се превърне в интензивен процес. Препоръчвам да започнете с не повече от две стратегии.

Значи там го имате. Пример как да намокрите краката си с дизайн на строителни блокове. Ако смятате, че това би било полезно упражнение за вашия дизайнерски екип, разгледайте Ръководството за бърз старт по-долу за някои допълнителни съвети. И, разбира се, бих искал да чуя вашите мисли за всичко, модулирано. Добавете коментарите си по-долу или посегнете на LinkedIn.

Ръководство за бързо стартиране

Открих, че много модулни дизайнерски модели навън си позволяват да предоставят на своите читатели възможност за работа, така че позволете да направя точка за предоставянето на тази ценна информация:

Стъпка # 1: Стратегически инвентар.

Ние правим съдържателни и компонентни инвентаризации, така че защо да не опишем стратегия? Направете списък на всички стратегии на ниво приложение, които имате. Примерите включват: Персонажи, данни, контекст на употреба и дизайн на човешката среда, отзивчивост и др. Това е добра възможност да направите пауза и да попитате „имаме ли солидна стратегия за нашето приложение?“ Ако отговорът е „не“, време е да стигнем до работа.

За да направите: Членовете на екипа на рали самостоятелно да създават свои собствени стратегии.

Стъпка # 2: Определете основното си съдържание.

Това са нещата, с които потребителите предприемат действия във вашата кандидатура. За да разберете това, блокирайте известно време за мозъчна атака с вашия екип. Задайте си въпроси като: „какво търсят моите потребители? Преглед? Изтеглете? ”След като идентифицирате парче основно съдържание, напишете го на лист хартия и го окачете на стената.

За да направите: Проведете начална сесия за мозъчна атака с вашия екип.

Стъпка # 3: Определете как и защо.

Сега, когато идентифицирахте стратегиите си на ниво приложение и основното съдържание, е време да ги обединим! Върнете се в стаята си за мозъчна атака за последваща среща и се уверете, че вашият екип представя своите описи на стратегията. В тази част на процеса накарайте стратегията на вашия екип да го публикува след това, да отбележи всяко основно съдържание, където тази стратегия може да окаже влияние.

За да направите: Проведете последваща сесия за мозъчна атака с вашия екип.

Стъпка # 4: Анатомията на градивен елемент.

Време е да се разделим и завладеем Задайте на членовете на екипа шепа основни типове съдържание - или градивни елементи - и ги накарайте да повтарят анатомията на това съдържание.

За да направите: Задайте на всеки член на екипа няколко типа съдържание. Този член на екипа трябва да определи анатомията на това съдържание.

Стъпка # 5: Подравнете, подравнете, подравнете

Като последна стъпка върнете бандата отново под формата на слаба презентация, в която всеки член на екипа представя анатомията на своите градивни елементи. Спестете време в края на въпроси, изравняване и решения за следващите стъпки за задвижване на отделните стратегически компоненти на всеки градивен елемент.

За да направите: Планирайте време за членовете на екипа да представят своята анатомия на строителния блок.

Тази статия ви е предоставена от RUXERS. RUXERS е общност от лидери в реалния потребителски опит, които споделят и обсъждат най-новото в дизайна, потребителското изживяване, използваемостта и изследванията. В Twitter сме - присъединете се към нас!