Подходов к разработке и дизайну сайтов и приложений становится все больше. Поэтому компаниям каждый раз труднее учитывать и оценивать все влияющие на выбор факторы с учетом собственных целей, возможностей и ресурсов. Задача осложняется ещё и тем, что выбранному решению приходится следовать многие годы, пока вложения в разработку не будут амортизированы. Например, для будущего сайта нужно выбрать тип дизайна – специализированный, отзывчивый или адаптивный, а для приложения – метод разработки (веб-технологии или нативный код). Стивен Гриффитс (Stephen Griffiths) из компании Google поможет вам разобраться в вопросах, с которыми так или иначе придется столкнуться любой компании при разработке сайта или приложения.

Шаг первый: выбор решения

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

Ставьте интересы клиента превыше всего

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

Подумайте об уникальных возможностях каждого решения

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

Определите цели, которых хотите достичь

  • Если ваша цель – широкий охват, создайте веб-сайт. Вы получите возможность взаимодействовать с многочисленной аудиторией Интернета, а также привлекать клиентов через поиск и социальные каналы.
    • Или расширьте возможности уже существующего сайта, добавив веб-компоненты Google Polymer: они помогут сделать ресурс удобнее для пользователей и улучшить взаимодействие с ними.
  • Если же для вас важнее функциональность, создайте нативное приложение. Это позволит вам задействовать новейшие технологии, в том числе улучшающие общение с постоянными покупателями.
    • Кроме того, вы сможете напоминать о себе клиентам, даже когда они не пользуются приложением, – отправляя на их смартфоны уведомления или обновления для виджета.

Если для вас одинаково важны охват и функциональность, создайте веб-приложение

  • Добавьте на сайт расширенные веб-компоненты или создайте специальное веб-приложение, чтобы пользователи могли работать офлайн, получать push-уведомления, добавлять ярлыки на главный экран браузера и многое другое.
    • Ваш сайт получит все возможности нативных приложений, за исключением самых современных.
[image 1] [Title] ЧЕТЫРЕ ВАРИАНТА ВЫБОРА РЕШЕНИЯ

Шаг второй: выбор дизайна

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

Выбор дизайна осложняется разнообразием устройств и пользовательских сценариев

  • Дизайн должен учитывать тип платформы (компьютер, смартфон, умные часы), размер, разрешение и ориентацию экрана, метод ввода (мышка, прикосновение, голос), тип устройства (например, на базе iOS или Android) и его ориентацию (как пользователь будет держать смартфон и взаимодействовать с ним).
  • Пользователю важно, чтобы он мог легко решить свою задачу, какое бы устройство ни выбрал.
  • Успешный продукт можно создать только с учетом сценариев работы на разных устройствах.

Отзывчивый или адаптивный дизайн – самые гибкие и устойчивые подходы к разработке

  • Отзывчивый дизайн – это гибкий и устойчивый подход, в основе которого лежит применение плавающих сеток. С их помощью формат и местоположение изображений, мультимедиа, текста и других элементов можно легко подстроить под любой экран. Сайты с отзывчивым дизайном распознают тип устройства, поэтому они наиболее перспективны с точки зрения удобства пользователей.
    • Если вы ещё не готовы применять отзывчивый дизайн для всех типов устройств, начните с мобильного сайта. Затем, когда сайт станет удобным для пользователей, а коэффициент конверсии вырастет, масштабируйте это решение для планшетов и компьютеров.
  • Адаптивный дизайн обеспечивает ещё лучшее взаимодействие на любом типе устройств. Благодаря плавающим сеткам и контрольным точкам содержание сайта не только подстраивается под любой тип и расширение экрана, но и меняется в зависимости от задачи, стоящей перед пользователем.

Material Design: концепция единства пользовательских интерфейсов сайтов и приложений

  • Многообразие устройств также усложняет задачу разработчиков нативных приложений. Да и самих нативных платформ, для которых пишутся такие приложения, существует несколько. Решение заключается в использовании принципов отзывчивого и адаптивного дизайна.
  • Например, визуальный язык Material Design позволяет отображать разные представления одной и той же системы, благодаря чему пользователи могут работать с одинаковым интерфейсом на разных устройствах, сайтах и в разных нативных приложениях.

