Разработка дизайна интерфейса личного кабинета на веб-сайте. Дизайн личного кабинета пользователя


не повторяйте наших ошибок / Блог компании Телфин / Хабр

Меня зовут Евгений Цветков и я расскажу, что надо учитывать при редизайне интерфейсов, чтобы малыми средствами получить большой результат.Телфин на рынке телекоммуникаций с 2003 года. За 13 лет у пользователей расширился выбор настроек телефонии. Интерфейс личного кабинета абонента по разным причинам не менялся. И в один прекрасный день он настолько устарел, что стал представлять из себя квест «Угадай нужную кнопку». Так выглядел личный кабинет компании еще недавно:Хозяйке на заметку: Когда функционал расширяется, просто добавлять очередной пункт в меню – опасно. Иначе получится комбинация горизонтального и вертикального меню, прямо как на картинке выше. Вспомните об этой картинке, когда попросите программиста «дорисовать ещё одну кнопочку левее».

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

  • «Даже шаблоны по умолчанию в распространённых движках WordPress, Drupal, OpenCart выглядят раз в 100 лучше».
  • «Да просто сделайте всё не для технарей, а для ЛЮДЕЙ».
И тут мы поняли, что пора. Пора провести полный редизайн и представить, наконец, своим пользователям современный и лаконичный продукт, которым удобно пользоваться. Я как руководитель отдела маркетинга оказался вовлечен в данную авантюру плотнее всех остальных, поскольку обладал природным вкусом, тягой к улучшению и знал, с чего начать.

С чего начать?

Шаг 1. Начнем с опроса клиентов

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

Такой обзор от клиента достоин фирменной кружки:

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

Часть клиентов предложила нам ничего не менять — «уже привыкли»:

Шаг 2. Создаем структуру с учетом мнения пользователей

Что в личном кабинете абонентам нужно в первую очередь?

  • Оплачивать телефонию и следить за расходами.
  • Видеть общую статистику звонков.
  • Менять настройки приема входящих вызовов.
Резюмируя: нужен пункт, чтобы настраивать (мы назвали пункт «Услуги») и пункт, чтобы отслеживать (мы назвали пункт «Финансы»). В будущем планируем разграничить роли, чтобы бухгалтеру были видны только финансы без настроек, а админу не мешали лишние данные по деньгам. На самом деле, это классический вариант основных разделов любого интернет-сервиса: так же устроен, например, директ (у бухгалтерии отдельный интерфейс, у маркетолога отдельный).

Шаг 3. Компонуем страницы

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

Бывает, спрашиваю коллег «Зачем это?» — а про это никто и не знает. Такая история была с книгой контактов быстрого набора для callback. В настройках забиваешь телефонные номера, присваиваешь им 1-2-3, потом набираешь короткие номера вместо длинных. Но кому это было надо? А я проверил. Из многотысячной аудитории Телфин только у 35 пользователей существовали хоть какие-либо настройки данной книги (и то, не факт, что ей пользовались). Предвкушая вопросы, функция не удалена. Она сохранена, просто убрана из интерфейса.

Шаг 4. Делаем прототип

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

Прототип выглядел так: xrc41w.axshare.com

Концептуально прототип утвердили. Переходим к шагу 5.

Шаг 5. Критика

Часть поправок в интерфейс была внесена уже на этом этапе. Раздел «Услуги» обсуждал с руководителем саппорта, «Финансы» — с руководителем клиентского отдела. «Главную» — со всеми, кто работает с клиентами. Чем больше общались, тем лучше становился прототип.

Хозяйке на заметку: Если не ограничить круг лиц, влияющих на продукт, обсуждение может длиться бесконечно. Только те, кто работает с клиентами больше всех и хорошо знает их боль, могут что-то адекватно корректировать. У нас это — сопровождение и техподдержка.

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

Шаг 6. Отправляемся в дизайн-агентство с ТЗ

Здесь приятное ожидание макета от Aidem (наконец, можно было всем заняться своими прямыми обязанностями).

Желтовато, но в целом отлично:

Мы изменили итоговую гамму на более фирменную: оранжево-голубую. Что-то перекомпоновали, что-то изменили порядочно. Проводили совместные встречи с каждым руководителем и командой Aidem, когда сдавали каждый из блоков.

Шаг 7. Написали спецификацию для верстки

→ Спецификация

Спецификация для верстки включала самые важные вещи и составила 30 страниц.

