В очередном выпуске рубрики «Интерфейсы», материал известного дизайнера и UX-эксперта Люк Вроблевски о сложностях реализации подсказок в интерфейсах в условиях существующего разнообразия устройств, используемых людьми для выхода в интернет. Редакция попросила высказаться по этому вопросу отечественных экспертов .
В настоящее время пользователи интернета выходят в сеть с устройств разного типа. Соответственно, в качестве устройства ввода может выступать мышь, клавиатура, тачскрин, трекпад или их комбинация. Все это создает проблему — не всегда пользователи могут понять, как конкретно можно добиться желаемого результата в программе или приложении.
Люк Вроблевски
Распространенный способ её решения — это предоставление встроенных подсказок. Обычно подсказки размещаются в тех местах интерфейса, где могут принести наибольшую пользу, они хорошо видимы и пользователю не нужно совершать никаких дополнительных действий, чтобы получить к ним доступ. Часто этого вполне достаточно, но в случае, когда приложение может работать с разными устройствами ввода, ситуация усложняется.
Вроблевски приводит пример разработанного его командой полностью адаптивного веб-приложения, которое могло работать на смартфонах, планшетах, десктоп-компьютерах и других устройствах. Пользователи приложения могли загружать и работать с изображениями — «зумить», изменять размер и передвигать их по экрану. Однако способ выполнения этих задач зависел от устройства ввода.
Для того, чтобы перетащить изображение в другое место на экране, необходим соответствующий жест пальцем, ресайз производится привычным для пользователей мобильных устройств образом, с помощью двойного прикосновения к экрану происходит раскрытие изображения на весь экран:
Аналогичные действия можно осуществлять и с помощью мыши и клавиатуры. Для увеличения используется колесо прокрутки или мультитач-жест на трекпаде. Изменение размера осуществляется с помощью клика и растягивания.
Очевидно, что тач-жесты и использование мыши приводят к одному и тому же результату, но разными способами. Вроблевски говорит, что в ходе работы над проектом у специалистов из его команды возникли опасения в том, что пользователи десктоп-компьютеров не всегда в курсе о возможностях колеса прокрутки или мультитач-жестов трекпада — им нужны были подсказки.
Казалось бы — простейшее решение. Нужно определить есть ли у подключенного устройства трекпад или мышь и показать подсказку. Но не для всех действий в приложении такие подсказки подходили — одной из функций проекта было создание опросов и голосование. Пользователи планшетов и смартфонов могли легко выбирать опрос и голосовать с помощью больших пальцев рук, но пользователям десктоп-компьютеров нужно было совершить больше действий:
Разработчики реализовали возможность голосования с помощью клавиш стрелок (соответственно, левая и правая), а переключаться между опросами можно было с помощью стрелок «вверх» и «вниз».
Это означало, что нужно определять наличие клавиатуры и показывать подсказку о том, как работает интерфейс голосования. Вроблевски говорит, что ему не удалось решить эту задачу. Тогда он решил обратиться к знакомым в команде разработки браузера Internet Explorer.
Если кто и знает, как реализовать подсказки на разных устройствах, то это разработчики браузера, который доступен даже на игровых консолях,
Выяснилось, что разработчики браузеров не спешат делиться подобной информацией и из соображений безопасности не позволяют создателям сторонних приложений штатными способами узнавать тип устройства ввода пользователя. Вроблевски говорит, что этот факт побудил его коллег пойти другим путем — теперь они попытались «угадывать» наличие клавиатуры по ширине экрана. Логика была проста — чем больше экран, тем больше вероятность того, что веб-приложение открывается на десктоп-компьютере с клавиатурой, а значит, стоит показать соответствующую подсказку.
Этот метод не столь надежен и может давать сбои — разнообразие устройств сегодня слишком велико, но решений лучше на данный момент нет, говорит Вроблевски.
К примеру, разработчики могли бы реализовать отдельную секцию для получения информации о том, как работает приложение с конкретным устройством ввода, но тогда теряется быстрота и прозрачность подсказок в интерфейсе. Другой вариант — подождать, пока пользователь совершит какое-то действие с приложением, раскрыв тип своего устройства, сохранить эти данные и показывать подсказки уже после этого — однако люди сейчас запускают приложения на разных устройствах, что может привести к отображению нерелевантных подсказок.
Вроблевски считает, что подсказки в интерфесах — это маленькая деталь, которая может сильно облегчить использование приложения, однако создать интерфейс, который мог бы качественно работать не только на разных устройствах, но и с разными устройствами ввода — это гораздо более трудоемкая задача.
Редакция попросила отечественных экспертов по дизайну и юзабилити прокомментировать опыт команды Вроблевски:
Сергей КудряшовCEO Softorino
Появление разных способов ввода данных влечет за собой и усложнение разработки универсальных веб-сервисов. Если при разработке iOS-приложения вы и так знаете каким образом пользователи будут с этим устройством взаимодействовать, то для веб-приложения таких возможностей несколько.
Приведенный Вроблевски пример «голосовалки» — лишь частное решение одной проблемы. Другая проблема это онлайн-сервисы прототипирования (
Balsamic, UXpin), которые очень сложно использовать на тач-устройствах просто потому что там важна точность попадания, а именно мышь или перо (Wacom) её обеспечивает.
Зато проблему универсальности ввода и обучения пользователей отлично решили в сервисе
Parallels Access, в котором с iPad (тач-устройство) пользователь может управлять своим удаленным Mac (Мышь и клавиатура). Но тут был сразу известен способ ввода и способ преобразования действий в клики.
К сожалению, универсального решения для универсального ввода нет: если у вас промо-страничка — просто минимизируйте количество действий пользователя.
Если же речь идет о веб-сервисе — держите в голове основную аудиторию и способы использования — может вам будет проще сделать тач-приложение, чем оптимизировать сам сервис под жесты, как, например, поступили в MailChimp.
Ну а если вы, как и команда Вроблевски, участвуете в создании совершенно универсального веб-сервиса — главное протестируйте на всех типах устройства ввода и уже из результатов этого тестирования делайте выводы.
Арина Барановадизайнер Nimax
Создавать подсказки к элементам интерфейсов — это хороший тон. Но какими они будут — статичными или анимированными, текстовыми или графическими — зависит от предпочтений, вкуса и опыта дизайнера.
Выбор между встроенной текстовой подсказкой или анимированной графической часто продиктован типом проекта и средой, для которой разрабатывается интерфейс. Например, для интерфейсов, создаваемых исключительно под тач-устройства, мы в своей работе чаще предпочитаем анимированные «напутствия».
Чем элегантнее и легче будут поданы подсказки, тем более приятным и удобным покажется пользователю интерфейс. Скажем, подсказки
такого типа нам ближе, чем представленные в статье Вроблевски.
Что важно:
- Не объяснять очевидные шаги. Как здесь.
- Упрощать, не делать подсказки очень подробными.
- Ориентироваться на тип пользователя.
- Проверять работоспособность подсказок.
Не уходя от темы, но сдвигаясь в сторону, советую полезную
статью на английском.
Алишер Якуповруководитель отдела дизайна социальной сети «Одноклассники»
Мне очень нравится реализация подсказок у Люка. Такие подсказки работают лучше, чем гайды с картинками, потому что человек не тратит время на обучение, а сразу использует интерфейс и решает свою задачу. Насколько я знаю, первые к такому виду помощи пришли игровики, вспомните первые миссии старых РПГ — никаких экранов с кучей кнопок и подсказками по управлению. Сама игра на первых шагах ведет тебя по упрощенному сценарию, ненавязчиво показывая удобное управление основными функциями.
Но дизайнер не может просто так смотреть даже на очень хорошую реализацию, не пытаясь предложить что-то свое. Я бы поэкспериментировал с контекстом и интенсивностью использования сервиса, с обратной связью подсказки. Например, во время скрола сделал ярче стрелку вниз, показывая, что можно листать голосования с помощью клавиатуры. Или после, скажем, создания 10 голосований, где-нибудь выдать: «Да вы у нас молодец, столько всего запостили, а вот так можно делать это быстрее и удобнее». Возможно, эти эксперименты дали бы новую пищу для размышлений о таких подсказках.
Но все же самое главное, что хотел сказать автор — браузеры не балуют нас достаточной информацией, чтобы понимать тип ввода и подстроить подсказки под них. И авторитет Люка в таких заявлениях должен привлечь внимание разработчиков браузеров и OC. Хак с угадыванием инпута через ширину — красивый, но все же костыль. В случае ошибки, он будет предлагать пользователю широкого планшета поскролить и позумить мышкой.
About the author