Стратегії розробки вебсайту: «спочатку мобільні» та «спочатку комп'ютери»

В попередньому матеріалі ми розглянули ключові відмінності між мобільною та комп’ютерною версіями сайту. Ми зазначали, що через різні пропорції та розміри екранів, їх базову орієнтацію та принципово різні засоби введення інформації ці дві версії дизайну вебсайтів є дуже різними. Як за композицією, так і за засобами взаємодії.

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

Але як саме створюється мобільна версія? І з якої версії починається проєктування дизайну?

Тут існують дві принципово різні дизайн-стратегії: 

  • «спочатку мобільні» (англ. mobile first), 

  • «спочатку комп’ютери» (англ. desktop first). 

Назви в них є досить красномовними. В обох випадках створюють обидві версії сайту, відмінною є лише послідовність їхньої розробки. В цьому матеріалі ми розглянемо обидві стратегії і спробуємо з’ясувати їхні переваги та контексти застосування.

Дизайн-стратегії з розробки вебсайту

Спочатку мобільні

В дизайн стратегії «Спочатку мобільні» базовою версією вебсайту пропонується обрати саме мобільну.

У 2011 році дизайнер Люк Вроблевські присвятив цій стратегії однойменну книгу. В ній він зазначав, що тривалий час вебдизайнери ставились до мобільних версій сайту як до вторинних. Через це часто не враховувались особливості смартфонів, що суттєво погіршувало досвід користування. Базові механіки сайту проєктувались під користування на комп’ютері, і авторам сайтів не завжди вдавалось зручно адаптувати їх для мобільних.

Наприклад, якщо ви створюєте слайдер, то цілком очікувано, що на комп’ютері зміна слайдів буде відбуватись шляхом натискання на клавіші «назад» та «вперед». Але на смартфоні користувач більше звик гортати слайди чи світлини в галереях жестом свайп. Тож якщо просто перенести механіку натискання клавіш в подібних інтерактивних об’єктах, вона буде неорганічною.

Натомість якщо ви першим проєктуєте дизайн для мобільних пристроїв, подібна ситуація навряд чи трапиться, адже ви будете з самого початку виходити з нативних принципів роботи смартфонів.

Цей підхід також позитивно впливає на саму композицію мобільної версії сайту. Стаціонарна версія сайту за замовчуванням є більш місткою, відтак в ній більше функціональних елементів, довші написи, зображення займають більшу площу. Коли дизайнери створюють спочатку версію сайту для комп’ютерів, то й зміст від початку в них є «комп’ютерним». В мобільній версії він починає виглядати громіздко, неорганічно.

Якщо ж одразу проєктувати сайт для мобільних пристроїв, таких проблем ви уникнете. До того ж, лаконічні написи з мобільної версії нерідко зберігають естетичність й органічність і в комп’ютерній версії сайту.

За Вроблевські, серед переваг цього методу є те, що він дозволяє:

  • підготуватись до появи нових можливостей мобільного зв’язку;
  • врахувати можливості й обмеження мобільних пристроїв;
  • отримати інноваційний досвід та нові навички роботи з мобільними пристроями.

В цього принципу проєктування чимало відомих адвокатів, серед яких є голова правління Google у 2011-2015 роках Ерік Шмідт, віце-президент Apple з технологій Кевін Лінч та колишня дизайн-директорка Facebook та eBay Кейт Ароновітц. Остання відзначала:

Ми почали використовувати підхід, за якого спочатку думаємо про мобільний веб, а вже потім про звичайний. З’ясувалось, що так дизайнери мобільних застосунків навчились працювати зі значною кількістю обмежень, і це допомогло нам інакше поставитись до застосунків на комп’ютерах.

До цього можна додати ще одну перевагу: цей підхід дозволяє напрацювати досвід проєктування для мобільних пристроїв і його легко розвинути в навичку розробки мобільних застосунків, адже в них є чимало спільного з мобільними версіями вебсайтів.

Відтак, коли ви проєктуєте сайт відповідно до цієї стратегії, першою і ключовою версією сайту є мобільна. Саме для неї ви створюєте зміст, дизайн та принципи взаємодії. В комп’ютерній версії можуть змінюватись окремі функції, зовнішній вигляд елементів, загальна композиція і навігація.

Всі ключові завдання сайту чудово виконуються і в мобільній, і у комп’ютерній версії. При цьому в комп’ютерній версії можуть з’являтись додаткові можливості: в змісті — доповнені тексти, більші зображення, в композиції — додаткові декоративні елементи тощо.

Ця стратегія є доречною, коли:

  • Кількість відвідувачів з мобільних пристроїв на сайті передбачається значною — понад 50%, відповідно, більшість користувачів будуть взаємодіяти з сайтами на смартфонах чи планшетах.
  • Функціональність сайту обмежена кількома функціями (наприклад, замовлення і оплата таксі).

Але попри значну кількість переваг, ця стратегія не є універсальною, і, звісно, реальна практика вносить певні корективи.

По-перше, попри те, що мобільний трафік дійсно постійно збільшується, все ж не всі вебсайти за задумом орієнтовані на перегляд саме з мобільних. Наприклад, онлайн-сервіси, пов’язані з аналітикою даних частіше переглядаються з комп’ютерів, і на смартфонах використовувати їх некомфортно. Відтак для них просто недоречно робити ключову ставку на мобільну версію.

По-друге, замовникам вкрай складно оцінити якість майбутнього сайту на основі макетів мобільної версії. Часто саме з їх ініціативи першою розробляється комп’ютерна версія.

І тоді вам доводиться дотримуватись стратегії «Спочатку комп’ютери».

Спочатку комп’ютери

Відповідно до цієї стратегії в якості базової і ключової визначається версія вебсайту для комп’ютерів. З неї ви починаєте проєктування. В ній створюєте базову композицію. І нею має бути зручніше користуватися аудиторії.

Мобільна версія при цьому сприймається саме як додаткова. Деякі функції в ній можуть бути навіть обмеженими, про що на сайті часто є сповіщення.

Така стратегія є більш комфортною для більшості клієнтів, адже їм легше сприймати дизайн комп’ютерної версії.

Але ця стратегія є більш відповідною і за об’єктивних причин, коли:

  • кількість відвідувачів з комп’ютерів передбачається значною — понад 50%;
  • більшість користувачів будуть взаємодіяти з сайтами на стаціонарних комп’ютерах або ноутбуках;
  • функціональність сайту є розгалуженою (це характерно для сайтів, в яких є користувацький кабінет, екрани зі звітністю у формі таблиць чи графіків, онлайн-редакторів).

На завершення

Бодай яку стратегію ви обираєте для створення проєкту, в сучасному вебдизайні доцільною є уважна робота як з мобільною, так і з комп’ютерною версією сайту. В кожному випадку є достатньо особливостей, які слід враховувати. З практичної точки зору корисно спробувати застосування кожної з цих стратегій.

Відзначимо також, що для складних інтерфейсів дизайнери застосовують стратегію створення атомарного дизайну або ж стратегію «починайте з елементів», яка покликана забезпечити краще представлення сайтів в проміжних станах між комп’ютерною та мобільною версіями. 

·
2952
·
3
·
sosogoodsuper 56
Наступна стаття
Кросбраузерність
1554
Головна