UX-проектирование

Начало

Не успел оглянуться, а уже подошел к концу блок UX c Антоном Вдовиченко. Было не просто, но на выходе, как мне кажется, мы получили очень ценное пособие по проектированию, за что спасибо Антону.

Что делали

1. Концепция проекта
2. Информационная архитектура проекта
3. Структура проекта
4. Jobs Story
5. Карандашный прототип
6. User Test
7. Карта экранов на ватмане

Зачем столько документов

До этого момента мне казалось, что все эти концепции и прочие бумажки — это чистой воды бюрократия, которая не влияет на содержание проекта и тем более не помогает ему. Видимо, когда ты не понимаешь на хрена все это, так и происходит :).

Но, обо всем по порядку.

1. Концепция

С самого начала блока пришлось очень напрячься, чтобы сформулировать и оформить наши идеи в осмысленные концепции. Конечно к этому моменту у нас уже была продуктовая история, но она давала лишь общее представление об идее, а как подступиться к проектированию было не понятно.

Формулируем концепцию:

• Миссия проекта — одно предложение отражающее ценность продукта
• Цели проекта — четкие и измеримые
• Целевая аудитория — для кого делаем и как будут удовлетворяться их потребности
• Преимущества для ЦА — какие преимущества для пользователя будут в нашем приложении
• Основная функциональность и методы их решения — перечень фич, без которых проект не может существовать. Сортируем по важности.
• Важные ограничения — например делаем только для IOS или работаем только при наличии интернета

Мою концепцию можно посмотреть тут

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

В процессе, могут возникнуть изменения, поэтому важно синхронизировать всю документацию перед передачей в разработку.

2. Информационная архитектура

ИА — робот Палли

Двигаемся вперед по принципу прогрессивного JPG, постепенно получая все более четкую картинку нашего продукта. Архитектура позволяет интерпретировать нашу концепцию в плоскость мобильного приложения, наметить навигацию и ключевые блоки.

Контейнер -> Оъект -> Свойство

Контейнер может содержать объекты и другие контейнеры, и свойства (устройство папок в проводнике или файндере).

• Не указываем мета-состояния и фильтры
• Стараемся избегать переходов между разделами
• Названия: “Каталог / список товаров” -> “Детали товара” -> “Свойства (фото, описание и тп)”
• Не дублируем одинаковые по смыслу сущности

3. Структура

Ветка структуры

Структура — это еще более детальное представление нашего проекта

• Структура содержит все экраны прототипа и ключевые состояния, необходимые для прохождения сценария.
• Ветка структуры = отдельный раздел
• Параллельно рисуем карандашную карту экранов (или wireframe)
• Прорабатываем основные сценарии, указываем их в структуре и нумеруем с учетом иерархии.
• Правим архитектуру, если есть изменения.

4. Job Story

Для каждой ветки нашей структуры пишем Job Story и если не удается это сделать, сценарий не заслуживает отдельного раздела в приложении

Формула Job Story:

Когда (описание ситуации),
Я хочу (мотивация),
Чтобы (результат).

Пример:

Когда у меня есть всего 2 минуты, чтобы перекусить между встречами (описание ситуации),
Я хочу съесть что-то, чтобы это было просто, быстро и подняло мой уровень сахара в крови (мотивация),
Чтобы продержаться до обеда и сохранить рабочее настроение (результат).

5. Карандашный прототип

Прототип моего робота можно заценить тут.

На мой взгляд получилось не плохо, хотя конечно пришлось вдоволь нарисоваться, прежде чем получилась вразумительная история (3-я версия из 35 экранов плюс правки после тестов)

Параллельно с прототипами мы разбирали основные паттерны в IOS и Android и делали по ним доклады, что позволило аппелировать реальными возможностями этих систем. Плюс, почти на каждом уроке, было много коротких задач на проектирование быстрых прототипов, делали и разбирали результаты, короче набивали руку.

6. User Test

Каждый пригласил по одному другу и ребята по очереди тестировали наши прототипы пытаясь решить поставленные нами задачи

Например: купи дополнительный модуль для робота и т.п.

Очень крутое дело — я наслаждался :). Мне почти удалось выстроить навигацию в приложении так, что люди довольно легко решали поставленные задачи, но конечно не обошлось без косяков.

• Основной проблемой оказалось неочевидность завершения задачи в некоторых сценариях
• Не верно поставленная задача путала людей (оперативно поменял)
• Ну и прочие важные мелочи

Ну а затем мы писали отчет по тестированию и вносили коррективы в прототипы и документы и вышли на финишную прямую

7. Ватман

Зачет

Кончилось все большущим ватманом со всеми экранами и проверкой актуальности всех артефактов сделанных на блоке UX

Спасибо, многое встало на свои места !

Поправьте, если где то страдают формулировки )