мобильная версия сайта. Как создать, особенности, дизайн, функционал

Mobile First — это принцип, согласно которому изначально разрабатывается UI/UX интерфейс сайта для расширений, которые устанавливаются на смартфоны. В последующем дизайн-макеты масштабируются под планшетные и desktop-устройства.
Данный подход позволяет качественно проработать удобство мобильной версии сайта, а не по остаточному принципу, как при типовом подходе, когда работа над макетами начинается с desktop-версии.

Начиная с 2017 года доля мобильного трафика интернет-пользователей, которые заходят на сайты используя смартфон превысила 50%!

На графике ниже представлена статистика за последнее десятилетие:

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

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

Такой мобильный бум еще связан с ростом популярности социальных сетей. Если каких-то 5 лет назад люди в возрасте 50+ не присутствовали в Facebook, Instagram (или мало кто имел свои страницы), то сегодня большинство имеют там свои аккаунты в социальных сетях. Представительство брендов здесь же увеличивает процент продаж именно в социальных сетях, создавая простую и доступную коммуникацию с пользователями.
Следовательно, интерфейс мобильной версии сайта или интернет-магазина должен прорабатываться наиболее тщательным образом.

Еще в 2010 году На Всемирном конгрессе мобильных устройств тогдашний генеральный директор Google Эрик Шмидт предложил дизайнером следовать правилу “сначала мобильная версия” — Mobile First

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

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

Важно проработать хорошо техническую сторону, иначе владелец сайта будет терять прибыль!

Какова выгода бизнеса от Mobile First?

Рекомендации, конгрессы и конференции — это все замечательно, но бизнесу нужны конкретные прагматичные вещи, верно же?

1. Разрабатывая интерфейс сайта с учетом данного принципа мобильной версии будет уделено достаточно внимания. Это важно, учитывая современные тенденции, когда большая половина трафика — мобильный трафик. Т.е. большинство клиентов будут взаимодействовать с мобильной версией Вашего сайта.
   
   Соответственно в то время, как конкуренты будут заниматься украшательством ПК-версии своих сайтов, Ваш бизнес предоставит своим клиентам качественную и хорошо продуманную мобильную версию сайта, что выделит Ваш бизнес среди конкурентов.
2. SEO-продвижение и контекстная реклама. Естественно, в мобильной поисковой выдачи Google всегда отдает предпочтение сайтам качественно оптимизированным под мобильные устройства.
   Разрабатывая сайт по принципу Mobile First можно быть уверенным, что мобильная версия будет на 100% отвечать требованиям поисковой системы, соответственно, что в рекламной, что в органической выдаче Google Ваш сайт всегда будет ранжироваться выше, чем сайты конкурентов.

Более подробно о влиянии дизайна на SEO-продвижение читайте в этой статье «Влияет ли дизайн на SEO-продвижение сайта?»

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

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

Как сделать удобный дизайн сайта для мобильных устройств с помощью Mobile First

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

Скажу сразу, что рекомендации будут иметь общий характер, так как в зависимости от целей и задач сайта эти рекомендации могут уточняться, а иногда и меняться.

1. Мобильная версия должна быть заточена на целевое действие. Если цель Вашего сайта — это привлечение лидов, звонков и заявок от клиентов, значит необходимо максимально подчеркнуть и выделить. Например, очень удачно это реализовано на нашем сайте:
   
   В верхней зафиксированной плашке находится номер телефона, при клике на который происходит вызов, а также кнопки популярных мессенджеров, при нажатии на которые открываются соответствующие чаты. Кликабельность контактов в разы повышает вероятность осуществления контакта. Рекомендуется делать значки социальных сетей или мессенджеров видимыми при скроллинге по всей странице. То есть: какую бы информацию не смотрел на сайте пользователь — он видит варианты для связи с компанией и может в любую секунду ими воспользоваться, не возвращаясь вверх или прокручивая страницу вниз.
2. Кегль (размер шрифта) для мобильной версии должен быть 14-18px. Это важно чтобы придать максимальную читабельность тексту.
3. Карты. Вместо того, чтобы грузить векторную карту Google в контакты, которая в свою очередь снижает скорость загрузки, лучше разместить ссылку с геолокацией, с помощью которой можно будет проложить маршрут к вашему офису, через соответствующие приложение на смартфоне.
4. Ну и естественно, кроме дизайна интерфейса мобильная версия сайта должна быть выполнена технически безупречно.

Удобный и правильный интерфейс мобильной версии — крайне важен для высокой конверсии Вашего сайта.

