Ген UX/UI дизайнера: 5 жизненных принципов от продуктового дизайнера Atlassian

Статья помогает оценить подход к UX/UI дизайну, встать на рельсы доставки ценности клиентам/компании и ответить уже на вопрос «ui ux дизайн с чего начать».
Иллюстрация Anton Fritsler (kit8): https://dribbble.com/shots/6256489-Designers-working-in-studio
2 222

Вы читаете перевод статьи “5 UX plays to start your design on good tracks”. Над переводом работали:  Ольга Жолудова и Ринат Шайхутдинов.

Сейчас каждый раз, когда я стартую новый проект или вгрызаюсь в проектирование новой фичи, я вырубаю компьютер. Софт для проектирования и дизайна в этот момент совсем не помощники. Моя задача, уже на старте проекта, убедиться, что я «вижу» общую картину того, над чем работаю. Очень важно в этот момент не попасться в типовую ловушку, когда тебя засасывают детали: скругления, кнопочки, градиенты, менюшки и другие эстетичные вещи.

На заре своей карьеры в дизайне, в каждом новом проекте я мчался в Photoshop, и работал, работал с этим градиентом до упора. Экраны получались невероятно красивые, классные, но, увы на них было очень много существенных косяков.

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Суть проблемы в том, что если вы работаете с НЕ-дизайнерами, красивые экраны – это то, что нужно. Вы, бесспорно, заточите «вау-эффект», клиенты будут аплодировать, и при таком раскладе с реализацией явно все как-то разрулится. Конечно, сейчас я понимаю, что это ведет к непоправимым последствиям, если итоговый результат – это сделать продукт, который «помогает».

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

1 . Почему Почему Почему Почему Почему (Техника «5 почему»)

Один из наших принципов в стандартах по дизайну в Atlassian звучит так: «Всегда вникайте глубоко в корень того, что вы создаете. Копайте глубже!».

Чтобы создать ценное решение, нужно ответить на вопрос «Чем вы собираетесь помочь людям? Какую проблему вы помогаете решить? Какой барьер для достижения нового ценного уровня вы помогаете преодолеть?».

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

Одна из техник, которая помогает не сбиться в пути – это техника «5 почему». Я частенько использую вопросы «почему?», чтобы оставаться на верном пути и четко понимать, что я делаю и для кого.

Поэтому на старте очередного проекта или фичи не забудьте спросить «почему?», чтобы убедиться, что вы не потеряли из виду то, что делаете и для кого .

Попробуйте задать этот вопрос 5 раз подряд последовательно к каждому вашему ответу. И вы сами удивитесь, как доберетесь до сути – реальной проблемы, которую стоит решить. «5 почему» хороши, чтобы выявить причину, вызывающую саму проблему, и понять на чем стоит сфокусировать внимание, чтобы ее решить.

Кстати, этот подход порой считают спорным. Распространена ситуация, при которой два (или более) участника штурма начинают с одной ситуации, и в конце приходят к совершенно разным причинам ее возникновения.

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

Образец

Проблема: пользователь не разрешает присылать уведомления.

Это довольно легко, я согласен, но, двигаясь от этого, можно увидеть много решений:

Профессиональный совет: этот прием можно использовать также и в решении ваших проблем из повседневной жизни.

2. Таймлайн (До Во Время После)

Первое, что я понял, когда начал изучать дизайн UX, это:

Опыт пользователя выходит за рамки экрана. Это не только то, что пользователь делает с вашим продуктом, но и то, что происходит до и после взаимодействия с вашим продуктом.

С тех пор я всегда стараюсь применять концепцию временной шкалы в своих проектах. Целью такого подхода является дизайн полного UX, от начала и до конца.

Продумывание частей До и После как раз и создает завершенность разрабатываемого вами решения.

Вот некоторые из вопросов, которые я себе задаю:

До

После

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

* Примечание:

радовать пользователя – это вовсе не про прикольные анимации каждого элемента интерфейса или попрыгушки вокруг юзера в костюме пасхального кролика. Это про мелкие, но важных детальки, которые делают жизнь проще и приятнее: дружелюбный фоллоу-ап, оффлайн-режим, предзаполненные формы, сообщение об ошибках и т.д.

Профессиональный совет: Чтобы нагляднее представить UX, вы можете расписать его на временной шкале, сделать своеобразный чертеж, или проделать следующий прием!

3. Комикс

Как дизайнеры, мы всегда передаем свои идеи картинками, поэтому скетчи UX в виде комикса помогают наглядно подать все этапы, через которые проходят пользователи.

Идею комикса мне однажды подсказал один дизайнер. Он посоветовал мне разделить бумагу формата А4 на шесть квадратов, а затем нарисовать каждое действие как комикс.

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

Также по возможности я стараюсь не делать зарисовки из моих фантазий, я провожу интервью и за основу комикса беру результаты обработки интервью пользователей.

Как только я определился с тем, как будет работать продукт, делаю повтор и снова прорисовываю опыт пользователя еще раз, чтобы убедиться, что мой сервис покроет каждый аспект.

Как только мне кажется, что я пришел к хорошему опыту, я стараюсь «прожить» сюжет. Такой подход помогает проверить, плавность UX.

Бонусный балл: нет необходимости разрабатывать продукт от и до. Очень бюджетного прототипа уже более чем достаточно, чтобы выполнить такой анализ.

Это всегда помогало мне понять, что есть такие простые взаимодействия, которые оказываются совсем непростыми:

Профессиональный совет: Разделите страницу маркером на шесть частей, затем раскопируйте ее для дальнейшего использования.

4. Диалог

Разговорный UI вовсю проникает в нашу жизнь. И хоть я и считаю, что эта концепция пользовательского интерфейса и не совсем подходит для каждого продукта, в ней есть что-то очень дельное.

Мне кажется, что одна из задач дизайнера – превращать технологии в нечто естественное. Поэтому у этой технологии явно есть будущее, где-то в ней следующий шаг. Не продолжать же использовать SMS.

Когда я создаю дизайн сложной части интерфейса, я начинаю представлять, что продукт – это кто-то, кого я нанял выполнить работу (JOB / JTBD).

Кто-то, с кем я бы мог поговорить.

Я думаю, какие вопросы требуется задать, чтобы получить определенную информацию, приказы, которые нужно отдать, чтобы что-то сделать, ответы, которые я получу.

Параллельно я прописываю весь разговор, выстраивая его в наилучшем порядке.

Это помогает мне определить и обеспечить лучший сценарий взаимодействия.

Узнать, как много информации нам нужно на странице.

Какую информацию нужно сгруппировать, и почему именно по такому принципу.

Какие действия будут доступны и какие из них главные.

А также, какая информация понадобится наемному продукту, чтобы реализовать мои потребности.

Профессиональный совет: Я не советую делать это в тихом open-space пространстве.

5. Список

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

Я пишу все, что всплывает в моей голове об этом конкретном проекте, а также все остальное, что могло бы к нему относиться (каким-либо образом).

Например, когда я начинаю работу над каким-то мобильным проектом, я расписываю все компоненты мобильника:

Я делаю это также для концепций пользовательского интерфейса:

Или контекст, конечно же:

Затем я задаю категории.

Создание этого списка помогает в следующих моментах:

У меня все. Спасибо, что выслушали. Успехов во внедрении.


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore →
Перед стартом в UX

Посты в категории UX-дизайн

100 вопросов для UX-анализа

Ольга Жолудова

22 апреля 2019

Посты в категории UX-дизайн

Принципы гештальта в дизайне интерфейсов, которые знает, пожалуй, каждый UX/UI-дизайнер

Ольга Жолудова

25 февраля 2019

Посты в категории UX-дизайн

Я, как дизайнер, отказываюсь называть людей “пользователями”

Ольга Жолудова

14 февраля 2019