Разработка мобильных приложений в Казахстане под платформы iOS/Android/Windows Phone
1 заметка с тегом

паттерны

Злоупотребление UX-паттернами в мобильных приложениях

15 апреля 2016, 16:09

Сегодня мы хотим представить вольный перевод статьи Золтана Коллина — UX-директора Ustream, одного из организаторов Amuse UX Conference и соавтора UX Myths. Этот пост был основан на его выступлении на Mobile Weekend Butapest.

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

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


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

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



Слайд-меню, гибкое и удобное в использовании


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



Изменение навигации YouTube с аннотациями Люка Вроблески


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


2. Иконки. Везде иконки.

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

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





Или предположим, что Вы никогда не пользовались Google переводчиком, какую функцию Вы ожидаете увидеть за этой иконкой?





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



Загадочный Tab bar в приложении Bloom.fm


Если Вы разработали дизайн иконки и чувствуете, что необходима всплывающая текстовая подсказка, чтобы сделать её интуитивно понятной, Вы явно делаете что-то не так. Даже если Вы — Foursquare, и Ваши пользователи изучат иконку в любом случае.



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


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



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


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



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


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


3. Навигация, основанная на жестах.

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



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


Скрыть навигацию приложения или использовать иконки вместо текстовых меток — использование жестов тоже иногда кажется привлекательным для дизайнеров, которые хотят сэкономить место на экранной области. («Здесь не будет кнопки для удаления, люди просто будут смахивать влево. Или вправо... Потом разберемся!»)

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

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

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



Смахивание письма вправо помечает письмо как не прочтенное в почтовом клиенте Apple



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


Такой жест как встряхивание может вызывать как «Отмену» (iOS), так и «Обратную связь» (Google карты).
Никогда не забывайте, что жесты — это скрытые элементы управления, которые нужно запоминать. Это, в свою очередь, требует тонны усилий от Ваших пользователей. Если Вы — Tinder, то Вы можете научить весь мир, что означает смахивание вправо, но только если это основа концепта Вашего приложения.


4. Туториал, как введение.

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



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


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

Пользовательский интерфейс как шутка: если его нужно объяснять, значит он не так уж хорош.

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





Более интерактивный способ привлечь новых пользователей  — это прогрессивное обучение. Duolingo не объясняет, как работает приложение: пользователи в нетерпении проходят быстрый тест на выбранном языке (даже не регистрируясь), потому что лучше всего люди учатся, практикуясь. Также это более привлекательный способ показать значимость приложения.





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





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


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

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

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

Посмотрите на пустое состояние экрана в Google Photos:





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

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

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

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

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

Когда дело касается креативности, «меньше» иногда значит «больше». Пустое состояние экрана, изображенное ниже, является отличным примером хорошей работы, когда такой экран является действительно полезным. (Давайте пока проигнорируем надпись «Now tap the button below».)



Пустое состояние экрана в Lootsy


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

Сомневайтесь во всём.

Не поймите меня неправильно: паттерны проектирования и лучшие практики — всё ещё Ваши друзья. Держите в голове то, что приложения и пользователи бывают разными: одно решение может хорошо работать в каком-то приложении, но плохо в Вашем. К тому же, Вы никогда не узнаете, почему конкретное приложение было спроектировано именно так.
Имейте своё собственное мышление. Имейте свой собственный дизайн. Проводите свои собственные исследования.
Измеряйте, тестируйте, проверяйте — и не бойтесь отступать от общепринятого, если в этом есть большой смысл.

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

С Вами свяжется
Александр Кириллов

Оставьте свои контактные данные

Оставить заявку