Header​.................3 Footer​..........................................3 Главная страница​..................3 Первый вход​.........6 Последующие входы​......6 Общие элементы​...........7 Документы и платежи​......8 Блок “Информация по договорам и тарифам”​....................9 Блок “Документы по договорам”​..........11 Блок “Счета и платежи”​...12 Выставление счета​ (модальное окно).....12 Заказ акта сверки​........14 Подключенные линии​.....................15 Настройка АОН​..........17 Настройка переадресации​.....18 Настройка голосовой почты​.............19 Пополнение счета​..............21 Обещанный платеж​.................22 Подтверждение оплаты​....23 Выставление счета​...........27 Результат денежного перевода...........30 Уведомления​......................31


Вот так подробно коллеги из Aidem описывали каждый пункт:

Шаг 8. Сегодня мы с тобой верстаем

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

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

Шаг 9. Внутреннее тестирование

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

Шаг 10. Быстрый запуск и правки по живому

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

Дизайн и навигация

Нечитаемый шрифт, неподходящие цвета

Из опрошенных клиентов 40% жаловались на устаревший дизайн и сложную навигацию: шрифт был мелким и сложно читался, меню казалось непонятным. Многие опрошенные просили большие кнопки. Для оформления нового личного кабинета мы использовали уютную цветовую гамму, сделали текст легким для чтения, переписали основные тексты и комментарии. Убрали фон у записей и полностью изменили главное меню (не только по функционалу, но и по внешнему виду).

Легкий, современный, красивый, минималистичный — таким хотели видеть личный кабинет клиенты, и мы это сделали. Верстали «дивами» с применением HTML5, CSS3, хотя, уверен, все равно пытливые умы найдут косяки.

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

Спрашивали — отвечаем

  • «Более информативная главная страница»
  • Есть
  • «Дизайн в стиле каменного века»
  • Теперь это в прошлом
  • «По сравнению с сайтом личный кабинет выглядит ужасно!»
  • Мы исправились
  • «Сделать современный плоский дизайн с использованием AJAX»
  • Есть

Иерархия

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

Главная страница

Несложно заметить разницу между старой главной страницей и новой. Мы изменили практически всё. Убрали лишние пункты меню, оставили только название, код клиента, а под ним баланс и кнопку «Пополнить счет». На главной странице теперь — описание сервисов, которыми клиент пользуется и ссылки на полезные страницы.

Найди 5 отличий:

Подсказки

Интересно, что 10% опрошенных просили сделать подсказки.«Как-то сделать более «дружественным» интерфейс, — подсказки, как в поисковике, предложения, советы» Требование справедливое. Телекоммуникации — специфическая и сложная сфера, в которую клиент не обязан глубоко вникать, а SIP ID, линия, очередь, API — все это требует пояснения.

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

Добавили описание дополнительных опций маленьким серым шрифтом:

Пример подсказок желтого цвета:

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

Онлайн-чат клиентской поддержки:

Переадресация

Самый популярный комментарий по услугам был: «неудобная настройка переадресации». И мы это исправили. Добавили кнопку на главной странице для быстрого перехода в настройки переадресации, так что блуждать по всему кабинету в ее поисках теперь не нужно.

Быстрая кнопка переадресации:

Переадресация быстро включается-отключается, ее можно настроить самостоятельно для конкретных линий или сразу со всех номеров. Можно включать переадресацию для звонков, не получивших ответа в течение какого-то времени (например, никто не снимает трубку 5 секунд). Раньше такие настройки, пожалуй, могла задать только наша техподдержка, а сегодня на такие изменения клиент потратит не больше 2 минут.

Окно настройки проектировали по комментариям техподдержки:

Вход в АТС

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

Саму АТС мы, кстати, тоже обновили:

Финансы

Платежи

В главном меню появилась яркая кнопка «Пополнить счет». С помощью одного клика можно перейти к выбору способа оплаты: банковская карта, Яндекс.Деньги, Альфа-Клик или другой способ. Сделали для каждой системы шаблон, поэтому оплачивать можно быстрее. Сейчас намного приятнее выбрать способ оплаты: текст сопровождается соответствующим графическим изображением. Известные логотипы банков и онлайн-сервисов практически мгновенно позволяют клиенту узнать и выбрать нужный способ оплаты.

«Каждой системе оплаты прикрепите соответствующую иконку!» — говорили они. «Прикрепили!» — говорим мы.

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

