Дизайн мобильных приложений

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

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

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

Анализ ЦА и выбор дизайна

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

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

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

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

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

• не все хотят пользоваться именно кнопками для перехода по страницам, выполнения иных действий. Многие предпочитают смахивание или удержание элемента управления;

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

• не стоит абсолютно каждую страницу сайта венчать логотипом компании. Разместите его на иконке и стартовой странице;

• нельзя мельчить со шрифтами. Для заголовков идеально подходят 18-24 px, для статей и описаний — 14-16 px. Если предусмотрены подсказки, для них выбирают размер 12-14 px и цвет, отличающийся от основного. Дополнительно акцентировать внимание на нужных моментах можно за счет полужирных шрифтов;

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

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

UI-дизайн мобильного сайта. Адаптация сайта для смартфона

Прототип готов. Но успокаиваться рано. Все страницы должны быть выдержаны в едином стиле.

Опять стоит вернуться к шрифтам. Для всех страниц лучше подобрать 5-6 вариаций одного шрифта. Различия могут затрагивать размеры, цвет и толщину. Не стоит увлекаться и разноцветием. 4-5 оттенков позволят выделить нужные участки текста, привлечь внимание к кнопке выбора и т. д. Но нельзя забывать, что палитра Iphone и Android-гаджетов существенно отличается. Стоит отказаться от пограничных цветов (розово-коричневых, коричнево-серых, розово-серых и т. д.), чтобы пользователь не видел на экране все оттенки грязи.

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

И только после этого можно переходить к подготовке именно адаптивных версий. Если сайт предназначен для любителей «надкусанного яблока», объем работы будет поменьше. Достаточно подготовить версии для Iphone 6 и Iphone X. Если же вы планируете работать и с пользователями Android, придется потрудиться. Здесь разрешений намного больше. Придется выяснить, какие установлены на смартфонах вашей ЦА и выбрать наиболее популярные из них (хотя бы 4-5).

Тестирование юзабилити

Работа над дизайном мобильного приложения практически завершена. Но остается важный этап — тестирование. Оно позволяет оценить:

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

• результативность — количество минут или секунд, необходимых на получение результата;

• удовлетворенность качеством предоставляемого сервиса.

В самом простом варианте для тестирования можно использовать Figma. Сервис позволяет создавать кликабельные прототипы приложений. Далее можно имитировать поведение клиента и фиксировать все действия с получением отчета от системы.

Но Figma — не самый навороченный сервис. Userlytics, TryMyUI, UserTesting позволяют не только перемещаться по страницам, делать выбор, имитировать покупки, но и отслеживать поведение клиента в режиме реального времени.

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