Chulakov Design #1: заметки дизайнеров Студии

Команда дизайнеров Студии Олега Чулакова делится своим опытом в аналитике, проектировании и дизайне систем. Ещё больше заметок вы сможете найти в Telegram-канале.

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

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

Разрабатывая интерфейс, нужно помнить о форме, в которую он заключён.

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

Невозможно сделать законченный продукт без учёта окружающей среды, поэтому лучше позаботиться об этом заранее. Copy-paste

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

В реальности все дизайнеры копировали, копируют и будут копировать. Это нормальный процесс развития любой отрасли на земле. Все творческие люди (и не только) смотрят и изучают работы друг друга.

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

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

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

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

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

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

Не злоупотребляйте неактивными кнопками. Позвольте пользователю ошибиться, но понять причину. Это лучше, чем остаться с непониманием и вопросами без ответов.

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

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

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

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

Для больших сервисов, где пользователь проводит много времени, стоит в обязательном порядке добавлять такие «хоткеи», чтобы сделать взаимодействие более удобным. Сейчас невозможно представить лайк в Instagram или оценку в Tinder без жестов, количество которых в интерфейсах будет только расти. И ещё немного о кнопках

Знать — не значит привыкнуть.

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

С обводкой ситуация улучшается, но по-прежнему есть ощущение мишени, в которую нужно целиться.

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

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

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

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