Удобное взаимодействие с интерфейсом. Часть 1: Тексты.

Опубликовано 30.05.2018 · в Прототипирование

На протяжении последних 10 месяцев наша команда трудилась над проектированием интерфейса новой площадки для коллаборации работодателей и удаленных разработчиков, он же — маркетплейс.  Это был полезный опыт, мы набили множество синяков и шишек при продумывании взаимодействия пользователей с элементами на странице=). По этому поводу решили выпустить целый цикл статей на тему проектирования отдельных UI-элементов.

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

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

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

Самым простым и основополагающим принципом взаимодействия «юзер-система» является то, что интерфейс должен непосредственно откликаться на действия пользователя — прямое действие, оно же «Прямое управление», описанное Беном Шайдерманом в статье «Direct manipulation: a step beyond programming languages», 1983

Всем известный Аллан Купер трактовал это так:

«Там, где выводятся данные, должна быть возможность их ввода».

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

Первое, на что стоит обратить внимание-так это «приглашение к взаимодействию«, в данном случае, редактированию. И здесь требуется последовательное привлечение внимания пользователя, иначе

Итак требуется постепенная обработка внимания:

  1. Всплывающая текстовая подсказка при наведении курсора мыши на текст, например click to edit.
  2. Само поле подсвечивается, например желтым цветом, а курсор мыши изменяется на текстовый (в виде символа I).

navedenie text
Осталась очевидная проблема-пользователь должен сначала навести курсор мыши на сам текст — он может до этого не додуматься=)). Поэтому обычно редактирование дополняют либо иконкой, либо ссылкой edit (изменить/редактировать), либо и то и другое одновременно.

edit_information

Когда стоит применять прямое редактирование?

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

edit blast
Огромным подводным камнем такого типа взаимодействия является использование таблет и мобильной версии вашего сервиса. Здесь никакого «наведения курсора мыши» быть не может, а значит, если сервис рассчитан на полную адаптацию, все же стоит на этих версиях показать элементы редактирования — даже не с помощью ссылок (они на мобильных не очень удобны), а с помощью полноценный кнопок редактирования.

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

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

Еще один вариант редактирования много строчного текста — использование оверлея.

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

К тому же, при прямом редактировании сложно(а порой и невозможно) разместить все элементы редактирования прямо на странице. Это приводит к сильному смещению остальных блоков и сложности переходов между режимами: отображение/редактирование/сохранение.

edits

Важно:

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

Сохранение изменений

Сохранение изменений, как правило, происходит путем нажатия целевой кнопки Save/ Сохранить
При этом на момент сохранения данных пользователь должен видеть уведомление Saving или индикатор выполнения (лоадер). Это защитит от множественных кликов и покажет, что «все было верно сделано», данные сохраняются, подождите.

overleys

Еще полезная фича — не забудьте настроить уведомления о необходимости сохранить данные при переходе на другую страницу или закрытии вкладки браузера.

Резюмируем:

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

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

Сделайте визуализацию переходов от режима к режиму отображение-редактирование-сохранение.

Тестируйте и исправляйте, ведь нет стандартных решений для всех интерфейсов.