Новый дизайн Личного кабинета!

Время прочтения 9 мин Просмотры 20K Блог компании Телфин Веб-дизайн *Интерфейсы * Меня зовут Евгений Цветков и я расскажу, что надо учитывать при редизайне интерфейсов, чтобы малыми средствами получить большой результат. Телфин на рынке телекоммуникаций с 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 — обязательно порекомендую: Результат, как говорится, налицо. Впереди еще много работы (единый кабинет с управлением виртуальной АТС и полная версия для мобильных устройств), но начало положено – основные изменения завершены. И вполне успешно.

Всем привет. Все мы, пользователи плагина WP Recall, желаем ему процветания и развития. Однако, время не стоит на месте. Меняется всё: привычки пользователей сети, представления об удобстве и ожидания. Многое, что было популярно 5-10 лет назад, сегодня безнадёжно устарело. Чтобы не отставать от времени и потребностей пользователей WP Recall должен тоже меняться, подстраиваясь под ветры перемен.

У меня появилось немного свободного времени, чтобы нарисовать макет. Сегодня хочу представить на ваш суд новую концепцию дизайна личного кабинета. Этой статьёй я ни в коем случае не хочу критиковать имеющиеся дизайны. Просто, я размышляю на тему “как могло бы быть”. Не смущайтесь, если вы увидите мотивы из дизайна других социальных сетей. Если эта тема вам не безразлична, добро пожаловать!

Описание концепта

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

Перед началом я определил цели:

• Дизайн должен быть лёгким и “воздушным” 🙂
• Использовать текущий иконочный шрифт (в случае чего, чтобы программинг был наиболее простым и имел совместимость с другими дополнениями).

Так что же на мой взгляд можно было бы улучшить?

1. Обложка. А нужна ли она вообще? Когда я думал над этим вопросом, то не смог найти достаточно веские аргументы. Красивое оформление. Вот собственно и всё? И этот аргумент достаточно спорный. Обложка занимает много пространства и не несёт какого-то практического смысла. Кроме того, если личный кабинет используется не на развлекательных сайтах, а например, для сбора показаний счётчиков на сайте управляющей компании, все “красивости” просто лишние. Именно поэтому в новом концепте я убрал обложку.
2. Лёгкость. В новом дизайне хотелось передать лёгкость и простоту. Именно поэтому были использованы светлые тона и достаточно большие пространства между логическими блоками: карточка пользователя (в самом верху), элементы ленты постов, блок переключателя на другие типы контента (фото, видео, музыка, товары, услуги, список можно продолжить), блок чата.
3. А где интерактив? Идея следующая. Видите 3 точки? Это менюшка. Там где аватарка, а также в правом углу элементов ленты. Пользователь наведёт на них, появится список возможностей. Например, под аватаркой можно сделать пункты: изменить аватар, информация о пользователе, в чёрный список, сделать перевод. Я не стал тратить время на это, так как не знаю, понравится вам ли новый концепт.
4. Карточка пользователя. Здесь размещаются данные о пользователе. И, внимание! Новый блок – блок услуг пользователя.
5. Пару слов про меню и блок чата. Эти блоки по замыслу – липкие. То есть, при скроллинге они следуют за пользователем.
6. Первая и главная вкладка – лента пользователя (не настройки профиля). Хотя здесь всё зависит от задач личного кабинета.

Это основные моменты. Чтобы посмотреть мекет во всей красе, откройте его в новой вкладке в 100% размере.  В стандартной галерее поста он немного мутноватый.

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

Далее Блог компании на Cossa.ru Далее Блог компании на Cossa.ru Личный кабинет — это буквально способ взаимодействия с сайтом, а значит, и с вашим сервисом. Поговорим о том, как сделать его удобным для пользователя.

Зачем делать личный кабинет

Личный кабинет на сайте — это раздел, доступный пользователю после авторизации.

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

• Посмотреть расписание событий и зарегистрироваться;
• Подключить сервисы и услуги;
• Задать вопрос в чате;
• Проверить баланс счета и бонусов;
• Посмотреть статус и историю заказов.

