Допустим, вы разрабатываете мобильное приложение. У вас много работы, клиенты проблемные, конца правкам не видно. А может, вы не разработчик, но у вас есть идея создать приложение, которое решит проблемы пользователей. Отличное начало, дело за малым: сделать понятный интерфейс.
Мы разобрали законы гештальт-дизайна и эвристические принципы, чтобы создавать интерфейсы, одинаково удобные для клиентов, для пользователей, для всех.
А Владимир Солосин, старший маркетинг-менеджер Яндекс.Такси, проанализировал интерфейс приложения популярного диджитал-издания Mashable. И оно оказалось далеко не идеальным.
ПРИНЦИПЫ ГЕШТАЛЬТА
Принципы гештальта — это теория о том, как люди воспринимают визуальные элементы интерфейса.
Наш мозг пытается понять мир через свой опыт, используя знакомые формы, образы и цвета. Этот принцип сформулировал в 1910 году психолог Макс Вертгеймер, когда наблюдал оптическую иллюзию на железнодорожном переезде: одна за другой загорались две лампочки, отчего казалось, будто огонек света бегает из стороны в сторону. Но Макс был ученым и знал, что это просто две статичные лампочки — никакой магии, никакого движения.
От загорающихся лампочек «загорелся» и сам Вертгеймер и создал теорию гештальта. А через сто лет дизайнер Кэролайн Боннер описала 6 законов того, каким должен быть интерфейс приложения.
1. Сходство
Схожие элементы интерфейса воспринимаются как одинаковые по назначению. Этот закон применяют в меню: разные по форме, но одинаковые по цвету и размеру иконки интуитивно воспринимаются как часть общего целого.
2. Обрамление
Если нужно обозначить элементы как часть одной группы, можно взять их в рамку.
Этот закон применяют, когда на одной странице нужно оформить несколько несогласованных между собой абзацев текста или чтобы разграничить группы элементов разного назначения. В нашем примере текст первоисточника взят в рамку, чтобы разграничить его с текстом репоста. В отдельный блок выделены мгновенные реакции, а в еще один — комментарий с фото, гифками и стикерами.
3. Непрерывность
Элементы, расположенные на линии или кривой, воспринимаются как сгруппированные. Непрерывность помогает понять направление, в котором следует смотреть, нарушение непрерывности сигнализирует о конце раздела, обращает внимание на новый фрагмент контента.
4. Завершение
Если элемент виден не полностью, но он узнаваемый, пользователь считывает его как понятный. Этот закон реализован в иконках навигационного меню Телеграма.
5. Симметрия
Симметричные элементы визуально привлекательны, а если они находятся на одинаковом расстоянии друг от друга, мы воспринимаем их как часть одной группы. Закон используют, если нужно выделить центральный элемент: среди общей симметрии асимметрия оказывается в фокусе внимания.
6. Фигура — фон
Основную информацию на странице можно выделить, создав контраст между элементом, который эту информацию отображает, и фоном. Например, кнопка «Купить» обычно яркая и находится в центре экрана. А если возникают всплывающее окна, остальная часть экрана обычно оказывается в расфокусе.
ЭВРИСТИЧЕСКАЯ ОЦЕНКА
Приложение должно быть полезным, понятным и дружелюбным — это все пользовательский опыт или UX. Проверить, есть ли у приложения шансы попасть в App Store или Google Play и хороший ли у него UX, помогут 10 эвристик — принципов проектирования интерфейса Рольфа Молича и Якоба Нильсена.
20 лет компания Нильсена, используя метод эвристической оценки, анализирует юзабилити приложений Microsoft и Apple. И зарабатывает много денег.
1. Удобная навигация
Пользователь должен понимать, что происходит в приложении: из какого раздела он пришел, сможет ли вернуться обратно, куда попадет дальше.
Пример: интернет-магазин Aliexpress
Навигация понятная: главная страница ведет в личный профиль и предлагает перейти в нужную категорию. Всегда можно вернуться к своим желаниям, сообщениям и настройкам. Стрелка «назад» не пропадает. Для поиска товаров есть фильтр.
2. Понятная речь
Приложение должно быть мгновенно понятным, поэтому говорить с пользователями нужно простым человеческим языком. Слова и понятия, которые клиент употребляет в обычной жизни, лучше незнакомых или любых других терминов.
Пример: оптимизатор работы телефона Virus Cleaner 2018.
Язык приложения рассчитан на широкую аудиторию, пользователь может знать, а может и не знать, чем отличается adware от scareware. Поэтому интерфейс общается на привычном языке: вместо кэша чистит мусор и предлагает ускорить работу смартфона.
3. Свобода действий
Не навязывайте свою волю: автоматические видеоролики, которые нельзя выключить, или всплывающие окна, которые сложно спрятать. И дайте пользователям возможность отменить свои действия.
Пример: сервис доставки Новая Почта
В интерфейсе использовали шестой закон гештальта про отношение фигуры и фона: кнопка авторизации в центре экрана, ее хорошо видно. Но интерфейс не заставляет клиента регистрироваться, отследить и оплатить посылку можно и просто по номеру накладной.
4. Стандарты и постоянство
Будьте последовательны: каждое действие или элемент на разных страницах должны означать одно и то же. Не путайте пользователя, описывая одно и то же разными терминами.
Пример: сервис My Vodafone
Пример того, как делать не стоит. Один из разделов меню — развлечения. Пункты «Vodafone Market» и «Игровой портал» обозначены почти идентичными иконками. Переходим к описанию: «Vodafone Market» обещает «Игры и приложения для смартфона», а «Игровой портал» — «Игры на любой вкус в твоем телефоне». Одними словами описаны разные функции? Или разницы нет? Клиент в недоумении.
Сравним разделы «Другие приложения» и «Развлечения»: два одинаковых приложения «Vodafone Books» и «Vodafone TV» описаны по-разному. Это запутывает.
5. Предотвращение возможных ошибок
Разработчик должен быть на шаг впереди пользователя, понимать, где тот допустит ошибку, и предотвратить ее. Важно не указать человеку на ошибку, а объяснить, что не так, и предусмотреть решение.
Пример: Интернет-супермаркет Rozetka
Пользователь еще не успел посмотреть товары, но зашел в раздел «просмотренные». Приложение объясняет ему, что не так, и акцентирует внимание на решении — перейти в раздел «Каталог», нажав на яркую зеленую кнопку.
6. Будьте проще
Для комфортной навигации пользователь не должен запоминать все свои шаги. Действия и элементы должны быть интуитивными, знакомыми и понятными.
Пример: Приложение для покупок OLX объявления Украины
Клик по иконке ведет на главную страницу, где объявления постоянно обновляются. А если клиент знает, за чем пришел, на главной есть кнопка «выбрать рубрику» и строка «поиск».
7. Акцент на главном
Размещайте ключевые элементы так, чтобы их нельзя было не заметить.
Пример: Игра Love Balls
С первой страницы программа демонстрирует главные действия — как включить игру и как играть. Сложно не заметить светлый прямоугольник на темном фоне, на который нужно кликнуть, чтобы начать игру.
Динамичный пунктир призывает провести линию, чтобы шарики соединились — в этом и есть суть игры.
8. Не перегружайте интерфейс
Каждое лишнее слово или символ увеличивает вероятность, что пользователь не найдет того, за чем пришел. Придерживайтесь минимализма.
Пример: Приложение для звонков Раскрасьте свой вызов
При первом входе в приложение пользователя пошагово ведут к цели: попробовать бесплатную версию и установить анимированную тему на контакт или группу контактов. Новые функции появляются, только когда пользователь ознакомился сосновными.
9. Об ошибках — легко
Если ошибка все-таки возникла, как можно проще опишите проблему и возможные решения.
Пример: Сити-гайд Foursquare
Пользователь ввел ошибочный запрос, и система предлагает сразу несколько путей решения. Избегайте технических сообщений в стиле «Неизвестный код ошибки 505». Пользователь вас не поймет и будет обеспокоен.
10. Справочный раздел
У приложения должна быть справка или раздел FAQ. В идеале — служба поддержки для обратной связи.
Пример: Графический редактор Over
В настройках есть Help Center с часто задаваемыми вопросами. Если ответ не найден, можно задать вопрос службе поддержки.
Тест приложения Mashable
Британско-американское издание Mashable любит составлять списки лайфхаков и чарты полезных приложений. Крупнейшая платформа о социальных медиа и цифровой культуре запускалась как персональный блог, сейчас прирост уникальных пользователей достиг 45 миллионов в месяц.
«100 лучших приложений для iPhone», «Топ-13 раздражающих уведомлений Facebook» — кажется, Mashable знает, каким должен быть хороший интерфейс. Но соответствует ли само издание критериям, по которым судит других?
Владимир Солосин, старший маркетинг-менеджер Яндекс.Такси, проверил, насколько Mashable отвечает 10 принципам понятного интерфейса.
Насколько удобная и понятная навигация у приложения?
МИНУС. Главное меню не несет функционала, который подразумевается. Есть только переход к главному экрану, непрочитанным статьям и настройкам. В меню используется классический «гамбургер» — в идеале он должен присутствовать на всех экранах приложения, чтобы пользователь мог воспользоваться им в любой момент, но здесь это правило не соблюдается.
Навигация есть, но на базовом уровне: каталог статей > просмотр статьи. Есть сортировка статей, но интуитивно непросто ее найти. Также в интерфейсе крайне мало визуальных элементов.
Понятен ли текст приложения?
ПЛЮС. Локализация системная: когда переключаете язык на смартфоне, все названия переводятся. Но перевод некоторых словосочетаний механический или не до конца понятный по смыслу: «Переключить раскладку» — это изменить вид отображения статей. Некоторые объекты не переведены: Tile, Home. Но в целом проблем не возникает — это точно лучше, чем использовать английский язык по умолчанию.
Есть ли у пользователя свобода действий?
МИНУС. Зачем-то добавлена функция удаления статей без восстановления. Приложение предупреждает об этом, но я бы советовал создать «Архив», куда будут перемещать статьи, не заинтересовавшие пользователя, но потенциально востребованные в будущем.
Соблюдается ли принцип последовательности, постоянства и соответствия стандартам?
ПЛЮС. Мобильный сайт Mashable и приложение сделаны по схожим «лекалам»: простота отображения контента, крупный черный или темно-серый шрифт на белом фоне, картинки в статьях. Используются разные шрифты, но это не мешает восприятию контента. Советовал бы внедрить актуальные гайды по материал-дизайну от Google — это облегчит восприятие интерфейса и позволит быстрее номинироваться на фичеринг (размещение в специальных блоках внутри магазина приложений для увеличения бесплатных установок).
Предусмотрел ли разработчик проблемные места?
МИНУС. В приложении много недоработок:
встроенный YouTube-плеер не адаптирован для вертикального просмотра, половина ролика «срезается», некоторые элементы уходят за границы видимости;
выбор языка интерфейса работает только в «бургерном» меню;
когда поиск по статьям не дает результатов, приложение не предлагает альтернатив.
Навигация интерфейса знакома и понятна?
МИНУС. Навигация простая, но не достаточно проработанная — отсутствуют многие фичи мобильной версии новостного сервиса. С первого раза непонятно, как изменить отображение статей (страдает перевод) и отсортировать их (сортировку лучше вынести в отдельный элемент). Функция шеринга дублируется в виде иконки справа и текстового элемента в контекстном меню — достаточно оставить иконку.
Ключевые элементы интерфейса в фокусе внимания?
ПЛЮС. В активной области интерфейса (где можно нажать большим пальцем одной руки) находится значок с функцией шеринга и кнопка перехода на сайт для прочтения статьи (отлично, что это крупный и видимый элемент, так как он пока является главным целевым событием, целью User Experience), остальные элементы вынесены в верхнее меню.
Не перегружен ли интерфейс лишним текстом или пунктами навигации?
ПЛЮС. Интерфейс простой, даже излишне лаконичный, сложные элементы отсутствуют. В меню настроек также немного пунктов. Можно добавить режим ночного чтения и экономии энергии.
Если ошибка происходит, какое решение предлагает приложение?
МИНУС. Пока приложение никак не отрабатывает ошибки, большинство которых вызваны багами и недоработками. Например, не работает заявленная функция автоматического перевода статьи на другой язык — вас просто перекидывает на сайт, к которому нет доступа, а кнопка возврата в приложение не работает.
Есть ли служба поддержки у приложения?
МИНУС. Справочного раздела нет, есть только информация о версии приложения (1.0). Также нет обратной связи — нельзя связаться с разработчиками, чтобы донести пожелания.
Вывод
Версия приложения 1.0 — это MVP, минимально жизнеспособный продукт с ограниченным функционалом. Навигация упрощенная, многих функций не хватает. Приложение представляет собой что-то наподобие RSS-агрегатора основной версии сайта Mashable: целиком текст статьи прочитать нельзя, но можно ознакомиться с ее темой по заголовку и первому абзацу. Если статья заинтересует, предлагается перейти на сайт и изучить ее там.
Необходимо доработать отображение полной версии статьи, функцию регистрации и личного кабинета, сохранение статьи в избранных, пометку тегами, виджеты, выбор тематики контента на уровне меню, подборку топа новостей, личную подборку статей. Непонятно, почему приложение существует только для операционной системы Android, а если и есть версия и для iOS, то найти ее просто невозможно.
У приложения есть перспектива в течение 6–8 месяцев активной разработки начать конкурировать с крупными новостными агрегаторами, что может не только увеличить вовлеченность подписчиков, но и привлечь новую аудиторию. Также стоит подумать о модели монетизации приложения. Если сайт монетизируется с помощью онлайн-рекламы, то в данном случае можно реализовать встроенные покупки премиум-фич приложения: например, персональные подборки или доступ к эксклюзивному контенту.
Хотите получать дайджест статей?
