Николай Яковенко

Проектирую интерфейсы, пишу тексты, изучаю HTML и CSS, управляю проектами

О бесполезности фейков для прокачки скиллов

12 августа, 17:03

Выдающийся комментатор боксерских поединков Владимир Гендлин любил повторять фразу: «Боксёры растут в первую очередь от противников».

Думаю принцип применим к дизайну — дизайнер растёт от реальных проектов. Конкурсы, перерисовки и фейки не наращивают скиллы. В них нет реальных требований, ограничений, согласований и дедлайнов, которые превращают картинку в выверенное решение.

На видео молодой Мэнни Пакиао сражается с одним из самых неудобных противников за свою карьеру. Через 5 лет журнал Ринг признает Мэнни лучшим боксером десятилетия.

UX и UI

28 июля, 4:10

Страница с вакансиями по дизайну в сервисе «Мой круг» .

Все знают: дизайн — это про решение задачи. Решить задачу клиента — значит понять его боль и предложить адекватное лекарство/решение.

Боль у клиента бывает разная, но практически никогда она не измеряется терминами дизайна: надо открыть новый канал продаж; найти партнера на франшизу; снизить загрузку на менеджеров; привлечь в 1,5 раза больше пользователей при том же рекламном бюджете. И тд и тп.

Боль — это из мира бизнеса. А большинство дизайнеров из мира картинок. Перед любым здравомыслящим клиентом встаёт проблема: как найти дизайнера, который переведёт всё что нужно бизнесу на язык работающих макетов? Таких макетов, которые решают проблему, а не просто собирают лайки на Дрибббле.

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

  1. Понимание задачи, контекста и предложение решения на уровне смысла (это называют UX — «пользовательский опыт взаимодействия»)
  2. Воплощение решения в удобном и привлекательном интерфейсе (это называют UI — «пользовательский интерфейс»).

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

Второе понятие ремесло—техническое. Оно связано с умением верстать, работать с типографикой, цветом, формой и пониманием основ юзабилити.

Всё это вместе (UX и UI) и есть дизайн. Без дополнительных приставок и прочей мишуры. Хороший, работоспособный дизайнер по умолчанию начинает со смысла и завершает стилем. Формула: задача — содержание — форма — стиль.

Чек-лист юзабилити интернет-магазина

9 июня, 3:33

Предисловие

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

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

При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

Чек-лист

Каталог товаров
1) Заголовок релевантен запросу пользователя и дает представление о товарах, представленных в разделе каталога.

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

2) В описании товаров или фильтрах представлена информация, помогающая выбрать товар.

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

3) Есть возможность сортировки товаров по важным для пользователя характеристикам.

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

4) Если в каталоге предусмотрено добавление товара в корзину, то после добавления выводится визуальное подтверждение.

Почему это важно: без заметного визуального подтверждения о том, что товар добавлен в корзину, часть пользователей может посчитать, что ничего не произошло и начать добавлять товар повторно или прекратить взаимодействие с сайтом.

5) При добавлении товара в корзину, в мини корзине обновляется количество и происходит перерасчет суммы.

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

6) Фильтр не содержит избыточных параметров, не используемых при выборе товара.

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

7) При переходе на карточку товара из каталога и обратно — ссылка «назад» в браузере возвращает пользователя на страницу с выбранными параметрами фильтра.

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

8) Фильтр динамически изменяет URL при применении параметров фильтрации.

Почему это важно: пользователи должны иметь возможность поделиться отфильтрованным каталогом.

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

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

10) Кнопка сброса фильтра сбрасывает URL до исходного состояния, выставляет параметры фильтрации по умолчанию и перестраивает список товаров.

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

11) Для фильтров отложенного действия кнопка запуска фильтрации находится в пределах первого экрана.

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

12) Для подгрузки товаров в каталоге используется кнопка «Показать больше», а не пангинация или бесконечная подгрузка.

