Пришел. Не понял. Редизайн.

Oleg Rodyuk
Jan 13 · 7 min read

Я бросил себе вызов — редизайнуть главную страницу сайта Федерации Тенниса за неделю. Было сумбурно, мерзко но удалось!

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

Результаты здесь 👉 desktop и mobile

Ну, поехали!

Начнем с проблем:

  • UX: Сайт трудно воспринимаем, абсолютно не интуитивен, поэтому юзерам сложно достигать своих целей. Новые юзеры могут уходить с сайта, так как ничего не понимают и не хотят разбираться. Юзер не замечает рекламных сообщений.
  • UI: Устаревший дизайн, несовместимые цвета, неприятный внешний вид. Отсутствует целостность дизайна.

Это все видно сразу как только заходишь на сайт. И это больно.

UX part

Первый шаг: Понять какие элементы находятся на странице.

Img 1.1

Непонятка: При разборе сайта возник вопрос. ПОЧЕМУ У САЙТА 2 ЛОГОТИПА?!

Я начал исследовавать документы и страницы сайта и выяснил, что логотип с ракеткой это логитип именно Федерации настольного тенниса Республики Башкортостан. А второй логотип (5 ракеток) — это логотип клуба в котором часто проходят соревнования. И этот логотип размещен в рекламных целях.

Второй шаг: Персоны

Третий шаг: Цели сайта

Что бы понять цели сайта — изучаем контент на сайте, читаем цели ФНТ РБ в его уставе. Я вывел такие цели:

Первичные цели

  • Развитие настольного тенниса, его пропаганда
  • Уведомление о организации и проведении спортивных мероприятий
  • Повышение популярности ФНТ РБ, построение имиджа
  • Вовлечение новичков в теннис

Вторичные цели

  • Самоподдерживание сайта путем размещения рекламы
  • Повышение популярности BASH CLUB (клуба настольного тенниса)

Четвертый шаг: Понять и упростить меню сайта

В меню сайта 10 пунктов: календари, соревнования, рейтинги, разрядники, чемпионы, сильнейшие, статистика, списки, документы, фото.

Такое количество пунктов хорошо не воспринимается юзером, так как объем внимания человека в среднем составляет всего 5–7 объектов.

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

Поэтому решено убрать ссылку «Сильнейшие» из строки меню. Так как она уже есть в рейтигах.

  • Разрядники: На этой странице размещены списки мастеров спорта, спортсменов с разными разрядами в спорте.
  • Чемпионы: Страница пустая 😟. Видимо ждут первых чемпионов
    Нет смысла размещать ссылку на пустую страницу в меню сайта. Но если чемпионы появятся нужно будет продумать местко куда прикрепить эту ссылку
  • Статистика: Основные статистические показатели деятельности ФНТ РБ.
  • Списки: Здесь размещены ссылки на самые разные страницы.

Я обвел синим ссылки которые просто повторятся с других страниц сайта.

Если убрать эти ссылки, то останутся только 2:

Сборные команды и Условные сокращения (коды) территорий

Коды территорий — не нужны игроку в теннис на сайте федерации, так как это редко используемая информация, которую можно легко найти в гугле.

Остается лишь ссылка «Сборные команды». С этим и будем работать.

  • Документы: На странице указаны различные документы и удостоверения
  • Фото: На этой странице ссылки на фотоотчеты с событий.

В итоге оставлям 7 пунктов: Соревнования, Рейтинги, Разрядники, Статистика, Сборные команды, Документы, Фото.

7 пунктов лучше, но все равно как-то все не связано, не сгрупировано. Следовательно, делим по категориям и добавляем подпункты.

Ваерфрейм меню сайта

Пятый шаг: Понять и упростить инфо-блоки 9–13 (img 1.1)

  • Блок #9: Блок с информацией про детские секции настольного тенниса — в текущем состоянии он плохо воспринимается. Необходим понятный редизайн. Так же, для секций создаем отдельную страницу и выносим это в подпункт ФНТ РБ в меню сайта.