Чтобы получить профессиональную разработку UI/UX интерфейса вашего сайта обращайтесь в веб-студию BUSINESSSITE
Дизайн сайта мобильной версии разрабатывается командой профессионалов, которые не просто руководствуются современными тенденциями, но и учитывают особенности вашего бизнеса и данные аналитики (опрос клиентов, например).

Что такое mobile first — Журнал «Код» программирование без снобизма

08.09.2020

Это когда сначала всё делают для смартфона, а потом для всего остального.

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

Теперь всё иначе: просмотров с телефона уже больше, чем с компьютера. Некоторые сайты или сервисы обслуживают 70—90% клиентов с телефона. Поэтому появилось направление в дизайне и разработке — mobile first. Это означает «сначала для мобильного», а десктопную версию сделаем потом или вообще не сделаем.

Как устроено

В подходе mobile first работа идёт так:

1. Рисуется дизайн, чтобы на смартфоне всё выглядело отлично. На основе этого дизайна пишется код. Или код и дизайн делаются параллельно на основе общего прототипа.  
2. Если нужно — делают отдельную версию для компьютера, если нет — доделывают мобильный дизайн, чтобы он «расширялся» до большого экрана.
3. Если нужно что-то улучшить в программе или сервисе, то сначала делают это для смартфонов, а потом для компьютеров. Иногда версия для смартфона работает лучше, чем настольная или в вебе.

Дизайнер в ИТ: зачем он нужен и как им стать

Может быть даже такое, что с телефона сайт посмотреть можно, а с компьютера — нет, потому что предлагают сразу установить нужное приложение.

В чём нюансы проектирования под мобилку

О, их масса

• В компьютере человек вводит данные через суперточную мышь. В телефоне ввод через огромную сосиску-палец. Поэтому десктопные кнопки и ссылки могут быть маленькими, а мобильные должны быть большими.
  
• У пользователя десктопа есть быстрая клавиатура, а на мобилке она неудобная, мелкая, медленная и занимает пол-экрана. Десктопное приложение ещё может попросить нас что-то ввести с клавы, а мобильное должно этого избегать.
  
• И наоборот: десктопное приложение должно со страшной силой поддерживать горячие клавиши, копировать-вставить, очистку данных из буфера. А мобильное должно полагаться на автозаполнение.
  
• Мобилка хоть и большая, но меньше десктопа. Поэтому мобильный экран — это одна колонка с контентом и бесконечный скролл. Десктоп, наоборот, большой и широкий, там можно укладывать контент в несколько столбцов, делать витрины и шикарные раскладки.
  
• Мобилка вытянута сверху вниз, десктоп — слева направо. Идеальный контент для мобилки — вертикальный, для десктопа — горизонтальный.
  
• С мобилки можно легко позвонить, поэтому этот сценарий можно вполне рассматривать как часть приложения (например, позвонить таксисту). А с десктопа можно разве что написать в мессенджере.
  
• Мобилка знает о тебе больше, чем десктоп: она может узнать тебя по отпечатку пальца и по лицу, в неё встроен платёжный модуль, мобилка знает о своём местоположении. Максимум, что может десктоп, — помнить твой номер карты и знать, в каком ты городе. Это значит, что мобилка должна сама узначать твой адрес, сама предлагать тебе способы доставки, сама предлагать оплатить встроенными средствами.
  
• Мобилка — это твоё интимное пространство, поэтому любое сообщение или уведомление отвлекает на себя внимание. Нужно быть осторожным, отправляя что-то пользователю или уведомляя его. Десктоп — это терминал, к которому ты подходишь или уходишь, когда тебе нужно. Там меньше таких ограничений.

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

Где используется

Mobile First используется везде, где можно показать товар, услугу или проект на маленьком экране без ущерба для смысла, например:

• интернет-магазины (Zara),
• сервисы заказа еды (Додо-пицца),
• службы такси (Яндекс Такси),
• соцсети и социальные сервисы,
• сервисы дистанционных услуг (интернет-банки).

Если ваш продукт достаточно прост для того, чтобы о нём можно было прочитать со смартфона и разобраться в нём, то можно использовать mobile first.

Плюсы и минусы

Плюсы:

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

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

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

Текст

Миша Полянин

Иллюстрации и редактура

Максим Ильяхов

Корректор

Ира Михеева

Иллюстратор

Даня Берковский

Вёрстка

Маша Дронова

Доставка

Олег Вешкурцев

‎FirstMobile App в App Store

Описание

FirstMobile — официальное приложение мобильного банкинга для смартфонов от FirstBank. Он предоставляет владельцам счетов FirstBank удобный доступ к финансовым и нефинансовым транзакциям через их мобильные телефоны/устройства.