Почему это важно: бесконечный скролл не позволяет посетителю добраться до футера, где есть полезные ссылки, которые позволят ему связаться с магазином, узнать больше о доставке и оплате и т. п. В сравнении с пагинацией, кнопка «Показать больше товаров» создаёт меньшую когнитивную нагрузку — посетитель отвечает на простой вопрос «да (покажите больше товаров)» или «нет (не надо показывать)». Это обеспечивает больший объём внимания отдельным товарам, а не управлению интерфейсом.

Карточка товара

13) Заголовок страницы содержит название товара.

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

14) Имеется возможность выбора или ручной установки количества товаров, добавляемых в корзину

Почему это важно: без функционала изменения количества добавляемых товаров, попытка покупки 2 и более одинаковых товаров сопровождается трудностями для пользователей.

15) На карточке присутствует информация об условиях оплаты и доставки

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

16) На карточке присутствует информация о наличии товара.

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

17) Кнопка добавления товара в корзину визуально выделяется на фоне остального содержимого страницы.

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

18) После добавления товара в корзину выводится визуальное подтверждение.

Почему это важно: без заметного визуального подтверждения о том, что товар добавлен в корзину, часть пользователей может посчитать, что ничего не произошло и начать добавлять товар повторно или прекратить взаимодействие с сайтом.

19) Если на сайте используется рейтинг товара, то на карточке отображаются отзывы, по которым рейтинг был составлен.

Почему это важно: отсутствие обоснования для рейтинга может быть воспринято, как попытка манипулирования.

Корзина и чекаут

20) В корзине и на всех страницах оформления заказа виден список товаров и их стоимость.

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

21) Название и фото товаров в корзине являются кликабельными и ведут на карточку товара или всплывающее окно с подробной информацией о товаре.

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

22) Имеется возможность удаления товаров из корзины. При этом происходит автоматический перерасчет итоговой суммы без перезагрузки страницы.

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

23) Имеется возможность изменения количества товаров в корзине. При этом происходит автоматический перерасчет итоговой суммы без перезагрузки страницы.

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

24) Поле для ввода скидки находится на странице корзины.

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

25) На странице корзины дублируется информация об условиях доставки и оплаты.

Почему это важно: одна из наиболее распространенных причин прерывания оформления заказа — изменение суммы заказа после выбора способа доставки. Чем раньше пользователи узнают об условиях доставки, тем больше вероятность, что они завершат оформление заказа.

26) Кнопка продолжения оформления заказа визуально выделяется на фоне остального содержания страницы.

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

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

Почему это важно: часть пользователей предпочитают оформлять заказ по телефону, а не через форму на сайте.

28) Для оформления заказа не нужно проходить обязательную регистрацию.

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

29) Процесс оформления заказа линейный.

Почему это важно: разветвленные сценарии оформления заказа вызывают трудности у пользователей и приводят к прерыванию взаимодействия с сайтом.

30) После выбора способа доставки итоговая сумма корректно обновляется без перезагрузки страницы.

Почему это важно: пользователям важно знать точную сумму заказа и его доставки.

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

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

32) При разбиении процесса оформления заказа на отдельные шаги корректно работают кнопки браузера «Вперед» и «Назад», данные уже заполненных форм сохраняются.

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

33) В многошаговых формах указано количество шагов и текущее месторасположение пользователя.

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

34) Сообщения об ошибках выводятся на понятном пользователю языке и содержат подсказку, как правильно вводить данные.

Почему это важно: только в этом случае пользователь сможет разобраться, как исправить свою ошибку.

35) При прерывании оформления заказа товары из корзины не удаляются.

Почему это важно: если товары в корзине сохранятся, то пользователь может завершить оформление заказа позже.

36) На странице подтверждения заказа выводятся данные, введенные пользователем, информация о товарах и сумма заказа с доставкой.

Почему это важно: часть пользователей проверяет всю информацию перед совершением оформления заказа.

37) Со страницы подтверждения заказа можно перейти к редактированию полей.

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

38) Оформление заказа завершается страницей «Спасибо за покупку», на которой имеется полная информация о заказе и дальнейших действиях магазина и пользователя. Информация с этой страницы дублируется на e-mail пользователя.

Почему это важно: пользователям должны быть доступна полная информация о совершенном заказе (номер, дата, состав, сумма).