Настройка уведомлений об отключении за неуплату:

Расходы и статистика

В разделе статистики пользователи получили возможность настраивать отчеты. «Добавьте, пожалуйста, параметры сортировки в таблице показа статистики по столбцам: Назначение (сортировать по номерам), Длительность (по возрастанию/убыванию)» В отчетах выбирается период, вид отчета, номера линий, направление звонков, источник и назначение. Столбцы со значениями сортируются. До 40 000 записей скачиваются за раз. Что и говорить, фильтрация в статистике улучшилась на порядок. С каких линий были совершены звонки в начале или в конце месяца и какие из них были самые дорогие или самые длинные — больше не нужно скачивать сплошную выгрузку и настраивать фильтры, все можно увидеть онлайн. Еще одно нововведение: статус по каждой линии, активна она или нет. Многие клиенты также просили это отображать. Пожалуй, из множества таких деталей и складывается удобный интерфейс.

Документы

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

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

Подведем итоги

Было ли правильным решением делать все самим? Это оказалось долго и сложно. Зато надежно и качественно. Правильно ли было всех клиентов поставить перед фактом обновления кабинета? Рискованно. Зато мы получили мгновенный фидбек и по горячим следам внесли изменения.

Наш личный кабинет стал таким, каким получился. Факт: новый интерфейс уже выполняет 90% пожеланий пользователей. И это, пожалуй, главное. Подтверждение — опрос лояльности за сентябрь-ноябрь 2016 года.

В данном опросе 0 — никогда не порекомендую, 10 — обязательно порекомендую:

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

habr.com

Разработка личного кабинета на Битриксе

Интеграция с учетными системами

Все, у чего есть API: любая 1С, SAP, Microsoft SharePoint, ELMA, Microsoft Dynamics CRM

Защита коммерческих данных

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

Документооборот на сайте

Долой бесконечные цепочки E-mail'ов с десятками получателей

Управление учетными записями

Подтверждение пользователей, двухфакторная авторизация

Адаптивный дизайн

Выглядит современно на смартфонах и планшетах

Отчеты

Прямо в личном кабинете или в любом сервисе веб-аналитики

Актуальные данные

Изменения в учетной системе сразу же попадают на сайт

Безопасность решения

Учитываем требования ваших аудиторов безопасности

www.intervolga.ru

личный кабинет, корзина, доставка-оплата, рассылка и другое / Блог компании SECL Group / Хабр

Очередная статья большого обзора функционала интернет-магазинов. Сегодня я расскажу про личный кабинет, избранное, интеграцию с социальными сетями, корзину, доставку-оплату, рассылку и уведомления. Всего, вместе с этой частью статьи, я рассмотрел около 50 модулей современных интернет-магазинов.
Прошлые статьи серии можно найти тут:
«Серьезное проектирование серьезного магазина. Часть 1. Исследования»«Серьезное проектирование серьезного магазина. Часть 2. Модули интернет-магазина»«Серьезное проектирование серьезного магазина. Часть 3. Карточка товара и не только»«Серьезное проектирование серьезного магазина. Часть 4. Субституты, комплементы, сравнение и другие инструменты увеличения конверсии»
Регистрация / личный кабинет
Для любого интернет-магазина важно, чтобы пользователи регистрировались на сайте и оставляли о себе много информации. Это позволяет увеличить средний чек и сильно повышает шансы интернет-магазина превратить разового покупателя в постоянного.

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

Рис. 1. Личный кабинет.

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

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

Рис. 2. Регистрация.

Важно сделать возможность регистрации с помощью социальных сетей. Это снижает барьер для ленивых пользователей и увеличит количество регистраций. Не все социальные сети отдают email пользователя, поэтому для некоторых нужно будет дополнительно его спросить сразу после авторизации. В личном кабинете должна быть возможность привязки нескольких популярных социальных сетей к профилю, для рунета это: VK, Facebook, Google, Яндекс и Twitter.

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

Рис. 3. Личный кабинет (регистрация).