Меню с подпунктом “Секции”
  • Блок #10. Блок с информацией о ближайших соревнованиях — информация дублируется в строке меню, в новостях сайта, и с большим заголовком. Такой блок лучше заменить календарем либо оставить доступ к нему только через меню.
  • Блок #11. Рейтинги тренеров, игроков и тд. — блок дублирует информацию вкладки «Рейтинги», следовательно он нам не нужен.
  • Блок #12. Блок с информацией о сайте, о документах и расписании, дублирует страницы «Документы», «Расписание». Документы указанные в блоке — пользуются наибольшей популярностью среди членов клуба, поэтому на страницах «Документы» и «Расписание» необходимо их выделить, а с главной страницы убрать.
  • Блок #13. Поздравление с днем рождения, реклама разных видов услуг, ссылки на министерства спорта.

Реклама разных видов услуг и сайты коллег будут в отдельном блоке в нижней части сайта.

Поздравление с днем рождения выглядит как таблица с именами:

Такая таблица не дарит позитивных эмоций именинникам, а также открывает личные данные в общий доступ.

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

Шестой шаг: Структура страницы, информационная иерархия, ваерфрейм

  • Анализируем коллег. Анализ сайтов федераций тенниса — очень качественный метод что бы понять какая информация приоритетнее или не нужна. Так же смотрим интересные решения и применяем их у себя. Я прошелся по этим сайтам: раз, два, три, четыре
  • Определяем какие будут элементы на будущей главной странице. Собрав всю информацию выше, были выделены такие элементы как: Хеадер (Лого; Меню; Поиск; Контакты), Новостной блок — в нем отображаются новости и ближайшие соревнования, Блок достижений (Достижения; Самая первая цитата в газете о ФНТ РБ); Баннер с пропагандой тенниса; Рекламный блок — в нем будут рекламные баннеры, в том числе и реклама БАШ КЛУБА; Блок с теннисными секциями; Блок со спонсорами, коллегами; Футер.
  • Определяем информационную иерархию. Отталкиваясь от целей сайта и потребностей юзера — первым будет размещен блок “Новостей”, так как если появились изменение в расписании или другое важное событие — о нем важно знать в первую очередь. Далее в целях сайта — показать рекламу, на третем месте стоит блок “Ближайшие соревнования”, так как он важен нескольким типам юзеров, далее были определены “Наши достижения”, Затем для более редких пользователей — информация о секциях, потом пропаганда тенниса — так как это одна из целей сайта, и в заключении ссылки на коллег и спонсоров.
  • Создаем ваейрфреймы десктоп и мобильной версии.
Голубым цветом обозначена F образная модель восприятия контента

UI part

Седьмой шаг: Атмосфера сайта и moodboard

Сайт пропагандирует спорт и является представителем Башкортостана, поэтому стиль должен быть спортивный, легкий современный, активный и с национальными отсылками.

Сайт Федерации не должен быть с большим количеством креатива, а должен быть в более официальном стиле, с понятным, интуитивным интерфейсом.

Больше всего будут преобладать национальные цвета флага — синий, зеленый, желтый, белый.

Для вдохновения использовались такие сайты: 1, 2, 3, 4, 5, 6, 7, 8 и тд.

Восьмой шаг: Все остальное

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

Часть картинок которые не были логотипами, а были “Красивыми” надписями либо картинками — было решено заменить на ссылки

А остальным логотипам задать общий стиль:

Но страшненькие логотипы так просто не победишь. Конечно вид стал лучше, но все равно не приятен и нагроможден.

Как разместить много некрасивых логотипов так, чтобы это выглядело хорошо?

— Не размещать их.

Так и сделал. Все было заменено ссылками, но вновь смотрелось громоздким, страшным и не хотелось читать. Даже после разделения на группы:

В конечном итоге возникло решение — показывать 3 самых часто используемых ссылки из каждой группы. Таким образом мы уберем нагроможденность и юзер сможет быстро переходить по самым важным для него ссылкам! 😃

В заключение

В процессе работы над сайтом возникало много интересных гипотез, решений, только не было времени все тестировать и обо всем написать (недели на все маловато).

Сайт не преследует коммерческие цели, этим он сильно отличается от многих других. Этим он занятный, и даже дал пережить несколько инсайтов. Мне понравилось.😄

С удовольствием прочитаю и отвечу на ваши комментарии!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade