https://maximpetrov.ru/blog/tags/documentation-2/ UI/UX-дизайнер ru Aegea 11.2 (v4116e) mail@maximpetrov.ru UI/UX-дизайнер no 4 https://maximpetrov.ru/blog/all/documentation/ Mon, 25 Mar 2024 20:24:46 +0400 https://maximpetrov.ru/blog/all/documentation/ <p>DevExpress Documentation — одна из самый объемных документации на рынке. Содержит несколько сотен тысяч статей и АПИ. Внутри для её работы создана целая экосистема, включающая в себя множество отдельных компонентов.</p> <div class="e2-text-picture"> <img src="https://maximpetrov.ru/blog/pictures/empty-image.jpg" width="2560" height="10" alt="" /> <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> </div> <h2>Вводная</h2> <p>Долгое время единой системы документации не было. Всё состояло из отдельных проектов и отдавалось пользователям в формате довольно простых HTML файлов, либо в CHM формате.</p> <p>С развитием продуктовой линейки и увеличение штата технических писателей такой подход стал приносить неудобства как для сотрудников, так и для пользователей.</p> <p>Учитывай количество и объем документов, было принято решение сделать собственную систему документации.</p> <h2>Задачи</h2> <p>Система документации состоит из различных функциональных компонентов. При разработке дизайна нужно было учесть следующие факторы:</p> <ul> <li><b>Огромное количество написанных топиков.</b> Разные топики были написаны разными людьми, в разное время. Поэтому, сильно отличались по структуре. Нужно было найти такой подход к стилям, чтобы старые документы не ломали внешний вид страниц.</li> <li><b>Документацию читают с разных устройств.</b> Нужно было сделать документацию такой, чтобы её можно было читать на любом экране.</li> <li><b>Навигация по проекту должна быть удобной.</b> Структура каждого проекта документации древовидна, один проект может быть вложен в другой и так далее. Нужно сделать так, чтобы пользователь понимал, на каком уровне он находится и мог легко навигироваться между документами.</li> <li><b>Поиск по документу должен быть удобным.</b> Документы внутри проекта могут быть большими и сложными. Нужно сделать так, чтобы пользователь мог быстро найти ответ на свой вопрос внутри конкретного документа.</li> <li><b>Сделать разводящую страницу по проектам.</b> Новая система документации собирает все проекты в рамках одного сайта. Важно было сделать страницу, где пользователь может выбрать нужный ему проект.</li> <li><b>Содержимое документа может варьировать от версии продукта и его платформы.</b></li> <li><b>Совместно с техническими писателями подготовить гайдлайны по оформлению топиков.</b></li> <li><b>Учесть оффлайн документацию.</b> Часть пользователей, в свете специфики бизнеса, используют активно оффлайн версию документации. А именно, CHM. Поэтому, нужно было подготовить стили для оффлайн документации. Учитывая, что CHM поддерживает CSS уровня Internet Explorer 7 (и то не всегда) — это было очень непростой задачей.</li> <li><b>Поддержать интеграцию с саппорт-центром.</b> Сегмент пользователей читающих документацию и создающих тикеты в саппорт-центре тесно связан. Важно было найти такое решение, чтобы пользователь имел возможность создать тикет прямо из документации, если ему не понятен какой-то из топиков. И наоборот, если ссылку на топик дал сотрудник саппорт-центра, то нужно иметь возможность дополнительно уточнить у пользователя, помог ли ему этот топик.</li> <li><b>Сделать документацию доступной.</b> Сайт документации должен удовлетворять требования A11Y, чтобы им было удобно пользоваться всем пользователям.</li> </ul> <h2>Результат</h2> <p>Новая система документации получила положительный фидбек как со стороны пользователей, так и со стороны технических писателей. Основная часть задач была решения в рамках основной работы над проектом, многие дополнительные фичи — в рамках доработок по проекту.</p> <p>Кроме работы непосредственно над дизайном, я внёс большой вклад во фронденд составляющую сайта:</p> <ul> <li>Написал несколько функциональных фич.</li> <li>Обновил семантику сайта, для решения проблем связанных с доступностью.</li> <li>Активно работал со стилям в коде.</li> </ul> <h3>Примеры реализации</h3> <h4>Разводящая страница</h4> <div class="e2-text-picture"> <img src="https://maximpetrov.ru/blog/pictures/empty-image.jpg" width="2560" height="10" alt="" /> <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> </div> <h4>Доступность со всех устройств</h4> <div class="e2-text-picture"> <img src="https://maximpetrov.ru/blog/pictures/empty-image.jpg" width="2560" height="10" alt="" /> <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> </div> <h4>Доступность</h4> <div class="e2-text-picture"> <img src="https://maximpetrov.ru/blog/pictures/empty-image.jpg" width="2560" height="10" alt="" /> <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> </div>