Пользовательский контроль и свобода (Эвристика удобства использования #3)

No items found.
Аудио перевод статьи
0:00
0:00
·

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

Третья эвристика (совокупность приемов и методов) удобства  использования Джейкоба Нильсена для дизайна пользовательского интерфейса — контроль и свобода пользователя. Данный принцип гласит:

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

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

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

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

Существует несколько видов контроля UI, которые обычно позволяют людям вернуться к предыдущему шагу в работе:

  • Ссылка назад (Back), которая возвращает пользователей на предыдущую страницу или экран 
  • Ссылка  закрыть (Close), которая позволяет пользователям закрыть новое окно или вкладку
  • Опция отменить (Undo)  и  соответствующая опция повторить( Redo) позволяет пользователям отменить последние изменения  

1. Всегда предоставляйте пользователям возможность вернуться на шаг назад

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

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

Данный выбор дизайна часто является результатом приоритетности метрик тщеславия (показатель, заставляющий чувствовать себя хорошо, но не имеющий отношения к успешности продукта) над важными целями UX. Вместо того, чтобы вынуждать пользователя подольше остаться на сайте, отключая кнопку “Назад”, сайты должны предлагать пользователям ценный контент, который вызовет у них такое желание по-настоящему.  

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

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

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

Four screenshots from Delta's mobile app are displayed. The first screen shows several available flights for a search from Detroit to Honolulu. The second screen shows one flight has been selected. There is a back button at the top of the screen. When the back button is pressed, a overlay message is displayed (shown on screen 3) which asks the user if they want to continue booking or search for a new flight. Selecting search for a new flight takes the user back to the beginning where they have to enter their search criteria, rather than to the previous list of all available flights.
В приложении дельта, при выборе определенного рейса, для пользователя отсутствует возможность вернуться  к списку полётов без необходимости начинать целый поиск заново.  В данном случае ссыл0е функционирует должным образом, потому что она не позволяет пользователю вернуться на шаг назад. Вместо этого, ссылка Назад функционирует как ссылка «отмены». Давая подобным образом «пощёчину» людям, у них пропадает желание продолжать пользоваться приложением и искать рейсы через ваше приложение, что,  следовательно, снижает продажи.

2. Предугадывайте ожидания пользователей, используя ссылки “Назад” 

При взаимодействии с оверлеем или лайтбоксом (контент, расположенный поверх основной страницы), пользователи часто путаются и считают, что они находятся на новой странице — особенно когда оверлеи занимают целый экран. Поэтому для возвращения на предыдущий экран люди часто нажимают браузерную кнопку “Назад” вместо того, чтобы нажать на ссылку “Закрыть” или иконку “X”. Данное действие возвращает пользователя на два шага назад, а не на один, как было задумано, в результате это приводит к путанице и дезориентации. 

При проведении тестирования на удобство использования мобильных приложений, участник теста использовал браузерную кнопку “Назад” на полноэкранном оверлее. В итоге он был выкинут из оверлея и со страницы, на которую он хотел вернуться. Участник теста прокомментировал, “Я не ожидал, что буду переправлен с этой страницы. Если я нажимаю “Назад”, меня не возвращает назад, к той странице, на которой я был. И также не возвращает меня на ту самую страницу, с которой я начал”.

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

A gif shows Asos.com, a clothing retailer. When a user selects a pair of shoes from the product listings page, and selects a link from within that page to view shipping information, a fullscreen overlay appears. Using the browser's back button (rather than the close icon) takes the user back to the product listings, rather than to the product overview page for the pair of shoes the user selected.

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

Two screenshots from Wayfair.com are presented. A product overview page for an armchair is shown on screen 1. Underneath the product's title is the average rating (4.5) and a link to read the reviews. Clicking on the link opens up a drawer which fills the full screen. A back link appears at the top of the page to take the user back to the screen they were looking at before clicking the reviews link.
На сайте Wayfair.com при нажатии на ссылку Отзывы открывается навигационная панель, которая открывается на весь экран. Обе кнопки Назад (кнопка сайта и кнопка браузера) перенаправляют пользователя на начальную страницу обзора товара, что является тем, чего и ожидают пользователи. Пользователь также может провести слева направо, чтобы закрыть данную панель.

 Некоторые пользователи считают, что кнопка “Назад” в мобильных приложениях должна работать также, как и в веб-версии: то есть возвращать пользователя на шаг назад. Однако это так не работает. Дизайнеры часто привязывают данное действие к переходу на шаг вперед в информационной архитектуре (IA) приложения. В результате чего происходит путаница.

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

 После нажатия пользователем на новостные истории в приложении BBC News, они могут пролистать другие статьи в списке. Кнопка назад направляет пользователя на шаг вперед ( к странице со списком), вместо того, чтобы перенаправить к статье, которую пользователь посещал последний раз. 

 3. Ссылки для выхода с сайта должны быть легко заметными

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

Согласно стандартам дизайна, нужно учитывать позиционирование кнопок Закрыть, Покинуть или Отмена, для того, чтобы пользователи могли легко найти их там, где они чаще всего привыкли их видеть. К примеру, в оверлее лайтбокса, пользователи обычно ожидают увидеть иконку ‘X’ в правом верхнем углу оверлея. 

An image of an article on Harper's Bazaar's website. On top of the article appears a modal overlay. The close link appears outside of the modal overlay and is easily missed because it lacks contrast to the background, which is the article's image.
На веб-сайте Harper’s Bazaar, всплывающее окно предлагает пользователю оформить подписку. Ссылка Закрыть появляется в нижнем левом углу за пределами оверлея. Такое неудобное расположение в сочетании с плохим контрастом с фоном делает кнопку малозаметной. 

Помимо размещения кнопок “Выхода” в привычных для людей местах на сайте важно использовать универсальные иконки, чтобы пользователи понимали, какую функцию выполняет та или иная ссылка. Дополняйте  значки текстовыми метками или заменяйте значки простым текстом. К примеру, используйте “Назад” вместо “<”, а также “Закрыть” вместо “X”.  

 4. Предоставьте пользователям возможность легко отменить действие 

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

A screenshot of a user beginning to compose a tweet on Twitter. The cancel link has been tapped which generates a dialogue asking the user whether they'd like to delete the draft or save it. Another cancel link appears to allow the user to undo the action.
Когда пользователи начинают сочинять твит, они могут легко отменить этот процесс нажав на кнопку Отменить в левом верхнем углу . При этом, Твиттер даёт возможность пользователю опцию удаления сообщения или сохранения его как черновика. Наличие данного выбора гарантирует пользователям, что они не потеряют свой текст случайно.

 Дизайнеры, пытающиеся сэкономить пространство на экранах мобильных устройств, используют иконку “X” вместо “Отменить”. Однако иногда иконка “X” может быть ошибочно принята за кнопку “Закрыть”, а не “Отменить”. Существуют интерфейсы, в которых важно отличать разницу между этими двумя кнопками, поскольку они отвечают за разные действия. Если “X” выполняет функцию Закрыть или Отменить, то используйте точную текстовую пометку (например, Закрыть) или создайте предупреждение для пользователя в виде диалогового окна, чтобы он мог избежать потери своей работы. 

A screenshot from the Wealthfront app (a finance app) is shown. The user has begun a multi-step process to transfer money from an investment account to a current account. The user is provided the option to finalize the transfer, cancel the transfer through an 'X' icon and go back a step in the transfer process by clicking on a back arrow icon.
При переводе денег с инвестиционного счета в приложении Wealthfront пользователи следуют нескольким шагам на последующих экранах. Вверху экрана пользователи могут как вернуться на шаг назад, используя стрелку назад, так и нажать на X для отмены перевода. Тем не менее, не совсем понятно, сохранятся ли данные перевода при нажатии на X или перевод будет отменён полностью. В данном случае, действие полностью отменяет платёж, поэтому лучше было бы использовать пометку Отменить. 

 5. Используйте поддержку функции отмены последнего действия (Undo) 

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

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

An image of the shopping basket from the CVS pharmacy website. Some allergy relief eye drops have been added to the basket. A remove link appears below the item to allow the user to remove the item from the basket.
 На сайте электронной коммерции, как в приведенном выше примере  сайта CVS, пользователь может отменить добавление элемента в корзину, выбрав «Удалить».
A screenshot of the iOS notification settings for the BBC News app. The user is given the option to toggle notifications and sounds on or off, and also select and deselect how notifications appear (for example, on a locked screen, in the notification center or in banners).
При изменении настроек уведомлений пользователь может отменить изменения с помощью переключателей и чекбоксов.
An interactive floorplan is shown from Mattamy's site. The user has made some changes to the floorplan by selecting additions from a panel that appears on the left of the page. On the right of the floorplan itself, several icons are shown with no labels. One icon is a backward facing arrow which has been highlighted in this image by the author.
Компания Mattamy, занимающаяся строительством домов, размещает на своем веб-сайте интерактивные планы этажей, давая пользователям возможность изучить несколько вариантов структурных изменений. Чтобы отменить изменения, пользователи снимают чекбокс структурных изменений на левой панели. К сожалению, кнопку сброса (выделенную) легко по ошибке принять за кнопку отмены.

Если существует возможность выполнения нескольких действий подряд в короткий промежуток времени, то важной опцией будет поддержка нескольких операций — отмены последнего действия и повтора (Undo/Redo). Функция отмены последнего действия часто бывает недостаточной. Для пользователей десктопов рекомендуется поддержка стандартных сочетаний горячих клавиш, используемых опытными пользователями.

6. Убедитесь, что кнопка Undo заметна 

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

Что касается дизайна для десктопов, не стоит полагаться на то, что ваши пользователи всегда будут знать о существовании сочетания горячих клавиш.

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

В приложениях WYSIWYG (что видишь, то и получаешь), таких как текстовые редакторы и приложения для дизайна, функция отмены действия обычно находится на панели инструментов или в меню приложения. В веб-приложениях без пользовательского интерфейса хром опция «Отменить» часто бывает контекстной - она ​​может отображаться на временной панели или в контекстном меню.

An image of Microsoft Word's toolbar. The edit menu category has been opened and the Undo Typing menu item has been selected. Alongside the menu items prompts to the user appears to show them that it's possible to activate this command by using keyboard shortcuts.
В приложении Microsoft Word - как и во многих других приложениях типа WYSIWYG - пользователи могут найти функции «Отменить» и «Вернуть» в меню «Правка». Пользователям также показаны сочетания горячих клавиш для этих действий.

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

An image of the content of a Google Drive folder. Two documents are contained in this folder and a notification appears below to tell the user that a document has been successfully renamed. In this notification is a link to undo the action.
При использовании Google Диска возможность отмены доступна только тогда, когда пользователь выполнил действие. Она появляется в виде временной панели внизу экрана после завершения действия, но исчезает через несколько секунд.

Заключение

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

Постеры

Постер Эвристики Джейкоба Нильсена #3 (PDF)
Постер Эвристики Джейкоба Нильсена #3, Формат A4 (PDF)
Постер Эвристики Джейкоба Нильсена, формат Letter (PDF)

Источник:
nngroup.com
·
comments powered by HyperComments