8 правил для создания эффективного адаптивного веб-сайта или приложения

Пользователи тратят много времени на взаимодействие с веб-сайтами на мобильных устройствах, а не на настольных компьютерах. И это число, похоже, растет с каждым днем. По данным eMarketer, взрослые в США проводят в среднем по 3 часа 35 минут на своих телефонах.

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

 

1. Минималистический дизайн

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

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

2. Сделать поля проще

адаптивный сайт

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

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

Есть ли длинный экран с тоннами полей для заполнения (некоторые из них очень маленькие)? Или взаимодействие начинается с простого запроса, который вы можете выполнить на одном экране?

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

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

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

 

3. Создайте кнопок, которые очевидны и просты

разработка моб приложений

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

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

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

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

 

4. Сопоставьте клавиатуру с данными

создание сайтов заказать

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

Убедитесь, что тип клавиатуры (буквенный или цифровой) соответствует типу запроса. Если вы запрашиваете определенную информацию, такую ​​как адрес электронной почты, включите клавишу @. Эти маленькие детали радуют пользователей и делают ваш сайт или приложение простым в использовании. И это займет немного дополнительных усилий с вашей стороны.

Нужна дополнительная информация о том, как это сделать?

Числовые входы от Mozilla
Типы ввода HTML5 от W3Schools

5. Используйте простой язык

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

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

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

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

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

 

6. Помни об ошибках

«Все, что может пойти не так, пойдет не так». — Закон Мерфи

Все пойдет не так. Ничего страшного, если вы готовы к этому.

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

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

 

7. Остерегайтесь видео — пока

создание приложения для фитнес клубов

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

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

 

8. Используйте последовательный дизайн

разработка мобильного приложения для ресторана

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

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

Цель состоит в том, чтобы любой пользователь мог использовать ваш веб-сайт или приложение на одном устройстве и переходить на другое, не замечая, что все по-другому. То же самое должно быть, если у вас есть адаптивный веб-сайт и приложение. Обратите внимание на сходство с домашней страницей ESPN (слева) и домашней страницей приложения (справа) выше.

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