Чем это удобно компании?

• Собрать    данные о    пользователе для конкурса;
• Интегрировать внутреннюю CRM, чтобы видеть    заказы, оплату, личную информацию;
• Повысить    качество обслуживания и    лояльность    аудитории;
• Общаться    с пользователем через еще один канал.

Личный кабинет от Leavingstone https://dribbble.com/Leavingstone для сбора статистики

Баланс удобства и безопасности

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

Автор телеграм-канала Про удобство https://t.me/proudobstvo Михаил Греков советует по каждому полю на форме регистрации задавать себе вопрос: нужна ли эта информация именно при регистрации. Кроме того:

• Сделайте все поля обязательными, необязательные все равно никто не заполнит.
• Автоматически логиньте пользователя после завершения регистрации.
• Для рунета: предупредите пользователя, что он указывает пароль кириллицей —    наверняка, случайно.

Форма авторизации на сайте журнала Сноб

Пользовательский путь

Google Cloud советуют, как сделать сценарий использования аккаунта привычным и безопасным:

1. Оставьте возможность сохранять пароли. Они должны храниться в зашифрованном виде с помощью, например, PBKDF2, Argon2, Scrypt, или Bcrypt. Разрешите пользователям использовать любые символы и длину пароля, ведь они защищены криптографией.
2. Разрешите авторизацию через соцсети, так вы избавляете пользователя от необходимости запоминать еще один пароль.
3. Используйте двухступенчатую верификацию. У подтверждения по SMS много слабостей, но это удобно пользователю и многократно повысит уровень безопасности.
4. Разделите концепт авторизации пользователя и личного кабинета. Ваши пользователи — это не имейлы, номера телефонов или ID. Пользователи на сайте — это уникальный набор персональных данных и опыта использования вашего сервиса.
5. Разрешите нескольким ID присоединяться к одному личному кабинету. Пользователь, неделю назад заходивший под логином и паролем, может выбрать авторизацию через Google, не понимая, что он создает второй аккаунт.
6. Разрешите удалять аккаунт и сопутствующие данные.

Среди хороших примеров пользователи Quora предсказуемо называют Facebook, Google, LinkedIn, Twitter, Invision, а также отмечают удобство аккаунтов платформы для блогов Medium:

• Вход через Facebook или Google автоматически подтягивает аватар из этих аккаунтов;
• Чтобы добавить персональные данные, нужно просто кликнуть на пустое поле и начать печатать — все интуитивно;
• С первой секунды понятно, что нужно делать на этом сайте: писать текст;
• Чистый UI. Пользовательский контент — это главный элемент на странице.

Функциональности

Личные кабинеты можно разбить на два типа.

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

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

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

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

Там могут быть функциональности управления услугами, оплаты, бонусной программы. Все функции открываются после регистрации.

Best practice

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

Если на продуктовом или промосайте большую роль играет эмоциональное вовлечение, то в персональной зоне этого не бывает. Этот фактор накладывает отпечаток на все: интерфейс, look&feel, структуру меню и страниц кабинета.

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

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

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

На сайте Alfa Travel пользователь в Личном кабинете узнает баланс накопленных миль и обменивает их на билеты.

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

1. Личный кабинет пользователя входит в UX-экосистему.
2. Интерфейс гораздо более рациональный и менее эмоциональный, чем сайт.
3. Акцент на пользовательском взаимодействии и интерфейсных характеристиках продукта.

Личный кабинет для обмена купонами от Rwds

Чеклист

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

✉️✨ Письма Коссы — лаконичная рассылка для тех, кто ценит своё время: cossa.pulse.is

Блоги

Не цветами едиными: зарабатываем с лучшими партнерскими офферами для гендерных праздников в 2023 Demand-Side Platform – инструмент закупки рекламных мест Как влиять на эмоции с помощью контента Создать свой блог

Ближайшие события

14 Февраля

Бизнес 2023: управление, персонал, продажи. Встреча собственников и директоров

14 Февраля

Бизнес-интенсив для предпринимателей «Стратегия со стратегом»