Первой страницей в личном кабинете обычно делается страница основных настроек пользователя (ФИО, email, телефон, адрес доставки, связь с социальными сетями и т.д.) и магазина (интересные категории, настройка персонализации и т.д.), в ней могут появляться важные информационные сообщения. Одно из таких сообщений – блок с просьбой оставить отзыв о купленных товарах или заполнении расширенной информации о пользователе. В целом это именно то место, где стоит просить пользователя сделать выгодные для магазина действия. Как вариант, более современный и выгодный магазину – сделать первой вкладку активность, на которой отобрать все, к чему пользователь имеет отношение: обновление цен на интересные товары, новинки в интересных ему категориях, ответы на его комментарии и т.д. Такая страница с высокой долей вероятности заставить его углубиться для совершения различных действий на сайте. Если пользователь сделал заказ, то на главной странице кабинета пользователя стоит показать временный блок с информацией по выполняемому заказу и его движению, после доставки блок должен пропасть.

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

После истории идет вкладка «Мои желания», в которой есть один или несколько списков желаний.

Также важна вкладка с управлением подписками: на рассылки, на отдельные товары, на комментарии и других элементы сайты.

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

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

Для постоянных клиентов будет нужна вкладка с информацией о программах лояльности. Можно назвать её «Личные скидки» и в ней показывать уровень пользователя и его скидок, накопившиеся бонусы, возможные уровни и что нужно сделать для следующего уровня. Также можно добавить блок с «личными скидками» для пользователя, в котором показывать товары со скидками только для него. Это должны быть небольшие скидки, которые автоматически рассчитываются сайтом под конкретного пользователя и зависят от объемов его покупок. Такой ход увеличит лояльность и сделает дополнительные продажи.

Избранное (желания)
Принцип работы этой функции такой же, как и у «Хочу в подарок». Это некий «ящик», где пользователи могут хранить интересные для них товары, которые они пока не готовы купить. В данном случае меняется только позиционирование функции: в случае с «Хочу в подарок» это список подарков, а в случае с избранным – общий. Эти и остальные списки, которые пользователь захочет себе создать, хранятся в личном кабинете пользователя.

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

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

Рис. 4. Список желаний.

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

Крупнейшие социальные сети все больше придерживаются концепции «Интернет в Интернете». Другими словами они стараются дать пользователям все, что нужно, чтобы они не покидали сайт социальной сети и это им постепенно удается. Мы можем и должны использовать эту особенность. У всех крупнейших сетей есть API, которое позволяет создавать приложения. С помощью этого инструмента можно создать магазин-приложение, который будет работать в социальной сети как небольшое представительство основного интернет-магазина. Пока таких примеров не очень много, но такие магазины-приложения вполне успешно продают товары.

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

Рис. 5. Интеграция с социальными сетями.

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

Для страницы товара, статей и новостей нужно сделать блоки Like и Share, что позволит пользователям делиться информацией со своими друзьями и опять же даст дополнительный приток посетителей. Эти кнопки обычно размещаются под основной информацией на странице и имеют стандартный вид.

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

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

Корзина и оформление заказа
Еще одна важная часть любого интернет-магазина, без которой он не может работать. С корзиной покупатель сталкивается в середине своего путешествия: он уже выбрал товар, но еще не оформил покупку. Этот шаг на пути к покупке крайне важен, более 30% пользователей кладут товар в корзину, но так и не оформляют покупку по разным причинам. Тут наша задача помочь завершить покупку.

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

Рис. 6. Корзина.

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

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

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

Страница оформления заказа должна содержать несколько блоков:

1.Кому a.Имя получателя b.Телефон (поле для ввода номера и выбор типа телефона) 2.Доставка a.Город (выпадающий список) b.Способ доставки (выпадающий список) c.Пункт выдачи (выпадающий список) или адрес доставки) 3.Оплата a.Способ оплаты (выпадающий список) b.Способ доставки (выпадающий список) c.Пункт выдачи (выпадающий список) или адрес доставки) 4.Комментарий к заказу (необязательное текстовое поле) 5.Кнопка «Подтвердить» 6.Галка «Я соглашаюсь с правилами использования

Рис. 7. оформление заказа 1_1.

Рис. 7.1 оформление заказа 1_2.

Рис. 8. оформление заказа 2_1.

Рис. 8.1 оформление заказа 2_2.

Рис. 8.2 оформление заказа 2_3.

Рис. 8.3 оформление заказа 2_4.

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

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

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

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

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

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

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

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

Рис. 9 Доставка.

Основные виды доставки:

1.Адресная доставка 2.Самовывоз 3.Почта

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

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

В интерфейсе магазина мы можем первым показать нужный нам вариант доставки и оплаты или даже предложить дополнительные скидки для стимуляции выгодных магазину действий (например, если адресная доставка нам будет стоить 3% от суммы заказа, мы можем предложить клиенту скидку 3% при выборе самовывоза).

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

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

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

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

