5 UX-шаблонов в мобильных приложениях, которые вы используете зря

6922
7

Дизайнер интерфейсов Золтан Коллин, работающий в Ustream, разобрался в популярных UX-шаблонах, которые, зачастую, используются там, где без них можно обойтись. Эта проблема касается не только небольших приложений, но и аппов от таких мастодонотов индустрии, как Google или Instagram. Свои соображения он описал в блоге, который быстро набрал популярность на Medium. Приводим перевод его заметки.

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

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

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

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

Меню-гамбургер очень простое и удобное в использовании

Меню-гамбургер очень простое и удобное в использовании

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

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

1-HxvIr5FvQREUlRPOW6DjZA

Перемены в навигации YouTube, которые заметил Luke Wroblewski

Если у вас сложная навигация в приложении, то что вы ее спрячете, не сделает ее мобайл-френдли. А вот определение приоритетов сделает.

2. Иконки, всюду иконки

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

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

1-WJul2IqwxPjJSZjV410Kew

Или, если вы ранее не пользовались Google Translate, какая функциональность скрыта за вот этой пиктограммой?

1-EN1VhczvRDU-_ZgSxGDDrA

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

Загадочная панель в Bloom.fm

Загадочная панель в Bloom.fm

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

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

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

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

Некоторые иконки хорошо распознаются пользователями, и их можно считать универсальными

Некоторые иконки хорошо распознаются пользователями, и их можно считать универсальными

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

Навигация в Pixelmator

Навигация в Pixelmator

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

3. Жестовая навигация

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

Жесты обрели популярность и среди дизайнеров. Появилось множество приложений, которые строились на жестовом управлении.

Жестовая навигация в приложении Clear

Жестовая навигация в приложении Clear

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

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

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

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

Сдвиг вправо в Apple Mail означает "обозначить непрочитанным"

Сдвиг вправо в Apple Mail означает «обозначить непрочитанным»

Тот же жест в Mailbox означает "архивировать"

Тот же жест в Mailbox означает «архивировать»

Например, если вы потрясете ваш телефон – это будет означать «Отмену последнего действия» в iOS или «Отправить отчет об ошибке» в Google Maps.

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

4. Обучение при входе поверх основного экрана

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

Обучающие подсказки в приложении dcovery

Обучающие подсказки в приложении dcovery

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

Интерфейс приложения – он как шутка. Если его нужно объяснять, значит, он не так хорош.

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

1-O5GYkCQ7RkozduE9g6pO0w

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

1-h9HKihyqW3vm-A5tVi1IBQ

Помните, как опции сдвига отличались в Mailbox и в Apple Mail? Вот принцип по которому работает прогрессирующий вход в приложение: пользователь проходится по всем жестам прежде чем начинает, собственно, пользоваться приложением:

1-xjSw-UyHLwnOs-QKRCMtsQ

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

5. Креативная, но непонятная интуитивно пустота

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

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

Взгляните на это пустое место в Google Photos:

1-gC7yEp1Z9u3KBrRplwdbmQ

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

На второй взгляд, тем не менее, начинаешь замечать некоторый странные вещи:

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

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

  • Что такое коллекции? Почему они нужны?
  • Почему их у меня нет?
  • Что с этим делать (и мне вообще надо что-то с этим делать)?

Когда речь идет о креативности, меньше, зачастую, – больше. Пустота на скриншоте ниже – это отличный пример ее грамотного использования. (Давайте просто проигнорируем надпись «А теперь нажмите на кнопку ниже» в этом случае»).

Пустое пространство в Lootsy

Пустое пространство в Lootsy

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

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

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

Думайте по-своему. Создавайте собственный дизайн. Проводите свои исследования.

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

Оставить комментарий

Комментарии | 7

Поиск