Чек-лист юзабилиста: как создать популярное приложение. Часть 1

# Интерфейсы и дизайн, Из нашей практики
Ноябрь 2017 г
SimbirSoftMobile

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

Первый запуск - Пан или пропал

Экран запуска только для запуска

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

Если приложению требуется время для загрузки:

SimbirSoftMobile

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

SimbirSoftMobile

Нужная информация — на основном экране

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

SimbirSoftMobile

Помощь и обучение

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

SimbirSoftMobile

Помните: если вы обнаружили себя за написанием длинных текстов «помощи» - ваш интерфейс нуждается в доработке.

Навигация

Никакой навигации

Подходит для приложений, которые умещаются на один экран.

SimbirSoftMobile

Панель вкладок

Если у приложения 3-6 разделов меню.

Иконки подписаны

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

SimbirSoftMobile

Если иконок слишком много, можно упростить и объединить разделы.
Вот пример из нашей практики:

SimbirSoftMobile

Все важное - под рукой

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

Самое основное и важное всегда должно быть не далее 3 нажатий.

SimbirSoftMobile

Навигация со скролом

Сортируем пункты меню по частоте использования: чем чаще используются, тем ближе к началу. Не забываем про принцип «все важное - не далее 3 нажатий», остальное убираем подальше.

SimbirSoftMobile

Вложенный список

Его часто использует e-commerce. Этот вариант позволяет строить иерархические деревья и легко в них ориентироваться. Если не забывать о принципе 3 нажатий.
Пользователям тяжело ориентироваться по разделам меню, если оно не совпадает с общепринятыми принципами категоризации. Разделы должны быть обозначены четко, а их содержимое не должно совпадать даже частично.

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

Путешествие без «навигации»

Проводите пользователя по своему приложению

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

Переходный интерфейс

Каждый из экранов переходит из одного в другой, и пользователь всегда знает, куда он попадет дальше и как вернуться назад.

Глубина

Когда вы переходите из комнаты в комнату в офисе или квартире, вы точно знаете, откуда и куда перемещаетесь. Благодаря этому вы точно не заблудитесь.

    Тот же принцип действует в интерфейсе: где бы пользователь ни находился в приложении, он всегда должен:
  1. Четко осознавать на каком экране он находится сейчас;
  2. Знать, куда он попадет, если вернется на предыдущий экран;
  3. Понимать, куда он попадет, перейдя на следующий;
  4. Быстро вернуть туда, откуда он начал свое путешествие.

SimbirSoftMobile

Удобные переходы

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

Жесты

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

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


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



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