Аудит сайта компании Concordia University

Сайт — https://www.concordia.edu.ua/

№ 1

Изображение режется и видны пиксели.
— Решение: Подобрать несколько изображений для разных разрешений или оттестировать адаптив одного формата. Взять изображение с лучшим качеством.

№ 2

1. Изображения взяты с фотостоков. Это подчёркивает низкое качество контента и отношение универсистета к собственному сайту и его посетителям.
   — Решение: дать дизайнеру задачу создать изображения для событий. Можно сделать минималистичные надписи или иконки. В стилистике университета.
2. Ссылка «View all events» неоправданно занимает всю строку.
   — Решение: расположить её справа от линии, на одном уровне с «Events».
3. Изображения разного размера влияют на положение заголовка. Глазу постоянно нужно искать точку начала заголовка.
   — Решение: задать фиксированные размеры для изображения и подобрать их по размера. После этого заголовки встанут на одну линию.

№ 3

В блоке новостей среди записей зияющая «дыра». Как пользователю сайта, я не понимаю почему это выполненно именно так. Для меня это ошибка в работе сайта.

— Решение: пересмотреть код и равномерно распределять записи.

№ 4

Информация о приёме идёт 3 блоком. Пользователям надо пролистать не такие интересные для них события и новости, чтобы наконец дойти до информации о приёме.

— Решение: переместить блок о приёме на два блока выше, сразу после слайдера.

№ 5

Текст выравнен по левому краю, кнопка по центру. Это создаёт ощущение неряшливости.

— Решение: переместить кнопку в левую часть блока.

№ 6

При видимой линии разделения текстового блока и фото, градиент наложенный сверху выглядит грязно.

— Решение: убрать градиенты. Они больше не появляются нигде на сайте. Они не вызывают какого-то вау эффекта и приятного ощущения.

№ 7

Один из важных блоков на главной странице спрятан в конце вкладками. А перед ним идут неважные блоки: «ConcordiaUA Stars», «ConcordiaUA Experts Opinions», «References»,"Class of 2020 Graduates"

— Решение: нужно переносить этот блок и ставить его после программ обучения. Информацию из вкладок нужно вытаскивать в отдельные блоки, раскрывая её.

Я сделал быстрый набросок, как это можно вытащить из вкладок. Это нельзя прятать и важно больше показывать иллюстраций, нежели просто сухой информации. Если мы можем проиллюстрировать практикующих преподавателей или первоклассные дипломы — нужно их проиллюстрировать.

№ 8

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

— Решение: сделать индивидуальный дизайн для каждой секции, который будет использовать разную композицию и сетку для привлечения внимания. Подобрать изображения по размерам.

№ 9

Блок преимуществ расположен в самом конце, рядом с подвалом. До этой важной информации могут просто не доскроллить.
— Решение: переносим выше и объединяем с другими преимуществами.

№ 10

Блоки сгруппированы одинаовым фоном, но я бы не объединял их, потому что преимущства обучения и информация о том, что вы выпускаете квалифицированных специалистов — разные вещи для пользователя.

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

№ 11

Плохая вёрстка подвала. Появляется «дыра» и не занят правый нижний угол. В итоге композиция рассыпается.

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

Сделал быстрый набросок композиции.

№ 12

Фиксированная шапка занимает много места.
— Решение: уменьшить логотип и отступ сверху.

№ 13

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

№ 14

При клике на кнопки открываетс новая вкладка в браузере. Мне это не нравится, так как я сам в состоянии решить, открывать в этой вкладке или в новой. Когда сайт забирает управление на себя — теряется чувство контроля, а вместе с этим и удовлетворения от использования сайта.

Слишком много акцентов. Некоторые выделены зелёным, некоторые жирным. Я не понимаю что из этого важнее. Кнопки выделены зелёным. Я предполагаю, что текст, выделенные зелёным — ссылка. Пытаюсь кликнуть — ничего не происходит.

— Решение: определиться с стилистикой кнопок, ссылок, акцентов. Использовать минимум ацентов. Когда важно всё — неважно ничто.

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]

№ 15

Все блоки выглядят по-разному. Текст в одном выровнен по левому краю, во втором по центру. Нужно создавать фирменный стиль и придерживаться его на сайте.

Пример из проекта. Два блока сбоку. Мы видим, что они разные, но в тоже время в них чувствуется единый стиль, якорь — шрифт и расположение заголовка. Тот же самый эффект нужно достичь на всём сайте.

№ 16

Карточку преподавателя можно улучшить:

1. Подобрать качественные изображения
2. Сделать разный стиль для элементов карточки
3. Убрать излшне «кричащие» элементы

Редизайн карточки. До и после

№ 17

Изображения — самые акцентные элементы. Сначала мы смотрим на него, потом на остальные элементы. Я предполгаю линии здесь добавлены, чтобы разделить две линии и не смешивать заголовки и картинки.

Комбинация заголовок + картинка уже нарушают обычный порядок восприятия. А линии добавляют хаоса.

— Решение: убрать линии, поменяь местами картинки с заголовками. Соблюсти отступ между строками.

№ 18

Почти все поля в форме — обязательные. Проще написать, какие необязательные.