Приложение стильное и удобное в использовании, о чем свидетельствует процесс регистрации своими руками. Новые клиенты могут просто загрузить приложение и открыть счет в FirstBank, в то время как существующие клиенты с картами Verve или Naira Mastercard могут зарегистрироваться и начать использовать приложение без необходимости посещать физическое отделение. FirstMobile готова предложить еще более надежный и, безусловно, более удобный цифровой банкинг с последним обновлением версии.

5 декабря 2022 г.

Версия 2.9.2

Повышение безопасности E-naira: повышена безопасность вашего кошелька E-naira Speed.
 
Самостоятельный выпуск устройств: вы можете выпускать свои мобильные устройства в приложении, не посещая филиал.

Рейтинги и обзоры

Рейтинги 1K

Жалоба

Обновление в порядке, но вы, ребята, должны разрешить другие средства входа в систему, кроме карты банкомата
Я потерял свою карту банкомата за последние две недели, и теперь, когда я хочу войти в свое мобильное приложение банка, я не могу просто потому, что я не У меня есть банкомат, и для меня, чтобы получить другой банкомат, потребуется некоторое время, потому что я нахожусь в сельской местности, где нет банка. Мне не очень нравится использовать USSD, потому что это слишком расстраивает меня
Ребята, вы должны попытаться пересмотреть свое решение и сделать еще одно обновление, которое позволит использовать вход с помощью нашего номера мобильного телефона или электронной почты, пожалуйста

ДиаспораБанковское дело

Это типичный бардак, я старый клиент, который переехал в другую страну и изменил свое имя, я обращался в отдел DiasporaBanking, чтобы изменить свое имя и тип счета в течение последних 4-3 месяцев, и этот конкретный клиент сервисный агент будет груб каждый раз, когда я звоню. Он либо скажет мне, что его нет на столе, либо он занят, и даже скажет, что я его беспокою. Может ли кто-нибудь представить себе, как сотрудник службы поддержки говорит, что клиент его беспокоит. На данный момент мне больше не нужна учетная запись, мне просто нужно изменить свое имя в моем BVN, так как я зарегистрировал свой BVN в первом банке, и, похоже, никто не может помочь. Имя представителя службы поддержки клиентов — Аталобхор Кристофер Эхис, вы очень грубы и не зацикливаетесь на клиентах. Ты много раз вешала трубку, даже когда я хотел задать простой вопрос. Я даже не знаю тебя, но ты на другом уровне грубости. Я надеюсь, что это исправят, или я продолжу на любой другой платформе, чтобы показать, как первый представитель службы поддержки клиентов банка очень груб и некомпетентен.

Мисс понедельник

Это ужасное обновление.
Автоматически не используются те же данные для входа и mPIN (отпечаток пальца или распознавание лица), что и в исходной версии.
Что еще хуже, попытка изменить mPIN из приложения не работает. Он не видит всех ваших предыдущих деталей, таких как ваши секретные вопросы и ответы и т. Д. Какой в ​​этом смысл ?? Это как получить совершенно новое приложение. Тогда не называйте это «апгрейдом»! Я хотел бы вернуться к предыдущей версии, пока все это не будет проработано.

Больше всего разочаровывает получение поддержки от первого онлайн по электронной почте. Прошло 2 дня после того, как я отправил им письмо по электронной почте, предоставленной приложением, и до сих пор нет ответа.

Разработчик, First Bank of Nigeria Limited, указал, что политика конфиденциальности приложения может включать обработку данных, как описано ниже. Для получения дополнительной информации см. политику конфиденциальности разработчика.

Данные не собираются

Разработчик не собирает никаких данных из этого приложения.

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

Информация

Продавец

Первый банк Нигерии с ограниченной ответственностью

Размер

42,2 МБ

Категория

Финансы

Возрастной рейтинг

4+

Авторское право

© Первый банк Нигерии

Цена

Бесплатно

• Сайт разработчика
• Тех. поддержка
• Политика конфиденциальности

Еще от этого разработчика

Вам также может понравиться

Мобильное банковское приложение FirstBank с бесплатным мобильным депозитом

Перейти к основному содержанию

✕

ПЕРВЫЙ ЛОКАТОР ОТДЕЛЕНИЯ И ПОИСК АТМ

Центр обслуживания клиентов

Звоните по телефону 1-800-413-4211

с 7:00 до 18:00 CST с понедельника по пятницу
с 7:00 до 16:00 по центральному стандартному времени в субботу

FirstBank Mortgage

Позвоните по телефону 1-800-200-6462

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

Звоните по телефону 1-866-515-2053
с 8:30 до 17:00 по восточному поясному времени с понедельника по пятницу.

Утерянные или украденные дебетовые карты

Звоните 1-800-413-4211

