Мобильный дизайн

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

Логика такова: ограничения вынуждают расставлять приоритеты. На маленьком экране невозможно отобразить всё, поэтому команда должна решить, что важнее всего, и это решение улучшает и версию для настольных компьютеров, поскольку чёткая иерархия ценна при любом размере экрана. Работа в обратном направлении откладывает этот вопрос до конца, и тогда выбор делается под давлением времени тем, кто внедряет контрольные точки, обычно без участия заинтересованных сторон, которые могли бы по этому поводу спорить.

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

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

Ощутимые последствия таких ошибок видны практически в каждом наборе данных по электронной коммерции, где доля мобильного трафика превышает долю трафика с настольных компьютеров, в то время как конверсия с мобильных устройств значительно отстает. Часть этого разрыва реальна, отражая поиск информации на мобильных устройствах и совершение покупок на настольных компьютерах, но большая его часть объясняется более сложным пользовательским интерфейсом: тесные формы, медленные страницы, неудобная процедура оформления заказа и контент, скрытый за дополнительными касаниями. Восприятие этого разрыва как неизбежного, а не как поддающегося диагностике, — одна из самых дорогостоящих ошибок, которые может совершить бизнес.

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

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