На прошлой неделе вышел очередной выпуск электронного журнала Inspire Magazine от корпорации Adobe. Среди прочих материалов – статья “Ten best practices for designing mobile websites” от Эндрю Хендерсона (Andrew Henderson), версию которой в переводе на русский язык AIN.UA представляет вам сегодня.

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

Время радикальных перемен для дизайнеров и разработчиков мобильных приложений наступило. Понятие мобильного браузера существовало еще с 90-х гг. ХХ века. Но с запуском корпорацией Apple своего iPhone в 2007 г. стало понятно, что мобильный веб и мобильные приложения имеют куда больший потенциал, чем принято было считать. И с того момента, с появлением и развитием все более мощных смартфонов с сенсорными экранами и интернет-планшетов начался постоянный рост мобильного серфинга; компании больше не могли игнорировать тот факт, что оптимальный опыт использования мобильных сайтов неизбежно ассоциируется с брендом компании.

Постепенно фокус в разработке для мобильных устройств смещается от разработки нативных приложений к разработке под конкретные устройства и платформы, со своими спецификациями в зависимости от экранов и других характеристик устройства. Миграция приоритетов в мобильной разработке происходит по тем же причинам, по которым настольное По сейчас активно мигрирует в “облака”. Для всех лучше, если приложение или сайт работают с одинаковой производительностью и удобством для пользователя независимо от места, платформы, ОС и параметров устройства. Обновление “облачного приложения” сразу обновляет его для всей линейки устройств. То же происходит и с мобильными сайтами. Приоритет в сторону мобильных сайтов объясняется тем, что в этом случае нет необходимости каждый раз обновлять каждое отдельное приложение для каждого типа устройств, проходить процесс утверждения приложения в магазине для конкретной мобильной платформы и разрабатывать отдельно под каждую ОС.

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

Первоклассные мобильные сайты ставят функциональность выше внешней формы

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

Производительность – это sexy

У пользователей мобильных устройств – миллион возможностей для вовлечения в интерактив. Каждый новый мобильный сайт будет конкурировать с 500 тыс+ приложений для iOS, 260 тыс Android-приложений и еще почти с 4 млн мобильных сайтов. Самый простой способ выделиться среди этой “толпы” – это производительность и быстрота работы. Потребитель не терпит “тормозящих” сайтов, но очень быстро привыкает и высоко ценит те проекты, которые просто хорошо справляются со своей задачей.

Простота – залог успеха

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

Не создавайте приложение, если планируете мобильную версию сайта

Огромный “плюс” мобильных приложений – в том, что они способны решать задачи, с которыми мобильный сайт не справится. Но нет смысла создавать мобильное приложение, которое будет решать задачи мобильного сайта. Мобильное приложение “загоняет в рамки” процесс разработки и совершенствования задач для конкретных экосистем и платформ. Для кросс-платформенной разработки необходимы дополнительные существенные затраты, и довольно сложная система менеджмента, и вовлечение сторонних участников в процесс (операторы, производители мобильных гаджетов, администрация магазинов приложений и т.д.). Мобильный сайт позволяет всего этого избежать и пройти весь путь контакта с мобильным пользователем за меньшее число “шагов”.

Подключайте дизайнеров на ранней стадии и постоянно вовлекайте их в процесс

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

Сбалансируйте дизайн и производительность

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

Задайте бренд в самом пользовательском интерфейсе

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

Определите ключевых пользователей и адресуйте проект им

Мобильный сайт – более избирательный проект, чем традиционный веб-сайт. Посетители мобильного сайта в основном не имеют под руками клавиатуры и пользуются таким сайтом “на ходу”. Определите ключевые функции, которые важны ЦА такого мобильного проекта – и сделайте сайт, адресованный непосредственно им.

Oптимизируйте дизайн в пользу производительности

Печальная правда состоит в том, что неважно, насколько хорошо вам удалось разработать и внедрить мобильный сайт, надежность самой мобильной экосистемы – штука довольно “шаткая”. Работа операторов, местоположение пользователя в текущий момент, параметры конкретного мобильника могут повлиять на надежность и стабильность работы сайта. Поэтому крайне важно выяснить факторы и зоны резкого снижения производительности мобильного сайта и разработать такие варианты дизайна и структуры мобильного сайта, чтобы интересы пользователя минимально страдали от сбоев сети, старой версии мобильного ПО или перебоев в покрытии мобильного интернет-соединения.

Приоритеты внешнего вида и требования рабочего состояния сайта

Задачи мобильного сайта: работать быстро, выглядеть хорошо, поставлять всю требуемую информацию для пользователя / клиента несмотря на малую мощность смартфона / мобильного телефона, ограничения в размере экрана, пропускной способности мобильного соединения и т.д. Соединить всё это “в одном флаконе” непросто, поэтому синхронизация быстродействия и внешнего вида в итерациях разработки – это самое главное. Зачастую успех или провал мобильного корпоративного сайта определяется именно умением “балансировать на краю пропасти”.