Оплату можно реализовать двумя способами: через систему приема платежей (посредник) или подключать напрямую. Система приема платежей позволяет оплатить товар десятками разных способов, но при этом берет комиссию в размере 3-5% от суммы покупки. Привязывать напрямую более трудозатратно, но при больших объемах это окупается. В обоих способах обычно используется API сервисов, поэтому для начала нужно будет выбрать эти сервисы, а затем изучить требования к подключению и заложить их в ТЗ.

Основных способов оплаты, которыми реально пользуются многие люди, не так много. Это делает системы приема платежей для большинства не сильно востребованными, если только в разрабатываемом магазине нет какой-то специфики. Я рекомендую привязывать оплату напрямую, а это в частности пластиковыми картами (Visa, MasterCart) и электронными деньгами (WebMoney, Яндекс.Деньги). Остальные способы оплаты делаются в ручном или полуавтоматическом режиме.

Рис. 10 Оплата.

Основные виды оплаты:

1. Наличными курьеру (3-4% комиссии + налоги) 2. Наличными в офисе (без комиссии + налоги) 3. Пополнение пластиковой карты (0,5%-1,5% комиссии + налоги) 4. Оплата пластиковой картой (3% + налоги) 5. Счет-фактура (0,5%-1,5% комиссии + налоги) 6. Электронные деньги (1-3% + налоги) 7. Наложенный платеж 8. Кредит (рассрочка)

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

Доставку и оплату лучше разбить на шаги: сначала выбирается способ доставки, затем подгружаются дополнительные поля, затем выбирается способ оплаты, затем подгружаются дополнительные поля или непосредственно оплата (если она осуществляется on-line в автоматическом режиме).

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

Контакты для рассылок нужно собирать отовсюду, при первой же возможности: когда человек регистрируется, когда делает заказ, когда задает вопрос, на сайте предлагать форму для подписки и т.д. Будь то email или телефон. В первом письме или sms стоит предложить пользователю настроить подписку.

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

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

Рассылки могут быть как автоматические (например, уведомление о статусе заказа), так и ручные (например, специальная рассылка к празднику).

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

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

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

Сайт должен определять какие из email’ов не работают и автоматически удалять их из базы.

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

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

Вторая группа уведомлений касается заказов покупателя: прием заказа, статус оплаты, статус доставки. Тут важно, чтобы товар не потерялся на пути от интернет-магазина до конечного покупателя.

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

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

Если у нас есть и email и телефон и вдруг email перестает работать, можно уведомить об этом пользователя и попросить внести изменения в личные данные.

На сегодня все, но моя серия статей про магазины еще не окончена. Скоро я расскажу про связь с Off-Line торговлей, мультивалютность, мультиязычность, мультибрендовость, статьи, новости, опросы и исследования, поведенческую систему, партнерские программы, микроформаты, SEO модуль, Social CRM, аналитическую систему, интеграцию с 1С и другими учетными системами, интеграцию с внешними БД, интеграцию с торговыми площадками, парсеры (граберы) и много другого интересного. Оставайтесь с нами, подписывайтесь на наши паблики в социальных сетях и не пожалеете!

P.S. Хотите научиться делать то, что описано в статье? Приглашаю на курсы, которые я веду: Проектирование серьезных сайтов, Маркетинг для интернет-магазина и Все о создании интернет-магазина.

P.P.S. Чтобы получать наши новые статьи раньше других или просто не пропустить новые публикации — подписывайтесь на фан страницы SECL Group: Facebook, VK, и Twitter.

Оригинал статьи: http://seclgroup.ru/article_proyektirovaniye_serjoznogo_magazin_lichnyy_kabinet_korzina_dostavka_oplata.html

Автор: Никита Семенов Президент Компания SECL Group Россия

habr.com

Разработка дизайна интерфейса личного кабинета на веб-сайте

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

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

Основные особенности разработки

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

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

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

Этапы разработки дизайна личного кабинета