Приоритет должен отдаваться мобильным устройствам

  • Расценивайте ограничения, накладываемые смартфонами, как преимущество (например, на небольшом экране можно оставить только самое главное, а второстепенную информацию перенести с него или удалить).
  • Начинайте разрабатывать дизайн с самого мелкого устройства и лишь затем масштабируйте результат для других платформ – ведь что-то добавить всегда проще, чем убрать.
[Image 2] [Title] КАКУЮ ЦЕЛЬ ДОЛЖНЫ ПРЕСЛЕДОВАТЬ ДИЗАЙНЕРЫ [image source] ScientiaMobile (MOVR 2015 Q1 Infographic), Скотт Харф (Scott Hurff)

Шаг третий: выбор метода разработки

Существует два основных метода разработки: веб-технологии (HTML, CSS и JavaScript) и нативный код (Java, Objective C и т. д.). Для написания сайтов и веб-приложений, работающих через браузер, применяются только веб-технологии. В то же время мобильные приложения могут быть написаны и с помощью кода (нативные приложения), и с помощью обеих технологий одновременно (гибридные приложения). Вот рекомендации, которым мы советуем следовать при выборе метода:

Применяйте новейшие инструменты для оптимизации сайта

  • Веб-разработка – развитая область, в которой уже создано огромное количество эффективных инструментов.
  • С их помощью вы сможете повысить производительность сайта – именно от нее зависит, насколько хорошо вы справитесь с задачей улучшения сайта для пользователей, повышения числа конверсий и преодоления унаследованных недостатков. Например, инструменты Google помогут оптимизировать загрузку сайта и скорость его работы.
  • Чтобы расширить возможности сайта и повысить коэффициент конверсии, внедрите веб-компоненты Google Polymer, например для автозаполнения форм (Optimise Form Entry или Auto Complete).

Добавляйте на сайты функции приложений или создавайте веб-приложения с помощью Google Polymer

  • Расширьте возможности вашего сайта, добавив функции приложений – экраны-заставки, синхронизацию, push-уведомления, возможность работать офлайн, а также сохранять ярлыки на главный экран.
  • Google Polymer – один из инструментов разработки веб-приложений, позволяющий унифицировать функциональность сайта на разных устройствах. Его принцип основан на использовании стандартных "легких" модулей и веб-компонентов, быстро работающих во всех современных браузерах.
  • Перечень таких компонентов постоянно расширяется. Дизайн многих из них, благодаря соответствию концепции Material Design, можно адаптировать под сайты и приложения любой компании.
  • Элементы Polymer можно добавлять на сайт или использовать для создания нового веб-приложения.

Применяйте накопленный опыт и проверенные инструменты для разработки нативных приложений

  • Чтобы охватить большую часть рынка, достаточно создать приложения всего для двух платформ – Android и iOS.
  • Если вы стремитесь предоставить своим пользователям удобство и широкий выбор функций, то выбирайте нативные приложения. Они запускаются прямо в операционной системе устройства, стабильно работают и поддерживают доступ к самым новым функциям, сервисам и API.

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

  • Если скорость и стоимость разработки для вас важнее удобства или же вам нужны совсем простые функции, то гибридные приложения могут стать подходящим решением.
  • Однако учтите, что в этом случае вам придется пойти на многочисленные компромиссы: такие приложения уступают нативным в эффективности (поскольку веб-технологии "завернуты" в нативную оболочку), удобстве использования (интерфейсы Android и iOS выглядят по-разному), простоте тестирования (веб-представления отличаются в разных браузерах) и стабильности работы.
[image 3] [Title] МЕТОДЫ РАЗРАБОТКИ И ОРГАНИЗАЦИОННЫЕ ТРЕБОВАНИЯ К НИМ

Вывод: тщательно выбирайте подходящий метод разработки

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

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