8 ключевых ошибок в дизайне мобильных приложений в 2021 году

1. Типографика

• Слишком маленький размер шрифта основного текста. Дизайнеры зачастую используют в макетах недостаточно большие шрифты. Не стоит делать размер текста меньше 12 pt, поскольку пользователям с плохим зрением придется слишком сильно напрягать глаза.
• Использование в дизайне более двух гарнитур шрифтов. Отличным решением будет сочетание двух разных шрифтов для заголовков и основного текста. Если добавить в интерфейс дополнительные шрифты, он, скорее всего, будет выглядеть неаккуратно.

2. Иконки и изображения

• Недостаток единообразия при использовании иконок. Все иконки в интерфейсе должны иметь одинаковую толщину линии и скругление углов.

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

3. Цвета

• Низкая контрастность текста. Если контраст между текстом и фоном недостаточен, это всегда негативно влияет на читабельность. Минимальный коэффициент контрастности для обычного по размеру текста — 4,5 : 1.

• Слишком много цветов. Как и в случае со шрифтами, большое количество цветов может привести к тому, что дизайн будет смотреться неряшливо. Вы как будто одновременно посылаете пользователю слишком много сигналов. Опыт взаимодействия пользователей с интерфейсом становится намного приятнее, если цветовая палитра ограничена, а цвета используются единообразно для текста, кнопок, иконок в меню и функциональных элементов.
• Темная тема является основной. Хотя темные интерфейсы действительно выглядят более эффектно, они менее практичны, чем традиционный дизайн в светлых оттенках. Всегда помните о контексте — кто и как будет использовать приложение. Если в интерфейсе много текста, не стоит делать темную тему основной, иначе у пользователей будут сильно уставать глаза.

4. Формы

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

5. Визуальная иерархия

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

6. Взаимодействия

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

• Отсутствие поддержки и помощи там, где это необходимо. Дизайн приложения, безусловно, кажется очевидным человеку, который его разрабатывает, однако это совсем не так для нового пользователя. Протестируйте свой дизайн с реальными пользователями, выявите, на каких этапах взаимодействия возникают затруднения, и придумайте, каким образом можно помочь пользователям их преодолеть.
• Голосовое управление как единственный способ взаимодействия с системой. Хотя голосовые команды — это удобный способ управления приложением, они не могут полностью заменить традиционный сенсорный интерфейс. Бывают ситуации, когда пользователь не может говорить (например, в общественном месте). Здорово, когда приложение поддерживает голосовое управление, но лишь в дополнение к привычному интерфейсу.
• Креативные паттерны взаимодействия. Такое часто случается, если дизайнер хочет произвести сильное впечатление на пользователей и сделать их опыт максимально запоминающимся. Хотя креативные взаимодействия, такие как навигация с помощью жестов, могут вызывать у пользователей позитивные эмоции, им приходится тратить больше времени на изучение того, как работает приложение. Так что подходите к решению задач творчески, но помните, для кого вы создаете дизайн.

7. Навигация

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

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

8. Анимация

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