Почему «не знать» — это нормально

22 мая 2016, 3:50

Не знать ответ на какой-то вопрос — нормально. Даже, если этот вопрос касается твоей профессии.

Яна спрашивает в Советах бюро Горбунова:
Я молодой автор на фирме. Там я единственная представительница с журналистским образованием. Бывает, что в процессе работы не могу ответить на поставленный коллегами вопрос (А как перевести это слово? А из какого языка оно пришло?) Человек не может знать всё. Я открыто говорю, что не знаю, но выясню. После чего следуют смешки, мол, четыре года чему тебя в Питере учили

Как правильно реагировать на подобное, и стоит ли говорить, что ты чего-то не знаешь?

Моё видение:
Яна, ваш подход импонирует. Вы открыто признаёте незнание каких-то вещей и при этом предлагаете найти ответы для себя и собеседника (двойная польза).

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

Соотношение знания и незнания можно описать при помощи круга:

Человек, который мало знает, имеет маленькую площадь соприкосновения с границей «Незнания». В жизни это соответствует утверждению «Я знаю всё». Знать всё нереально. Если тебе показалось, что ты знаешь всё, посмотри на картинку — скорей всего ты не видишь всей картины.

Человек, который много знает, понимает, что его знание не полно. Граница с «Незнанием» — это вектор для дальнейшего развития.

Не знать ответ на вопрос — нормально. Думать, что всё знаешь — нет.

Фичеризм

9 мая 2016, 2:21

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

Фичеризм — это желание снабдить проект новыми функциями. Надо: продавать еду от разных ресторанов и кафе клиентам, которые не хотят идти на улицу за ужином. Хочу: сделать так, чтобы партнеры сервиса могли отслеживать статистику по всем действиям клиентов (их ещё нет). Надо: продавать профнастил от производителя. Хочу: добавить на сайт функцию калькуляции стоимости тонны профнастила (это нужно 0,1% аудитории).

Попробуем разобраться, как подружить «Надо» и «Хочу». Для этого придётся расставить приоритеты.

1. Время

Любой проект можно запустить за 1-3 месяца, если следовать теории MDP (Minimum Delightful Product, мой вольный перевод — минимально восхитительный продукт). Пока вы думаете, что вашим клиентам необходим калькулятор, конкуренты сделают простой сайт с прекрасными фотографиями и ценами и начнут получать прибыль. Ваш запуск совпадет с их первым миллионом.

2. Деньги

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

3. Пользователи

У любого проекта есть суперпользователи — часть аудитории, за счёт которой проект делает основные деньги. Назовём этих суперпользователей альфа-покупателями. Они топливо в двигателе проекта. Правда жизни в том, что они выбирают проект не по совокупности функций, а по какой-то одной причине (обычно она заложена в позиционировании и концепции). Если проект лишится одной из функций, не поддерживающих концепцию (херак-херак и нет обратного звонка), то альфа-покупатели не уйдут. Более того, они не заметят отсутствия этой функции.

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

Рациональная альтернатива фичеризму — поэтапный запуск

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

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

Что должен знать дизайнер об интернет-маркетинге

8 мая 2016, 4:34

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

Связь с рекламным каналом

Стандартный сценарий взаимодействия с посетителем: рекламное объявление — посадочная страница.

Перед началом проектирования необходимо определить, какие каналы привлечения аудитории будут использоваться. После, согласовать посадочные страницы с выбранными рекламными каналами. Гигиенический минимум: привязать заголовки посадочных страниц к заголовкам объявлений в рекламе.

Реальный контент

Дизайн строится от контента, а не контент от дизайна. Контент строится от клиента и его потребностей. Если сделать красивый макет с lorem ipsum вместо реального текста — велик шанс нарваться на ситуацию, когда проект не отвечает на вопросы клиентов.

Воронка продаж

Люди, которые взаимодействуют с сайтом находятся на разном этапе принятия решения о покупке:

  • не осознают проблему, попали на сайт случайно;
  • осознают проблему, в поиске возможных вариантов решения;
  • осознают проблему, в поиске лучшего исполнителя решения.

