Редизайн внутристраничной навигации по баскетбольному справочнику

В Basketball Reference мы обновили дизайн система внутристраничной навигации (мы называем это «внутренней навигацией»), которую вы используете для доступа к дополнительному контенту (например, к журналам игр и разделам), а также к разделу «На этой странице» (который служит оглавлением страницы). В то время как контент все тот жемы изменили презентацию на рабочем столе с горизонтальной панели на вертикальную боковую панель. Взаимодействие на основе клика/касания вместо наведения. Внутренняя навигация теперь тоже то же самое на компьютере и мобильном телефоне. Это постепенное обновление дизайна и не является частью капитального ремонта конструкции. Это изменение уже доступно на сайте Basketball Reference, но в ближайшие недели оно появится и на других справочных сайтах.

Потому что это самое масштабное изменение, которое мы внесли в дизайн наших сайтов за последнее время, поэтому я хотел бы познакомить вас с этим процессом. Во-первых, вот как это выглядит:

В Sports Reference мы описываем нашу философию дизайна как «агрессивно функциональную». Мы предоставляем обширное хранилище спортивных данных на платформе, оптимизированной для скорости, доступности и простоты навигации, приглашая всех пользователей глубже изучить статистику. Мы применяем взвешенный и ориентированный на пользователя подход к обновлениям дизайна. Мы понимаем, что наши сайты являются основной утилитой, поэтому любые изменения должны быть тщательно проверены и целенаправленными, чтобы гарантировать, что они улучшают качество работы, не нарушая привычность и стабильность, на которые вы полагаетесь.

Наш текущий дизайн сайта появился в феврале 2017 года. С тех пор мы многое сделали. Мы добавили еще один вид спорта с помощью FBref. Мы перезапустили инструменты Play Index под названием Stathead. Мы приобрели и перезапустили Immaculate Grid. Мы добавили новые функции и значительно расширили охват данных по видам спорта. Мы проделали огромную работу по инфраструктуре за кулисами. Мы начали создавать продукты следующего поколения. Несмотря на все это, дизайн справочных сайтов практически не изменился.

Хотя нынешний дизайн сайта сослужил нам хорошую службу, существуют возможности для его улучшения. Но не волнуйтесь, однажды вы не откроете сайт и не обнаружите, что все изменилось. Мы применяем поэтапный подход, сосредотачиваясь на конкретных областях, которые являются относительными болевыми точками для наших пользователей. Это скорее эволюция, чем революция.

Во-первых, мы фокусируемся на внутренней навигации. Очевидно, что это очень важный шаблон интерфейса, поскольку он является одной из ключевых точек входа в кроличью нору, о которой так нежно говорят наши пользователи. Вот некоторые области для улучшения, которые мы определили с помощью отзывов пользователей и анализа использования:

• Внутреннюю навигацию рабочего стола может быть сложно использовать из-за взаимодействия при наведении. Широкая ширина (полноэкранный режим) в сочетании с небольшой высотой означала, что вам нужно было очень точно перемещать мышь, чтобы щелкнуть нужную ссылку.
• Внутреннюю навигацию было легко игнорировать как на настольных компьютерах, так и на мобильных устройствах. Слишком часто пользователи пишут нам с просьбой предоставить функции, которые у нас уже есть. Часто эти функции находятся на дополнительных страницах, доступ к которым осуществляется через внутреннюю навигацию. Многие ссылки были скрыты за раскрывающимися списками, а ссылки во внутренней навигации были темно-серыми, а не обычным синим цветом ссылок.
• Внутренняя навигация на настольных компьютерах совершенно иная, чем на мобильных устройствах. На рабочем столе он был представлен в виде горизонтальной панели ссылок и раскрывающихся меню. На мобильных устройствах оно было представлено в виде одного вертикального раскрывающегося меню.

Вот как новый дизайн затрагивает каждую из этих областей:

• Внутренняя навигация больше не зависит от взаимодействия при наведении. Это основано на щелчке и касании. Кроме того, поскольку контент представлен на боковой панели, ширина линий намного короче, что упрощает сканирование.
• Внутренняя навигация теперь представлена в виде боковой панели на рабочем столе — шаблон, который пользователи нашли гораздо более интуитивно понятным в наших многочисленных раундах тестирования. Ссылки выделены синим цветом и подчеркнуты, как и другие ссылки на наших сайтах. Кроме того, раздел «На этой странице» по умолчанию развернут и представлен вертикально. Теперь оно больше похоже на оглавление, которое вы можете увидеть на таком сайте, как Википедия. Кроме того, боковая панель остается на месте при прокрутке страницы, что значительно упрощает быстрый переход к различным разделам страницы.
• Поскольку внутренняя навигация теперь одинакова на настольных компьютерах и мобильных устройствах, она должна стать более знакомой пользователям, которые переключаются между разными устройствами. Кроме того, если вы хотите скрыть боковую панель, вы можете закрыть ее так же, как на мобильном сайте.

Некоторые другие соображения:

• Чтобы освободить место для боковой панели, мы увеличили максимальную ширину нашего макета с 1450 пикселей до 1600. Все больше и больше пользователей используют мобильные устройства, но люди по-прежнему используют большие экраны. Поскольку эти экраны становятся больше, мы используем больше этого пространства.
• На данный момент внешний вид рабочего стола изменился только с горизонтального расположения на вертикальное. Весь контент одинаковый. Мы будем искать способы оптимизации содержимого внутренней навигации для вертикальной компоновки, а не для горизонтальной. Например, теперь у нас есть больше места для перемещения большего количества ссылок на верхний уровень, поэтому меньшее их количество скрыто в раскрывающихся и сворачиваемых разделах.
• В настоящее время эта новая внутренняя навигация доступна только на Basketball Reference, но в ближайшие недели она появится и на других справочных сайтах.

За время работы мы получили отзывы от сотен пользователей. Еще в марте мы с моим коллегой Фредди представили некоторые разрабатываемые концепции дизайна на конференции SABR Analytics в Финиксе. В этом выступлении мы поделились некоторыми концепциями дизайна, которые рассматривали, и попросили аудиторию проголосовать за те, которые, по их мнению, нам следует изучить, и предоставили им возможность оставить отзыв. Изменения внутренней навигации были одной из двух концепций, о которых мы получили очень сильный сигнал от сотен посетителей.

Используя эти отзывы, мы усовершенствовали дизайн и создали новый прототип. Мы провели серию интервью с пользователями, которые смотрели прототип, взаимодействовали с ним и делились своими мыслями. Используя эту обратную связь, мы встроили эту функцию в код. Наконец, перед запуском мы провели еще один раунд интервью, чтобы пользователи могли взаимодействовать с реальным кодом и увидеть, как ощущаются клики, как работает прокрутка и как ощущается страница с боковой панелью. В обоих раундах тестирования удобства использования пользователи единогласно согласились, что вертикальная внутренняя навигация является улучшением. Это был сигнал, который нам нужен был для запуска.

Но мы еще не закончили слушать. Пожалуйста, расскажите нам, что вы думаете о нашем форма обратной связи.

Эта запись была опубликована в понедельник, 24 ноября 2025 г., в 17:04 и находится в разделе Объявление, Баскетбол-Reference.com. Вы можете следить за любыми ответами на эту запись через РСС 2.0 кормить. Ты можешь оставить ответили Трекбек с вашего собственного сайта.