Сайт личного архива: ошибки при создании

0
Автор статьи: Алексей Литвин4/11/2024

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

Несмотря на то, что задача организации и публикации материалов через веб-сайт кажется весьма несложной, встречаются примеры, когда результат свидетельствует об обратном. В этой статье мы рассмотрим ошибки, которые можно допустить при создании сайта персонального архива, на примере 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-файл со сканом статьи
  • Оранжевый (сплошной) –ссылка на внешний веб-сайт
  • Фиолетовый – внутренняя статья без дальнейшего ветвления

Что мы видим на данном фрагменте? Во-первых, достаточно большая глубина: пользователю необходимо сделать до четырёх (!) шагов, пока он не попадёт в нужное место. Во-вторых, на разных уровнях навигации рядом присутствуют различные по содержанию страницы: навигационные соседствуют с внутренними статьями и внешними PDF-файлами. Такое смешение снижает предсказуемость перемещения, пользователь не может заранее предсказать, куда он попадёт – на внутреннюю страницу, или на внешний файл, или вообще на внешний сайт. Визуально эти варианты на сайте никак не выделяются, что является ещё одной навигационной ошибкой.

Для сравнения, в Wikipedia ссылки на фрагменты текущей страницы и ссылки на внешние ресурсы обозначаются по-разному -- в первом случае стрелкой, направленной вверх, во втором – стрелкой вверх и вправо.

На наш взгляд, оптимальный вариант навигации для сайта индивидуального архива – это лента со всеми статьями сайта, дополненная фильтрами в виде категорий. Так, на пример, организована база знаний издательства «Ливрезон».

Что мы рекомендуем

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

1. Не пытайтесь изобрести собственную вёрстку. Используйте стандартные для web решения: текст – в одну колонку, а список выравнивается по левому краю.

2. При ссылках на внешние PDF-файлы убедитесь в том, что они представлены в удобном для чтения виде без необходимости совершать дополнительные действия, вроде поворота и изменения масштаба.

3. Избегайте многоуровневой навигации. Организуйте материалы сплошным списком с возможностью фильтрации по системе категорий.

4. Визуально разделяйте ссылки на внутренние материалы и внешние источники.

О следующем шаге читайте в статье «Сайт личного архива: исправляем ошибки».

Сильные разработки создаются не в одиночку, а в коллективе. LIVREZON CLUB объединяет более 50-ти коллективов в разных отраслях научного знания. В ежедневном режиме они делятся опытом, собирают новые данные, пишут книги и статьи, тестируют технологии и получают друг от друга полезную обратную связь. 

Хотите присоединиться к коллективу разработчиков? Пишите на info@livrezon.com

ЧТО ТАКОЕ БАЗА ЗНАНИЙ?

Концентрированная книга издательства LIVREZON складывается из сотен и тысяч проанализированных источников литературы и масс-медиа. Авторы скрупулёзно изучают книги, статьи, видео, интервью и делятся полезными материалами, формируя коллективную Базу знаний. 

Пример – это фактурная единица информации: небанальное воспроизводимое преобразование, которое используется в исследовании. Увы, найти его непросто. С 2017 года наш Клуб авторов собрал более 80 тысяч примеров. Часть из них мы ежедневно публикуем здесь. 

Каждый фрагмент Базы знаний относится к одной или нескольким категориям и обладает точной ссылкой на первоисточник. Продолжите читать материалы по теме или найдите книгу, чтобы изучить её самостоятельно.  

📎 База знаний издательства LIVREZON – только полезные материалы.

Следующая статья
Livrezon-технологии
ДНЕВНИК ПЕДАГОГА. Запись #71: Как «выучить» таблицу умножения
«Учите таблицу умножения,  а то разбудят вас посреди ночи, а вам и сказать нечего» Из интернета Арифметическую операцию «умножение» в школе обычно проходят во втором классе. Предполагается, что дети к этому моменту уже освоили операции «сложение» и «вычитание», легко и без ошибок складывают и вычитают числа в пределах первой сотни.  Школьная программа начальной школы традиционно строится последовательно: от простого к сложному, от частного к общему. Темы разбиты на минимально воз...
Livrezon-технологии
ДНЕВНИК ПЕДАГОГА. Запись #71: Как «выучить» таблицу умножения
Livrezon-технологии
Интерфейс как форма выражения процедуры: как устроен калькулятор
Бизнес и экономика
Как социальная реклама сглаживает национально-религиозные противоречия?
Бизнес и экономика
PRотив насилия: как социальная реклама спасает детей?
Livrezon-технологии
ДНЕВНИК ПЕДАГОГА. Запись #73: Для чего мы читаем художественные книги?
Livrezon-технологии
ДНЕВНИК ПЕДАГОГА. Запись #72: Как дети читали книги и обнаружили, что взрослые бывают одинокими
Livrezon-технологии
Фактчекинг в тексте: что и как проверять? Приём «Конкретизация»
Livrezon-технологии
Как обстановка помогает в работе: писательские приёмы Чарльза Диккенса
Livrezon-технологии
Как глубоко можно интерпретировать текст: отрывок из книги Умберто Эко
Бизнес и экономика
«Производственная система Тойоты. Уходя от массового производства» – реферат: самое главное из книги Тайити Оно
Педагогика и образование
Психодиагностика по рисунку: не так страшен чёрный цвет, как его малюют
Livrezon-технологии
Интерфейс Photoshop: основная парадигма и базовые объекты
Livrezon-технологии
Умберто Эко о том, как собирает материал для своих романов
Livrezon-технологии
Исправляем ошибки при создании сайта личного архива
Livrezon-технологии
Курсовая работа здорового человека vs «Курсач курильщика»