Взаимодействие с каждой группой подразумевает свои сценарии и аргументы.

Проверка гипотез аналитикой

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

Не AIDA, а IDA

13 марта 2016, 3:52

Рекламистам известна формула AIDA (Внимание-Интерес-Желание-Действие). По-моему, формула устарела.

Внимание (Attention) и Интерес (Interest) при делении образуют крикливые желтые приемчики, на которые у всех давно иммунитет. Заинтересовывать нужно сразу, без ненужных вступлений. Помогает контекст взаимодействия.

Дедлайн

23 января 2016, 2:49

Ребятам из IT грех жаловаться на дедлайн.

В 1864 году, в штате Джорджия, южане организовали лагерь для военнопленных Андерсонвилль. За 6 месяцев через прадедушку Освенцима прошло, по разным оценкам, от 45 до 52 тысяч северян, из которых 13 тысяч погибли.

Одним из главных смертоносных изобретений лагеря стала dead line (мертвая линия). Для предупреждения побегов руководство лагеря «огородило» его территорию нарисованной линией. Заступ за эту черту карался смертью через расстрел. Причина заступа не имела значения — случайный выход за линию, выталкивание недругами — итог один.

Сейчас «дедлайн» — это срыв сроков проекта.

Первая мысль, которая приходит в голову при сопоставлении этих фактов: кому пришло в голову называть просрочку —линией, за которой следует смерть?

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

Иезекииль 25-17 в курсе вопроса: «Может я буду жить сто лет. А может быть сдохну сегодня, в обед»

Жертвовать временем опасно

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

  • «Ребята мы вам заплатили, будьте добры реализуйте все, за что заплачено, даже если это увеличит время разработки. Мы подождём».
  • «Парни, мы не успеваем сроку! Забейте на допилку оформления для юридических клиентов. Выкладывайте рабочую версию на сервер».

Алло! Увеличение времени разработки равно упущенной прибыли. Просрали месяц — потеряли в разы больше, чем стартанув позже со всеми функциями.

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

Я лично испытал это на двух проектах. Вместо месяца работа растянулась на 4. В результате потерял деньги, а в конце и мотивацию. Отсутствие мотивации — плохое подспорье для соблюдение качества #стыдоба.

Дедлайн — самое важное ограничение проекта. Если его нет, то надо убеждать заказчика его создать или отказаться от проекта. Если он есть, то надо его соблюсти.

4 способа соблюсти дедлайн

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

Время с запасом
На работу требуется 3 дня. Нужно брать 4 или 5, чтобы непредвиденные обстоятельства не застали врасплох.

Ранний показ
Процесс показа и согласований версий должен строиться по принципу «как можно раньше». Это позволяет заранее выявлять и обрабатывать замечания.

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

Как отличить дизайнера от не дизайнера

27 ноября 2015, 2:12

Не дизайнер— просит у заказчика техническое задание на дизайн.
Дизайнер — выясняет задачу и предлагает решение.

Не дизайнер — предлагает крутяк, не выяснив бюджет и сроки на разработку.
Дизайнер — спрашивает о бюджете и сроках, предлагает работоспособный вариант в их рамках.

Не дизайнер — не думает пользователях.
Дизайнер — изучает аудиторию, заботится о пользе.

Не дизайнер — не думает о сценариях использования продукта.
Дизайнер — знает, в какой ситуации пользователь будет использовать продукт и ради чего.

Не дизайнер — использует lorem ipsum.
Дизайнер — пишет реальный текст.

Не дизайнер — делает только картинки.
Дизайнер — следит, чтобы принятые решения не потерялись при реализации.

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

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

Не дизайнер — добавляет декоративные элементы, потому что «чего-то не хватает».
Дизайнер — думает о смысле, ищет недостающие факты, интересно их преподносит.

Не дизайнер — идет на поводу у клиента и делает говно.
Дизайнер — выслушивает замечания клиента, находит истинную причину возражений, делает новый хороший вариант.

Не дизайнер  — делает аккуратную картинку без учета неудобных данных.
Дизайнер — помнит о Константине Константинопольском, проживающем в Петропавловске-Камчатском.