Разработка интерфейса для кабинета пользователя ведется по следующему шаблону:

  1. Получение технического задания. Клиент в письменной форме излагает свои требования к будущему личному кабинету и предлагает свое видение.
  2. Анализ схожих решений и существующих дизайнерских проектов. Мы ищем схожие аналоги сайта и интересные дизайнерские решения по заданному направлению и анализируем лучшие личные кабинеты.
  3. Анализ аудитории. Опираясь на существующие методы соционики, социологии и психологии, мы анализируем потребителя с целью выяснения его желаний, намерений и предпочтений.
  4. Разработка концепции дизайна. Разработка интерфейса для личного кабинета начинается с созданием «чернового» варианта дизайна, с использованием существующих данных и лучших решений относительно дизайна и навигации.
  5. Создание заголовки. На этом этапе клиент может оценить работу на двухмерной модели с прорисовкой управляющей панели.
  6. UX услуги и UI услуги. Здесь мы оцениваем поведение обычного пользователя путем оценки удобства пользования личным кабинетом в целом и удовлетворенностью отдельными элементами дизайна.
  7. Подбор графики и анимации. Мы выбираем конкретные объекты для вставки в личный кабинет, настраиваем иконки, выбираем шрифты и анимацию. Очень важно соблюдать гармонию между графикой и скоростью загрузки.
  8. Создание макета сайта и конечного дизайна интерфейса для личного кабинета веб сайта.
  9. Установка и настройка. Мы предоставляем все файлы для установки дизайна на само тело личного кабина и вводим последние корректировки, связанные с неточным расположением элементов дизайна и устранением небольших багов.

Дизайн личного кабинета в Москве и Санкт-Петербурге: практично и оригинально

Мы работаем как удаленно, так и в плотном взаимодействии с заказчиком по всем городам России и выполняем свою работу качественно и без задержек. Рекламное агентство «Инсайт» имеет многолетний опыт работы со сложными проектами и дизайнерскими решениями. Благодаря ответственному и всестороннему подходу к вверенным задачам, были созданы крупные интернет-магазины, которые успешно развиваются.Хотите привлекательный графический интерфейс вашего личного кабинета по доступной цене? Обращайтесь! Мы уже знаем, что необходимо сделать именно в вашем случае!

adinsight.ru

Редизайн личного кабинета пользователя МФК — Оффтоп на vc.ru

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

Интро

Предыдущая версия личного кабинета разрабатывалась больше года назад под формат займов PDL (pay-day-loans, то есть краткосрочные займы). За это время у бизнеса заказчика появились новые цели и задачи: необходимо было развивать потенциал долгосрочных займов, захотелось сделать все максимально user friendly, внедрить геймификацию, чтобы добавить в работу с серьезным финансовым продуктом немного драйва и увеличить лояльность пользователей к бренду.

Преображением личного кабинета занималась команда Devim во главе с Product Owner Таней Яшниковой. По результатам работы мы решили поделиться опытом трансформации личного кабинета и решениями, которые удалось реализовать.

Предыдущая версия личного кабинета

Задачи

  • Развитие функционала онлайн-займов;
  • Проработка нового формата долгосрочных займов;
  • Создание легкого и понятного интерфейса личного кабинета;
  • Упрощение работы с займами;
  • Разработка программы лояльности и геймификация работы с займами;
  • Интеграция с партнерскими сервисами.

Решение №1: Выбор цветов и работа с дизайн-элементами

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

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

Обновленная и существенно расширенная палитра фирменных цветов

Решение №2: Выбор дизайн-системы 8pt

Так как личный кабинет кредитной организации — задача масштабная, необходимо было выбрать дизайн-систему, справляющуюся с большими объемами работ. За основу была взята система 8pt, так как:

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

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

Система 8pt: элементы интерфейса имеют размер, кратный 8

Решение №3: Проектирование интерфейсов

Ключевым решением в проектировании было разделение контентной части на 2 блока:

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

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

Адаптивность контента под разные типы устройств

Решение №4: Программа лояльности и геймификация

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

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

Пока пользователь ожидает решение по заявке, ему демонстрируется видео с информацией о компании и ее преимуществах:

После оформления займа, пользователь может отслеживать действия с займом и историю начислений:

История всех займов на одном дашборде

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

Рейтинг основан на кредитной истории заемщика

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

Программа лояльности

Решение №5: Визуализировать способы получения займа

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

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

Пару слов о себе и заказчике

Мы — Devim, и мы делаем финтех-продукты. Заказчик проекта — федеральная микрофинансовая компания "До зарплаты".

#редизайн #финтех #интерфейсы #кейс #devim

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать

vc.ru

22 лучших формы входа и регистрации на сайте в HTML&CSS!

