Наилучший метод разработки мобильного веб-сайта (перевод)

Маркетинг8 Создание сайтов7 Контекстная реклама3 SEO5 Комплекс услуг5 Дизайн3 Программирование4 SMM4 Менеджмент Digital1 Мобильная разработка Интернет-маркетинг Использование сервиса1 Юзабилити Брендинг E-commerce

Мобильная разработкаСтатья

Christian Vasile

24 октября 2011

Мы множество раз слышали, как 2011 называют годом мобильного интернета, хотя подобные заявления нам доводилось слышать не единожды и в прошлом. Технология непрестанно развивается, а вместе с ней и мобильные телефоны, называемые в наше время смартфонами. Использование ресурсов интернета растет с каждым месяцем, а мобильные телефоны и планшетные компьютеры появляются в каждой семье. 53,6 миллиона людей в Японии ежемесячно выходят в интернет с помощью мобильных устройств, приблизительно столько же выходят в интернет через PC. В Соединенных Штатах около 20 миллионов пользователей обновляют свой статус в Facebook ежемесячно, а значит число людей, активно пользующихся интернетом еще больше. Согласно различным источникам, это число превышает 100 миллионов и постоянно увеличивается. Еще 10 лет назад никто не ожидал подобного, но это именно так. А значит, все большее количество компаний желают завести собственные мобильные веб-сайты и теперь у дизайнеров гораздо больше работы.

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

Непрерывный цикл

От идеи мобильного сайта до ее воплощения лежит долгий путь. Цикл пользовательско-ориентированного проектирования состоит из пяти различных стадий, каждую из которых мы вскоре рассмотрим. Эти фазы включают в себя: анализ ситуации, взгляд на пользователей и их потребности, выбор приоритетов функционала, разработка собственно проекта веб-сайта, а также анализ, тестирование и внесение правок. Этот цикл продолжителен, долог и бесконечен. Через несколько месяцев после официального запуска вы можете обнаружить, что вам требуется запустить цикл с самого начала. Фактически, то же самое происходит и в классическом веб-дизайне - компании очень часто меняют и пересматривают концепции дизайна собственных веб-сайтов/портфолио после анализа ситуации и принятия решения о необходимости внесения усовершенствований.

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

1. Анализируем ситуацию

Анализ ситуации начинается со следующего вопроса: «Действительно ли мне нужен сейчас мобильный веб-сайт?» Звучит странно и большинства из вас это, скорее всего, не коснется, но заказчики обязаны задавать себе этот вопрос. Не только потому, что мобильный сайт обойдется в несколько сотен долларов, но потому что он потребует исследований и, как уже отмечалось, внушительных объемов работы. Если у компании нет своего дизайнерского отдела, мобильный веб-сайт может стать практически бесполезным уже через несколько месяцев. Что требуется в этой ситуации от вас, так это убедиться в том, является ли ваш сайт доступным с различных мобильных платформ. Вы можете сделать это, просто проверив свою статистику через Google Analytics или любой другой подобный трекер.

Изображение взято с mobilewebsite.com.sg

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

Когда вы создаете обычный веб-сайт, у вас уже есть несколько идей в запасе: вы хотите привлечь внимание, повысить объем продаж и вывести свою компанию за пределы собственного города, региона или страны. Хорошо подумайте над тем, как мобильный веб-сайт сможет помочь вам и вашей компании. А иначе - какой смысл заниматься проектированием того, что не принесет вам ровным счетом ничего?

Если вы не видите причин для создания отдельного мобильного сайта, вы можете просто оптимизировать свой основной под мобильные устройства (размер изображений и т.п.) или установить плагин, если сайт работает под WordPress. Банки и онлайн-магазины нуждаются в мобильных веб-сайтах и это не вызывает никаких сомнений, однако я не уверен, что вам нужен такой сайт в случае, если вы – владелец текстильной фабрики. Многие большие компании, такие как IKEA, Burger King или Mercedes, не имеют собственных мобильных веб-сайтов. Они считают, что не нуждаются в них на текущий момент. Так что подумайте дважды - если даже у таких огромных компаний нет собственных мобильных сайтов (и это не потому, что они испытывают финансовые трудности), принесет ли он вам какую-нибудь пользу?

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

2. Понимаем пользователей и их потребности

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

Изображение взято с BBC UK

Некоторые из главных вопросов, на которые вам следует ответить:

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

После получения ответов на все вопросы, вам останется лишь исследовать рынок. А позже, когда у вас сложится полное представление о своих пользователях, вам следует узнать о том, как проектировать дизайн в соответствии со всеми модными течениями. Opera’s State of the Mobile Web, comScore, Forrester, eMarketer и другие подобные места помогут вам в ваших исследованиях.

