что такое главная страница приложения
Навигация мобильных сайтов и приложений: базовые принципы юзабилити
Навигация мобильных версий сайтов и приложений должна быть наглядной, понятной и вдобавок занимать минимум места на экране. По сути, она должна дополнять собой инструменты поиска, а иногда — и заменять их, и этому есть несколько причин:
На мобильных устройствах правильная навигация еще более актуальна: занимая существенную часть экрана, она привлекает намного больше внимания, чем на десктопе. Из-за недостатка места строка поиска и ссылки меню в верхней части страницы могут помешать быстро получить нужную информацию. Не заставляйте пользователей скроллить, обращайте пристальное внимание на эти элементы — они должны быть заметны с первого взгляда, но при этом не нарушать главный принцип юзабилити мобильных сайтов: приоритет контента перед интерфейсом.
На сегодняшний день это одна из главных проблем мобильных интерфейсов: как сделать навигацию заметной и удобной для использования, и при этом не отвлекать от содержимого. Рассмотрим ключевые принципы построения навигации мобильных сайтов и приложений на конкретных примерах.
Верхняя панель навигации
Верхняя панель навигации досталась мобильным сайтам в наследство от десктопных устройств. Эта полоска в верхней части экрана, на которой размещены основные навигационные ссылки — популярный и достаточно эффективный инструмент, однако имеет два существенных недостатка. Во-первых, он хорош, только когда на сайте относительно мало других элементов навигации, и во-вторых — занимает слишком ценное пространство в верхней части экрана.
Вот, например, как выглядят главные страницы мобильной версии сайта BBC и приложения Google Play Apps:
Обратите внимание, что Google Play смог уместить больше элементов в панели навигации, используя «карусель»
Панель вкладок
Панель вкладок — ближайший родственник верхней навигационной панели, который часто используется в приложениях. Она может размещаться как в верхней части
страницы (в основном, Android), так и в нижней (IOS).
Панели вкладок, как правило, присутствуют в большинстве мобильных приложений и имеют те же недостатки, что и панель навигации. Существенное их отличие в том, что панель вкладок закреплена, то есть постоянно видна на экране, даже когда пользователь прокручивает страницу вниз, а панель навигации, как правило, просто прокручивается вместе содержанием страницы. Хотя иногда применяется и так называемая «липкая навигация» (sticky navigation), когда навигационная панель остается в верхней части экрана либо автоматически появляется там, когда пользовать начинает скроллить страницу вверх.
В качестве примеров можно привести ленту новостей Facebook на мобильных платформах. Facebook на iPhone (слева) и Android (справа) использует панель вкладок для основной навигации по приложению. Вкладки расположены в соответствии с официальными принципами данных операционных систем: внизу — на iPhone и в верхней части страницы — на Android. При этом навигационные иконки на IOS еще и подписаны:
Если их более пяти, становится трудно уместить их все на панели, сохранив при этом оптимальный для сенсорного экрана размер. Конечно, можно использовать «карусель», как в примере с Google Play — то есть разбить пункты навигации по категориям, но это не всегда уместно. Пользователь не всегда может догадаться, что за пункты скрываются за следующим элементом карусели, и не всегда станет проверять их.
Пример — старая версия приложения Weather Channel: здесь панель вкладок реализована так, что не сразу понятно, что каждая вкладка внизу скрывает под собой еще несколько. И тем более сложно угадать, какие именно пункты там содержатся:
Если вы решите использовать панель навигации или панель вкладок, они должны быть основным элементом интерфейса, но еще немного места стоит отвести на другие инструменты — например, на окно поиска.
Если на сайте 4-5 основных вариантов навигации, возможно, имеет смысл сделать их видимыми постоянно, особенно если они ведут к часто используемым страницам и опциям. Однако, не забывайте, что навигация должна соответствовать контексту приложения. Так, если есть другие обязательные элементы — например, иконка корзины, вход в учетную запись и т. д, то их тоже нужно учитывать, чтобы в целом интерфейс не занимал слишком много места.
Например, вот как выглядит страница результатов поиска сайта AutoZone:
Хотя в панели навигации содержится всего четыре основных пункта (Магазин, Консультации по ремонту, Заказ и Найти магазин), помимо них на страницу выводится еще несколько элементов интерфейса (логотип, корзина, строка поиска, вкладки с результатами поиска и т. д.), так что суммарно они занимают около трети экрана.
Скрытые меню (сэндвич и другие варианты)
Сэндвич-меню, или меню-гамбургер — это навигационное меню, содержащее в себе несколько пунктов или даже несколько подменю и разворачивающееся, только когда пользователь кликает по нему. В свернутом состоянии оно занимает минимум места, и в этом одновременно его преимущество и недостаток, так как данный элемент навигации менее заметен, чем обычное меню.
Пример использования сэндвич-меню — сайт USA Today. Здесь оно применяется для основных навигационных опций. Открывается нажатием на значок в левом верхнем углу экрана:
Еще один вариант скрытой навигации — меню обнаруживается, только когда пользователь проводит пальцем по экрану. Например, в приложении Sephora на внутренних страницах меню можно вызвать, проведя пальцем слева направо:
Однако самой кнопки меню не видно, поэтому многие пользователи, скорее всего, не обнаруживают эту функцию и ограничивают себя в функционале, используя только видимые кнопки.
В целом, как уже говорилось выше, скрытое меню имеет одно существенное преимущество перед навигационной панелью — оно занимает минимум места. Однако имейте в виду, что большую часть времени навигационные ссылки будут скрыты. Чтобы воспользоваться ими, юзер должен целенаправленно зайти в меню и выбрать один из пунктов, к чему он еще не совсем привык, несмотря на то, что в мобильных версиях сайтов гамбургер-меню встречаются уже довольно часто. В связи с этом, стоит доработать систему навигации с помощью дополнительных инструментов — например, перекрестных ссылок.
Навигационный хаб
Так называют страницу (обычно это главная страница сайта), на которой размещены все ключевые навигационные элементы. Это узловая точка, перекресток всех дорог, куда пользователь возвращается каждый раз, когда ему нужно перейти в другой раздел.
Недостаток данного подхода в том, что домашнюю страницу приходится полностью отдать под нужды навигации, а пользователя вынудить делать лишний шаг (возвращение на главную) при перемещении по сайту.
Это, прежде всего, сайты и приложения, используемые не для просмотра контента, а для достижения очень конкретных задач — например, регистрации на рейс или изменения тарифа мобильной связи. В таких случаях пользователь редко выполняет более одной задачи за посещение, поэтому необходимость возвращаться на главную страницу для выбора другой ветви навигации его не будет раздражать.
Наглядный пример — мобильная версия сайта авиакомпании United. На главной странице расположены ключевые навигационные элементы, а на внутренних в верхней части страницы предусмотрена кнопка «Home» для возврата на главную. Причем пользователи редко совершают два типа действий (например, покупку билета и регистрацию на рейс) за одно посещение. Так что большинству из них эта кнопка не понадобится.
Выводы
Сделать мобильную навигацию простой и удобной не так просто из-за ограничений, связанных с небольшим размером экрана. Можно по-разному пробовать решать эту задачу, но почти всегда вы будете сталкиваться с проблемами юзабилити.
Суть в том, чтобы выбрать такие решения, недостатки которых меньше всего будут проявляться конкретно на вашем сайте:
Как на базе веб-сайта разработать мобильное приложение
Работающий стартап, это тот, который построенный на принципах стратегии MVP (Minimum Viable Product). Такой подход позволяет вам проверить ваш продукт перед запуском его в широкие массы.
После запуска MVP изучаете реакцию вашей аудитории и рынка на него, меряете покупательских спрос. Как результат, вы получаете первые плоды от продаж, первый пользовательский опыт, первый отзыв о продукте / сервисе. У вас вырисовывается полное представление о проекте, и о том, что с ним дальше делать: в каком направлении развиваться и развиваться ли вообще.
Ниже мы детально рассмотрим как механизм MVP может помочь в сборе информации и превращении ее в ценностное предложение. И помните, что как стратегический предприниматель, лучше выбирать такой способ разработки продукта, который покажет результаты в первые дни работы. Пссс… правильный ответ — веб-приложение;)
Запуская технический продукт, который не имеет никакой взаимосвязи с камерой или микрофоном смартфона, подумайте о том, чтобы начать все-таки с веб-приложения. Функционально браузеры быстрее развиваются чем мобильные приложения, и соответственно количество пользователей у них больше. При создании приложения лучше задействовать принципы MVP. Также не забывайте, что оно должно запускаться в Chrome или Safari.
Приложения подобные Uber или Instagram напрямую зависят от функциональности девайса (геолокация), но есть много других продуктов, которые не нуждаются в взаимодействии с API устройства. А благодаря адаптивному веб-дизайну такие приложения получают межплатформенную доступность и корректно отображаются на экранах разного разрешения.
Существует десятки технических методов разработки мобильных приложений. Различия между ними сводятся к скорости написания приложения, стоимости, и к качеству конечного продукта. Понимание различий между ними, пожалуй, сложная задача.
Итак, давайте рассмотрим четыре популярные технологии создания мобильных приложений, а также их основные различия. Это поможет определить практичный способ верификации бизнес-идеи и облегчит конструирование будущего продукта. Возможно, веб-приложение (а не нативное мобильное приложение) поможет сократить расстояние между MVP и запуском полноценного проекта.
Эта относительно новая технология, разработанная Google. Она позволяет мобильным устройствам добавлять веб-сайт или веб-приложение на домашний экран смартфона и дальше использовать его в оффлайн-режиме.
Для превращения веб-приложения в прогрессивное веб-приложение, вам нужно добавить в него значок для главного экрана, манифест веб-приложения и рабочие службы — все это позволит сайту загружаться быстрее, работать в оффлайн-режиме и отправлять push-уведомления. Обратите внимание, что при загрузке прогрессивного веб-приложения в браузере телефона устройству предлагается добавить сайт на главный экран.Прогрессивные веб-приложения не полностью поддерживаются на устройствах iOS, но, надеюсь, это изменится в ближайшем будущем.
Washington Post одна из первых медиакомпаний, использующих прогрессивное веб-приложение для увеличения охвата веб-сайта.
Прогрессивные веб-приложения — отличный способ дополнить веб-сайт или веб-приложение, расширяя его охват. Они могут улучшить глобальный пользовательский опыт с устройствами, которые их поддерживают; однако, поскольку эта технология не распространена, ее следует рассматривать как дополнительное средство увеличение охвата веб-сайта, а не как способ трансформации веб-сайта в мобильное приложение.
Apache Cordova — это платформа для создания мобильных приложений с использованием HTML, CSS и Javascript.
Приложения, созданные с использованием Apache Cordova, работают во встроенной среде браузера (WebView) на мобильных платформах Android, iOS и загружаются из App Store или Google Play Store. Приложение запускается с помощью ярлыка, который расположен на главном экране, и взаимодействует с API-интерфейсами смартфонов, функциями девайса (геолокация, камера и т. д.).
Пользовательский интерфейс приложения, созданного с помощью этой инфраструктуры, не будет таким гладким, как в родном (native) приложении. Внешний вид интерфейса аналогичен интерфейсу веб-сайта (задержка нажатия на 300 мс, фантомные клики при прокрутке и так далее). Конечно, есть модули и фреймворки, которые предлагают компоненты пользовательского интерфейса. Модули разработанные так, чтобы быть похожими на собственные приложения, но они все еще не дотягивают до опыта взаимодействия с родным приложением.
Помимо Cordova, есть и другие популярные платформы — Ionic и PhoneGap. Для примера того, как такое приложение выглядит и работает, можно скачать приложение для Национального музея афроамериканской истории и культуры.
Это приложение было создано с использованием Ionic framework и предлагает следующие возможности:
Недавним примером гибридного приложения, которое мы создали в Ezetech для Tickfinity — TicketNetwork POS для мобильных устройств (видео).
Этот вариант подходит для MVP простых веб или мобильных приложений. Если у вас уже есть веб-приложение, построенное с помощью Javascript, вы можете использовать существующий код. Проще говоря Apache Cordova хорош для быстрого создания недорогих мобильных приложений со стандартными функциями.
React — отличный выбор, если ваше веб-приложение построено с помощью React.js. Это относительно новая технология в мире гибридных приложений, и миграция из существующего веб-приложения в мобильное может пройти довольно быстро. В результате вы получаете мобильное приложение, которое использует собственные компоненты ОС вашего смартфона (кнопки, входы и другие функции устройства). Производительность хорошая, потому что исходный код конвертируется в собственное мобильное приложение, а не работает во встроенном окне браузера.
Некоторые примеры приложений, использующих React Native:
React Native — самая популярная технология для разработки гибридных мобильных приложений. Она используется крупнейшими цифровыми корпорациями и имеет много преимуществ. Это хороший вариант, если вашему приложению не требуется поддерживать несколько соединений с сервером в реальном времени или выполнять сложные вычисления. Технология по прежнему новая, и не так много библиотек и модулей с открытым исходным кодом, как для собственных технологий разработки мобильных приложений, но она быстро развивается.
Создание родных (native) приложений для каждой платформы — лучший выбор с точки зрения производительности и качества продукции, но это также и самый дорогой подход. Если у вас уже есть веб-приложение, вам нужно будет только создать мобильные клиенты для мобильного приложения Android и iOS, которые будут подключены к тому же бэкенду, что и ваш веб-клиент. Незначительные изменения могут быть все еще необходимы на бэкенде, но это не займет много времени.
Обычно вам нужно как минимум 2 разработчика — разработчик iOS, который работает над iPhone-приложением с использованием Objective-C или Swift, и разработчика Android, который будет использовать Java или Kotlin. Поэтому стоимость разработки будет выше, чем в любом из вышеперечисленных подходов.
В то же время гибкость такого подхода заключается в том, что вы сначала можете разработать начальную версию только для одной платформы, и позже добавить другую. Первую платформу, можно определить исследуя целевую аудиторию с помощью Mapbox.
Несколько примеров нативных мобильных приложений:
Coinbase: одно из самых популярных приложений для торговли криптовалютами.
Uber: самое популярное приложение для транспортировки.
Есть два основных варианта, которые хорошо подойдут для перехода из веб-приложения в мобильное — разработка гибридного приложения и запуск с нуля (разработка нативного приложения).Если функциональность вашего продукта не слишком сложна, и вы просто хотите предложить мобильным пользователям лучший опыт, вы должны использовать React Native (если сайт на реакте) или Apache Cordova для разработки вашего гибридного приложения. Это оптимальный вариант, если у вас ограничен бюджет и вам нужна поддержка на Android и iOS.
Для сложных приложений, которые должны выполнять сложные вычисления, поддерживать соединение в реальном времени с сервером и предлагать пользователям уникальные функции, которые требуют постоянного взаимодействия с другими приложениями, лучше использовать нативную разработку. В этом случае вы сможете создать приложение с наиболее важным функционалом и улучшать его по мере роста вашего бизнеса.
Что касается разработки прогрессивного веб-приложения, то это достаточно новая технологическая парадигма. Такое приложение хорошо подойдет для расширения охвата вашего ресурса, но до полноценного мобильного приложения ему еще далеко.
Основные вопросы, на которые должна отвечать главная страница приложения
Если бы ваше приложение было человеком, то его домашняя страница была бы его лицом. Это то, на что люди обращают внимание в первую очередь и нравится вам это или нет, именно так они составляют свое первое впечатление о приложении. главная страница приложения.
В связи с тем, что 26% приложений используются всего 1 раз, первое впечатление очень важно для того, чтобы вас запомнили.
Разработать креативную домашнюю страницу – задача не из легких, и не всегда для ее оформления достаточно того, что выглядит мило или сделано на скорую руку. Ваша главная страница приложения должна отвечать на несколько важных вопросов для того, чтобы сделать из случайных посетителей ваших постоянных пользователей.
Давайте рассмотрим 5 вопросов на которые должна отвечать ваша главная страница приложения.
Кто вы в вашем мобильном приложении? главная страница приложения.
Второе, о чем задумается пользователь – кто вы в вашем мобильном приложении? Этот вопрос будет крутится в его голове. Если он не сможет найти ответ на этот вопрос в первые несколько секунд после запуска приложения, то сразу же закроет его, особо не раздумывая. Конечно, пользователь может закрыть приложение, даже если найдет ответ на вопрос, но это произойдет лишь потому, что, возможно, вы предлагаете ему то, что сейчас не нужно.
У каждой домашней страницы должен быть логотип. Логотип, который объясняет чем вы занимаетесь. Ваше портфолио или продукция должны быть ясно отображены на странице. Лучший способ сделать это – очистить домашнюю страницу от всего лишнего, и позволить пользователю рассмотреть логотип, который объяснит все.
Что вы делаете для мобильного приложения? главная страница приложения.
Допустим, что вы сумели донести до пользователя кто вы и чем занимаетесь. Скорее всего это потому что вы можете сделать то, чего не могут другие.
Например, пусть вы управляете парикмахерской. Вы обслуживаете и мужчин, и женщин? Какие продукты ухода вы предлагаете и могут ли посетители что-то купить сразу после того, как получат услугу?
Тоже самое касается фотографа. Вы свадебный фотограф или просто любитель?
Какую информацию я найду в этом приложении?
Это основной момент при продаже любого приложения и он требует разъяснения прямо на домашней странице. Все зависит от вашего бизнеса, но что хотят пользователи получить от приложения? Они заинтересованы в нахождении адресов ваших магазинов?
Вы продаете продукты через eCommerce модуль? Есть ли у ваших пользователей возможность получать ежемесячные купоны с помощью всплывающих уведомлений?
Выложите эту информацию на домашнюю страницу так, чтобы она была заметна. Вы также можете разместить правильно названные кнопки, чтобы показать, что содержит ваше приложение.
Что отличает ваше приложение от остальных?
Вот здесь на первый план выходит бренд. У вас может быть вполне приличное приложение, но что, если пользователи не станут загружать его, а воспользуются приложением того, кому они доверяют?
Комбинация из шрифтов, цветов, высококачественных картинок и отличная система навигации – отличный способ заявить, что ваше приложение является стоящим среди прочих. Все начинается с домашней страницы. Ваша страница беспорядочна и выглядит непрофессионально?
У домашней страницы есть логотип с подходящим оформлением и текстом или вы просто взяли первый попавшийся шаблон и решили, что этого будет достаточно?
Куда двигаться дальше с домашней страницы?
Главный вопрос – что будет приносить вам деньги? Всегда интересно изучать новое приложение, но как клиент, что я должен делать дальше? Вы хотите, чтобы пользователи звонили в ваш ресторан сделать бронь? Там есть крутой магазин, в котором можно будет купить футболки и прочие сувениры?
Ключ к ответу – разместить понятные кнопки навигации. Проще говоря, вы должны помочь людям и указать что им делать с вашим приложением, иначе они просто закроют его и больше не захотят открывать.
Если у вас есть мысли по поводу вопросов, на которые должна отвечать ваша домашняя страница, оставляйте свои комментарии ниже. Лучший способ начать создавать домашнюю страницу приложения – это воспользоваться нашим шаблоном для приложения. Сообщите нам, если вам необходима помощь. главная страница приложения.
13 важнейших шагов для создания успешного мобильного приложения
Любой современный бизнес рано или поздно приходит к выводу о необходимости запуска своего мобильного приложения. Это неудивительно: мобильные платформы служат связующим звеном между компаниями и клиентами, предоставляя площадку для обратной связи и помогая пользователям ежедневно следить за развитием любимых брендов.
Однако с созданием приложения не все так легко, как может показаться на первый взгляд: недостаточно просто разработать красивый продукт — важно, чтобы он нашел свое место на рынке. К сожалению, App Store и Google Play просто переполнены приложениями, которые так и не смогли собрать аудиторию и добиться успеха. Статистика в этом плане тоже не радует: по оценкам экспертов, около 40% новых приложений терпят неудачу, а коммерческого успеха достигает лишь 1 из 10 концепций по созданию мобильных продуктов.
Разумеется, ни одному владельцу бизнеса не хочется впустую тратить ресурсы на разработку приложения, которое просто канет в Лету. Поэтому к созданию продукта стоит подходить очень ответственно, строго соблюдая важные шаги, которые помогут разработать наиболее качественное, интересное, актуальное и востребованное приложение. Какие же это шаги?
Самое главное в разработке мобильного приложения — определить, для чего оно вообще создаётся. Продукт обязательно должен иметь чёткую цель и решать определённые задачи. Например: обслуживание клиентов, автоматизация бизнес-процессов, сбор и анализ данных. Изначально, у вас может быть несколько идей, но в конечном счёте нужно выбрать одну, главную: ту, которую вы посчитаете наиболее приоритетной, и которая будет приносить наибольшую пользу как бизнесу, так и клиентам.
Подумайте над тем, как вы будете измерять успех приложения. Критерии могут быть самыми разными: обычно они тесно связаны с целями продукта. Кроме того, они могут меняться по мере нахождения продукта на рынке: так, в первые месяцы это может быть число набранной аудитории, а спустя год функционирования — число ежедневных продаж через приложение. Чётко установленные ключевые показатели эффективности (KPI) помогут вам отслеживать прогресс на протяжении всего существования продукта и принимать необходимые меры при отставании от плана.
Чтобы оставаться востребованным, продукт должен постоянно развиваться, подстраиваясь под меняющиеся запросы пользователей. Несмотря на то, что точно предугадать будущие запросы можно не всегда, нужно составить хотя бы приблизительный план того, как именно будет меняться продукт с течением времени, и использовать его как «скелет», на который можно наращивать актуальные идеи в дальнейшем.
От того, на каких платформах и устройствах планируется использование приложения, очень сильно зависит вся “архитектура” продукта. Каждая платформа имеет свои требования и особенности, которые необходимо соблюдать, чтобы магазин не отклонил продукт после его загрузки. От девайсов, на которых должно функционировать приложение, тоже зависит множество факторов: например, разрешение экранов, объем или скорость загрузки продукта.
Нередко в стремлении сделать продукт как можно более функциональным, разработчик старается включить в него как можно больше различных элементов. Это очень распространенная ошибка: на самом деле, простой и минималистичный интерфейс с упорядоченными и только важными элементами гораздо более приятен и удобен в использовании. Каждая дополнительная функция, изображение или кнопка перегружают продукт и вызывают у пользователей ощущение, что они не смогут разобраться в сложном интерфейсе.
Время отклика и загрузки очень важны для качественного пользовательского опыта. Производительность мобильного продукта измеряется тем, насколько он быстро запускается, насколько хорошо использует память и мощность девайса, и насколько плавно в нём отображаются интерактивные элементы. Ничто не портит впечатление от приложения так сильно, как зависания, медленно открывающиеся страницы или вылетания, поэтому производительности нужно уделять особое внимание.
Оптимизация помогает приложению выводиться на более высоких позициях при запросах в магазинах. Она включает в себя наполнение продукта ключевыми словами, выбор уникального названия, составление полного и интересного описания продукта, а также локализацию на английский язык.