Человек, всерьёз и долго занимающийся исследованиями, накапливает в своей базе множество материалов, которые могут быть интересны и другим. Интернет позволяет с лёгкостью поделиться ими. Однако, прежде чем публиковать массив документов, нужно продумать структуру платформы, с помощью которой пользователь бы смог быстро найти нужный материал и ознакомиться с ним.
Несмотря на то, что задача организации и публикации материалов через веб-сайт кажется весьма несложной, встречаются примеры, когда результат свидетельствует об обратном. В этой статье мы рассмотрим ошибки, которые можно допустить при создании сайта персонального архива, на примере www.aldricharchive.co.uk
Этот сайт является личным архивом Майкла Олдрича (Michael Aldrich) – одного из пионеров онлайн-торговли, человека, благодаря которому была совершена первая в мире онлайн-покупка.
Личный архив занимает место где-то между сайтом-визиткой и энциклопедией.
Первая особенность личного архива: количество материалов, которые публикуются, обычно находится в диапазоне от нескольких десятков до нескольких сотен единиц. Это, с одной стороны не так мало, чтобы публиковать их «врассыпную», как это бывает с сайтами-визитками; с другой – не так много, чтобы обойтись без явной структуры, как в случае с Wikipedia, Archive, Youtube и иными ресурсами, насчитывающими сотни тысяч и миллионы единиц.
Вторая особенность: количество тем, под которые попадают материалы, малó, обычно не превосходит 10, что позволяет без труда их категоризировать.
Далее мы на примерах рассмотрим три типа ошибок: ошибки вёрстки, ошибки юзабилити и ошибки навигации. Нужно отметить, что ошибки сами по себе не являются уникальными, некоторые из них созвучны с теми, что мы описали в статье об интерфейсных проблемах Facebook* (компания Meta, владеющая платформой, признана в РФ экстремистской). Подробнее о проблемах, с которыми сталкиваются пользователи при работе с интерфейсами, см. в книге «UX/UI дизайн: практическое руководство».
Ошибки вёрстки часто не являются критическими для использования, тем не менее они отрицательно влияют на восприятие пользователя.
Первая проблема связана с организацией текста. Обычно в web принято писать текст в одну колонку. И хотя никто не запрещает использовать две и более колонок, однако такая вёрстка сопряжена с рядом рисков, один из которых – слом текста из-за недостатка места.
Так, на следующем скриншоте мы видим, что слово «Publications» не поместилось по ширине в отведенные рамки и переломилось на две части. Ничего особенного, но с эстетической точки зрения неудачно. Решается проблема крайне просто: текст организуется в одну колонку, заголовок является отдельным абзацем и выделяется особым образом (в данном случае увеличивается кегль).
Далее представлен ещё один пример неудачной организации текста в колонки. Здесь за счет выравнивания по центру образуются рваные края. Как следствие – промежутки между колонками выглядят неаккуратно. В данном случае опять могла бы помочь организация текста в один столбец. Альтернативный вариант – выравнивание по ширине.
Проблема рваного края встречается и при оформлении списков. Исправляется крайне просто – списки выравниваются по левому краю, а никак не по центру.
Напоследок предлагаем совсем уж кошмарный пример: восемь текстовых ссылок в три колонки. Комментарии излишни.
Под ошибками юзабилити мы понимаем провоцирование пользователя на ненужные действия.
Выше мы уже отмечали, что организация текста в несколько колонок по типу журнала – не самая лучшая идея для веб-сайта. Дополнительный аргумент в пользу этой точки зрения такой: длинный текст (превышающий 1.5 экрана) провоцирует пользователя на возвратный скроллинг, так как при чтении первой колонки он прокручивает страницу вниз, а чтобы вернуться ко второй, ему нужно прокрутить вверх. Решается всё так же – организацией текста в одну колонку.
Специфика рассматриваемого сайта в том, что он содержит много ссылок на материалы, которые когда-то давно выходили в прессе. На сегодняшний день нет никаких сложностей оцифровать их, однако нужно учитывать, в каком виде их увидит пользователь, когда перейдёт по ссылке. Скан страницы, имеющей альбомную ориентацию, представленный в книжном виде – не лучший вариант. Правильно, когда пользователь после перехода по ссылке может читать текст без необходимости совершать лишние действия: переворачивать страницы, увеличивать/уменьшать масштаб и т.п. Пожалуй, идеальный вариант при наличии сканов периодических изданий – перевести текст в веб с дополнительной ссылкой на оригинал для любителей проверять первоисточники.
Для информационного сайта навигация – это основная процедура. Именно она позволяет пользователю удобно перемещаться и находить то, что его интересует. Если навигация сделана неудачно, то обращение с сайтом становится крайне проблематичным.
Первая проблема навигации, с которой можно столкнуться, – это дублирование. Суть дублирования – появление навигации более одного раза. Например, когда у пользователя есть не только верхняя навигационная панель, но и дублирующая её копия, расположенная в футере.
Второй вариант дублирования может выглядеть как одновременное использование навигационной панели и страницы с разделами сайта, которые частично или полностью копируют навигационную панель.
Если представить дублирующуюся навигацию в виде графа, то обнаружится зацикливание. Например, со страницы «home» можно перейти на «introduction to archive» и «data capture», а со страницы «introduction to archive» – на страницу «data capture». Качественная навигация должна разделять сайт на непересекающиеся разделы, независимые ветви. В данном случае страница «introduction to archive» избыточна, её стоило удалить или, что ещё лучше, совместить с домашней.
Дублирование навигации – это довольно редкий случай, а вот петли встречаются значительно чаще. Под петлёй в навигации мы понимаем несколько ветвей навигации, которые сходятся в одной точке.
Еще одна проблема навигации – это глубина или, другими словами, количество промежуточных шагов, которые необходимо совершить пользователю, прежде чем он попадёт в конечную точку дерева навигации. Чем меньше уровней в навигации, тем она лучше. Чем более понятны, предсказуемы, логичны эти уровни, тем лучше.
На рассматриваемом сайте есть проблемы как с глубиной, так и с понятностью. Вот фрагмент дерева навигации. Здесь каждый следующий столбец – это новый уровень. Цвета имеют следующее значение:
Что мы видим на данном фрагменте? Во-первых, достаточно большая глубина: пользователю необходимо сделать до четырёх (!) шагов, пока он не попадёт в нужное место. Во-вторых, на разных уровнях навигации рядом присутствуют различные по содержанию страницы: навигационные соседствуют с внутренними статьями и внешними PDF-файлами. Такое смешение снижает предсказуемость перемещения, пользователь не может заранее предсказать, куда он попадёт – на внутреннюю страницу, или на внешний файл, или вообще на внешний сайт. Визуально эти варианты на сайте никак не выделяются, что является ещё одной навигационной ошибкой.
Для сравнения, в Wikipedia ссылки на фрагменты текущей страницы и ссылки на внешние ресурсы обозначаются по-разному -- в первом случае стрелкой, направленной вверх, во втором – стрелкой вверх и вправо.
На наш взгляд, оптимальный вариант навигации для сайта индивидуального архива – это лента со всеми статьями сайта, дополненная фильтрами в виде категорий. Так, на пример, организована база знаний издательства «Ливрезон».
Несколько рекомендаций для создания сайта личного архива – на основе описанных ошибок.
1. Не пытайтесь изобрести собственную вёрстку. Используйте стандартные для web решения: текст – в одну колонку, а список выравнивается по левому краю.
2. При ссылках на внешние PDF-файлы убедитесь в том, что они представлены в удобном для чтения виде без необходимости совершать дополнительные действия, вроде поворота и изменения масштаба.
3. Избегайте многоуровневой навигации. Организуйте материалы сплошным списком с возможностью фильтрации по системе категорий.
4. Визуально разделяйте ссылки на внутренние материалы и внешние источники.
О следующем шаге читайте в статье «Сайт личного архива: исправляем ошибки».
Концентрированная книга издательства LIVREZON складывается из сотен и тысяч проанализированных источников литературы и масс-медиа. Авторы скрупулёзно изучают книги, статьи, видео, интервью и делятся полезными материалами, формируя коллективную Базу знаний.
Пример – это фактурная единица информации: небанальное воспроизводимое преобразование, которое используется в исследовании. Увы, найти его непросто. С 2017 года наш Клуб авторов собрал более 80 тысяч примеров. Часть из них мы ежедневно публикуем здесь.
Каждый фрагмент Базы знаний относится к одной или нескольким категориям и обладает точной ссылкой на первоисточник. Продолжите читать материалы по теме или найдите книгу, чтобы изучить её самостоятельно.
📎 База знаний издательства LIVREZON – только полезные материалы.