14 Февраля

Основы работы с маркетплейсами

Все события ← К списку проектов 15 января 2021 1 545

Сделал редизайн старого кабинета, разработал новую пк-версию, разработал новые страницы.

Задача

Cтудия Солнышко 123 обратилась с задачей редизайна текущего личного кабинета для курса по фотографии.

Старый кабинет

Дизайн

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

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

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

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

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

Мобильная версия

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

Заказать крутой дизайн–> Линкануть Вотсапнуть Запинить–> 😼 Выбор редакции 21 мая 2022

773

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

Сущность дизайна для веб-проекта

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

Если пользователь говорит: «ВАУ», — но не понимает, где он находится и что от него хотят — это плохой дизайн

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

Элементы дизайна сайта/программы. Ключевые моменты

Дизайн создает впечатление для пользователя сайта

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

Нужен ли уникальный дизайн веб-проекту?

На мой взгляд, этот вопрос напрямую связан с брендированием. Если у вас сильный, узнаваемый бренд, то имеет смысл делать что-то свое уникальное. Если вы noname для потребителя(а в большинстве случаев это именно так), уникальность не играет никакой роли. Более того, своей уникальностью и оригинальностью вы можете оттолкнуть часть аудитории.Делайте понятный, простой, ожидаемый дизайн и не гонитесь за уникальностью. У нашего сайта неуникальный дизайн. Ну и что с того вам, как посетителю сайта? Аналогично будет думать и ваш потребитель, посетив ваш проект.

Главные требования к дизайну IT-продукта

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

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

Дизайн должен быть быстрым. Хороший, но медленный дизайн — это нервы пользователя. Отклик важнее дополнительных функций (именно за это мы любим Блокнот или Notepad++). Программа не должна создавать паузы в ритме работы пользователя. Особенно это касается профессиональных пользователей, т.е. тех, кто будет постоянно использовать ваши программы для выполнения большого объема работ.

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

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

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

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

Дизайн веб-платформы Falcon Space

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

Посмотреть готовые темы на демостенде Falcon Space

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

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

Меньше кастомизации — меньше нестыковок, проще сопровождение и развитие, дешевле поддержка, меньше стоимость владения продуктом.

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

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

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

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

В плане дизайна важно сразу правильно построить ожидания. Вы можете посмотреть наши текущие решения на demo.web-automation.ru. Тем самым вы уже можете примерно представлять, как будет примерно выглядеть ваш проект.

Ключевые блоки на странице

На скрине прописаны основные элементы страницы:

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

Также сюда можно добавлять свою дополнительную кастом верстку для вставки новых элементов.

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

Область хлебных крошек — позволяет отразить местоположение пользователя. Состав хлебных крошек задается для страниц через SQL (т.е. гибко, под каждую страницу отдельно). Для каталога (компоненты catalog, list) хлебные крошки строятся на основе иерархии категорий. В режиме редактирования в хлебных крошках появляются дополнительные элементы управления.

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

Примеры внешнего вида отдельных элементов веб-платформы

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

Ограничения изменений по дизайну сайта в веб-платформе Falcon Space

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

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

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

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

Чем меньше технологий, тем проще и дешевле поддерживать проект в дальнейшем.

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

Мы постоянно работаем над возможностью кастомизации отдельных элементов.

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

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

Заключение

Дизайн системы на платформе Falcon Space — не кот в мешке. Вы можете зайти на демо и посмотреть, как может выглядеть ваша система. Именно через демо проще всего прояснить ожидания относительно дизайна. Если он вам нравится, то именно так он и будет выглядеть на вашей системе. Если вам хочется внести небольшие стилистические изменения в свой проект, это можно сделать. Если вы хотите кардинально другой вид по стилистике — наша платформа, вероятно, вам не подойдет.

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

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

P.S. Смотрите статью Как создать свой IT-продукт для лучшего понимания нюансов процесса становления продукта в сети.

Источник: https://falconspace.ru/blog/vozmozhnosti-po-rabote-s-dizaynom-v-falcon-space

–>