UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 10 эвристик юзабилити Якоба Нильсена, проиллюстрированных дизайн-решениями Revolut
Редакція
Редакція

Опубліковано

10 эвристик юзабилити Якоба Нильсена, проиллюстрированных дизайн-решениями Revolut

#ux

Ця стаття українською:

Несколько недель назад мы провели веб-семинар под названием «Анализ необанков: аудит UX/UI и детальный разбор проблемного сектора с особым упором на стратегию Revolut». В этом нам помогли два великих профессионала Feri Muck и Ivan Muck. Мы рассмотрели Revolut с трех аспектов: бизнес-стратегия, UX-и UI-дизайн.

Revolut — это британский финтех-проект. По сути это банк без отделений, все операции — в одноименном приложении на смартфоне. Одно из первых преимуществ Revolut — отсутствие комиссии при обмене валют, каждый пользователь получает мультивалютную дебетовую карту: в связи с этим продукт еще называли «сервисом для путешественников». Сегодня это уже не так: компания предлагает десяток различных услуг, начиная от типично банковских (физическая карта для оплаты покупок/услуг и кешбек) до более широких (например, трейдинг).

Одна из частей анализа была посвящена обзору пользовательского опыта Revolut с использованием 10 эвристик юзабилити Якоба Нильсена. Помимо этого, я добавил еще три аспекта: иконки и метки; пустые состояния и визуализация данных.

1. Видимость статуса системы

Первая эвристика из списка Нильсена – это видимость состояния системы.

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

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

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

Эвристика Нильсена №1 «Видимость состояния системы»

2. Соответствие между системой и реальным миром

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

Момент, не связанный со второй эвристикой, который я бы хотел упомянуть – это установление осмысленной визуальной иерархии – одной из самых важных вещей в дизайне. Я уже получил свою карту, но на этом экране одна из наиболее приоритетных опций – «Отслеживание доставки». И проблема в том, что, как вы увидите, я не смог избавиться от нее, даже несмотря на то, что уже получил банковскую карту много месяцев назад.

Эвристика Нильсена №2 «Соответствие системы и реального мира»

И описание опции отслеживания доставки обещает, что, если я нажму на нее, я увижу текущее местоположение карты. Вместо этого меня просят подтвердить адрес доставки, а затем говорят, что карточка должна была быть доставлена. Текст кнопки сбивает с толку: «Got it» означает, что я понимаю полученную информацию, или, что моя карта была доставлена? И как видите, избавиться от этого варианта мне не удалось.

Отслеживание доставки с помощью сбивающего с толку UX текста кнопки

3. Пользовательский контроль и свобода

Третий принцип заключается в том, что все процессы находятся под контролем пользователей. Это означает, что они должны иметь возможность полностью изменить действия и состояния или найти выход из непреднамеренно совершенных действий. На скриншоте ниже Revolut, позволяет мне отменить запрос на перевод денег:

Эвристика Нильсена №3 «Контроль и свобода пользователей»

4. Последовательность и стандарты

Четвертая эвристика касается последовательности и стандартов, проще говоря, вам не следует изобретать велосипед. Закон Якоба, названный в честь самого Якоба Нильсена, гласит, что пользователи проводят большую часть времени на других сайтах, поэтому на их ментальные модели и ожидания относительно того, как что-то работает, влияет предыдущий опыт. PIN-Pad – хорошо зарекомендовавший себя паттерн, мы используем эту сетку чисел, например, мы не пишем числа рядом друг с другом, по горизонтальной линии.

Интересная особенность работы мозга, заключается в том, что существует так называемое декларативное знание. Например, после определенного периода применения последовательности чисел «2 3 5 6» она станет процедурным знанием, мы запомним паттерн «Z». Процедурные знания требуют меньше когнитивной работы. Поэтому, когда вы отображаете числа в случайном порядке всякий раз, когда пользователь открывает приложение, вы увеличиваете когнитивную нагрузку. Конечно, это продиктовано соображениями безопасности, но вы должны знать об этом недостатке.

Эвристика Нильсена №4 «Последовательность и стандарты»

5. Предотвращение ошибок

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

Эвристика Нильсена №5 «Предотвращение ошибок»

6. Распознавание вместо необходимости вспоминать

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

Эвристика Нильсена №6: «Распознавание, вместо необходимости вспоминать»

7. Гибкость и эффективность использования

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

Эвристика Нильсена №7 «Гибкость и эффективность использования»

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

Однако я подумал, что это упущенная возможность, поскольку эти экраны не очень информативны. Например, один экран утверждает, что поиск – это «лучший и самый быстрый способ найти наиболее актуальную информацию, и даже открыть для себя что-то новое».