✕

НАЙДИТЕ НОМЕР ТЕЛЕФОНА ВАШЕГО МЕСТНОГО ФИЛИАЛА

Центр обслуживания клиентов

Звоните по телефону 1-800-413-4211

с 7:00 до 18:00 CST с понедельника по пятницу
с 7:00 до 16:00 по центральному стандартному времени в субботу

FirstBank Mortgage

Позвоните по телефону 1-800-200-6462

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

Звоните по телефону 1-866-515-2053
с 8:30 до 17:00 по восточному поясному времени с понедельника по пятницу.

Утерянные или украденные дебетовые карты

Звоните 1-800-413-4211

✕

Добро пожаловать Пожалуйста, войдите, чтобы получить доступ к своей учетной записи »

Интернет-банкинг

Персональное банковское обслуживаниеБизнес-банкингTrust ServicesFirstBank Kentucky Customers Забыли имя пользователя или пароль

Для персонального банкинга выберите Персональный банкинг. Для бизнес-банкинга выберите Бизнес-банкинг.

ТЕХНОЛОГИЯ И ИСКУССТВО СВЯЗИ

• Personal Banking
• Personal Checking
• Personal Savings
• Mobile & Online
• Personal Lending
• Debit & Credit Cards
• Personal Services

• Mobile Banking App
• Online Banking
• Digital Demos
• Zelle®
• Мобильные кошельки
• Мобильные оповещения

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

ПРОВЕРКА БАЛАНСА

Проверьте последний остаток на счете, найдите и отметьте недавние транзакции по дате, сумме или номеру чека.

ВЫПОЛНЕНИЕ ПЛАТЕЖЕЙ

Выполнение платежей, проверка последних платежей и просмотр/отмена запланированных платежей.

ПЕРЕВОД СРЕДСТВ

Легко переводите наличные между своими счетами.

ТЭГИ ТРАНЗАКЦИЙ

Организуйте свои транзакции, добавляя теги, примечания и фотографии квитанций и чеков.

УПРОЩАЙТЕ СВОИ ФИНАНСЫ

Подключите счета других финансовых учреждений к мобильному приложению FirstBank или онлайн-банкингу.

МЕСТА

Найдите ближайшие отделения и банкоматы, используя встроенный в телефон GPS. Вы также можете искать по почтовому индексу или адресу филиала.

ДОБАВЛЯЙТЕ СЧЕТА, УПРАВЛЯЙТЕ ими И ОПЛАЧИВАЙТЕ СЧЕТА

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

ДЕПОЗИТНЫЕ ЧЕКИ

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

СРЕДСТВА УПРАВЛЕНИЯ ДЕБЕТОВОЙ КАРТОЙ

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

УВЕДОМЛЕНИЯ О ПОЕЗДКАХ

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

Впервые в FirstBank или в нашем цифровом банкинге? Подготовьтесь к работе за считанные минуты:

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

ШАГ 1: ЗАГРУЗИТЕ БЕСПЛАТНОЕ ПРИЛОЖЕНИЕ

Если вы впервые входите в систему через мобильное приложение, первым шагом будет загрузка приложения FirstBank Personal Banking для вашего устройства Apple или Android (планшета или телефона). Регистрация в мобильном банкинге от FirstBank бесплатна. Однако ваш оператор мобильной связи может применять стандартные тарифы в зависимости от вашего тарифного плана. Нажмите на значки ниже или найдите «FirstBank Personal Banking» и загрузите приложение.

ШАГ 2: ПЕРВЫЙ ПОЛЬЗОВАТЕЛЬ? ЗАРЕГИСТРИРОВАТЬСЯ СЕЙЧАС

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

ШАГ 3: ВЫБЕРИТЕ МЕТОД 2FA

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

ШАГ 4: ПРИНЯТЬ ПОЛЬЗОВАТЕЛЬСКОЕ СОГЛАШЕНИЕ

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

ШАГ 5: СОЗДАНИЕ УЧЕТНЫХ ДАННЫХ

Создайте имя пользователя и пароль. После принятия откроется панель управления вашего клиента. Вы будете использовать эти же учетные данные для входа в Интернет-банк.

ШАГ 6: НАЧНИТЕ ЦИФРОВЫЕ ДЕМОНСТРАЦИИ

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

ПРИСОЕДИНЯЙТЕСЬ К БЫСТРОЙ ЦИФРОВОЙ БАНКОВСКОЙ ДЕЯТЕЛЬНОСТИ

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

НАЧАТЬ

✕

Вы собираетесь покинуть FirstBankOnline.com. Если вы хотите остаться на нашем сайте, нажмите STAY ON FIRSTBANKONLINE.