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

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

1. Формулирую изначальную задачу максимально просто и понятно

Иногда решение не находится, потому что изначальная задача сформулирована мутно…


С чего начать и от чего отталкиваться? В этой статье расскажу, как сделать MVP UI KIT для мобильного приложения максимально быстро и эффективно.

Цели кита

  • Сделать интерфейс единообразным
  • Сэкономить время отрисовки новых макетов
  • Сэкономить время на аргументацию дизайн-решений

Делать сначала на IOS или Android

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

Какой размер экрана использовать в макетах?

Можно взять минимальный размер экрана платформы, чтобы точно уместить все элементы. Для Android взять 360х640 px, для IOS — IPhone SE 320x568 px. Есть ещё один подход, когда размер экрана выбирают по наибольшему количеству целевых клиентов.

Сетка и расстояния между компонентами

Рекомендую использовать горизонтальные отступы по краям…


Правило 3-х кликов

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

Что предпочтет ваш клиент: сделать 4 очевидных клика за 30 секунд или сделать всего 2 клика, но перед этим напрячь мозг и несколько минут изучать навороченную структуру навигации?

Пользователи не скроллят

Безусловно, верх страницы — самый ценный ресурс экрана. Втискивание всего контента до нижней границы экрана ломает визуальную иерархию элементов и вызывает…


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

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

Очевидный пример…


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

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

Знаете, чем выделяются такие объекты на фоне других? Да просто тем, что не пытаются выделиться. …


Есть много прилагательных, с помощью которых заказчики описывают желаемый дизайн интерфейса. Однако чаще всего это обобщенные абстракции, а не конкретные характеристики. Давайте попробуем конкретизировать эти слова, чтобы более точно понимать друг друга.

Чистый
- Требует минимальной когнитивной нагрузки и выбора
- От пользователя нужен минимум внимания
- Доставляет информацию мелкими порциями
- Имеет строгую иерархию интерфейсных элементов и функционала

Простой
- Не требует обучения
- Задача выполняется максимально быстро
- Понятно, в каком состоянии система находится сейчас
- Понятно, что нужно сделать в первую очередь и что будет происходить дальше

Консистентный
- Похожие элементы выглядят и ведут себя идентично

Доступный


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

1. Уточнить изначальную задачу и контекст
Определите, какую задачу для клиента и для бизнеса решал дизайнер.

2. Посмотреть дизайн без спойлеров
Хорошо, когда перед основной презентацией есть возможность посмотреть дизайн без спойлеров и комментариев дизайнера. Затем зафиксировать места, которые вызывают вопросы.

Часто дизайнер приносит новое решение и сразу рассказывает, как это работает. Однако у пользователя не будет рядом человека, который расскажет ему, как работает функционал. Даже онбординг…


Когда дизайнер выяснил все детали проекта, то пришло время обсудить сроки и следующие шаги. Предлагаю рассмотреть это в формате диалога продакта (П) и дизайнера (Д):

Д: Сколько у нас времени на дизайн?
П: Нужно сделать как можно быстрее.

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

Д: Когда разработчики смогут взять эту задачу в работу?
П: Думаю, через 2–3 месяца: ресурсов на разработку пока нет.
Д: Как планируете продвигать эту фичу или продукт…


Если компания растет и развивается, то вместе с ней растет и дизайн-отдел. Что происходит на каждой стадии развития и как устроено взаимодействие в команде — разберем далее. Для простоты привожу усредненные цифры по составу человек.

1 этап. Человек-оркестр (стартап)

— Структура команды: 1 мидл-дизайнер, 1 продакт, 1 разработчик

— Взаимодействие: Мидл-дизайнер решает все задачи продакта или владельца компании. Он делает всё — начиная с открытки на день рождения для мамы CEO и заканчивая анимацией прелоадера.

Комментарии: На этой стадии целесообразно взять одного мидл-дизайнера: вам понадобится его опыт, чтобы создавать сервис с нуля и закрывать разношерстные мелкие задачи с брендингом или…


Чем более ясно сформулирована проблема, тем легче оценить качество продуктового дизайна на начальных стадиях. Четко поставленная задача — ответственность не только продакта, но и самого дизайнера. Если продакт не может объяснить смысл задачи, дизайнер сам может помочь сформулировать её максимально точно. И только потом садиться за поиск решения.

Представим типичный диалог продакта (П) и дизайнера (Д):

П: Нам нужно сделать функционал виртуальной кредитной карты в приложении.
Д: Зачем?
П: Чтобы заработать денег. Руководство поставило срок до конца второго квартала этого года.

Разберем диалог на части. «Чтобы заработать денег» — это ЗАЧЕМ для компании. «Руководство поставило…» — это ЗАЧЕМ для продакта…

Никита Кондратьев

Product UI/UX Designer. Telegram: @nikinario. Email: nkboxes@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store