cover

Гештальт и эвристика: как создать интерфейс приложения

Хорошие и плохие примеры основных принципов проектирования.
author
Даша Жаковская
Обозреватель в LABA

Допустим, вы разрабатываете мобильное приложение. У вас много работы, клиенты проблемные, конца правкам не видно. А может, вы не разработчик, но у вас есть идея создать приложение, которое решит проблемы пользователей. Отличное начало, дело за малым: сделать понятный интерфейс.

Мы разобрали законы гештальт-дизайна и эвристические принципы, чтобы создавать интерфейсы, одинаково удобные для клиентов, для пользователей, для всех.

А Владимир Солосин, старший маркетинг-менеджер Яндекс.Такси, проанализировал интерфейс приложения популярного диджитал-издания 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 месяцев активной разработки начать конкурировать с крупными новостными агрегаторами, что может не только увеличить вовлеченность подписчиков, но и привлечь новую аудиторию. Также стоит подумать о модели монетизации приложения. Если сайт монетизируется с помощью онлайн-рекламы, то в данном случае можно реализовать встроенные покупки премиум-фич приложения: например, персональные подборки или доступ к эксклюзивному контенту.

Последние материалы
Ближайшие курсы
image PHOTOSHOP: PRO
Интенсив o продающем и эффективном дизайне
image МАГИЯ POWERPOINT
создание эффективных презентаций
image PEOPLE MANAGEMENT
курс об эффективном управлении современной командой
mail
Подпишитесь и получайте лучшие материалы от LABA
photo

Владимир Солосин

Курс
МАРКЕТИНГ ПРИЛОЖЕНИЙ
  • партнерский маркетинг в мобайле
  • кампании в соцсетях и мессенджерах
  • мобильный трекинг и аналитика
  • бесплатное привлечение установок и клиентов
записаться