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 спочатку не лише полегшить життя дизайнера, а й полегшить життя користувача.