Дизайн будівельних блоків: модульна стратегія дизайну для UXers

Стаття, яка допомагає заповнити прогалини модульних моделей дизайну з точки зору UX.

Почну з історії

Якщо ви ненавидите історії, вам слід пропустити цю частину. Йдеться про UX-дизайнера, якому було доручено розробити модульну стратегію дизайну своєї організації. У неї коротке каштанове волосся і блакитні очі. Якщо ви до цього часу не здогадувались, то дизайнером UX є я.

Близько восьми місяців тому наша команда взяла участь у розробці модульної стратегії дизайну під назвою об'єктно-орієнтований UX (OOUX). На відміну від інших широкомасштабних модульних систем, OOUX просить вас зосередитись на модуляції основних типів вмісту - те, що OOUX називає об'єкти - і уважно поставитися до того, як ці об'єкти ставляться один до одного. Цей процес допомагає команді дизайнерів розкрити притаманні екземпляри контекстної навігації та просуватися до послідовних модулів інтерфейсу користувача.

Ну ... це чудово підходить для проектування інформаційних архітектур та бібліотек шаблонів, але що стосується проектування досвіду. Зрештою, мобілізація вашого вмісту - це лише половина битви. Якщо ви будете на перших лініях UX, ви повинні запитати, чому і як.

Чому і як

Ви можете сказати собі: "Не кажи мені про те, чому і як!" Я дослідник UX! Я їмо, чому і як на сніданок ". Тож дозвольте мені пояснити.

Я не говорю про стратегію на рівні функцій. Я не говорю про потоки процесів, каркаси та прототипи. Я говорю про стратегію на рівні додатків. Знаєте, те, що ми завжди повинні робити, але чомусь ніколи не встигаємо? І я говорю про те, щоб зробити це невід’ємною частиною нашого підходу до інших наших стратегій, таких як модульний дизайн.

Щоб дати вам трохи більше контексту, поговоримо на прикладі. Скажімо, ми розробляємо додаток для знайомств, де одним із основних фрагментів вмісту є профіль. За допомогою модульного дизайну ми б запитали: "де цей вміст може з’являтися в інтерфейсі користувача?" Можливо, ми створили б профіль, який може відображатися у списку, або профіль, який займає весь екран. Інформаційна архітектура. Візерунки. Перевірити, перевірити.

Стиль профілю

Але тепер, коли ми вирішили, що, що відбувається, коли ми неминуче усвідомлюємо, що нам потрібно задуматися, чому хтось хоче бачити певний профіль в першу чергу? І як би виглядав цей профіль для цієї людини? Чи реалізовуємо ці стратегії після факту і сподіваємось, що нічого не зламається?

Я сподіваюсь, що ти там хитаєш головами, тому що відповідь - це "не".

Замість того, щоб спершу стрибати головою в розробці наших модулів, ми повинні створити стратегічну основу, яка може допомогти спрямувати наші проектні зусилля з будь-якого кута. Замість того, щоб визначати обличчя нашого вмісту - те, що з’являється в інтерфейсі користувача, ми повинні почати з визначення того, як і чому цей вміст підтримує цей вміст. Це називається конструкцією будівельного блоку.

Введіть дизайн будівельного блоку

Замість того, щоб просити вас подумати над змістом модулів спочатку, як і інші моделі, дизайн будівельного блоку просить зосередитися на стратегії, що стоїть за цим вмістом.

У дизайні будівельних блоків нехай стратегія забезпечує основу для проектування; не навпаки.

Лише після того, як ви визначили основні стратегії UX - фрейм, який підтримує ваш вміст, ви можете почати розробляти, як цей контент буде представлений в інтерфейсі. Стратегія «великої картини» для кожного фрагмента основного вмісту є вашим будівельним елементом. Разом ваші будівельні блоки визначають UX вашого продукту.

Дизайн будівельного блоку - це модульна конструкція для UXers.

Анатомія будівельного блоку

Щоб краще зрозуміти такий підхід до створення змістовного, структурованого контенту, повернемося до прикладу програми знайомств. Тепер, коли я визначив частину основного вмісту в моїй програмі - профіль - настав час розібратися і визначити, які стратегії потенційно можуть впливати на те, як цей блок розроблений. Досліджуючи взаємозв’язок між іншими стратегічними ініціативами та нашим вмістом, ми можемо критичніше задуматися над тим, як підходити до розробки та надання цієї інформації.

Анатомія профільного блоку починає формуватися.

