Mobile First может помочь UX дизайнерам создать адаптивный дизайн под все типы устройств

Согласно глобальному опросу потребителей мобильных устройств, проведенному Deloitte в 2019 году, на большинстве развитых рынков около 90 процентов взрослых имеют смартфон, причем около 95 процентов из них используются ежедневно. Опрос, в котором приняли участие 44 150 респондентов в 28 странах на шести континентах, также показал, что потребительские расходы на приложения и аксессуары для смартфонов стремительно растут. В совокупности продажи смартфонов, а также приложений и аксессуаров для смартфонов, как ожидается, в 2020 году составят почти 1 триллион долларов США.

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

Предлагаем краткое изложение того, что такое mobile first дизайн, и как вы должны принять его при создании пользовательского опыта для людей.

Что такое mobile first?

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

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

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

Преимущества mobile first дизайна

* 75% пользователей смартфонов ожидают получения немедленной информации при использовании своего смартфона. ( Google , 2019)

* 77% покупателей смартфонов чаще покупают у компаний, чьи мобильные сайты или приложения позволяют им делать покупки быстро. ( Google , 2019)

* Показатели конверсии для мобильных устройств увеличились на 64% по сравнению со средними показателями конверсии для настольных компьютеров. Поэтому разработка мобильных устройств в первую очередь может привести к увеличению прибыли для вашего бизнеса. А поскольку Google оценивает mobile first, имеет смысл иметь это в виду при запуске нового проекта.

Этот способ проектирования также полезен, когда речь идет о времени загрузки и максимально быстром доступе пользователей к вашему контенту. С меньшим количеством элементов страница будет загружаться быстрее. Если учесть задержку в 1 секунду, приводящую к потере конверсий на 7% — сначала стоит разработать мобильную версию.

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

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

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

Mobile first – это приоритет контента

Контент занимает центральное место в мобильном дизайне. С mobile first дизайном, вы должны предоставить своим пользователям контент, который им абсолютно необходим. Разработка мобильного дизайна с такими строгими ограничениями вынуждает дизайнеров UX убирать любые посторонние элементы и фокусироваться на главном.

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

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

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

Какие принципы mobile first дизайна?

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

Вывод

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