87

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

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

№ 1

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

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

№ 2

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

№ 3

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

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

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

№ 4

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

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

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

№ 5

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

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

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

№ 6

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

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

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

№ 7

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

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

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

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

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

№ 8

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

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

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

№ 9

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

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

№ 10

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

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

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

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

№ 11

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

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

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

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

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

№ 12

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

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

№ 13

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

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

№ 14

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

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

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

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

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

№ 15

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

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

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

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

№ 16

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

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

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

№ 17

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

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

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

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

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

№ 18

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

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

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

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

№ 19

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

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

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

№ 20

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

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

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

№ 21

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

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

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

№ 22

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

— Решение:

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

№ 23

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

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

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

№ 24

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

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

№ 25

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

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

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

№ 26

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

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

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

№ 27

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

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

№ 28

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

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

№ 29

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

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

№ 30

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

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

№ 31

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

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

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

№ 32

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

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

№ 33

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

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

№ 34

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

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

Как-то так.

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

№ 35

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

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

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

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

№ 36

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

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

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

№ 37

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

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

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

№ 38

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

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

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

№ 39

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

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

№ 40

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

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

№ 41

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

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

№ 42

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

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

№ 43

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

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

№ 44

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

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

№ 45

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

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

№ 46

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

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

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

№ 47

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

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

№ 48

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

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

№ 49

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

Аудит сайта компании Concordia University 60
Аудит сайта компании Concordia University 61
Аудит сайта компании Concordia University 62
Аудит сайта компании Concordia University 63

№ 50

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

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

№ 51

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

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

№ 52

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

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

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

Поделиться
Отправить
Линкануть
Вотсапнуть
← К списку проектов