В этой статье у нас есть для Вас специальная коллекция лучших форм: форма входа и форма регистрации для сайта, созданные с помощью CSS3 и HTML5 технологий, в современном стиле и некоторыми классными эффектами на JavaScript. Смотрите одну из лучших и современных форм входа с эффектами JQuery.

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

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

Я считаю, что веб-дизайн играет важную роль в создании подобных форм, и ему нужно уделить должное внимание. В принципе, форма входа имеет 3 стандартных поля: логин или имя пользователя, пароль, а также кнопка “Войти”.

Итак, затаив дыхание, представляю коллекцию 22 форм регистрации и входа на сайт!

1 → Темная форма входа

Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.

2 → Светлая форма входа

Светлая форма входа с прозрачной рамочкой и четкой структурой.

3 → Эффектная форма с эффектом появления

Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.

4 → Простая форма с эффектом появления

Простая форма, всего 3 стандартных элемента, но с приятным эффектом появления “снизу” с прозрачностью.

5 → Красивая форма с логотипом Apple

Продуманная форма на сайт с интересным дизайном и логотипом apple.

6 → Маленькая форма в розовом стиле

Маленькая и простая, в розовом стиле, и интересным дизайном.

7 → Светлая форма

Светлая, в выдержанном стиле и дизайне, ничего лишнего.

8 → Супер форма входа и восстановления пароля

Форма входа + обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.

9 → Приятная дизайнерская форма с эффектом

Приятная на вид, красивый эффект появления иконок при активации поля ввода.

10 → Форма серого цвета

Серый оттенок, в виде друг на друга наложенных листочков.

11 → Крупная форма с дополнительным элементом

Красивая, с крупными полями ввода данных, и дополнительной выпадающей кнопкой при наведении (её можно использовать для любых, задуманных целей).

12 → Дизайн в виде блокнота

Дизайн формы в виде блокнота, с простыми полями, но выдержанным стилем.

13 → Красочная, прозрачная форма

Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.

14 → Apple Iphone форма

Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!

15 → Чёткая форма с заголовком

Четкая и простая форма, без никаких отвлекающих элементов, и заметным черным заголовком.

16 → Тёмная форма

Тёмная форма с красивой и заметной кнопкой отправки данных.

17 → Черная форма

Черная форма входа с белыми полями – хорошее сочетание цветов.

18 → Горизонтальная форма входа и регистрации

Горизонтальная форма входа и регистрации пользователя, с эффектом 3D переключения между формами.

19 → Темная форма с дополнительными элементами

Темная форма с кнопками входа через социальные сети и красивыми полями.

20 → Форма входа на сайт + регистрация

Регистрация + форма входа, с 3D эффектом переключения между формами и социальными кнопками входа.

21 → Белая форма с красным заголовком

Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.

22 → Форма входа, регистрации и восстановление пароля

Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.

Заключение

Вот они и есть, все формы html css! Надеюсь, какая-то из них Вам точно подошла.

При использовании конкретной формы, Вам остается лишь её (возможно) немного корректировать, подогнать под свой сайт, и все будет супер! Если Вы собираетесь использовать какую-то из форм – дайте мне знать об этом в комментарии!

Данный урок подготовлен для вас командой сайта http://vladmaxi.net Подготовил: Владислав Бондаренко

vladmaxi.net

Разработка и настройка личного кабинета в студии Внешний{Код}

Разработка и настройка личного кабинета

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

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

Правильно разработанный и настроенный личный кабинет позволяет:

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

Личный кабинет является веб-интерфейсом, который позволяет интегрироваться с различными бизнес-системами:

  • Сrm-системы.
  • Еrp-системы.
  • Базы данных.
  • Внутренние и сторонние сервисы.
  • Различные службы.

В результате этого, вы получаете сервис для ваших клиентов или сотрудников, который позвоялет упростить часть процессов и повысить:

  • Продажи.
  • Конверсии.
  • Производительность.
  • Взаимодействие.
  • Удобство пользования.
  • Конкурентоспособности.
  • Лояльность.
  • Уважение к компании.

Возможности личного кабинета для пользователя и менеджера

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

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

Настройка кабинета открывает новые возможности и менеджерам фирмы:

  • Оптимизирует администрирование клиентской базы.
  • Упрощает поиск информации о заказах, их отслеживание и исполнение.
  • Создает дополнительный канал связи с клиентом: например, для отправки ему документов, накладных, счетов-фактур.

outcode.ru