Я рассказал о функциональных спецификациях к интерфейсу: зачем нужны и как их писать.

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

На записи плохо видно слайды, ссылка на презентацию есть в описании видео.

https://www.youtube.com/watch?v=XaRymaGcPXM

Илья Бирман на нескольких примерах объяснил принцип «дай нажать».

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

Или при выборе даты: «Чтобы не дать пользователю ввести несуществующую дату, некоторые разработчики убирают из поля дня несуществующие дни. То есть если выбран месяц июнь, то дня «31» просто не будет в выпадайке. Но что, если у меня день рождения 31 августа? Я хочу ткнуть в 31, а потом выбрать август. Дай нажать!»

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

https://ilyabirman.ru/meanwhile/all/let-me-click/

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

Состояние потока обычно свойственно играм. Чем оно характеризуется:
— Игрок понимает игровые механики и максимально контролирует ситуацию внутри игры;
— Оказывается полностью погружен в процесс, начинает жить своим персонажем;
— Теряет чувство времени.

Как поддержать это состояние не в игровых проектах:
— Ставьте пользователю понятные задачи, которые требуют простых действий. Разбивайте действия на этапы. Рядом с полями размещайте подсказки, зачем нужна та или иная информация. Одинаковые задачи давайте решать похожими действиями, например, редактирование профиля, личного блога и магазина;
— Награждайте пользователя за выполнение задач — как поздравительными сообщениями, так и чем-то более существенным;
— Ни в коем случае не вырывайте пользователя из его текущего сценария;
— Убедитесь, что представители вашей целевой аудитории в основном способны решать свои задачи с минимальными усилиями. В этом главное отличие от игр. Игровые задачи не должны быть простыми, иначе скучно играть.

https://zen.yandex.ru/media/id/5a8249f94826772d3da82e8c/5afe67059b403c5bc1dd4651

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

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

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

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

https://blog.sibirix.ru/2018/10/23/proto-design/

Если думаете, как составить хорошее описание дизайнерского проекта, есть старый, но всё ещё полезный совет Максима Ильяхова.

Расскажите:
— Обо всём, что остаётся неочевидным по картинкам. Например, особенности, которые не заметны с первого взгляда;
— Если это приложение, то — какую проблему оно решает;
— Об интересных сценариях использования. Не надо перечислять функции и комментировать то, что и так на экране;
— Что намеренно не сделано и чем решение отличается от других.

https://bureau.ru/bb/soviet/20130929/

Игорь Штанг поделился приёмом вёрстки таблиц и списков.

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

Работает это как любая группировка: элементы объединяются, и кажется, что их становится меньше. Вёрстка выглядит более собранной и контрастной.

Исключение — компактная, плотная верстка (список писем в Gmail, песен в iTunes). Если элементы стоят близко друг к другу, сдвигать разделитель необязательно.

https://nobelfaik.livejournal.com/175918.html

Артём Горбунов в интервью для VC рассказал:

— О переходе в дизайн и первом проекте в «Студии Артемия Лебедева»;
— Уходе из студии, запуске собственного бюро, первых клиентах и кризисе;
— Знакомстве с ключевыми сотрудниками бюро;
— Появлении инфостиля;
— Критериях, по которым можно вычислить шарлатанов в инфобизнесе;
— Внутренней кухне: по каким принципам живут сотрудники бюро, какими сервисами пользуются для работы и общения и почему у них каждый день — суббота;
— Своём рабочем дне, а также о том, почему у взрослого человека не существует свободного времени.

«В итоге я пригласил [Илью Синельникова] и стал готовить к работе менеджера проектов. Он всему научился, но за полгода не успел продать ни одного проекта и свалил. А через пару лет я написал ему: «Давай сделаем курс по переговорам», и он вернулся уже в другом качестве».

Почему у вас получилось развить собственную студию, в отличие от многих бывших сотрудников «Студии Лебедева»?

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

О причине кризиса:

«В [договоре] есть такая фраза: „Согласование результатов не включено в срок проекта“. Она всегда казалась мне спасительной, потому что самая страшная часть проекта для дизайнера — это правочки, которых может быть хрен знает сколько. И пусть за них отвечает сам клиент, а не мы.

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

https://vc.ru/design/50603

В последнее время программы (например, Sketch) и операционные системы (macOS Mojave) обзаводятся тёмными темами интерфейса. Мария Новикова написала об использовании тёмного фона.

Лучше использовать его, когда:
— Предполагается, что с интерфейсом будут работать в полумраке;
— Надо спрятать элементы интерфейса, чтобы они не отвлекали от просмотра контента или работы с ним (как в Фотошопе);
— Надо облегчить сканирование контента, помочь с первого взгляда выделить самое главное (графики в Salesforce).

Стоит учесть, что:
— Светлые буквы немного залезают на тёмный фон. Надо использовать более крупные шрифты, увеличивать межстрочные и межбуквенные расстояния и так далее;
— Людям с астигматизмом (в лёгкой форме есть у большинства населения) легче читать тёмный текст на светлом фоне.

https://usabilitylab.ru/blog/svetlie-vs-temnie-interfeis/

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