3. Расставляем приоритеты функционала

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

Изображение взято с paperthin.com

С этим разобрались, давайте рассмотрим следующий шаг.

4. Проектируем веб-сайт

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

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

Приняв во внимание различные факторы, мы можем вывести три основные причины, по которым люди выходят в интернет с помощью смартфонов: микрозадачи (Twitter, Facebook, LinkedIn), скука (игры, прослушивание радио) и социальная активность, а также жизнь оффлайн (поиск ближайших магазинов и ресторанов, чтение рецензий). Кроме этого следует учесть следующие факторы.

Разрабатывайте дизайн для меньших экранов

Не забывайте, что мобильные проекты разрабатываются на экранах большого размера. В таких условиях совсем не просто сделать все идеально. Существует огромное количество размеров компьютерных экранов, и еще большее - экранов мобильных телефонов. Практически каждый производитель смартфонов имеет собственный размер экрана и предпочитаемое разрешение. Даже iPhone 4, обладатель одного из самых больших экранов среди смартфонов, просто кроха по сравнению со стандартным разрешением настольных мониторов в 1024 х 768. Более того, некоторые телефоны позволяют менять ориентацию изображения, а значит и веб-сайт должен изменяться соответственно. Ни один компьютерный экран не меняет своей ориентации, следовательно - это совершенно новый фактор, который следует учитывать разработчикам.

Изображение взято с techwench.com

Наилучшим решением здесь будет гибкая развертка, адаптирующаяся к экранам большего и меньшего размеров. Наиболее легкий способ сделать это – использовать оболочку с размерами, выраженными в процентах, а не пикселях. Более того, каждый элемент HTML должен быть выражен процентами, дабы убедиться, что раскладка достаточно гибка. В таком случае веб-сайт будет выглядеть одинаково на экранах шириной в 150 и 200 пикселей. Также, в зависимости от мобильной платформы, пользователи подразделяются на группы, в зависимости от используемого ими браузера. Это может быть Safari, Opera Mini, Nokia WebKit (только для Европы), Android WebKit или BlackBerry WebKit. Все эти браузеры имеют свои слабости и не поддерживают некоторые языки. Однако все они поддерживают CSS 2, а вскоре будут поддерживать и CSS 3.

Упрощайте навигацию

У телефонов нет мыши, кроме того, разработчикам следует уделять чуть больше внимания навигации. Помимо маленького экрана, пользователи полагаются на сенсорный экран, джойстик и цифровую клавиатуру для управления и навигации - все это делает взаимодействие с сайтом более сложным, нежели на PC. Информация и основные функции обычно расположены в несколько строк (вы сможете увидеть это на примерах в конце статьи), по причине того, что у большинства телефонов высота экрана больше ширины, а значит больше рабочего пространства по вертикали. Наиболее важные разделы обычно идут вначале, потому что пользователю может понадобиться прокручивать экран, чтобы добраться до конца. Число категорий, ссылок и уровней навигации должно быть сокращено до минимально возможного.

Хотя и не так много сайтов предоставляют такую возможность, обеспечение поддержки клавиатурных ссылок (0-9) для доступа к различным разделам может быть весьма полезным. Сайт CNN добавил эту опцию не так давно - хотя мы и не знаем, насколько хорошо она себя зарекомендовала. Так как для навигации люди в большинстве случаев будут использовать сенсорный ввод, убедитесь, что все кнопки надлежащей высоты и ширины. Если у вас есть три расположенные в ряд кнопки, каждая 15px шириной и высотой, пользователю будет очень сложно попасть по той, что расположена посередине. Пользуйтесь не пикселями, а процентами! Есть большая разница между кнопками шириной в 30px, расположенными на экране в 250 пикселей и теми же, но на экране в 150px.

Ваш мобильный веб-сайт должен привлекать взгляд, кроме того, постарайтесь делать ссылки как можно более четкими (см. веб-сайт CBS News). Всегда давайте ссылки на полноформатные веб-страницы - пользователь с доступом к беспроводному соединению должен иметь возможность посетить и основной сайт, если сочтет это необходимым. Обычно для подобных ссылок я использую нижний колонтитул. Так как навигация не слишком сложна и углублена, нет нужды загромождать пространство декоративными элементами.

Мобильный веб-сайт CBS News

Отбирайте приоритетную информацию

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

Минимизируйте необходимость ввода информации пользователем

