Руководство для начинающих в мобильном UX-дизайне


Номофобия сейчас считается очень распространенной. Что же это такое? Это страх быть вне контакта с сотовым телефоном. Слово «контакт» в данном случае означает не просто звонить или писать другим людям, но также иметь возможность доступа к мобильным приложениям.

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

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

Станьте дизайнером мобильных приложений
Подробнее

За 8 месяцев вы научитесь создавать дизайн под разные мобильные платформы и освоите необходимые инструменты для создания дизайна мобильных приложений

Мобильный vs. стационарный компьютер

Ключевое отличие между ними то, как мы используем телефон — не с помощью мыши или трекпада, а с помощью наших пальцев.

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

Что же все это значит для дизайнера приложений?

вернуться в меню ↑

Важность размера

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

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

Важность размера

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

вернуться в меню ↑

Как пользователи держат свои телефоны в большинстве случаев?

Другим важным элементом в этом контексте является то, как пользователи держат свои телефоны. Согласно ScientiaMobile, все больше людей держат мобильный телефон следующим образом:

Поворот экрана на смартфонах
ohvat ekrana na smartfonah 1024x576 - Руководство для начинающих в мобильном UX-дизайне

Об этом стоит помнить при создании дизайна приложения. Это касается не только расположения отдельных элементов на экране, но и размера значков.

В соответствии с главными принципами Apple для разработчиков рекомендуется использовать область с разрешением 44pt x 44pt. Это помогает избежать ошибочных нажатий и дает пользователям достаточно пространства для взаимодействия. Другая проблема, связанная с размером устройства, — время анимации. Согласно Руководству по проектированию материалов, вы должны ограничить продолжительность анимации до 200–300 мс.

Время анимации на смартфонах

Интересным фактом является также то, как держит в руках телефоны правша и левша. :

разница в пользовании смартфоном у левши и правши

Что не менее важно, вид меню также зависит от размера экрана. Чем меньше экран, тем меньше элементов может быть показано. Посмотрите, как BBC справляется с этим:

Вид меню
вернуться в меню ↑

Спрятанное меню

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

Вкладки

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

Вкладки

Вкладки с опцией «больше»

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

Вкладки с опцией еще

Много шума из иконок

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

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

иконки и пиктограммы

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

Значки должны соответствовать следующим критериям:

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

Мобильные устройства vs процесс ввода

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

Мобильные устройства и процесс ввода
вернуться в меню ↑

Сила цвета

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

Сила ввода

Но как правильно подобрать идеальную палитру для дизайна?

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

Цветовая гамма

Монохронные цвета

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

Аналогичные цвета

Если вы посмотрите на цветовое колесо, то увидите, что те, что находятся рядом друг с другом, идеально подходят друг другу.

Дополнительные цвета

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

СОВЕТ: Если вам все еще трудно выбрать правильную комбинацию, есть хорошее решение для этого-приложение https://coolors.co/app.

вернуться в меню ↑

Меньше — больше

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

Давайте посмотрим на пример с Google Фото:

пример с Google Photos
  1. Почему у нас появляется значок «поиск», когда нет добавленных коллекций фотографий?
  2. Оранжевый значок недоступен, почему?
  3. Почему есть описание относительно кнопки «+» вместо «добавить новую коллекцию» CTA?

Так много вопросов и столько же ответов.

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

Подводя итоги

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

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

Пробуйте и экспериментируйте!

Есть вопрос или дополнение?

      Оставить отзыв

      EdAdvisor
      Регистрация
      Сброс пароля
      Сравнить товары
      • Итого (0)
      Сравнить
      0