{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Максим Петров: заметки с тегом Documentation", "_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\/tags\/documentation-2\/", "feed_url": "https:\/\/maximpetrov.ru\/blog\/tags\/documentation-2\/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": "4", "url": "https:\/\/maximpetrov.ru\/blog\/all\/documentation\/", "title": "Documentation", "content_html": "

DevExpress Documentation — одна из самый объемных документации на рынке. Содержит несколько сотен тысяч статей и АПИ. Внутри для её работы создана целая экосистема, включающая в себя множество отдельных компонентов.<\/p>\n

\n\"\"\n
<\/div>\n<\/div>\n

Вводная<\/h2>\n

Долгое время единой системы документации не было. Всё состояло из отдельных проектов и отдавалось пользователям в формате довольно простых HTML файлов, либо в CHM формате.<\/p>\n

С развитием продуктовой линейки и увеличение штата технических писателей такой подход стал приносить неудобства как для сотрудников, так и для пользователей.<\/p>\n

Учитывай количество и объем документов, было принято решение сделать собственную систему документации.<\/p>\n

Задачи<\/h2>\n

Система документации состоит из различных функциональных компонентов. При разработке дизайна нужно было учесть следующие факторы:<\/p>\n

    \n
  • Огромное количество написанных топиков.<\/b> Разные топики были написаны разными людьми, в разное время. Поэтому, сильно отличались по структуре. Нужно было найти такой подход к стилям, чтобы старые документы не ломали внешний вид страниц.<\/li>\n
  • Документацию читают с разных устройств.<\/b> Нужно было сделать документацию такой, чтобы её можно было читать на любом экране.<\/li>\n
  • Навигация по проекту должна быть удобной.<\/b> Структура каждого проекта документации древовидна, один проект может быть вложен в другой и так далее. Нужно сделать так, чтобы пользователь понимал, на каком уровне он находится и мог легко навигироваться между документами.<\/li>\n
  • Поиск по документу должен быть удобным.<\/b> Документы внутри проекта могут быть большими и сложными. Нужно сделать так, чтобы пользователь мог быстро найти ответ на свой вопрос внутри конкретного документа.<\/li>\n
  • Сделать разводящую страницу по проектам.<\/b> Новая система документации собирает все проекты в рамках одного сайта. Важно было сделать страницу, где пользователь может выбрать нужный ему проект.<\/li>\n
  • Содержимое документа может варьировать от версии продукта и его платформы.<\/b><\/li>\n
  • Совместно с техническими писателями подготовить гайдлайны по оформлению топиков.<\/b><\/li>\n
  • Учесть оффлайн документацию.<\/b> Часть пользователей, в свете специфики бизнеса, используют активно оффлайн версию документации. А именно, CHM. Поэтому, нужно было подготовить стили для оффлайн документации. Учитывая, что CHM поддерживает CSS уровня Internet Explorer 7 (и то не всегда) — это было очень непростой задачей.<\/li>\n
  • Поддержать интеграцию с саппорт-центром.<\/b> Сегмент пользователей читающих документацию и создающих тикеты в саппорт-центре тесно связан. Важно было найти такое решение, чтобы пользователь имел возможность создать тикет прямо из документации, если ему не понятен какой-то из топиков. И наоборот, если ссылку на топик дал сотрудник саппорт-центра, то нужно иметь возможность дополнительно уточнить у пользователя, помог ли ему этот топик.<\/li>\n
  • Сделать документацию доступной.<\/b> Сайт документации должен удовлетворять требования A11Y, чтобы им было удобно пользоваться всем пользователям.<\/li>\n<\/ul>\n

    Результат<\/h2>\n

    Новая система документации получила положительный фидбек как со стороны пользователей, так и со стороны технических писателей. Основная часть задач была решения в рамках основной работы над проектом, многие дополнительные фичи — в рамках доработок по проекту.<\/p>\n

    Кроме работы непосредственно над дизайном, я внёс большой вклад во фронденд составляющую сайта:<\/p>\n

      \n
    • Написал несколько функциональных фич.<\/li>\n
    • Обновил семантику сайта, для решения проблем связанных с доступностью.<\/li>\n
    • Активно работал со стилям в коде.<\/li>\n<\/ul>\n

      Примеры реализации<\/h3>\n

      Разводящая страница<\/h4>\n
      \n\"\"\n
      <\/div>\n<\/div>\n

      Доступность со всех устройств<\/h4>\n
      \n\"\"\n
      <\/div>\n<\/div>\n

      Доступность<\/h4>\n
      \n\"\"\n
      <\/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" ] } } ], "_e2_version": 4116, "_e2_ua_string": "Aegea 11.2 (v4116e)" }