Ген UX/UI дизайнера: 5 жизненных принципов от продуктового дизайнера Atlassian
Статья помогает оценить подход к UX/UI дизайну, встать на рельсы доставки ценности клиентам/компании и ответить уже на вопрос «ui ux дизайн с чего начать».
Вы читаете перевод статьи “5 UX plays to start your design on good tracks”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.
Сейчас каждый раз, когда я стартую новый проект или вгрызаюсь в проектирование новой фичи, я вырубаю компьютер. Софт для проектирования и дизайна в этот момент совсем не помощники. Моя задача, уже на старте проекта, убедиться, что я «вижу» общую картину того, над чем работаю. Очень важно в этот момент не попасться в типовую ловушку, когда тебя засасывают детали: скругления, кнопочки, градиенты, менюшки и другие эстетичные вещи.
На заре своей карьеры в дизайне, в каждом новом проекте я мчался в Photoshop, и работал, работал с этим градиентом до упора. Экраны получались, невероятно красивые, классные, но увы на них было очень много существенных косяков.
Интересуетесь свежими статьями по дизайну?🚀 Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Суть проблемы в том, что если вы работаете с НЕ-дизайнерами, красивые экраны — это то, что нужно. Вы бесспорно заточите «вау-эффект», клиенты будут аплодировать, и при таком раскладе с реализацией явно все как-то разрулится. Конечно сейчас я понимаю, что это ведет к непоправимым последствиям, если итоговый результат — это сделать продукт, который «помогает».
Ищете системное погружение в тему? Загляните в блог для дизайнеров.
Что ж. Сейчас спустя время, я слегка подрос и мой подход стал чуть системнее. И в этой статье я хотел бы поделиться открытиями и достижениями, которые помогают сейчас делать результат.
1 . Почему Почему Почему Почему Почему (Техника «5 почему»)
Один из наших принципов в стандартах по дизайну в Atlassian звучит так: «Всегда вникайте глубоко в корень того, что вы создаете. Копайте глубже!».
Чтобы создать ценное решение, нужно ответить на вопрос «Чем вы собираетесь помочь людям? Какую проблему вы помогаете решить? Какой барьер для достижения нового ценного уровня вы помогаете преодолеть?».
В поисках ответа на этот вопрос, можно обрасти таким количеством деталей, что среди елок и шишек есть большой риск потерять общую картину и цель «выбраться из леса».
Одна из техник, которая помогает не сбиться в пути — это техника «5 почему». Я частенько использую вопросы «почему?», чтобы оставаться на верном пути и четко понимать, что я делаю и для кого.
Поэтому на старте очередного проекта или фичи не забудьте спросить «почему?», чтобы убедиться, что вы не потеряли из виду то, что делаете и для кого .
Попробуйте задать этот вопрос 5 раз подряд последовательно к каждому вашему ответу. И вы сами удивитесь, как доберетесь до сути — реальной проблемы, которую стоит решить. «5 почему» хороши, чтобы выявить причину, вызывающую саму проблему, и понять на чем стоит сфокусировать внимание, чтобы ее решить.
Кстати, этот подход порой считают спорным. Распространена ситуация, при которой два (или более) участника штурма начинают с одной ситуации, и в конце приходят к совершенно разным причинам ее возникновения.
Лично я не рассматриваю это, как ошибку. Это скорее возможность открыть различные причины одной и той же проблемы. Такие, о которых я бы и не подумал, если бы не подобный ресерч. Это даже скорее помогает открыть новую точку обзора на ситуацию и найти нестандартное более эффективное решение.
Образец
Проблема: пользователь не разрешает присылать уведомления.
- Почему? Он нажимает «Запретить»
- Почему? Он не хочет получать уведомления
- Почему? Он не увидел в этом никакой ценности
- Почему? Он еще не получал действительно нужных уведомлений
- Почему? Он запускает приложение впервые
Это довольно легко, я согласен, но, двигаясь от этого, можно увидеть много решений:
- Дождитесь второго запуска и снова запросите разрешение на уведомление
- Объясните суть и ценность ваших уведомлений во время онбординга
- Расскажите об этой ценности на вашем лендинге
- И т.д.
Профессиональный совет: этот прием можно использовать также и в решении ваших проблем из повседневной жизни.
2. Таймлайн (До Во Время После)
Первое, что я понял, когда начал изучать дизайн UX, это:
Опыт пользователя выходит за рамки экрана. Это не только то, что пользователь делает с вашим продуктом, но и то, что происходит до и после взаимодействия с вашим продуктом.
С тех пор я всегда стараюсь применять концепцию временной шкалы в своих проектах. Целью такого подхода является дизайн полного UX, от начала и до конца.
Продумывание частей До и После как раз и создает завершенность разрабатываемого вами решения.
Вот некоторые из вопросов, которые я себе задаю:
До
- Как пользователь получит доступ к моему приложению?
AppStore, веб-сайт, объявление, QR-код где-то… ? - У него уже есть аккаунт? Нужен ли он для выполнения каждого действия?
- В каком контексте он запустит мое приложение? Мы говорим о серфинге на уютном диванчике или переполненном подземном метро?
- Каков его уровень напряженности?
- Много ли у него времени?
- Насколько быстрое подключение к интернету?
После
- Как использовать опыт, который пользователь только что получил в приложении?
- Нужна ли ему какая-либо информация в легком доступе из любой точки мира?
- Как его успокоить, если он сейчас чего-то ждет от продукта?
- Если мой продукт работает на разных устройствах, как обеспечить переход из одного в другое?
- Как узнать, что произошло месяц назад?
Каждый из этих вопросов гарантирует, что мы не забываем о возможности порадовать пользователя * .
* Примечание:
радовать пользователя — это вовсе не про прикольные анимации каждого элемента интерфейса или попрыгушки вокруг юзера в костюме пасхального кролика. Это про мелкие, но важных детальки, которые делают жизнь проще и приятнее: дружелюбный фоллоу-ап, оффлайн-режим, предзаполненные формы, сообщение об ошибках и т.д.
Профессиональный совет: Чтобы нагляднее представить UX, вы можете расписать его на временной шкале, сделать своеобразный чертеж, или проделать следующий прием!
3. Комикс
Как дизайнеры, мы всегда передаем свои идеи картинками, поэтому скетчи UX в виде комикса помогают наглядно подать все этапы, через которые проходят пользователи.
Идею комикса мне однажды подсказал один дизайнер. Он посоветовал мне разделить бумагу формата А4 на шесть квадратов, а затем нарисовать каждое действие как комикс.
Мне такой формат помогает разобрать жизнь пользователя по полочкам, наглядно увидеть сценарии взаимодействия и подметить сложившиеся привычки. Комикс реально ускоряет разметку болевых точек, через которые проходит пользователь, а также поиск наиболее подходящих технологий, которые оптимальнее всего могут ему помочь.
Также, по возможности, я стараюсь не делать зарисовки из моих фантазий, я провожу интервью и за основу комикса беру результаты обработки интервью пользователей.
Как только я определился с тем, как будет работать продукт, делаю повтор и снова прорисовываю опыт пользователя еще раз, чтобы убедиться, что мой сервис покроет каждый аспект.
Как только мне кажется, что я пришел к хорошему опыту, я стараюсь «прожить» сюжет. Такой подход помогает проверить, плавность UX.
Бонусный балл: нет необходимости разрабатывать продукт от и до. Очень бюджетного прототипа уже более, чем достаточно, чтобы выполнить такой анализ.
Это всегда помогало мне понять, что есть такие простые взаимодействия, которые оказываются совсем непростыми:
- зимой, на улице, в перчатках.
- в продуктовом магазине с сумкой в одной руке
- в солнечном месте, Dark UI — не самая удачная идея
Профессиональный совет: Разделите страницу маркером на шесть частей, затем раскопируйте ее для дальнейшего использования.
4. Диалог
Разговорный UI вовсю проникает в нашу жизнь. И хоть я и считаю, что эта концепция пользовательского интерфейса и не совсем подходит для каждого продукта, в ней есть что-то очень дельное.
Мне кажется, что одна из задач дизайнера — превращать технологии в нечто естественное. Поэтому у этой технологии явно есть будущее, где-то в ней следующий шаг. Не продолжать же использовать SMS.
Когда я создаю дизайн сложной части интерфейса, я начинаю представлять, что продукт — это кто-то, кого я нанял выполнить работу (JOB / JTBD).
Кто-то, с кем я бы мог поговорить.
Я думаю, какие вопросы требуется задать, чтобы получить определенную информацию, приказы, которые нужно отдать, чтобы что-то сделать, ответы, которые я получу.
Параллельно я прописываю весь разговор, выстраивая его в наилучшем порядке.
Это помогает мне определить и обеспечить лучший сценарий взаимодействия.
Узнать, как много информации нам нужно на странице.
Какую информацию нужно сгруппировать, и почему именно по такому принципу.
Какие действия будут доступны и какие из них главные.
А также, какая информация понадобится наемному продукту, чтобы реализовать мои потребности.
Профессиональный совет: Я не советую делать это в тихом open-space пространстве.
5. Список
Когда я получаю новое резюме, в моей голове, как правило, происходит множество вещей одновременно. Вдохновение, визуализация, взаимодействие, хорошие принципы UX, копирайтинг, конкуренты и т. д. Я знаю, что сейчас мне не следует фокусироваться на мелких деталях, но я также не хочу потерять что-то в этом процессе. Чтобы быть уверенным, что я не потеряю эти идеи, я начинаю писать все на стикерах.
Я пишу все, что всплывает в моей голове об этом конкретном проекте, а также все остальное, что могло бы к нему относиться (каким-либо образом).
Например, когда я начинаю работу над каким-то мобильным проектом, я расписываю все компоненты мобильника:
- геолокация
- push-уведомление
- гироскоп
- камеры
- Touch ID
- и т.д.
Я делаю это также для концепций пользовательского интерфейса:
- Карточки
- Интерфейс чата
- Snapchat
- Yo
- И т.д.
Или контекст конечно же:
- Дома
- Во время тренировки
- В спортзале
- В машине
- В автобусе
- И т.д.
Затем я задаю категории.
Создание этого списка помогает в следующих моментах:
- Вынуть все из собственной головы, и в то же время знать, где я могу это все найти при необходимости (Начало проекта может слишком перегружать мозг, так что я теряю ход процесса);
- Убедиться, что я не теряю главное и не пропускаю возможности
У меня все. Спасибо, что выслушали. Успехов во внедрении.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
