Когда игнорировать mobile-first

Когда игнорировать mobile-first

От автора: в 2012 я выучил опасное правило: mobile first подход в UX обеспечивает пользователям единообразный опыт на всех устройствах. После четырех лет повторения этой мантры вместе с UX дизайнерами в одни воскресный день я понял, что это в прошлом. В догматическом распространении адаптивности и кроссбраузерной совместимости (процесс проектирования требует этого) что-то потерялось.

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

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

Макеты Mobile-first настаивают на простоте и минимализме. Я не первый спрашиваю об основных последствиях: сайты начинают выглядеть одинаково.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Я сам работал с дизайнерами, которые наращивали свои pixel-perfect макеты, оставляя пользователю огромный рабочий стол.

Единообразный опыт на всех устройствах стал мантрой, но очевидно, что запрет на использование UI шаблонов, макетов и взаимодействий, которые «не работают» на мобильных устройствах, становится устаревшим и нерелевантным подходом к некоторым проектам.

Я чувствую себя подготовленным к mobile-first, потому что так долго продвигал этот подход. На самом деле, эта статья для меня – пограничное лицемерие. У меня репутация безжалостного чемпиона по юзабилити в ущерб творчеству, поэтому я знаю все оправдания.

Оправдание №1: кроссбраузерный опыт помогает пользователям перепрыгивать с мобильных устройств на десктоп

Почему это правда: если вы проектируете сложные пользовательские потоки, требующие нескольких сессий, mobile-first все еще работает. Понимание контекста пользователя может диктовать вероятность прерывание сессии или приостановки задачи. Настоящая адаптивность облегчает выбор резерва.

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

Когда это не имеет значения: некоторые дизайнеры изменили смысл «cross-device», создав опыт, позволяющий разным экранам играть вместе.

Arcade Fire запустили «интерактивные фильмы» для рекламы своих альбомов. Reflektor – это музыкальное видео для заглавного трека. В браузере на компьютере сайт уведомляет вас «Connect your smartphone or tablet». Вебкамера компьютера распознает положение устройства, отражая это в видео.

Точно так же Paper Planes, созданный для Google I/O 2016, объединил участников, позволив им использовать свои мобильные устройства для цифровой печати бумажных самолетиков на 5-футовом экране на сцене.

Оправдание №2: люди все чаще пользуются мобильным устройствами

Почему это правда: подумайте о скорости, разрешении экрана и возможностях браузера вашего текущего смартфона и сравните это со смартфоном 5 лет назад. Тогда было сложно набрать на клавиатуре слова «использование мобильных устройств превысило десктоп». Статистика везде.

4 ноября google объявил о переключении на «mobile-first index», цитируя, «сегодня большинство людей ищут в google на мобильных устройствах». Нет более сильного одобрения, чем когда google говорит, что будет оценивать неадаптивные сайты ниже.

Если ваша цифровая стратегия все еще зависит от SEO, не отказывайтесь от mobile-first.

Почему это не важно: не забывайте, Google Search должен помогать людям искать информацию. Ваша аудитория ищет вас? Может быть, нет. Пользователи в 2017 ищут информацию, втягиваясь через реферальные социальные ссылки, вихри щелчков, связанный контент и магию контекстной навигации. Если у вас есть разношерстная стратегия видимости по привлечению пользователей, то выигрыш от творческих макетов и кастомного опыта может стоить риска.

Обувная компания Camper создали визуально яркую лендинг пейдж для своей последней кампании. На странице много движения и видео и мало контента. Провокационный сайт все еще вел на обычный E-Commerce магазин.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

Команда попробовала создать мобильную версию, но она сильно ограничена, что они лучше потратят время и деньги в другом месте.

Оправдание №3: некоторые видят интернет только через свои смартфоны

Почему это правда: для миллиардов людей доступ к интернету – роскошь. Хотя это должно быть основным правом человека. Американцы с низким доходом выбирают смартфоны, а не компьютеры, так как могут позволить себе только что-то одно. Стандарты доступности и лучшие практики типа mobile-first должны обеспечить равенство.

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

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

Сайт «24-hour music video» Фаррелла уильямса не сделал бы нас «Happy», если бы фанатики cross-device выиграли спор.

Веб-технологии – идеальное место, чтобы отдать дань уважения самим технологиям. Канадский разработчик Ben Feist оцифровал миссию Аполлон 17 в форме макета, напоминающего диспетчерскую. Экран загроможден данными, картинками, текстом и кнопками, обновляя «live» со стартом ракеты. Это слегка потрясает – как это и было в 1972. Кто хочет смотреть на приземление на Луну на экране в 4.7 дюйма?

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

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

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

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

Автор: Tricia D’Antin

Источник: https://www.creativebloq.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Научись верстать сайты, используя все возможности фреймворка Bootstrap.

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree