ЮИД России РФ Личный кабинет — это буквально способ взаимодействия с сайтом, а значит и с вашим сервисом. Поговорим о том, как сделать его удобным для пользователя.
В этой статье я расскажу про наше универсальное решение для обработки заказов клиента через личный кабинет на сайте.
Решение охватывает как услуги, так и заказ товаров.
Данное решение мы делаем универсальным. Оно не привязано к какой-либо конкретной отрасли.
По необходимости вы можете кастомизировать решение под свою отрасль, например, добавить дополнительные специфичные поля в услуги.
Личный кабинет для обмена купонами от Rwds
Важно отметить, что система не принимает непосредственно платежи от клиента (это можно дополнительно внедрить через интеграцию платежных шлюзов, например, Cloud Payments или YoCassa). В системе лишь ведется учет оплат, а также начисление баллов за оплаты и списание бонусов в счет оплаты заказов.
Оплата может быть произведена через расчетный счет, и затем менеджер отмечает факт оплаты на странице заказа. Т.е. система только хранит информацию о финансах, но сами финансы не проходят через сайт.
Представьте, что у вас есть компания, которой необходимо настроить обработку регулярных заказов от своих существующих клиентов. Это могут быть либо какие-то услуги, либо заказы товаров. Важный момент – это действующие ваши клиенты, которые периодически имеют потребность в ваших услугах/товарах. Это может быть опт, юридические услуги, поисковая оптимизация, заказ расходников и т.д.
Главная цель – эффективная обработка заказов клиентов.
Клиент заходит в личный кабинет на сайт, осуществляет заказ товаров и услуг. Менеджеры обрабатывают этот заказ также через свой личный кабинет.
При наступлении значимых событий заинтересованная сторона получается уведомление (изменение статуса заказа, новый запрос на услугу, оплата с баланса на сайте и др.).
Важный момент – мы исходим из того, что любое коробочное решение можно и нужно доводить под себя. Поэтому мы внедряем базовый вариант и через проектную работу дорабатываем его до нужного состояния.
Любое решение на Falcon Space содержит несколько точек расширения:
Все это позволяет с уверенностью сказать, что можно реализовать на решении Falcon Space практически все, что угодно. В крайних случаях создаются дополнительные компоненты под проект.
Основная идеология платформы – взять готовое решение и адаптировать/развивать под свои потребности
Личные кабинеты можно разбить на два типа.
Конечная задача одна: пользователь должен получить приз. Внутри такого личного кабинета не должно быть интерфейса, в идеале только регистрация, поле ввода и одна кнопка.
В обоих случаях интерфейс не должен отличаться от сайта, переход должен быть плавным и незаметным. Опыт не должен разделяться на использование личного кабинета и сайта.
Там могут быть функции управления услугами, оплаты, бонусной программы. Все функции открываются после регистрации.
Личный кабинет — как записная книжка, в которой делаются отметки. Фокус в интерфейсе на удобство использования и информационную архитектуру.
Если на продуктовом или промосайте большую роль играет эмоциональное вовлечение, то в персональной зоне этого не бывает. Этот фактор накладывает отпечаток на все: интерфейс, look & feel, структуру меню и страниц кабинета.
Для наших клиентов мы создавали личные кабинеты с разным набором функций: загрузки фото для участия в конкурсе, верификации чеков и промокодов, обмена баллов.
Построение информационной архитектуры начинается с определения аудитории и бизнес-задачи. В результате личный кабинет становится частью будущего продукта.
В отдел сферах бизнеса есть необходимость развития сервисов через личные кабинеты. Так, в банковской сфере бизнес готов вкладывать ресурсы в создание насыщенных интерфейсов и разработку новых функций, чтобы увеличить время пребывания на сайте и в приложении.
На сайте Alfa Travel пользователь в личном кабинете узнаёт баланс накопленных миль и обменивает их на билеты
Очень часто, начиная разработку с дизайна основатели веб-сервисов и приложений не задумываются о целесообразности. Давайте разберём на примере
Отдельным пунктом стоит дизайн админки. Это когда дизайнер, делает не только макеты публичной части для пользователей, но и отрисовывает панель администратора самого сервиса.
В 99% случаях дизайн админки не нужен, т.к. им будет пользоваться 1-5 чел, да и дизайн личного кабинета важен не с точки зрения красоты, а с точки зрения удобства. А это работа проектировщика.
Мои контакты в конце статьи, могу помочь с интерфейсом веб-сервисов и приложений.
Получается, что такой подход раздувает бюджет на проект. Давайте прикинем на сколько. Ориентируюсь на средние показатели, что нарисовать один экран ~4 часа, сверстать его ещё ~4 часа верстальщика.
Допустим у вас в сервисе 6 ключевых экранов админки и 12 экранов личного кабинета.
Дизайнер: (6 + 12) х 4ч х 1000р/час = 72 000р
Верстальщик (6 + 12) х 4ч х 1200р/час = 86 400р
Всего: 158 400р
Если верстальщик будет делать по мокапам проектировщика, то затраты будут 1 час на прототипы и 2 часа на вёрстку на базе внешнего вида фреймворка. Получается такой бюджет:
Проектировщик: (6 + 12) х 1ч х 2000р/час = 36 000р
Верстальщик (6 + 12) х 2ч х 1200р/час = 43 200р
Всего: 79 200р
Выходит экономия в 2 раза.
Моя команда занимается разработкой веб-сервисов и приложений,
Вопрос по красоте можно закрыть подобрав подходящий фронтенд фреймворк. Например:
Google Cloud советует, как сделать сценарий использования аккаунта привычным и безопасным:
Sash
Шаблон администратора для создания потрясающих информационных панелей, которые удивят ваших целевых пользователей, чтобы создать хорошую и хорошо структурированную панель админку.
Datta Able
Шаблон администратора с набором необходимых страниц, созданный на основе Bootstrap 4, для удовлетворения любых простых или сложных потребностей панели инструментов админки.
Fobia
Шаблон на фреймворке bootstrap 5. Удобный для разработчиков шаблон администратора или как ещё водится – админка) включает в себя цветные, светлые и темные панели, коллекцию компонентов интерфейса.
Upcube
Полностью адаптивный шаблон администратора на основе Bootstrap 5. Он поставляется с множеством многоразовых и красивых элементов пользовательского интерфейса, виджетов и функций.
Minia – PHP
Простой и красивый PHP шаблон администратора, созданный с помощью Bootstrap v5 и gulp. Он имеет более 6 различных макетов расположения элементов и 3 режима: темный, светлый и RTL.
Ample Admin
Простой и минимальный бесплатный шаблон панели администратора HTML5. Он имеет привлекательный дизайн с полной отзывчивостью, основанный на фреймворке Bootstrap, интуитивно понятные коды.
Jeweler
Бесплатный шаблон панели администратора для сайта электронной коммерции. Это полностью адаптивная и хорошо продуманная тема с тремя различными версиями панелей инструментов.
Atlantis Lite
Бесплатный шаблон административной панели, админка имеет два различных стиля цветовой панели и четыре уникальных стиля боковой панели, минимальный и красивый дизайн пользовательского интерфейса.
Front
Панель администратора или интерфейс на основе SASS, это многофункциональные компоненты и специально разработанные демонстрационные страницы помогут вам создавать лучшие проекты веб-приложений.
NOA
Шаблон администратора html5 gulp SCSS и CSS, простой и продвинутый дизайн шаблона панели администратора, который поставляется с несколькими современными плагинами jQuery.
React Reduction – React
Бесплатный шаблон панели администратора, созданный с использованием новейших технологий, Bootstrap 4 и React. Это первоклассная тема администратора для панели администратора – админка.
Gull
Шаблон админка Pure Vue JS + HTML, построен на основе компонентов VueCli, Vue, Vuex, Sass и BootstrapVue. Поставляется с четырьмя приборными панелями, пятью приложениями, более чем 200 виджетами.
Mosaic – Tailwind CSS
Мощный шаблон панели администратора, созданный с помощью Tailwind CSS, содержит сотни готовых макетов и разделов. Написаны версии на HTML, React, Laravel и Vue, помогут вам быстро приступить к работе.
Dompet
Bootstrap HTML шаблон панели администратора платежей, адаптивная тема админка с симпатичным дизайном и большим набором элементов готовых к установке на сайте.
Dash-UI
Адаптивнаятема администратора и панели управления Bootstrap 5, бесплатный набор компонентов и шаблонов с открытым исходным кодом, полностью написанный с помощью Bootstrap5.
Label
Бесплатный адаптивный шаблон панели администратора, имеет модульные компоненты, которые очень легко настраиваются, кроме того, адаптивные макеты позволяют ему идеально выглядеть на любом устройстве.
About a code
The Hacker Login Form is a unique and creative login form designed to resemble a hacker’s terminal. Overall, the Hacker Login Form is a fun and engaging login form that can add a unique touch to any website or application.
Chrome, Edge, Firefox, Opera, Safari
Author
A modern and stylish registration form template that can be used for various purposes. It features a clean and minimal design with a beautiful color scheme that can be customized to match your brand. The form includes fields for name, email, password, and confirmation, as well as a submit button. The template is fully responsive and can be easily integrated into your website or application.
Instead of getting one free creative signup form template, this bundle offers you two lovely alternatives to play with.
About the code
Sign up modal form.
bootstrap.css, jquery.js, bootstrap.js, popper.js
Double slider login form in HTML, CSS and JavaScript.
Simple HTML and CSS registration form with validation.
Chrome, Firefox, Opera, Safari
HTML and CSS modal login form with little JavaScript.
Pure CSS cube buttons and inputs for login form with gradien styles.
Pure CSS login form with floating labels.
Prismatic login, sign up and other forms.
Login page animation template created with CSS3 and vanilla JavaScript DOM elements. Will surely try to upgrade it with more better animation effects.
Form transitions UI based on Dominik Markušić dribble.
Slithering highlight in login form.
Only CSS login form.
Cute login form with vertical wave animation.
Registration form with pure CSS animations.
A simple sign up concept.
The button has a hover state which pulls a skewed transparent white overlay over the button’s background color. When the button is clicked, the sign in form appears from within the button.
Pure CSS sign up form UI.
Simple login form in HTML and CSS.
Демо сайта обработки заказов клиентов через личные кабинеты
Если у вас возникли вопросы по созданию личных кабинетов на сайте для клиентов, напишите нам на Whatsapp
Обновление Апрель 2022. Мы постепенно добавляем новые возможности в решение Falcon Service: – появились отдельные лендинги для точек, где клиент может самостоятельно регистрироваться;- добавлена возможность вести расходы по точкам. Менеджер точки и супервизор добавляет расходы по категориям.- добавлены финансовые инструменты, такие как ABC анализ клиентов (показывает кто формирует выручку), а также отчет о движении денежных средств отдельно по каждой точке. – улучшена система настроек для супервизора. Все ключевые настройки теперь находятся в одном месте;- улучшен вид вывода денежных средств (знаки разрядов, вывод валюты, цвет). внедрена возможность пополнения баланса клиентом через платежный шлюз Cloud PaymentsРешение постепенно обрастает новыми возможностями. Если у вас есть идеи, что еще полезного можно добавить в решение, напишите пожалуйста в чат справа внизу.
Личный кабинет менеджера точки
Менеджер имеет следующие страницы в личном кабинете:
Важная особенность – менеджер точки имеет доступ только к данным по своей точке (клиенты, финансы, заказы, запросы).
Запросы на услугу в конечном счете приводят к созданию заказа. Т.е. заказ может содержать как товары, так и услуги.
Зачем делать личный кабинет
У пользователя должно быть ощущение «центра управления» сайтом. Когда вы планируете, какие возможности включить в личный кабинет, держите в уме все пользовательские цели, например:
Чем это удобно компании?
Возможности системы учета заказов и клиентов
В системе по умолчанию есть следующие возможности:
Решение реализовано на базе платформе Falcon Space – это дает значительные возможности по изменению бизнес-логики решения: создавать новые объекты учета, добавлять личные кабинеты, менять бизнес-логику существующих процессов.
Каталог возможностей платформы Falcon SpaceДемонстрация возможностей компонентов платформы
Из чего состоит система работы с заказами
Есть 3 главных кабинета:
Каждый клиент и менеджер прикреплены к определенной точке. Это может быть филиал компании, магазин-бутик, франчайзинг или что-то другое.
Вся работа происходит в личных кабинетах. Это не классический вид сайта-магазина, а сервис, заточенный под выполнение типовых бизнес-процессов: найти товар, оформить заказ, отметить факт оплаты и т.д.
Личный кабинет разработчика
Систему можно и нужно дальше адаптировать под свои возможности. Чем точнее система учитывает особенности вашего бизнеса, тем эффективнее будут протекать бизнес-процессы в ней.
Для этого вы можете использовать все возможности платформы, улучшая и разрабатывая новый функционал в системе. Для поддержки подобного решения необходимо знать всего лишь 2 технологии: MS SQL Server (бизнес-логика и обработка данных) и Bootstrap 4 (стилизация и кастомизация вывода).
Техническая документация по платформе Falcon Space
Что вы можете делать в кабинете разработчика:
Делаете ли вы мобильное приложение под Android, IOS?
Если говорить о нативных мобильных приложениях (те, что устанавливаются через AppStore и Google Play) – мы их не делаем. Наша платформа полностью адаптивна под мобильные устройства.
Также Falcon Space поддерживает технологию PWA. Это практически стирает разницу между мобильным приложением и веб-сайтом:
Главные минусы мобильных нативных приложений:
Личный кабинет супервизора
Супервизор представляет администрацию сайта, координирует систему в целом. Состав меню личного кабинета супервизора:
Чем мы занимаемся и не занимаемся
В кабинете клиента есть следующие элементы:
Баланс удобства и безопасности
Пользователь не понимает, зачем ему регистрация, если не объяснить преимуществ, поэтому регистрацию тоже надо «продать». А также убедить, что его данные в безопасности.
Автор Telegram-канала «Про удобство» Михаил Греков советует по каждому полю на форме регистрации задавать себе вопрос: нужна ли эта информация именно при регистрации. Кроме того:
Форма авторизации на сайте журнала «Сноб»
Сколько стоит решение
По стоимости решения вы можете найти информацию на странице Готового решения личных кабинетов клиента компании. Но учитывайте, что в любом случае потребуются какие-то доработки под ваши нужды и адаптацию под вашу бизнес-логику проекта.
Что можно сделать чтобы получить первичную оценку проекта в целом с учетом доработок?
Чем меньше первая версия для внедрения – тем меньше бюджет, быстрее будет реализован проект, и тем быстрее заказы начнут обрабатываться по новому процессу через личные кабинеты.
Старайтесь убрать все второстепенное из первой версии своего продукта. В дальнейшем решение можно будет постепенно развивать на основе реально возникающих потребностей.
Важно. Большая просьба – не описывать на словах, что вам необходимо доработать. Опишите это документом (концепция) – так будут лучше учтены детали проекта и будет точнее оценка.