Досліджуючи взаємозв'язки між стратегіями на рівні додатків, найкраще починати з високого рівня та рухатися вниз. Наприклад, якщо я визначив персони як основний компонент своєї стратегії, я міг би розбити цю стратегію далі, визначивши:

  • конкретні персони, які взаємодіють з профілями;
  • де в додатку вони взаємодіють із цим вмістом;
  • їх контекст використання;
  • основні дії, які вони здійснюють у профілях;
  • і як часто вони отримують доступ до цього вмісту.

Це може виглядати приблизно так:

Персонально-профільний зв’язок забезпечує більше контексту для того, як виглядає обличчя мого профільного блоку.

Після того, як я даю трохи більше контексту, чому цей вміст є цінним для певного типу користувачів, я можу почати критичніше думати про те, які дії потрібно надати пріоритет, як модуль повинен бути структурований для просування конкретних персонажів поведінкових моделей, і де в досвіді цей контент потрібно доставити.

Ця методика дозволяє дизайнерам зосередитись на важливих матеріалах, а не захоплюватися візуальною привабливістю, спокушанням взаємодії та іншими моделями дизайну інтерфейсу, які виглядають добре, але не підтримують фактичну поведінку користувача.

Якщо я повторю цю вправу з точки зору другої стратегічної ініціативи, буде отримано додаткове розуміння. Залежно від кількості та складності стратегічних ініціатив, які у вас є, це швидко може стати процесом, що займає багато часу. Я рекомендую починати не більше ніж з двох стратегій.

Так ось у вас це є. Приклад того, як змочити ноги за допомогою конструкції будівельного блоку. Якщо ви думаєте, що це буде корисним вправою для вашої команди дизайнерів, ознайомтеся з Керівництвом для швидкого початку нижче для отримання додаткових порад. І, звичайно, я хотів би почути ваші думки про все, що модулюється. Додайте свої коментарі нижче або зверніться до LinkedIn.

Короткий посібник

Я виявив, що багато модельних дизайнерських моделей там просто не дають читачам придатних для виконання завдань, тож дозвольте мені зробити точку подання цієї цінної інформації:

Крок №1: Стратегічний інвентар.

Ми робимо вміст та складові запаси, то чому б не інвентаризацію стратегії? Складіть список усіх ваших стратегій на рівні додатків. Приклади включають: персони, дані, контекст використання та дизайн середовища оточення людини, чуйність та ін. Це хороша можливість зробити паузу і запитати «чи є у нас міцна стратегія для нашої програми?» Якщо відповідь «ні», настав час приступити до роботи.

Для цього: учасники команди з'їзду самостійно створюють власні запаси стратегії.

Крок №2: Визначте основний вміст.

Це те, що ваші користувачі вживають у вашій програмі. Щоб розібратися в цьому, відключіть деякий час на сеанс мозкового штурму зі своєю командою. Задайте собі запитання на кшталт: «що шукають мої користувачі? Переглянути? Завантажте? ”Після того, як ви виявите фрагмент основного вмісту, напишіть його на аркуші паперу і повісьте на стіну.

Для цього: проведіть початковий сеанс мозкового штурму зі своєю командою.

Крок №3: Визначте, як і чому.

Тепер, коли ви визначили свої стратегії на рівні додатків та основний вміст, настав час їх об’єднати! Поверніться до кімнати мозкового штурму для подальшої зустрічі та переконайтесь, що ваша команда приносить свої стратегічні описи. У цій частині процесу запропонуйте стратегію своєї команди розмістити пост-примітку до будь-якого основного вмісту, де ця стратегія може мати вплив.

Для цього: Проведіть наступну сесію мозкового штурму зі своєю командою.

Крок №4: Анатомія будівельного блоку.

Настав час розділити і перемогти. Призначте членам команди кілька основних типів контенту - або будівельних блоків - і попросіть їх повторити анатомію цього вмісту.

Для цього: призначте кожному члену команди кілька типів вмісту. Цей член команди повинен визначити анатомію цього змісту.

Крок №5: Вирівняйте, вирівняйте, вирівняйте

Як завершальний крок, зберіть банду разом у вигляді викладеної презентації, де кожен член команди представляє анатомію своїх будівельних блоків. Економте час в кінці запитань, вирівнювання та вирішення наступних кроків щодо керування окремими стратегічними компонентами кожного будівельного блоку.

Щоб зробити: Заплануйте час, щоб члени команди представили свою анатомію будівельного блоку.

Ця стаття донесена вами RUXERS. RUXERS - це спільнота лідерів реального користувацького досвіду, які діляться та обговорюють найновіші у дизайні, досвіді користувача, зручності використання та дослідженнях. Ми у Twitter - приєднуйтесь!