Почему вам нужно перейти на Mobile First дизайн


11.11.2021 Время чтения - 4 минуты 591

5 причин использовать Mobile First дизайн.

Я всегда создаю веб-приложения на своем ноутбуке, поэтому логично, что они хорошо смотрятся на большом экране. 3 недели назад, создавая медиа-запросы, я задавался вопросом, какой размер экрана должен быть «стандартным».

Тогда я пришел к концепции Mobile First, согласно которой мы начинаем дизайн с точки зрения пользователя смартфона. Это не значит, что нужно игнорировать пользователей компьютеров. Мы просто ставим их на второе место.

Спустя три недели я понял, что продолжу придерживаться этой концепции. И вот по каким причинам:

1. Большинство решает

Согласно статистике за октябрь 2021 года от statcounter:

  • 55% интернет-пользователей предпочли мобильные устройства;
  • 42% выходили в Интернет с компьютера;
  • и 3% использовали планшет.

Вы можете возразить (и будете правы), что цифры только по США и Европе все еще показывают преимущество ПК, а не мобильных. Тем не менее это преимущество с каждым годом все слабее.

2. Многоразовый дизайн мобильного приложения

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

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

3. Акцент на главном

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

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

4. Интерактивные функции становятся очевидны

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

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

5. Подходит для Lean и Agile

Сосредоточившись на главном, вы сможете постепенно добавлять на сайт функции. А это основа концепций Agile и Lean.

Agile нацелена на небольшое прибавление функций в каждом спринте.

Предоставляйте рабочее ПО часто, от пары недель до пары месяцев, отдавая предпочтение более коротким срокам.

Lean PDCA (Plan – Do – Check – Act) следует проводить на каждом этапе.

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

Вместо этого с десктопным дизайном перед нами огромный холст, и, скорее всего, мы сделаем полную версию со всеми наворотами. Это не только задерживает первый релиз, но и способствует «золотому напылению» (выходу за рамки требуемого).

«Золотое напыление» означает добавление любой функции, не учтенной в первоначальном плане объема работ или описании продукта.

Бонус

Если вы подумываете использовать Mobile First, вот несколько советов, которые я могу дать, исходя из собственного опыта:

№ 1: Держите открытой вкладку «Инструменты разработчика». В левом верхнем углу вы найдете кнопку «Переключить панель инструментов устройства». Она позволяет имитировать область просмотра мобильного устройства и видеть страницу в версии с маленьким экраном.

№ 2: По-прежнему в верхнем левом углу вкладки «Инструменты разработчика» вы найдете кнопку «Выбрать элемент на странице для его проверки». Выберите ссылку/кнопку/текст на своем сайте, и во всплывающем окне отобразится оценка его контрастности.

Это соотношение между текстом и его цветом фона. Чем выше контраст, тем легче пользователю его прочитать.

№ 3: При условии, что вы больше не будете использовать hover-эффект или подсветку, подумайте о том, чтобы использовать Material Design гайды при создании экранных элементов.

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