Так как посетитель не сидит за клавиатурой, будет неплохо немного помочь ему. Сделайте URL похожим на основной адрес (mobile.site.com или m.site.com). Если от пользователя требуется зарегистрироваться, сократите поля насколько это возможно. Вместо того, чтобы требовать город и регион, попросите их ввести почтовый индекс, и вот, пожалуйста – одним полем меньше! Также вы можете ввести геолокацию, если знаете как. Используйте «умные» функции, вроде запоминания последних введенных пользователем данных. Очень многое здесь отличается от обычных веб-сайтов - экспериментируйте. Вдобавок ко всему, дайте возможность оставаться авторизованным.

Снизьте трафик

Даже сегодня, во времена 3G скоростей и беспроводных соединений, пользователи во многих странах по-прежнему вынуждены платить за каждый бит данных. Поэтому, не вставляйте слишком много изображений (по крайней мере, в высоком разрешении), делайте страницы небольшими, избавляйтесь от лишнего кода, комментариев и необязательных тегов.

Вдобавок, вы можете использовать скрипт, чтобы выяснить, заходит ли пользователь на ваш основной сайт с помощью мобильного устройства. И если это так – перенаправлять его на мобильный веб-сайт. Flash, JavaScript, cookies, HTML5 и фреймы пока не работают на мобильных телефонах, так что не полагайтесь на них. По всей видимости, вы захотите, чтобы пользователи прокручивали содержимое, но только в одном направлении. На большинстве веб-сайтов используется вертикальный скроллинг - не заставляйте пользователей прокручивать сайт в обоих направлениях.

5. Анализ, тестирование и внесение правок

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

Усовершенствования

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

Заключение и примеры

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

1. Yellow Pages

Yellow Pages

2. Walmart

Walmart

3. Vimeo

Vimeo

4. Trip Advisor

Trip Advisor

5. Flickr

Flickr

6. Digg

Digg

7. DeviantART

DeviantART

8. CW TV

CW TV

9. Amazon

Amazon

Статьи для дальнейшего изучения

Хотите что-нибудь добавить? Быть может, у вас есть свои методы работы или вы с чем-нибудь не согласны?

Оригинал статьи: http://www.1stwebdesigner.com/design/best-approach-mobile-website-design/

Егор Аристакесян
Креативный директор и совладелец в Articul Media Group

В целом статья неплохая, хотя никаких открытий не содержит, а всего лишь еще раз в подробностях рассказывает истину – прежде, чем что-то делать, надо хорошенько подумать и все померить. Актуальность темы в самой теме – компании или бренду как всегда необходимо двигаться за потребителем, а лучше забегать вперед и уже встречать его с распростертыми объятиями и сервисами. И если потребитель последнее время не высовывает нос дальше своего смартфона, а он именно так и делает, то и компании со своим продуктом или сервисом прямая дорога в мобильник.

Анастасия Старкова
Руководитель отдела исследований и аналитики в iTrack

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

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

Пример с IKEA показателен. Мобильный сайт с полной функциональностью обычного сайта (красочным каталогом, подробными характеристиками) действительно не нужен, но иметь собственное мобильное приложение, которое помогало бы найти интересующий товар в самом магазине (в зале, на складе), быстро посмотреть часы работы и схемы проезда явно было бы полезным. Повысить уровень продаж это приложение помогло, если бы было привязано или содержало в себе функционал заметок (пользователь предварительно составляет список покупок) и «гео-напоминаний» (напоминание срабатывает, когда магазин находится недалеко от мобильного телефона). Мобильные приложения подчас открывают новые возможности привлечения клиентов по сравнению с обычными сайтами, а уровень затрат на их разработку вполне сопоставим со стоимостью разработки мобильной версии сайта.

Фраза «Это не займет много времени» в абзаце про тестирование сайта (в т.ч. на людях) и его доработках убила. Спасибо, посмеялась :)

Давид Вачадзе
Генеральный директор в Brand Mobile

Статья автора затрагивает действительно актуальную тему и дает толковые практические советы. От себя добавлю, что в определении потребностей пользователя не стоит ограничиваться анализом потребления текущего web-сайта с мобильных устройств - он априори неоднозначен. Я бы порекомендовал
обязательно моделировать юз-кейсы и валидировать их на опросах или фокус группах.

Что касается процесса тестирования, то обязательно надо тестироваться на телефонах с небольшим экраном, а не только на смартфонах. Для iPhone и Android, например, хорошим дополнением, в случае регулярного
сервисного использования вашего мобильного сайта, могут стать соответствующие приложения.

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