Pull to refresh

Неправильно использованные шаблоны мобильного интерфейса

Reading time 6 min
Views 33K
Original author: Zoltan Kollin


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

Некоторые могут возразить, что следование гайдам может убить творчество, и в итоге все приложения будут выглядеть одинаково. С точки зрения UX, я тут вижу другую проблему. Может казаться, что применение лучших шаблонов, которые используют Google / Facebook / Instagram / [вставить любимое приложение], всегда является отличным решением. Что они ставят себе такие же задачи, что и вы. Вот несколько шаблонов, которые считаются (или считались) лучшими, но в то же время не такие уж они и хорошие, какими кажутся на первый взгляд.

1. Спрятанная навигация


По меньшей мере пол миллиона статей было опубликовано на тему меню «гамбургер». В основном авторы этих статей высказывают аргументы против. Если вы пропустили их, прочитайте одну или вторую. Вкратце, эти статьи не о самой иконке, а о том, как дизайнеры прячут навигацию за иконкой.

Slide-меню гибкое и удобное
Slide-меню гибкое и удобное

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

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


Перемены в навигации приложения YouTube (пометки от Luke Wroblewski)

Если у вас сложная навигация, то её сокрытие не исправит ситуацию. А назначение приоритетов исправит.

2. Иконки, везде иконки


Из-за ограниченного пространства кажется разумным сохранить немного места, заменив текст на иконки, где только это возможно. Пиктограммы занимают меньше места, их не нужно переводить на другие языки, и в конце концов люди с ними уже знакомы, так? И каждое приложение это делает.

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



Или предположим, что вы никогда не использовали раньше Google Переводчик. Что случится, если нажать на эту иконку?



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


Таинственные иконки приложения Bloom.fm

Если вы придумали новую иконку и думаете, что нужно к ней подставить небольшую подсказку, то вы не правы. Даже если вы Foursquare, и ваши пользователи всё равно выучат эту пиктограмму.


Подсказка рядом с иконкой в приложении Swarm

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


Некоторые иконки узнаваемы большинством пользователей и могут считаться универсальными

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


Навигация в приложении Pixelmator

Базовый функционал может быть эффективно отображён иконками, но для сложных функций нужно использовать текстовые ярлыки. (Если вы используете иконки, их удобство в эксплуатации должно быть протестировано.)

3. Навигация жестами


Когда Apple представил iPhone в 2007 году, то благодаря функции мульти-тач пользователи поняли, что они могут не только нажимать на экран, но и использовать многие другие жесты (zoom, swipe и т.д.).
Жесты стали популярны среди дизайнеров, и множество приложений были построены на основе экспериментов над управлением различными жестами.


Управление приложением Clear с помощью жестов

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

Первое, что нужно знать о жестах — то, что они всегда спрятаны. Людям нужно из запоминать. Так же как и с меню «гамбургер», если вы прячете ту или иную опцию, то меньше людей будут ею пользоваться.

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

К сожалению, пока что большинство жестов не стандартные и не постоянные во всех приложениях.  Это всё ещё довольно новая область в дизайне пользовательского интерфейса. Даже такой простой жест, как свайп письма может означать разное в зависимости от приложения почты.


Свайп вправо в приложении Почта на iOS устройствах открывает опцию «Пометить как непрочитанное»


Тот же самый жест добавляет письмо в архив в приложении Mailbox

Или, например, встряхивание девайса может означать отмену действия в iOS или отправление отзыва в Google Карты.

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

4. Экраны знакомства или как пользоваться приложением


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


Туториал в приложении dcovery

Почему это плохое решение? Потому что большинство пользователей пропустят всё это, им просто нужно начать работать с приложением. И даже если они прочли туториал, то скорее всего всё забудут сразу после закрытия. (Особенно если приложение перенаполнено информацией.) И, наконец, объяснение, как пользоваться интерфейсом, не делает его более интуитивным. Помните:

шутка
Интерфейс — как шутка. Если её надо объяснять, то не такая уж она и хорошая. Источник: Startup Vitamins

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



Ещё более интерактивный способ первого взаимодействия с пользователем — прогрессивный onboarding. Duolingo не объясняет, как работает приложение: пользователям рекомендуется пройти быстрый тест по выбранному языку (без регистрации), потому что люди быстрее обучаются действуя. Кроме того, это эффективный способ показать пользователю ценность приложения.

duolingo

Помните, как отличался жест свайпа в приложении Mailbox и в Apple Почта? Вот как работает прогрессивный onboarding. Пользователи могут попробовать различные жесты перед непосредственным использованием приложением:

IMG_7022

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

5. Креативные, но не интуитивные пустые экраны


Пустые экраны (empty state) могут остаться незамеченными неопытными дизайнерами. Однако, они могут являться важным фактором, когда речь идёт об общем опыте взаимодействия.

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

Возьмём к примеру пустой экран приложения Google Фото:


Пустой экран в приложении Google Фото

На первый взгляд всё кажется в порядке, так? Хорошо составленный по гайдам шаблон с симпатичной графикой.

Однако, присмотревшись, можно заметить некоторые странности:

  • Почему мы видим иконку поиска? Почему пользователь должен захотеть искать, когда ничего нет?
  • Второй заметный элемент — картинка по центру, на которую нельзя нажать (хотя многие попробуют).
  • Подсказка говорит, что я должен найти кнопку "+" в верхней части экрана, что странно. Почему подсказка сама в себе не содержит кнопку Добавить? Это как сказать «Нажмите на кнопку Продолжить, чтобы продолжить».

Этот пустой экран не помогает пользователям понять контекст:

  • Что такое коллекции? Чем они полезны?
  • Почему у меня их нет?
  • Что мне с этим делать?

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


Пустой экран в приложении Lootsy

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

Подвергайте всё сомнению


Не поймите меня неправильно, шаблоны в дизайне — всё ещё ваши лучшие друзья. Но имейте ввиду, что не все приложения и пользователи одинаковы. Одно решение может работать для одного приложения и провалиться в другом.

Думайте сами. Создавайте сами. Исследуйте сами.

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

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!
Tags:
Hubs:
+33
Comments 29
Comments Comments 29

Articles