Эвристика Нильсена №7 «Гибкость и эффективность использования»

8. Эстетичный и минималистичный дизайн

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

Эвристика Нильсена № 8 «Эстетичный и минималистичный дизайн»

9. Помогите пользователям распознавать, диагностировать и устранять ошибки

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

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

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

Эвристика Нильсена №9 «Помогите пользователям распознавать, диагностировать и устранять ошибки»

10. Справка и документация

Последняя эвристика касается предоставления помощи и документации. В лучшем случае пользователям никогда не понадобится помощь, но, когда она действительно понадобится, они смогут легко ее найти, и они должны быть в состоянии найти нужную информацию, так что возможность поиска – самая важная функция. Вот как можно попасть в раздел «Справка» в приложении Revolut: сначала я выбираю свой профиль, а затем нажимаю на иконку со знаком вопроса.

Эвристика Нильсена №10 «Справка и документация»

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

Эвристика Нильсена №10 «Справка и документация»

Я хотел бы дать вам несколько советов, касающихся еще трех аспектов: использование меток вместе с иконками; пустые состояния и визуализация данных.

Иконки + метки

Если вы откроете приложение Revolut, первое, что вы можете заметить – это отсутствие меток на нижней панели навигации, только иконки. И хотя это, безусловно, делает интерфейс менее загроможденным, есть риск запутать пользователей и вызвать проблемы с поиском. Эти иконки не так уж очевидны: вы знаете, что они означают?

Рядом с иконками нет меток

Если мы посмотрим на Руководство Material Design, там говорится, что «лучше всего сочетать иконки с текстовыми метками, особенно если иконка не имеет очевидного значения».

Рекомендации Material Design по сочетанию иконок с текстовыми метками

Существуют исследования, подтверждающие этот аргумент, например, Google измерил, что, когда они заменили иконку рукописного ввода текста в виде змеи, вовлеченность пользователей увеличилась на 25%.

Из выступления Анны Потаниной на Google Conversions 2018

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

Но сюрприз! Несколько месяцев назад у Revolut были метки рядом с иконками. Вот почему вы всегда должны узнавать о контексте и, например, проводить интервью с пользователями или просматривать данные. Мы не знаем, почему они убрали метки. Возможно они просто экспериментируют.

Дизайн- процесс – это принятие множества решений! Скриншот из статьи: How to search all your transactions revolut

Пустые состояния

Пустые состояния – очень важная, но часто упускаемая из виду часть приложений. У пустого состояния есть как минимум 3 возможных функции:

  • его можно использовать как обучающую возможность, чтобы вы могли объяснять вещи своим пользователям;
  • это момент, который можно использовать для небольшого удовольствия, например, добавив красивую иллюстрацию и хороший UX-текст;
  • в-третьих, хорошее пустое состояние – это не тупик, вместо этого оно показывает следующее возможное действие.

На скриншотах ниже мы видим возможные следующие шаги, они направляют пользователей, однако представленная информация, например, о хранилищах, не так полезна. И, возможно, вместо текста кнопки «Get», лучше было бы использовать «Discover», поскольку пользователь только собирается узнать, что такое Хранилище. Интерфейс похож на разговор с пользователем: все должно происходить в нужное время и в определенной последовательности.

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

Примеры пустых состояний внутри приложения Revolut

Визуализация данных

Визуализация данных – очень важный аспект, и он также связан с установлением осмысленной визуальной иерархии. Я хочу выделить положительный момент: цвет – не единственный визуальный сигнал, позволяющий сравнить текущие расходы с предыдущим периодом, он учитывает пользователей с красно-зеленой цветовой слепотой, поэтому это важный аспект доступности.

Однако есть и ряд проблемных моментов. Например, размер шрифта справа от диаграммы слишком мал (и недостаточно контрастности).

Пустое состояние бесполезно, а его UX-текст слишком роботизирован («Нет данных для отображения»), и это упущенная возможность обучения.

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

Пример визуализации данных внутри Revolut

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

Еще одно примечание: все скриншоты сделаны мной (если не указано иное), скриншоты iOS сделаны на iPhone 8, а скриншоты Android – на Huawei P20 Pro.


Перевод статьи uxdesign.cc

Топ коментарі (1)

Згорнути/розгорнути
 
alexanderksua profile image
Александр Куличенко

Идеальный интерфейс, это интерфейс которого нет, но функции его выполняются.
Весь UX/UI вокруг этого балансирования и сосредоточен.