Как это работаетЧто раздражает дизайнеров
в интерфейсах
Ошибки, которые чаще всего допускают проектировщики
Текст
Артём Лучко
Каждый день мы тратим нервы и время из-за плохо спроектированных интерфейсов программ, приложений и сайтов. Мы путаем кнопки Cancel и Save, расположенные рядом; вместо ссылки кликаем на рекламные баннеры и постоянно страдаем от всплывающих окон, которые вымаливают лайки. Look At Me обратился к UI/UX-дизайнерам, чтобы узнать о самых раздражающих ошибках в интерфейсах.
Отход от стандартов
Андрей Медведев
UI/UX-дизайнер Indee Interactive
«Пример, когда интерфейсы усложняют нашу жизнь, — это нарушение гайдлайнов платформы (стандартов применения элементов интерфейса. — Прим. ред.). Непривычное расположение и внешний вид элементов, непредсказуемое поведение сбивают с толку и раздражают. Стоит опасаться таких ошибок, нужно читать гайдлайны и проверять решения на пользователях — хотя бы на друзьях и коллегах. Нашумевший пример — использование бокового меню (или гамбургер-меню) как основной навигации приложений для айфона. Проблема в том, что такое решение игнорирует главные функции навигации — отвечать на вопросы „Где я нахожусь?“, „Куда могу попасть?“ и „Что меня там ждёт?“».
Иван Волков
арт-директор Avito
«Дизайнеры меняют внешний вид „контролов“ (управляющих элементов, кнопок, табов, форм заполнения и так далее. — Прим. ред.) на сайтах, чтобы сделать восприятие бренда целостным, но иногда забывают об особенностях поведения стандартных элементов. Так получаются кастомные выпадающие списки, в которых нельзя выбрать нужный элемент, нажав первую букву. Или кнопки „загрузить файл“, которые не поддерживают drag-and-drop, как, например, сделал Atlassian в последних версиях JIRA (коммерческая система отслеживания ошибок. — Прим. ред.). Боль в том, что пока это была стандартная кнопка, я мог перетащить файл на неё. Если что-то выглядит как фиалка, пахнет, как фиалка, то и работать оно должно не хуже. Часто же в погоне за красотой забывают, что кроме внешнего вида нужно дублировать и поведение со всеми его нюансами».
Юлия Кондратьева
проектировщик студии looi.ru
«Меня раздражает неединообразие. Ссылки в одном месте сайта подчёркнуты, а в другом — нет. Одни кнопочки реагируют на ховер (индикацию взаимодействия, например, когда кнопка меняет цвет при наведении на неё курсора. — Прим. ред.), другие — нет. Одни выпуклые, другие — нет. Наверное, во мне умер прапорщик. Безобразно, зато единообразно».
Тормозящие интерфейсы
и анимация
Иван Волков
«Из нынешних трендов в дизайне меня больше всего раздражают случаи, когда я не могу использовать стандартные способы взаимодействия, когда привычные шорткаты, доступные везде, вдруг перестают работать. Например, на многих удивительных и прекрасных лендингах я не могу пользоваться обычной прокруткой страницы. Вместо удобной и привычной прокрутки мне приходится бороться с прилипающими блоками и анимациями. Если ещё страница и загружается поэтапно, то невозможно пользоваться поиском по ней».
Андрей Медведев
«Впечатление часто портят тормозящие, скачущие, кое-как работающие интерфейсы. Проблема обнаружилась на уровне разработки, но ответственность лежит на дизайнере. Результат дизайна — продукт, работающее решение, поэтому ошибочно полагать, что на макетах проектирование заканчивается. Чтобы достичь качественного результата, дизайнер должен следить за всеми этапами вплоть до полной готовности.
Ещё одна область, где допускают ошибки, — использование анимации в интерфейсе. Она раздражает и портит впечатление, когда тормозит. Она усложняет работу, если слишком затянута. Хорошая анимация даёт обратную связь, отличная — дополняется кайф-эффектом. Интерфейсная анимация помогает понять, какой процесс происходит, убедиться, что ничего не сломалось. Если эти функции не выполняются, то, скорее всего, от анимации нужно избавиться».
Алексей Боев
руководитель подразделения дизайна и проектирования Rambler Digital Solutions
«За то, что приклеивающиеся тулбары начинают лагать при скроллинге, нужно наказывать разработчиков, а не дизайнеров. Да и автоматические слайд-шоу действительно раздражают. Я не люблю, когда интерфейс работает сам по себе, без желания пользователя. Есть отличные примеры реализации, когда к слайду приставляют небольшой прогресс-бар, задача которого — отслеживать тайминг перелистывания слайда. Такое поведение меньше раздражает пользователя, поскольку сразу даёт понять, сколько времени осталось на подумать».
Продвижение страниц, погоня за кликами и KPI
Иван Волков
«Сегодня почти все новостные порталы грешат любовью к продвижению своих страниц в социальных сетях. Я перешёл по ссылке, ничего не успел прочесть, а мне предлагают любить их и делиться ссылками. Я же ещё ничего не прочёл! Пустите меня на страницу — там я уже смогу решить, хочу я делиться этой информацией или нет. Мораль проста: не мешайте пользователю получать доступ к информации. Человек приходит в первую очередь за информацией, а не за дизайном и анимациями».
Юлия Кондратьева
«Раздражают интерфейсы-тираны („Вы были невнимательны, попробуйте еще раз“), интерфейсы-попрошайки („Подпишитесь, а то меня уволят“), интерфейсы-роботы (повсеместный канцелярит: „В связи со сбоем на стороне поставщика услуг в интернет-банке „Х“ и мобильном банке „Y“ недоступно пополнение транспортной карты „Z“. „Приносим извинения за доставленные неудобства“. Канцелярит делает систему муторной и сложной для общения, как тётка в окошке паспортного стола)».
Алексей Боев
«Соглашусь, что мешающие прямому взаимодействию с интерфейсом истории (наложенные экраны с просьбами зарегистрироваться или залайкать сайт) раздражают пользователя. И здесь, я думаю, нужна здоровая корреляция между бизнес-задачами (например, конверсия в регистрацию или подписка на группу в социальной сети) и тем, что нужно от интерфейса самому пользователю. Считаю, что часто дизайнеры или руководители проектов решают задачу слишком в лоб, просто не задумываясь о факторе раздражения, и потому, что так проще и быстрее. Поп-ап-окна с консультантами и прочие штуки действительно повышают конверсию продаж, и важно, чтобы визуальное представление этих модулей органично вписывалось в макеты сайта.
Гонка за кликами иногда мешает. Я бы исходил из корреляции CTR, фидбека пользователей и того, как продукт в итоге решает бизнес-задачу. Можно отодвинуть баннер от кнопки, продукт начнёт приносить, условно, на 30% меньше денег, и вот тут уже владелец продукта должен решить, как соблюсти баланс между UX и звонкой монетой. Но могу сказать, что решение, которое не вредит пользователю, можно придумать почти всегда.
То же самое с бесконечной лентой прокрутки. Она оправданна в социальных сетях, где посредством неё достигается высокий KPI в виде времени, проведённого в сервисе. Это время резко сократится, если сделать пейджинацию (разбивку содержимого на отдельные страницы. — Прим. ред.). А вот в интернет-магазине, например, бесконечная лента вредна, поскольку человек ориентируется по основному параметру выборки (например, цена) и может прикидывать в уме, на какой странице каталога окажутся товары нужной ему ценовой категории. Всё зависит от задачи».
Формы для заполнения
Юлия Кондратьева
«Раздражает, когда в форме авторизации регистрации не указывают Name. Из-за этого браузер не может распознать поле и не делает автоподстановку. Удивительно, что люди уменьшают формы регистрации, выгадывают клики и при этом не дают пользователю одним кликом ввести имейл.
Действуют на нервы дефолтные настройки. Почти во всех программах дефолтные настройки по умолчанию ужасны. В некоторых выбиралках даты рождения по дефолту стоит нынешний год или какой-нибудь 1900. Хотя посмотреть в аналитике, каких пользователей приходит больше всего, занимает минуту. Да, ошибка на пару лет будет, но хотя бы скроллить весь XX век не придётся. Достаточно сделать хорошие, действительно толковые настройки по умолчанию, и вот уже 80% людей, которые не вникают в детали и не меняют эти настройки, выполнят свою задачу быстрее и лучше».
Алексей Боев
«О вреде кнопки Reset уже много писали, а кейс расположения рядом кнопок „отмены“ и „сохранения“ можно отлично решать либо черновым автосохранением (например, в почтовых программах), либо дополнительным, необязательным окном подтверждения, которое само поймёт, нужно ли сейчас отображаться. В целом задача дизайнера — предусмотреть UX интерфейса таким образом, чтобы минимизировать риски потери данных.
Вообще, использование скрывающих символов — многолетний, выработанный миллионами пользователей паттерн поведения полей для ввода пароля. Основная причина их появления — чтобы никто не смог подсмотреть пароль откуда-нибудь из-за плеча, или если ты его ввёл, а потом отвлёкся и отошёл от компьютера. При этом я допускаю, что на мобильных устройствах или планшетах, когда действительно риск подсматривания невелик, вполне можно проверить гипотезу отказа от точек в поле ввода пароля, но следует понимать, что часть пользователей может начать считать сервис небезопасным, потому что „даже пароль у них в открытом виде“.
К уведомлениям вида „Are you sure?“ нужно относиться очень внимательно. Нужно ли уведомление перед стартом форматирования диска? Наверное, да. Нужно ли оно при попытке зайти в каталог интернет-магазина? Наверняка нет. А вот нужно ли оно при отправке большой и длинной формы, результат обработки которой спишет 8000 рублей с вашей банковской карты?».
Другие спорные моменты
Алексей Боев
Приложения, которые не закрываются крестиком
«По моему мнению, то, что некоторые приложения не закрываются таким образом, основано на статистических данных, когда пользователи закрывают его, на самом деле ожидая, что оно продолжит работу в фоновом режиме. А на Mac OS в этом плане более адекватное поведение, когда пользователь совершенно точно знает, что приложение при нажатии на крестик не закроется, а свернётся в фоновый режим, и закрыть его можно только вручную».
Вложенные меню со вложенными меню
«В выпадающих меню я также не вижу ничего плохого, если они обеспечивают правильный UX и помогают, а не мешают пользователю. Зато в них при грамотном подходе можно разместить достаточно сложную иерархию вложенных структур».
Капча
«Есть разные способы, дающие возможность отличить пользователя от бота. Например, тест Тьюринга — самый простой и, наверное, до сих пор один из самых действенных способов».
Подсказки для новичков
Юлия Кондратьева
«Находясь в восторге от сложности своей системы, разработчики часто пытаются рассказать о всей сотне функций, которые они запихали в несчастное приложение. Гордость не позволяет добавить им меньше полдюжины экранов со стрелочками и подсказками. А человек, включив в первый раз приложение, может и не добраться до начала работы с ним, устав от чтения краткого мануала в шесть страниц по использованию user-friendly-приложения».
Почему важен контекст
Геннадий Лохтин
ведущий дизайнер интерфейсов «Яндекс.Браузера»:
«Можно прошерстить весь интернет, с серьёзным лицом собрать список „25 наиболее частых и раздражающих ошибок в дизайне интерфейсов“ и срубить все перепосты Галактики. Только тогда участь этой колонки — возглавить тот самый список, ведь никаких норм из этого не вывести. Вся соль — в контексте использования.
Интерфейс — это мысль, которую одни люди хотят донести до других. Чекбокс, кнопка, диалоговое окно, клавиатура, дверная ручка или дорожный знак с ограничением скорости. Нам заранее важно знать, как именно поведут себя все эти вещи ещё до контакта с ними. Если повернуть дверную ручку, то дверь, скорее всего, откроется (по крайней мере, я бы на это надеялся). Пиктограммы или надпись „от себя“ помогут понять, в какую именно сторону, а форма ручки поможет сделать это быстрее. Может быть, дверь вообще сможет открыться автоматически, когда человек приблизится к ней.
Возьмёте ли вы на себя смелость назвать один из перечисленных способов открытия двери ошибкой? Не думаю, ведь в задаче не хватает условий. Хороший дизайн получается при наличии здравого смысла, это не набор каких-то норм и правил. А проблемы могут возникать, например, из-за избыточности элементов и невнятности формулировок или следовать из неочевидности действия:
→ Пример правильного подхода к UX:
MacBook против обычного ноутбука
Не владея контекстом, нельзя утверждать, что кнопки „сохранить“ и „удалить“ не могут находиться рядом, выпадающее меню не должно содержать двойную вложенность, а автоматическое слайд-шоу на сайте помешает восприятию информации.
Нажимая на крестик, я не хочу знать, закрылось приложение или свернулось — я просто хотел бы перестать его видеть. Перезагрузится ли страница, сохранятся ли данные, куда ведёт кнопка „подтвердить“ — всё это неважно для пользователя. Человек хочет отправить сообщение, купить микроволновую печь и забронировать столик в ресторане. А задача дизайнера — создать для этого простую систему, не расставляя препятствий.
Попробуйте, например, закрыть вкладку в браузере, предварительно заполнив поле написания статуса на фейсбуке. Или перейти куда-то внутри самого сайта. Барьер, который возникает совершенно неожиданно для человека. Сайт проявил инициативу и запретил браузеру себя закрыть, чтобы сохранить какую-то информацию. Наилучшим действием была бы возможность восстановить вкладку вместе со всеми данными, но только после её закрытия. Такая маленькая магия уже существует, например, в почтовых клиентах: черновики писем сохраняются автоматически. А браузер бережно хранит недавно закрытые вкладки.
Пока одни работают над простотой содержания и формы интерфейса, объясняя пользователю, как следует им пользоваться, другие делают так, чтобы пользователю не нужно было знать о его существовании. А любые элементы, которые в каждом конкретном случае не решают задачу, поставленную человеком, можно называть ошибками».
фотографии via Markos Evans, Benedek Takács
Комментарии
Подписаться