{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Максим Петров",
    "_rss_description": "UI\/UX-дизайнер",
    "_rss_language": "ru",
    "_itunes_email": "mail@maximpetrov.ru",
    "_itunes_categories_xml": "",
    "_itunes_image": "https:\/\/maximpetrov.ru\/blog\/pictures\/userpic\/userpic-square@2x.jpg?1711785590",
    "_itunes_explicit": "no",
    "home_page_url": "https:\/\/maximpetrov.ru\/blog\/",
    "feed_url": "https:\/\/maximpetrov.ru\/blog\/json\/",
    "icon": "https:\/\/maximpetrov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1711785590",
    "authors": [
        {
            "name": "Максим Петров",
            "url": "https:\/\/maximpetrov.ru\/blog\/",
            "avatar": "https:\/\/maximpetrov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1711785590"
        }
    ],
    "items": [
        {
            "id": "5",
            "url": "https:\/\/maximpetrov.ru\/blog\/all\/blazor\/",
            "title": "Дизайн-система Blazor",
            "content_html": "<p>DevExpress Blazor — это набор компонентов пользовательского интерфейса. Активно применяется в приложениях на платформе Blazor и предлагает мощный набор компонентов: таблицы данных, календари, планировщики, выпадающие списки, диалоговые окна и многие другие.<\/p>\n<p>Задача — переосмыслить и создать дизайн-систему в Figma на основе существующих артефактов и наработок.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/blazor-1.png\" srcset=\"\/images\/blog\/1x\/blazor-1.png 1x, \/images\/blog\/2x\/blazor-1@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Вводные<\/h2>\n<p>Blazor продукт развивался и вместе с этим росло количество и сложность компонентов. Раньше дизайнер рисовал отдельный макет под каждую задачу. Не было системного подхода и единых правил. Со временем этот подход начал приносить проблемы:<\/p>\n<ul>\n<li>Разработка начала сильно обгонять дизайн.<\/li>\n<li>Многие решения по краевым сценариям стали приниматься разработчиками.<\/li>\n<li>Дизайнер тратил много времени на поиск UI и UX багов на поздних этапах.<\/li>\n<li>Итоговая фича могла сильно отличаться от нарисованного макета.<\/li>\n<\/ul>\n<p>Отдельной проблемой была сложность каждого компонента:<\/p>\n<ul>\n<li><b>Разные темы<\/b>. В разных темах компонент не только меняет цвет, но и начинает обладать другими визуальными свойствами.<\/li>\n<li><b>Несколько размеров<\/b>. Каждый компонент линейки представлен в трёх размерах.<\/li>\n<li><b>Дополнительные стили<\/b>. Большой набор стилистических вариантов для компонентов-атомов.<\/li>\n<\/ul>\n<p>Например, одна только кнопка состоит из 150 вариантов компонента:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/blazor-2.png\" srcset=\"\/images\/blog\/1x\/blazor-2.png 1x, \/images\/blog\/2x\/blazor-2@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<p>Было принято решение менять подход — разработать стандарты, правила постановки задач и проектирования.<\/p>\n<h2>Задачи<\/h2>\n<p>Перед новой дизайн-системой поставили следующие задачи:<\/p>\n<ol start=\"1\">\n<li><b>Оптимизация работы команды на этапах дизайна и разработки.<\/b><br \/>\nРаньше, эти процессы были довольно хаотичны. Дизайнер брал в задачу в работу и изображал примерную реализацию компонента. Многие краевые сценарии не учитывались. Какие-то решения в процессе разработки менялись на ходу. В итоге, разработка затягивалась, фичи резались и итоговый результат сильно отличался от исходной картинки.<\/li>\n<li><b>Автоматизация и консистентность<\/b>.<br \/>\nБольшой размер и сложность компонентов сильно затрудняли внесение любых изменений в дизайн. Даже небольшие стилистические изменения в базовом компоненте, типа кнопки, приводили к огромному количеству работы со стороны дизайнера. Так как нужно было учесть разные темы, размеры и стили.<\/li>\n<li><b>Консистентность цвета<\/b>.<br \/>\nОтдельно стоит отметить проблему с цветом. Многие цвета компонентов в коде рассчитывались с помощью миксинов. Это приводило ко многим проблемам, в том числе, проблемам с контрастностью.<\/li>\n<li><b>Доступность.<\/b><br \/>\nПользователи продукта стали всё чаще интересоваться, насколько компоненты доступны для разных категорий пользователей. Нужно было сформировать подход, когда дизайнер на этапе проработки компонента учитывает все WCAG 2.2 AA требования.<\/li>\n<li><b>Централизация знаний.<\/b><br \/>\nМногие знания о тех или иных дизайн-решениях нигде не фиксировались. Единственным источником знания были участвующие в работе на фичей члены команды. Нужно было сформировать систему документации.<\/li>\n<li><b>UI Kit.<\/b><br \/>\nВсё чаще стали приходить запросы на UI Kit от пользователей. К тому же, это уже давно было у конкурентов.<\/li>\n<\/ol>\n<h2>Результат<\/h2>\n<h3>Компоненты в Figma переработаны с нуля<\/h3>\n<p>Дизайн компонентов теперь полностью повторяет функционал кодовой реализации. Учтены все редкие сценарии и краевые состояния. Перед отрисовкой каждого компоненты изучались спецификация+API компонента и все сценарии его использования.<\/p>\n<h4><b>Пример реализации компонента Grid<\/b><\/h4>\n<p>Компонент Grid — один из самых больших и популярных в линейке Blazor. Представляет собой решение для отображения данных в табличном формате. Включает множество функций для управления данными. Например: фильтрация, группировка, пагинация, сортировка и многое другое.<\/p>\n<p>Основную сложность представляет его размер:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/blazor-3.png\" srcset=\"\/images\/blog\/1x\/blazor-3.png 1x, \/images\/blog\/2x\/blazor-3@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<p>Компонент достаточно гибок в настройке. Так как пользователи используют его по-разному. Всё это отражено в дизайне.<\/p>\n<p>Чтобы отрисовать такой компонент в Figma, задачу разбили на этапе:<\/p>\n<ul>\n<li>Изучить решения конкурентов.<\/li>\n<li>Изучить и собрать файл со скриншотами всех состояний компонента.<\/li>\n<li>Собрать все под-компоненты.<\/li>\n<li>Собрать итоговый компонент с разными сценариями использования.<\/li>\n<\/ul>\n<p>Собранный в Figma компонент сильно упростил разработку новых фич для грида. Также, упростило создание прототипов для проработки различных сценариев.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/blazor-4.png\" srcset=\"\/images\/blog\/1x\/blazor-4.png 1x, \/images\/blog\/2x\/blazor-4@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h3>Отрисованы новые компоненты<\/h3>\n<p>Создание новых компонентов включает следующие шаги:<\/p>\n<ul>\n<li>Обсудить требования с ПМом.<\/li>\n<li>Исследовать решения на рынке.<\/li>\n<li>Утвердить список фич.<\/li>\n<li>Найти грамотный подход по клавиатурной навигации (поддержка A11Y).<\/li>\n<li>Отрисовать компонент и все его составляющие.<\/li>\n<li>Описать компонент в дизайн-токенах.<\/li>\n<li>Проработать сценарии для демо-стендов.<\/li>\n<\/ul>\n<h4><b>Пример реализации компонента TreeList<\/b><\/h4>\n<p>Компонент TreeList — показывает табличные данные в виде древовидной структуры. Пользователи могут сворачивать и разворачивать данные, как им удобно.<\/p>\n<p>При подготовке к работе был произведен ресёрч конкурентов, собран список идей и их примерные способы реализации. На каждом этапе приходили синхронизационные встречи с менеджером продукта, разработчиками и другими заинтересованными лицами:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/blazor-5.png\" srcset=\"\/images\/blog\/1x\/blazor-5.png 1x, \/images\/blog\/2x\/blazor-5@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<p>Собранный в Figma компонент учитывает все сценарии использовании и состоянии:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/blazor-6.png\" srcset=\"\/images\/blog\/1x\/blazor-6.png 1x, \/images\/blog\/2x\/blazor-6@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2><b>Токенизация<\/b><\/h2>\n<p>Каждый компонент представлен в разных темах. Руками отрисовать или исправлять компонент в каждой теме очень дорого и ресурсозатратно.<\/p>\n<p>Было принято решение использовать дизайн-токены:<\/p>\n<ul>\n<li>Чтобы быстро обновлять стили компонента под любую тему.<\/li>\n<li>Гарантировать единообразие решений.<\/li>\n<li>Использовать токены как мостик между дизайном и разработкой.<\/li>\n<\/ul>\n<p>Была проведена большая работа над созданием архитектуры и структуры дизайн-токенов:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/blazor-7.png\" srcset=\"\/images\/blog\/1x\/blazor-7.png 1x, \/images\/blog\/2x\/blazor-7@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<p>Каждый компонент имеет полное покрытие токенами:<\/p>\n<ul>\n<li>color,<\/li>\n<li>font-weight,<\/li>\n<li>letter-spacing,<\/li>\n<li>line-height,<\/li>\n<li>border-radius,<\/li>\n<li>border-width,<\/li>\n<li>font-size,<\/li>\n<li>text-transform,<\/li>\n<li>opacity,<\/li>\n<li>box-shadow,<\/li>\n<li>size.<\/li>\n<\/ul>\n<p>Такой подход позволяет быстро создавать новые темы, просто выставляя новые значения в токенах. Для работы использовался плагин Tokens Studio for Figma. Потому что он позволяет покрыть большое количество типов токенов, в отличии от встроенного Figma Variables.<\/p>\n<p>В итоге, любой компонент в Figma легко протестировать с другими стилистическими настройками. А разработчики могут передавать значения токенов из Figma напрямую в свои стили.<\/p>\n<h2><b>Документирование<\/b><\/h2>\n<p>Дизайн-система описывает себя тремя основными способами:<\/p>\n<ul>\n<li><b>Компоненты и сценарии в Figma.<\/b> Главная точка входа в дизайн-систему.<\/li>\n<li><b>Дизайн-токены.<\/b> Служат мостом между дизайном и кодом.<\/li>\n<li><b>Внутренняя документация.<\/b> Содержит договоренности и рекомендации по разным аспектам дизайна: правила наименования, структура токенов, правила отрисовки иконок и так далее. Тут же можно найти результаты ресёрчей относящихся к различным дизайн-задачам.<\/li>\n<\/ul>\n<h2><b>UI Kit<\/b><\/h2>\n<p>Одним из результатов работы над дизайн-системой стал выпуск UI кита в Figma.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/blazor-8.png\" srcset=\"\/images\/blog\/1x\/blazor-8.png 1x, \/images\/blog\/2x\/blazor-8@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2><b>Результаты<\/b><\/h2>\n<ul>\n<li>Получилось собрать крепкий каркас дизайн-системы в Figma.<\/li>\n<li>Сильно улучшилась коммуникация дизайна и продукт-менеджеров.\n<ul>\n  <li>Появились еженедельные созвоны с продукт-менеджерами.<\/li>\n  <li>Работа над задачами стала идти быстрее, на всех этапах.<\/li>\n<\/ul>\n<\/li>\n<li>Работа между дизайном и разработкой стала эффективнее.\n<ul>\n  <li>Макеты стали намного подробнее.<\/li>\n  <li>Дополнительный слой информации передают дизайн-токены.<\/li>\n<\/ul>\n<\/li>\n<li>Появилась внутренняя документация.<\/li>\n<li>Пользователи получили UI kit.<\/li>\n<\/ul>\n",
            "date_published": "2024-03-25T20:30:02+04:00",
            "date_modified": "2024-03-30T23:41:16+04:00",
            "tags": [
                "Blazor"
            ],
            "image": "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg",
            "_date_published_rfc2822": "Mon, 25 Mar 2024 20:30:02 +0400",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg"
                ]
            }
        },
        {
            "id": "6",
            "url": "https:\/\/maximpetrov.ru\/blog\/all\/xaf\/",
            "title": "XAF",
            "content_html": "<p>DevExpress XAF — это фреймворк для создания бизнес-приложений. С его помощью можно делать как десктоп, так веб-приложения. Помогает разработчикам сосредоточится на бизнес-логике, а не на деталях реализации интерфейса или архитектуры приложения.<\/p>\n<p>Со своей стороны, занимался проектированием, развитием и поддержкой UX\/UI приложения в связке с ПМом. Разработкой новых фич, улучшение существующих, работой с обратной связью от пользователей.<\/p>\n<h2>Веб-приложение<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/xaf-2.png\" srcset=\"\/images\/blog\/1x\/xaf-2.png 1x, \/images\/blog\/2x\/xaf-2@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Десктопное приложение<\/h2>\n<h3>Общий вид<\/h3>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/xaf-3.png\" srcset=\"\/images\/blog\/1x\/xaf-3.png 1x, \/images\/blog\/2x\/xaf-3@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h3>Авторизация<\/h3>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/xaf-4.png\" srcset=\"\/images\/blog\/1x\/xaf-4.png 1x, \/images\/blog\/2x\/xaf-4@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Пак иконок<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/xaf-1.png\" srcset=\"\/images\/blog\/1x\/xaf-1.png 1x, \/images\/blog\/2x\/xaf-1@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n",
            "date_published": "2024-03-25T20:25:36+04:00",
            "date_modified": "2024-03-31T22:53:19+04:00",
            "tags": [
                "XAF"
            ],
            "image": "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg",
            "_date_published_rfc2822": "Mon, 25 Mar 2024 20:25:36 +0400",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg"
                ]
            }
        },
        {
            "id": "4",
            "url": "https:\/\/maximpetrov.ru\/blog\/all\/documentation\/",
            "title": "Documentation",
            "content_html": "<p>DevExpress Documentation — одна из самый объемных документации на рынке. Содержит несколько сотен тысяч статей и АПИ. Внутри для её работы создана целая экосистема, включающая в себя множество отдельных компонентов.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/docs-1.png\" srcset=\"\/images\/blog\/1x\/docs-1.png 1x, \/images\/blog\/2x\/docs-1@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Вводная<\/h2>\n<p>Долгое время единой системы документации не было. Всё состояло из отдельных проектов и отдавалось пользователям в формате довольно простых HTML файлов, либо в CHM формате.<\/p>\n<p>С развитием продуктовой линейки и увеличение штата технических писателей такой подход стал приносить неудобства как для сотрудников, так и для пользователей.<\/p>\n<p>Учитывай количество и объем документов, было принято решение сделать собственную систему документации.<\/p>\n<h2>Задачи<\/h2>\n<p>Система документации состоит из различных функциональных компонентов. При разработке дизайна нужно было учесть следующие факторы:<\/p>\n<ul>\n<li><b>Огромное количество написанных топиков.<\/b> Разные топики были написаны разными людьми, в разное время. Поэтому, сильно отличались по структуре. Нужно было найти такой подход к стилям, чтобы старые документы не ломали внешний вид страниц.<\/li>\n<li><b>Документацию читают с разных устройств.<\/b> Нужно было сделать документацию такой, чтобы её можно было читать на любом экране.<\/li>\n<li><b>Навигация по проекту должна быть удобной.<\/b> Структура каждого проекта документации древовидна, один проект может быть вложен в другой и так далее. Нужно сделать так, чтобы пользователь понимал, на каком уровне он находится и мог легко навигироваться между документами.<\/li>\n<li><b>Поиск по документу должен быть удобным.<\/b> Документы внутри проекта могут быть большими и сложными. Нужно сделать так, чтобы пользователь мог быстро найти ответ на свой вопрос внутри конкретного документа.<\/li>\n<li><b>Сделать разводящую страницу по проектам.<\/b> Новая система документации собирает все проекты в рамках одного сайта. Важно было сделать страницу, где пользователь может выбрать нужный ему проект.<\/li>\n<li><b>Содержимое документа может варьировать от версии продукта и его платформы.<\/b><\/li>\n<li><b>Совместно с техническими писателями подготовить гайдлайны по оформлению топиков.<\/b><\/li>\n<li><b>Учесть оффлайн документацию.<\/b> Часть пользователей, в свете специфики бизнеса, используют активно оффлайн версию документации. А именно, CHM. Поэтому, нужно было подготовить стили для оффлайн документации. Учитывая, что CHM поддерживает CSS уровня Internet Explorer 7 (и то не всегда) — это было очень непростой задачей.<\/li>\n<li><b>Поддержать интеграцию с саппорт-центром.<\/b> Сегмент пользователей читающих документацию и создающих тикеты в саппорт-центре тесно связан. Важно было найти такое решение, чтобы пользователь имел возможность создать тикет прямо из документации, если ему не понятен какой-то из топиков. И наоборот, если ссылку на топик дал сотрудник саппорт-центра, то нужно иметь возможность дополнительно уточнить у пользователя, помог ли ему этот топик.<\/li>\n<li><b>Сделать документацию доступной.<\/b> Сайт документации должен удовлетворять требования A11Y, чтобы им было удобно пользоваться всем пользователям.<\/li>\n<\/ul>\n<h2>Результат<\/h2>\n<p>Новая система документации получила положительный фидбек как со стороны пользователей, так и со стороны технических писателей. Основная часть задач была решения в рамках основной работы над проектом, многие дополнительные фичи — в рамках доработок по проекту.<\/p>\n<p>Кроме работы непосредственно над дизайном, я внёс большой вклад во фронденд составляющую сайта:<\/p>\n<ul>\n<li>Написал несколько функциональных фич.<\/li>\n<li>Обновил семантику сайта, для решения проблем связанных с доступностью.<\/li>\n<li>Активно работал со стилям в коде.<\/li>\n<\/ul>\n<h3>Примеры реализации<\/h3>\n<h4>Разводящая страница<\/h4>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/docs-2.png\" srcset=\"\/images\/blog\/1x\/docs-2.png 1x, \/images\/blog\/2x\/docs-2@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h4>Доступность со всех устройств<\/h4>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/docs-3.png\" srcset=\"\/images\/blog\/1x\/docs-3.png 1x, \/images\/blog\/2x\/docs-3@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h4>Доступность<\/h4>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/docs-4.png\" srcset=\"\/images\/blog\/1x\/docs-4.png 1x, \/images\/blog\/2x\/docs-4@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n",
            "date_published": "2024-03-25T20:24:46+04:00",
            "date_modified": "2024-03-31T21:36:56+04:00",
            "tags": [
                "Documentation"
            ],
            "image": "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg",
            "_date_published_rfc2822": "Mon, 25 Mar 2024 20:24:46 +0400",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg"
                ]
            }
        },
        {
            "id": "3",
            "url": "https:\/\/maximpetrov.ru\/blog\/all\/localization\/",
            "title": "Localization",
            "content_html": "<p>DevExpress Localization — механизмы и инструменты для локализации своих компонентов. Даёт возможность разработчикам и переводчикам легко переводить тексты и адаптировать приложения под нужные языковые и культурные требования.<\/p>\n<p>Задача — обновить устаревший интерфейс учитывая бизнес-требования.<\/p>\n<h2>Стартовая страница<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/localization-1.png\" srcset=\"\/images\/blog\/1x\/localization-1.png 1x, \/images\/blog\/2x\/localization-1@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Добавление перевода<\/h2>\n<h3>Выбор языка<\/h3>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/localization-2.png\" srcset=\"\/images\/blog\/1x\/localization-2.png 1x, \/images\/blog\/2x\/localization-2@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h3>Перевод слов<\/h3>\n<p>Пользователь может выбрать предложенный машинный перевод слова или ввести свой вариант самостоятельно.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/localization-3.png\" srcset=\"\/images\/blog\/1x\/localization-3.png 1x, \/images\/blog\/2x\/localization-3@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Статус всех переводов<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/localization-4.png\" srcset=\"\/images\/blog\/1x\/localization-4.png 1x, \/images\/blog\/2x\/localization-4@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n",
            "date_published": "2024-03-25T20:24:32+04:00",
            "date_modified": "2024-04-01T00:02:12+04:00",
            "tags": [
                "Localization"
            ],
            "image": "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg",
            "_date_published_rfc2822": "Mon, 25 Mar 2024 20:24:32 +0400",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "3",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg"
                ]
            }
        },
        {
            "id": "2",
            "url": "https:\/\/maximpetrov.ru\/blog\/all\/cloud4rpi\/",
            "title": "Cloud4RPi",
            "content_html": "<p>Cloud4RPi — это платформа для интернета вещей (IoT), предлагает разработчикам инструменты для быстрого создания и управления IoT устройствами. Поддерживает множество аппаратных платформ, включая Arduino, Raspberry Pi, ESP8266, ESP32 и другие.<\/p>\n<p>В рамках работы над проектом был разработан интерфейс и сценарии работы с панелью управления IoT девайсами.<\/p>\n<h2>Лендинг страница<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/cloud4rpi-1.png\" srcset=\"\/images\/blog\/1x\/cloud4rpi-1.png 1x, \/images\/blog\/2x\/cloud4rpi-1@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Панель управления<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/cloud4rpi-2.png\" srcset=\"\/images\/blog\/1x\/cloud4rpi-2.png 1x, \/images\/blog\/2x\/cloud4rpi-2@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Визард добавления девайса<\/h2>\n<h3>Выбор модели<\/h3>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/cloud4rpi-3.png\" srcset=\"\/images\/blog\/1x\/cloud4rpi-3.png 1x, \/images\/blog\/2x\/cloud4rpi-3@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h3>Инструкции<\/h3>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/cloud4rpi-4.png\" srcset=\"\/images\/blog\/1x\/cloud4rpi-4.png 1x, \/images\/blog\/2x\/cloud4rpi-4@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h3>Устройство добавлено<\/h3>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/cloud4rpi-5.png\" srcset=\"\/images\/blog\/1x\/cloud4rpi-5.png 1x, \/images\/blog\/2x\/cloud4rpi-5@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Управление подпиской<\/h2>\n<h3>Настройка пакетов<\/h3>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/cloud4rpi-6.png\" srcset=\"\/images\/blog\/1x\/cloud4rpi-6.png 1x, \/images\/blog\/2x\/cloud4rpi-6@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h3>Покупка дополнительных пакетов<\/h3>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/cloud4rpi-7.png\" srcset=\"\/images\/blog\/1x\/cloud4rpi-7.png 1x, \/images\/blog\/2x\/cloud4rpi-7@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n",
            "date_published": "2024-03-25T20:24:17+04:00",
            "date_modified": "2024-04-02T00:40:35+04:00",
            "tags": [
                "Cloud4RPi"
            ],
            "image": "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg",
            "_date_published_rfc2822": "Mon, 25 Mar 2024 20:24:17 +0400",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "2",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg"
                ]
            }
        },
        {
            "id": "1",
            "url": "https:\/\/maximpetrov.ru\/blog\/all\/support-center\/",
            "title": "Support Center",
            "content_html": "<p>Система поддержки пользователей. Включает различные информационные ресурсы: вопросы от пользователей, статьи в базе знаний и истории версий.<\/p>\n<p>Ежедневно в Support Center создаются сотни новых вопросов и на них отвечают десятки саппорт-инженеров. За годы работы старый интерфейс устарел как внешне, так и с точки зрения удобства и функциональности. Пришла задача полностью переработать платформу, с учётом всех бизнес-требований.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/sc-1.png\" srcset=\"\/images\/blog\/1x\/sc-1.png 1x, \/images\/blog\/2x\/sc-1@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Вводная<\/h2>\n<p>Система состоит из трёх основных порталов:<\/p>\n<ul>\n<li>Клиентский портал<\/li>\n<li>Внутренний портал для сотрудников<\/li>\n<li>Админ-панель<\/li>\n<\/ul>\n<p>Каждым порталом пользуется свой сегмент пользователей. Клиенты компании ожидают простой и понятный интерфейс. В то время как саппорт-инженеры привыкли к определенным сценариям, которые тоже нужно было сохранить.<\/p>\n<h2>Клиентский портал<\/h2>\n<p>На этот ресурс были задействованы основные силы. Клиентский портал даёт возможность клиентам задавать вопросы технического характера и получать на них ответы.<\/p>\n<p>Перед редизайном ставились следующие задачи:<\/p>\n<ul>\n<li><b>Снизить нагрузку на саппорт-инженеров.<\/b> Помочь пользователям находить ответы самостоятельно, если на вопрос уже отвечали ранее или решение описано в документации.<\/li>\n<li><b>Улучшить UX.<\/b> Накопился список проблем, которые нужно было решать:\n<ul>\n  <li><b>Пользователи выбирают неверный продукт при создании вопроса.<\/b> DevExpress разрабатывает и поддерживает десятки продуктов. У каждого продукта могут быть разные платформы и версии. Иногда важно знать, какая ОС установлена у пользователя, каким IDE он пользуется. Нужно было сделать так, чтобы у пользователя не возникали проблемы при выборе нужных значений. Помочь ему на этом пути.<\/li>\n  <li><b>Возникают проблемы при форматировании текста.<\/b> Пользователи приходят в поддержку с техническими проблемами. Описание проблемы содержит куски кода или целые архивы с проектами. В старой версии сайта пользователи путались в текстовом редакторе и отправляли не отформатированные куски куда, которые сливались с обычным текстом. Также, пользователи не всегда понимали как аттачить файлы. Всё это приводило к дополнительной нагрузке на саппорт-инженеров.<\/li>\n  <li><b>Пользователи не замечают уведомления об ответах в их тикете.<\/b> Проблема касалась как веб-интерфейса, так и уведомлений приходящих пользователю на почту. Пользователи либо не замечали уведомления, либо не понимали к чему они относятся, либо ранее отключали уведомления и забывали об этом. В связи с этим, среднее время на решение таких тикетов значительно увеличивалось.<\/li>\n  <li><b>Клиенты из одной и той же компании не видят вопросы друг друга.<\/b> Большинство клиентов предпочитает оставлять свои вопросы приватно. Чтобы их могли видеть только саппорт-инженеры. Из-за этого возникала проблема, что вопросы становились приватными полностью и их не могли видеть даже сотрудники одной и той же компании с разных аккаунтов.<\/li>\n  <li><b>Неудобные фильтры.<\/b> Пользователи, что на странице со списком публичных тикетов невозможно ничего найти. Фильтров мало, а то, что есть не всегда работает очевидным образом.<\/li>\n<\/ul>\n<\/li>\n<li><b>Переосмыслить встроенный инструмент “Version History”.<\/b><\/li>\n<li><b>Улучшить аналитику.<\/b><\/li>\n<li><b>Освежить внешний вид.<\/b><\/li>\n<\/ul>\n<h3>Подготовка к работе<\/h3>\n<p>Перед началом работы над редизайном была проведена подготовительная работы. Подготовлен общий план работы и проведены встречи со всеми заинтересованными лицами. Был подготовлен итоговый бриф проекта.<\/p>\n<p>Часть работ, которые были проведены на этом этапе:<\/p>\n<ul>\n<li><b>Анализ текущего дизайна.<\/b> UX-тестирование текущего сайта, поиск проблем.<\/li>\n<li><b>Ресёрч конкурентов.<\/b> Изучение как прямых конкурентов, так и решений крупных платформ. Например, Zendesk, Freshdesk, Zoho Desk.<\/li>\n<li><b>Сбор и анализ существующего фидбека.<\/b> За годы работы, накопилось большое количество тикетов, комментарием и другой обратной связи касаемо работы портала. Была проведена большая работу по сбору всей это информации в один документ, её анализу и приоритизации.<\/li>\n<li><b>Сбор информации от саппорт-инженеров.<\/b> Инженеры поддержки активнее всего общаются с пользователями и знают детали и проблемы, которые могут быть неизвестны и неочевидны другим членам команды.<\/li>\n<li><b>Изучение текущих данных аналитики и список того, что хотим собирать ещё в новом дизайне.<\/b> Для работы с данными использовались:  Google Analytics (+Google Tag Manager), Matomo, внутренние инструменты.<\/li>\n<li><b>Сбор требований от заказчиков и всех заинтересованных лиц.<\/b><\/li>\n<li><b>Подготовка брифа.<\/b> Описание проблем, целей и задач. Развёрнутый ответ на вопрос, что мы будем считать успешным редизайном.<\/li>\n<\/ul>\n<h3>Процесс<\/h3>\n<p>Работа над сайтом строилась 2-4 недельными спринтами. В конце каждого спринта проводились синхронизационные встречи с заказчиками.<\/p>\n<p>В начале работы над дизайном была согласована общая концепция. Отрисованы низко детализированные прототипы с решением основных UX проблем. Найден общий подход к внешнему виду.<\/p>\n<p>Чтобы работа над новым дизайном была эффективной и обратная связь поступала как можно быстрее был принят рад мер:<\/p>\n<ul>\n<li>Продукт менеджер продукта показывал прототипы и просто картинки небольшой выборке самых активных и заинтересованных пользователей саппорт-центра. Благодаря этому получалось очень быстро собрать много полезной информации, которая помогала намного быстрее замечать точки роста.<\/li>\n<li>Тесное общение с разработчиками. Так дизайн значительно обгонял разработку, нужно было сразу учитывать технические ограничения. Для этого проводились постоянные встречи между разработчикам, заказчиками и дизайнером. Так мы оценивали техническую сложность каждой фичи и на основе этого принимали решение, будем мы брать её в работу или нет.<\/li>\n<li>На этапе, когда появилась первая работающая версия сайта, его стали тестировать сотрудники. В первую очередь, к тестированию подключались саппорт-инженеры. На этом этапе было собрано большое количество фидбека как по техническим багам, визуальным багам, так и просто по неудачным UX-решениям.<\/li>\n<li>На следующем этапе снова к фидбеку снова были подключены активные клиенты. Которые были готовы дать развёрнутый фидбек.<\/li>\n<li>На одном из финальных этапов сайт стал доступен для всех пользователей, но в виде бета-версии. При этом, каждый пользователь мог вернуться к старой версии сайта. Со временем, пользователей вернувшихся на старый сайт становилось меньше. Также, мы старались собирать фидбек от таких пользователей. Чтобы понять, почему они вернулись на старую версию сайта.<\/li>\n<li>К новой версии сайта была прикручена продвинутая аналитика.<\/li>\n<\/ul>\n<h3>Примеры реализации<\/h3>\n<h4>Релевантные подсказки при создании тикета<\/h4>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/sc-2.png\" srcset=\"\/images\/blog\/1x\/sc-2.png 1x, \/images\/blog\/2x\/sc-2@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h4>Упрощена навигация по дискуссии с ветвистой иерархией<\/h4>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/sc-3.png\" srcset=\"\/images\/blog\/1x\/sc-3.png 1x, \/images\/blog\/2x\/sc-3@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h4>Обновлены инструменты фильтра на странице со списком тикетов<\/h4>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/sc-4.png\" srcset=\"\/images\/blog\/1x\/sc-4.png 1x, \/images\/blog\/2x\/sc-4@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h4>Сделана мобильная версия под разные размеры<\/h4>\n<h2>Внутренний портал и админ-панель<\/h2>\n<p>Отдельной крупной задачей была необходимость сделать внутренний портал для сотрудников. Главным вызовом было задача учесть флоу саппорт-инженеров из разных команд. Ингода оно сильно отличалось и нужно было найти решения, которые устроят всех.<\/p>\n<p>Для этого проводилось множество сложных встреч с саппорт-инженерами из разных команд и топ-саппортом. По каким-то сценариям приходилось идти на компромиссы, по каким-то — выбирать один вариант и убеждать в правильности этого варианта остальных.<\/p>\n<p>В результате, судя по опросам и личным разговорам, большая часть сотрудников осталась довольна новой системой.<\/p>\n<p>Также, для более гибкой работы и настройки системы под текущие нужды бизнеса была спроектирована админ-панель, где можно точечно настроить различные параметры системы.<\/p>\n<p>Так как решения внутренние, вдаваться в подробности и показывать скриншоты я не могу.<\/p>\n<h2>Результаты<\/h2>\n<p>В итоге, полный переход на новую версию получился безболезненным. На каждой итерации выявлялись проблемные места и не учтённые сценарий. Большая часть из них решалась, от небольшой части осознанно отказывались.<\/p>\n<p>Старая версия сайта постепенно была отключена, когда количество её пользователей стало совсем небольшим.<\/p>\n<p>Общая оценка редизайна была оценена как успешная. Как со стороны клиентов, так и со стороны сотрудников. Поставленные перед редизайном цели были достигнуты:<\/p>\n<ul>\n<li><b>Уменьшилась нагрузка на саппорт-инженеров.<\/b>\n<ul>\n  <li>Пользователи стали чаще находить решения самостоятельно: улучшен движок поиска, предлагаются релевантные ссылки при создании тикета, улучшена фильтрация.<\/li>\n  <li>Пользователи стали реже ошибаться с выбором платформы\/продукта и других деталей при создании тикета.<\/li>\n  <li>Во внутреннем портале появились инструменты, помогающие саппорт-инженерам быстрее отвечать на тикеты, ответ на которые уже давался ранее.<\/li>\n<\/ul>\n<\/li>\n<li><b>Не отформатированные тикеты появляются гораздо реже.<\/b> Решилась проблема с тем, что пользователи не понимали, как отправлять аттачи.<\/li>\n<li><b>Уменьшилось количество проблем, когда пользователи не получают уведомления вовремя.<\/b>\n<ul>\n  <li>В настройках уведомлений появился отдельный чекбокс, для получения уведомлений от саппорт-центра (раньше был единый чекбокс, для всех почтовых рассылок).<\/li>\n  <li>Даже если пользователь отключил уведомления от таких рассылок, то саппорт-инженер будет об этом знать. И, если у пользователя возникают с этим проблемы, подсказать варианты решения.<\/li>\n  <li>Сами почтовые уведомления стали понятнее, появилась возможность подключить браузерные уведомления.<\/li>\n  <li>Появилась возможность подписать на рассылку на любой тикет со страницы этого тикета.<\/li>\n<\/ul>\n<\/li>\n<li><b>Более точечно настроена аналитика.<\/b>\n<ul>\n  <li>Саппорт-инженер теперь может видеть карточку пользователя с историей посещений тикетов и документов в документации. Так инженер поддержки сразу может понять, какие ссылки есть смысл советовать, а какие — нет, так как пользователь их уже посещал.<\/li>\n  <li>Добавлены ивенты на целевые действия.<\/li>\n  <li>Созданный внутренние дашборды с анализом различных данных, необходимых для оценки поступаемого  количества тикетов и оценки эффективности саппорта.<\/li>\n<\/ul>\n<\/li>\n<li><b>Поиск по тикетам стал гибче и проще.<\/b>\n<ul>\n  <li>Были докручены мета-теги, чтобы тикеты лучше искались поисковиками.<\/li>\n  <li>Переосмыслены фильтры, добавлены готовые пресеты и возможность подписаться на созданный фильтр.<\/li>\n  <li>Оптимизирована внутренняя страница поиска.<\/li>\n<\/ul>\n<\/li>\n<li><b>Сделана мобильная версия клиентского портала.<\/b><\/li>\n<\/ul>\n",
            "date_published": "2024-03-25T20:23:20+04:00",
            "date_modified": "2024-04-02T00:38:50+04:00",
            "tags": [
                "Support Center"
            ],
            "image": "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg",
            "_date_published_rfc2822": "Mon, 25 Mar 2024 20:23:20 +0400",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "1",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg"
                ]
            }
        }
    ],
    "_e2_version": 4116,
    "_e2_ua_string": "Aegea 11.2 (v4116e)"
}