Юрий Белканов написал о современных автомобильных интерфейсах.

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

Что можно сделать:
— Ускорить железо;
— Убрать всё с глаз долой и оповещать голосом;
— Аккуратно выводить на лобовое стекло то, что долго объяснять голосом;
— Для ключевых элементов оставить механические элементы управления;
— Цифровые панели можно подстраивать под контекст. В поездках по городу и за городом водителю нужны разные функции, зачем в пробках круиз-контроль? В Adobe Premiere набор окон меняется в зависимости от выбранного режима: Сборка, Редактирование, Цвет, Наложение эффектов.

https://blog.stereomarketing.ru/ux/in-car-ux-troubles/

Ольга Шаврина написала об опыте а/б-тестов с помощью Google Optimize.

— Работает в связке с Google Analytics;
— Позволяет тестировать: а) Цвета, размеры и всё, что настраивается в CSS; б) Контент; в) Порядок и отображение блоков;
— Может таргетировать эксперимент на аудиторию, выбранную по 11 параметрам: URL, категория устройства и так далее.

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

Эксперимент показал, что идея была удачной, и новый вариант дизайна работает лучше оригинального. Но от постановки задачи до внедрения проходит не одна неделя. Чтобы получить новый интерфейс уже сейчас, можно просто включить выигравший вариант на 100% аудитории.

Optimize не очень информативно показывает список завершенных и текущих экспериментов. Ольга завела табличку, где отмечает детали экспериментов: включён или нет, дата, цель (метрика для улучшения), таргетинг, гипотеза (что проверяю), результат (кто победил), выводы (что это означает).

#ab_testing

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

— Если в тексте есть ссылка, выводить сообщение об ошибке «Поле содержит ссылку»;
— Если в тексте — запрещённое слово, выводить «Поле содержит некорректное выражение»;
— При этом некорректные выражения надо выделять в тексте или перечислять в сообщении об ошибке. Фильтры могут ошибаться и принимать за мат нейтральные слова вроде «ребенок». В большом тексте сложно найти такое ложноматерное выражение.

Очевидные рекомендации, но, например, Wildberries так не умеет.

https://okiseleva.blogspot.com/2018/11/blog-post_8.html

Рэйчел Краузе написала про сториборды (storyboard — раскадровка) в UX-дизайне.

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

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

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

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

Сториборды часто используют для описания фрагмента путешествия пользователя (user journey).

Когда стоит использовать сториборды:

1. Подведение итогов юзабилити-тестирования. Сториборд может включать процитированные слова пользователя, а также передавать элементы языка тела.

2. Дополнение карты путешествия пользователя (визуализация используемого устройства, офисного пространства и социальной группы) для лучшего понимания его ситуации.

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

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

https://vc.ru/design/51480

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

Например:
— Если машина доверяет пользователю, для совершения платежа от него не требуется платёжный пароль и смс-подтверждение. Это экономит время и повышает конверсию;
— Лучше защищены профили с накопленными бонусными баллами.

«Если где-то есть незащищенный аккаунт с деньгами, его взломают. Поэтому много где в интернете продают бонусные карточки крупных торговых сетей с балансом в несколько тысяч рублей за сумму раза в 3−4 меньше. Это реальные аккаунты в программах лояльности, за которыми недосмотрели владельцы».

Также можно определить:
— Неплатёжеспособных клиентов;
— Мошенников (заказ дорогой вещи без предоплаты в спальный район мутным клиентом);
— Поддельные комментарии и накрутку (или скрутку) рейтинга;
— Неадекватные заказы (особенно, если лавина таких заказов завалила CRM);
— Создание нескольких профилей одним человеком (например, для получения бонуса за регистрацию или скидки за первый заказ);
— Легитимность данных (когда кто-то подсмотрел номер билета на самолёт и перерегистрировал пассажира на другой рейс).

https://habr.com/company/yamoney/blog/416341/

Дизайнеры SteelKiwi написали о различиях приложений для iOS и Android (Material Design).

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

В стандартных элементах управления, например, выбор даты в iOS делается с помощью барабана, а в Android — календаря.

В стиле кнопок:
— Текст на кнопках в Android обычно имеет верхний регистр. В iOS чаще встречается верхний регистр первой буквы каждого слова;
— Основная кнопка (call to action) в iOS располагается в центре панели вкладок.

Микровзаимодействия:
— iOS: если пользователь открывает экран, опустив его вниз с верхней части экрана, он ожидает, что сможет убрать его, сдвинув вверх;
— MD: экраны одного типа (фотографии в альбоме, разделы в профиле) двигаются синхронно, это подчёркивает связь между ними. Когда один экран появляется справа, его брат смещается влево.

https://vc.ru/design/50643

Команда «Тильды» написала очень хороший вводный материал о UI-китах, фреймворках, гайдлайнах платформ и корпоративных дизайн-системах.

— Что такое UI-кит (с примерами), кто применяет, какие обычно элементы в него входят, какие бывают состояния, зачем использовать, где взять готовые киты.
— Что такое фреймворки и чем они отличаются от UI-китов. Из чего состоит Bootstrap, и как с ним работать.
— Что такое гайдлайны платформ, подробнее про Material Design от Google и Human Interface Guidelines от Apple, ссылки для более глубокого изучения.
— Что такое корпоративные дизайн-системы, чем они отличаются от UI-китов и фреймворков и зачем разрабатываются, ссылки на примеры.

https://tilda.education/courses/web-design/designsystem/

Илья Сидоренко написал, как сохранить интерес к дизайнерской работе.

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

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

https://designpub.ru/love-design-8ec77e3701f2

Евгений Яровой рассказал, как защитить дизайн перед заказчиком. (Можно смотреть на скорости 1,5.)

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

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

Надо:
— Понять, насколько вы полезны и насколько у вас с клиентом общие взгляды. Лучше не работать с нелояльными клиентами.
— Всё объяснить заранее: рабочий процесс, что вы будете делать, почему такая сумма.

Заключайте договор и читайте его вместе с клиентом, так как это регламент ваших отношений. Улучшайте его, если что-то идёт не так (например, 5-я итерация правок).

Полезные условия договора:
— 100-процентная предоплата этапа.
— Предоплата не возвращается. Это прекрасно втягивает клиента в рабочий процесс. Как можно договариваться на равных, если клиент может попросить вернуть часть предоплаты, а вы надеетесь получить оставшиеся деньги в случае оплаты 50/50?
— Возможность расторгнуть договор после сдачи этапа.
— Невозможность возврата на сданный этап.
— Закрепление в договоре списка участников со стороны клиента.

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

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

Что делать с демагогами со стороны заказчика:
— Обратиться к ним лично после общего обсуждения, дать выговориться.
— Обострить. «У вас есть сомнения, но вы не можете их сформулировать? Это заводит проект в тупик, и мы не знаем, куда двигаться дальше».
— Вернуться к фактам. «Тема нашего разговора следующая. Мы исходили из этих документов и этой презентации».
— Не дерзить. Человек должен понимать, что конкретно к нему относятся хорошо.

Если клиент говорит «клиент всегда прав» — это стопроцентный демагог.

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

https://www.youtube.com/watch?v=MgJML9MyI70

Николас Крамер написал о способах поощрения пользователей продуктов:

1. Информационное поощрение (новый контент):
— Становится обыденным: контента становится больше, получить его — проще.
— Не весь контент одинаково ценен.
— Важно найти способ подсказать пользователю, что пора остановиться. Например, как это делает Instagram.

2. Социальное:
— Обращено к честолюбию, самооценке, жажде общественного признания.
— Вызывает сильные эмоции.
— Социальные медиа развиваются, меняются и подходы к поощрению. Кнопка Like → несколько эмоций для выбора.

3. Геймификация:
— Использование игровых элементов (баллы, достижения, список лидеров) в неигровых продуктах.
— Активно внедряется образовательными проектами. Например, Treehouse, Duolingo и Codecademy.
— Пользователь видит, что уже выполнил и что ещё предстоит сделать. Чем больше он работает с продуктом, тем сильнее привязывается.
— Подходит не всем продуктам. Назначение продукта должно располагать к игровым механикам.

4. Монетизация:
— Пользователь получает деньги или материальные призы за выполнение определённых действий. Например, викторина HQ Trivia и её русский аналог «Клевер».
— Важно объяснить пользователям, когда они могут получить вознаграждение. Если выплаты происходят без проблем, это очень хорошо стимулирует пользоваться продуктом.

https://geekbrains.ru/posts/ux_design_promotions

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

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

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

https://specialbank.ru/guide/designer.html

Астрологи объявили день гайдлайнов «Сбербанка» в @uxnotes.

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

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

https://sobakapav.ru/portfolio/sberbank

Борис Янгель и Денис Филиппов из «Яндекса» рассказали, как работает Алиса. Например, про сохранение контекста:

«С точки зрения „болталки“, контекст — это те предыдущие n предложений диалога, в рамках которых нужно выдать ответ. И из этого сразу следует, что „болталка“ никаким долгосрочным контекстом не располагает, а оперирует только краткосрочным, то есть не знает, что пользователь сказал вчера или что ему в принципе нравится и интересно. Это большая, открытая исследовательская задача: как учесть такую информацию в нейросетевых моделях?

Есть ли какой-то параметр того, сколько реплик запоминает Алиса? Допустим, можно ли у нее сначала спросить, какая погода в Москве, и потом еще 10 раз спросить: а в Лондоне, а в Париже?

Этот модуль по-другому устроен. Грубо говоря, сейчас состояние диалога Алисы — это текущий диалоговый сценарий („сценарий“, состоящий из слотов, которые должны быть заполнены для выполнения запроса). Пока мы можем связать то, что говорит пользователь, с текущим состоянием, мы всегда будем поддерживать контекст. Если вы спросили про погоду, то дальше, сколько бы вы ни говорили „а в Москве…“, „а в Питере…“, „а на завтра…“, „а на выходные…“, пока классификатор уверен, что это уточнение погоды, можно будет спрашивать вечно».

https://nplus1.ru/material/2018/02/27/yandex-alice