— Решение: убрать упоминание о звездочке и обязательных полях. Пометить необязательные.

№ 19

Выбор из 2−3 вариантов не нужно делать выпадающим списком. Это избыточно, создаёт лишний клик.

— Решение: сделать выбор варианта не select, а radio-кнопками

№ 20

В тексте много отсупов, его сложно читать. Не выделены ссылки и заголовки.

— Решение: выравнять текст по левому краю. Сделать заголовки крупнее. Выделить ссылки цветом.

№ 21

Почти одинаковые отступы у кнопки начинают смущать, ловишь себя на мысли: «а не перепутали-ли что-то здесь?».

— Решение: подвинуть элементы ближе к изображению.

№ 22

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

— Решение:

1. Выравнять изображение по левому краю.
2. Линию Prev/Next растянуть на всю ширину контейнера
3. Shares и иконки расположить слева.

№ 23

Не понимаю, зачем в статье, на которую я перешёл стоит ссылка «Read more». Я уже пришёл читать статью.

Если это что-то отдельное от контента статьи — это нужно выделить либо линией, либо фоном. Но в таком случае, а не понимаю, где контент статьи.

№ 24

Если комментариев 0 — этот элемент вообще можно не показывать. А показывать только тогда, когда комментарии появятся.

№ 25

Некликабельные ссылки. С мобильного устройства удобно звонить, просто кликнув на номер телефона. Тем, кто использует почтовые приложения тоже будет удобнее кликнуть один раз на email, чем копировать его.

— Решение: сделать телефоны и email кликабельными.

№ 26

Смешиваются цветовые акценты. По главной странице я привык, что зелёная кнопка — акцент и действие. На этой странице всё смешивается.

— Решение: определить акцентный цвет и использовать его там, где это уместно. В данном случае можно сделать иконки руки и название программы синими.

№ 27

Кнопка скрытия не работает

№ 28

Текста в несколько строк, выравненный по центру сложно читать.
— Решение: выделить по левому краю.

№ 29

Текст сложно читать, потому что он не разделён по абзацам. Он кажется огромным. Также мне сложно выделить начало участка и прочитать то, что зацепило взгляд.
— Решение: разделить по абзацам.

№ 30

Эту таблицу нужно упрошать. Сейчас в ней даже разбираться не хочется. Слишком много переплетений колонок и строк.

№ 31

Таблица сейчас выглядит перегруженной и занимающей много пространства. Её можно упростить. Результат ниже.

Фразу «Entrants with basic and complete higher education» можно либо убрать, если она не несёт большой пользы, либо вынести за таблицу. Серый цвет строки появляется при наведении.

№ 32

После перехода на стрницу программы, мне не хватает кнопки «Поступить/Выбрать»

№ 33

Нужно поправить отступ в колонке сбоку.

№ 34

Выравнять текст по левому краю. Подумать о том, чтобы сместить центральный блок вправо и выделить каким-то фоном.

Как-то так.

№ 35

Много линий, разные отстутпы, пространство разделено неравномерно.

Предлагаю 2 варианта решения. Либо выравание по левому краю, либо аккуратная шахматная сетка. Во втором варианте контент тот же, но выглядит аккуратнее.

№ 36

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

— Возможное решение:
1. Сделать блок с нужной информацией для абитуриентов на первом экране: заголовок, подзаголовок, несколько самых важных ссылок, кнопка связи.
2. Избавиться от слайдера. Слайды разместить как отдельные блоки в других частях сайта, где они будут уместны.

№ 37

Кнопка в слайде не выглядит как кнопка.

— Решение: сделать загругленные края и сменить цвет на зелёный.

№ 38

На планшете под линию с 3 элементами выделено слишком много места.

— Решение: уменьшить логотип и высоту строки.

№ 39

На планшете разъезжаются блоки у программ.

№ 40

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

№ 41

Некоторые пункты обрезаются наполовину. Меню можно увеличить где-то на 80−100% без потери удобства.

№ 42

Сетка на странице «About us» сломалась на мобильном.

№ 43

На странице «about us» фото пропали, но огромные отступы остались.

№ 44

В подвале линии уже не нужны, отсупы можно уменьшить.

№ 45

Выравнять изображения по левому краю. Теряется поток восприятия.

№ 46

Непонятно, связаны ли эти столбцы. Почему заголовок у второго блока есть, а у первого нет. Где «Program» — это общие программы, а «Bachelor Degree» — программы блока?

Таблицы вызывает больше вопросов, чем ответов. Нужно её дорабатывать. + те же самые правки по выравниванию и упрощению, как в № 31

№ 47

Кнопки в формах на мобильном сделать больше, чтобы проще было попадать. Особенно с маленьких телефонов.

№ 48

Текст в таких плашках лучше делать меньше и выравнивать по левому краю

№ 49

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

№ 50

Эта карточка делает flip при наведении на ПК. На мобильном обратная сторона появляется только при клике, то есть теряется, потому что никто не будет кликать на эту карточку.

№ 51

Схлопнулись карточки и их кнопки.

№ 52

Сместились цветовые акценты. Линии стали зелёными, кнопки синими.

— Решение: поменять цвета. Кнопки зеленые, линии синие.