В интернет-магазине Озон я год работал над редизайном корзины и чекаута (процесс оформления заказа). С ребятами мы решили, что сделаем не очередную корзину или чекаут, а в принципе переосмыслим интерфейс. Проект был сложный не только с точки зрения проектирования, но и нужно было полностью переписать движок. В итоге ни корзина, ни чекаут не взлетели, хотя готовность была 95%. Проект закрылся по техническим причинам. Но мне хочется поделиться личным провалом с точки зрения пиара проекта.

Разработчики, дизайнеры, тестировщики, владельцы продукта делились на команды и бывало так, что команды не знали, кто над чем работает. Команды работали над своими частями продукта и взаимосвязи было мало. Таски закрывались, код писался, макеты верстались. Всё хорошо. Если шла работа над большой задачей, то было демо, где презентовалось решение перед руководством. Промежуток между постановкой задачи и демо мог достигать 6 месяцев. В этом промежутке есть опасность — если команда превращается в закрытый клуб по интересам, то на демо не ждите бурных оваций и приглашения на бис. Скорее всё будет наоборот. Просто потому, что команда не вовлекает всех остальных в процесс. Это не значит, что нужно устраивать народных сход и делать коллективное проектирование. Вовлекать нужно иначе. Не только встречаться со всеми заинтересованными в проекте, но и быть евангелистом. Показывать промежуточные решения. Хорошо работают распечатки на стенах. Распечатайте на А1 главные макеты и повесьте у входа в офис. Напишите — мы работаем над новым интерфейсом корзины и чекаута. Вот адрес, смотрите и присылайте каменты. Вовлекая людей, вы делаете их евангелистами своих идей. Чем раньше вы это сделаете, тем лучше. Тогда на демо вы не получите тонну негатива.

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

Выписал из лекции Ильи Бирмана «Понимание задачи» примеры задач бизнеса и диалог с проблемным клиентом, у которого нет конкретной задачи.

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

Мэтью Стрём поделился рекомендациями по оформлению таблиц.

— Зачем нужны табличные цифры (есть в бесплатном шрифте Work Sans) и моноширинные шрифты;
— Правила выравнивания;
— Как не повторять единицы измерения в строках таблицы;
— И так далее.

In English. #table

Михаил Капанага написал, почему правила валидации иногда должны быть сложнее такого: «Поле с номером телефона можно пропускать, если в нём есть хоть что-то, а почту — если есть собака, точка и текст вокруг них».

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

Кстати, хороший справочник по форматам номеров карт составили в Baymard Institute.

Марат Ижанов дал 10 советов о построении навигации на сайте. Каждый совет — картинка в формате плохо — хорошо. Среди них:

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

Опубликовал выжимку из книги Нира Эяля «Покупатель на крючке» — о том, как создавать продукты, вызывающие привыкание.

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

Триггер → Действие → Вознаграждение → Инвестиция → Внутренний триггер.

https://vandergrav.ru/hooked-book-summary/

Илья Александров написал о своём опыте создания прототипов: аппарат по продаже симкарт, экран в кабине грузовика, процесс настройки «лайтпака» (аналог Philips Ambilight), звуковая индикация в носимом устройстве — всё кроме сайтов и приложений.

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

#prototype

Наталия Спрогис написала об айтрекинге. Рассказ основан на опыте руководства направлением UX-исследований в Mail.Ru Group.

Как работает человеческий глаз и сам айтрекер, какие трекеры бывают, какие материалы создают на выходе, сколько нужно респондентов (зависит от задачи, есть калькулятор), какие решаются задачи: выявить причины UX-проблем, особенности поведения пользователей, сравнить решения. И какие есть подводные камни.

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

О тепловых картах: «Блок, который получит 10 фиксаций от одного респондента, и блок, которому досталось по одной фиксации от 10 человек, могут стать одинаково „горячими“. Это поведение настолько непохожее, что ведет к совершенно разным выводам о продукте».

У компании «СКБ Контур» (один из продуктов — облачная бухгалтерия «Эльба») есть интерфейсные гайдлайны. Например, о валидации форм:

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

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

#form #error

Скотт Харф привёл результат исследования минимального размера кнопки для тач-интерфейсов и сравнил с рекомендациями Apple, Google и Microsoft.

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

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

In English (копия в Вебархиве). #button #mobile

Написал, почему дизайн не должен «просто работать».

«В случае алкомаркета "Красное и белое" покупатель заметит магазин. Возможно, ему плевать на качество исполнения вывески, особенно, если надо купить водки и напиться. Но он и его дети будут жить в среде, где распространены такие визуальные решения.

Домой он закажет некрасивую отечественную мебель. На своём заводе утвердит макет чайника, который промышленные дизайнеры нарисовали левой пяткой, так как надо показать 3 варианта, а этот "он точно не выберет"».

Кейт Мейер рассказала, как делать сравнительные таблицы. Например:

— Пусть шапка прилипает и всегда будет на виду;
— Показывайте отличающиеся значения;
— Не отображайте параметры, по которым нет значений хотя бы у одного товара;
— Помогайте понять числовые значения. Например, Амазон показывает: вес 2,7 унции (яйцо), габариты 3,5×0,9×0,9 дюймов (помада).

In English. Копия перевода в Вебархиве. #table

В переводе появилась первая серия «Abstract: The Art of Design» — документального сериала о культовых дизайнерах современности.

Первая серия — об иллюстраторе Кристофе Нимане, одном из авторов обложек The New Yorker. Он везде играет с абстракциями и интерактивностью: от обложек журналов до скетчей в Инстаграме.

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

— О чём стоит подумать, прежде чем добавлять их в продукт;
— Что учесть при проектировании алгоритмов.

In English. Копия перевода в Вебархиве.

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

В компании InPlat на 20000 платежей сравнили её и компактный вариант расположения полей. При одинаковой конверсии скорость заполнения компактной формы оказалась выше. Плюс, такая форма проще адаптируется для смартфонов.

Ещё одна статья о теории близости. На этот раз разбирается не только текстовый блок, но и более сложный объект — форма регистрации.

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

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

У нас постоянно возникают задачи — jobs: убить время в очереди, приготовить полезный завтрак, поделиться впечатлением от поездки. Мы «нанимаем» продукт, чтобы он нам помог. И выбираем его не потому, что он подходит нам и нашим особенностям, а потому что решает задачу.

Подходу Jobs to be done более 30 лет. Анна Булдакова рассказала:
— Об отличии от традиционного подхода с персонами и юзерстори;
— Как провести исследование, какие вопросы задать и кому;
— Как определить место начала и окончания «работы»;
— Что такое прямая (за работу) и непрямая (за результат) конкуренция продуктов.

User story: я 30-летний Петя, хочу съесть что-нибудь вкусное, чтобы больше не быть голодным.

Job story: у меня 2 минуты между встречами, хочу съесть что-нибудь просто и быстро и поднять уровень сахара в крови, чтобы продержаться до обеда и сохранить рабочий настрой.

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

Для тех, кто хочет развлечься этим воскресным днём, подоспела вторая серия Abstract на русском языке.

Она посвящена Тинкеру Хетфилду — легкоатлету и дизайнеру Nike, который участвовал в создании «джорданов» и, например, самозашнуровывающихся кроссовок из «Назад в будущее». Интересно про взаимодействие с Майклом Джорданом, изначальное отличие от обуви Reebok. Серия получилась бодрее первой.

https://vk.com/video-59434067_456239028

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

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

И первой мыслью после этого было «Что ж все остальные так не делают, как здорово было бы жить».

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

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