Каким должен быть сайт учебного заведения, который открывают множество раз за день? В этот раз разберем на примере сайта самого престижного технического учебного заведения США и всего мира — Массачусетского технологического института.
Наши критерии оценки:
Дизайн — «лицо» вуза, включает целостность стилевого оформления, «читабельность» шрифта, сочетаемость с оформлением подсайтов, удобство просмотра фото и видео.
Навигация — удобство пользования сайтом, четкая и понятная с первого взгляда структура.
Контент — тексты, фотографии, инфографика и прочее.
Интерактивность — наличие обратной связи, ссылок на социальные сети, возможность подписки, обновляемость информации, внутренняя информационная система.
Адаптивность – повышает возможность использования сайта в различных условиях, он корректно отображается на различных устройствах, сохраняя функционал.
Массачусетский технологический институт (MIT) — это частный исследовательский университет в США, основанный в 1861 году. Согласно рейтингу QS World University Rankings, он уже 12 лет считается лучшим высшим учебным заведением во всем мире.
Основной сайт выполнен в минималистичном стиле и четко отражает специализацию вуза. Каждый из разделов подсвечивают разные контрастные цвета. Они выдержаны в одной степени яркости и гармонично сочетаются друг с другом. Похожий прием применял Паравеб на подсайтах инженерных школ Томского политехнического университета.
По всей системе использован единый шрифт Messina Sans, который отвечает требованиям современного дизайна. Благодаря его лаконичности и аккуратным линиям, достаточно большим интервалам и размеру, тексты читаются быстро и легко. Messina Sans придает ресурсу эффект простоты, функциональности и визуальной ясности.
Достаточное пространство между элементами интерфейса, такими как текст, изображения, кнопки и поля ввода, делает сайт более читаемым и удобным для навигации.
Однако несколько дизайнерских решений нам показались спорными. Обложкой сайта — ключевым элементом с точки зрения оформления — является последняя опубликованная новость. Поэтому восприятие всего ресурса зависит от того, насколько удачные изображения для новостей будет подбирать сотрудник пресс-службы. Но здесь университет применил интересное решение с точки зрения контента — по клику на «Explore more spotlights» можно посмотреть все материалы, которые вуз выводил на главную страницу сайта за последние 20 лет.
Сегодня строгость и минимализм — главные тренды в веб-дизайне. Они помогают пользователям сконцентрироваться только на необходимой информации и функциональных элементах и сохраняют воздушность ресурса. Вокруг элементов дизайна есть светлое пространство для создания ощущения легкости.
Тем не менее сайт, выполненный в таком стиле, может выглядеть сухо и неинтересно для нынешних студентов и абитуриентов, которые предпочитают яркие и креативные решения. Также к минусам можно отнести отсутствие темной темы.
В процессе нашего разбора MIT изменил дизайн основного сайта. Теперь меню и акценты окрашены в фирменный красный цвет университета.
Читайте также: «Каким должен быть сайт, чтобы он привлекал современных абитуриентов?»
В MIT учатся почти 12 000 студентов, включая бакалавров, магистров и докторов наук, из более чем 100 стран.
Университет специализируется на технических и естественных науках и является новатором в областях робототехники, искусственного интеллекта и космических исследований. Но вуз также знаменит своими достижениями в менеджменте, экономике, лингвистике, политических науках, философии и музыке. Его выпускники имеют выдающиеся карьеры в науке, бизнесе и государственном управлении.
На специальной странице представлен список школ и кафедр университета, но чтобы узнать подробную информацию о них, необходимо перейти на отдельные подсайты. На наш взгляд, это неправильное решение — целевые группы могут легко потеряться среди бесконечного количества подсайтов, отличающихся и по структуре, и по оформлению. В таком случае вуз не закрывает потребность студентов и абитуриентов в информации: они вынуждены обращаться в учебное заведение напрямую, а это — дополнительная нагрузка на сотрудников, которые физически не могут ответить на вопросы каждого.
В остальном навигация интуитивная и простая, все страницы взаимосвязаны между собой. Ресурс состоит из типовых блоков, в которых легко разобраться. Дополнительно ориентироваться помогают ссылки с всплывающими подсказками. Пользователи могут быстро находить нужную информацию без лишних усилий.
В верхней части главной страницы находится логотип и название университета. Далее расположено удобное меню со ссылками на основные разделы: «Education», «Research», «Innovation», «Admissions + Aid», «Campus Life», «News», «Alumni» и «About MIT». При переходе в разделы их заголовки выносятся в левую часть — это хорошее решение. Однако при скролле страниц меню не фиксируется ни сверху, ни слева. Если посетитель забудет, на какой странице он находится, ему будет сложнее сориентироваться.
Справа от меню есть заметная кнопка поиска, слева ниже для него предусмотрено специальное окошко для ввода.
Популярные разделы сайта перечислены в статичной колонке слева, а последние новости и другие материалы — в прокручивающейся ленте справа. Это новаторский подход к оформлению главной страницы, который выделяет ресурс среди конкурентов.
Внизу страницы находятся ссылки на социальные сети, контактная информация и кнопка для внесения пожертвования.
На страницах с подсайтами для комфорта пользователя стоило добавить визуальную поддержку.
Количество текстовых и визуальных материалов на ресурсе зависит от его целей и аудитории. Для большинства сайтов вузов оптимальным считается баланс между текстом и изображениями, который предоставляет достаточно информации, но при этом не перегружает посетителя. Чтобы привлечь абитуриентов и студентов, MIT стоило сопровождать текстовые фрагменты на сайте яркими и понятными изображениями.
Видео на сайте воспроизводятся корректно, есть формы обратной связи, которые пользователи могут использовать для связи с администрацией университета. Фотографии скомпонованы в стильные галереи внизу страниц, у них есть функции перелистывания, но сами изображения открываются в слишком высоком разрешении. Сайт не перегружен изображениями, что помогает ему оставаться воздушным.
Любопытный прием, который привлек наше внимание, — отображение фактов об университете в формате содержания.
Сайт MIT содержит множество материалов, связанных с активностями университета. Но на таком ресурсе хочется видеть в первую очередь краткую информацию о вузе, блоки направлений обучения и только потом актуальные новости и события учебного заведения. Более того, часть разделов содержит ограниченную информацию, а некоторые материалы доступны только узкой публике.
На сайте чувствуется нехватка анимаций — они есть только на одной странице поиска.
Сайт корректно отображается на разных устройствах: мобильных телефонах, планшетах и настольных компьютерах. Контент автоматически подстраивается под нужный размер экрана. Благодаря этому, пользователи могут просматривать ресурс с любого устройства без необходимости масштабировать страницу или изменять ее ориентацию.
В мобильной версии анимации полностью отсутствуют, а популярные ресурсы перенесены в раздел поиска. Само меню отображается только по касанию.
В целом, сайт в мобильной версии воспринимается как сплошной текст, шрифт кажется мелким, картинки не кликабельны.
Ознакомиться с сайтом самостоятельно можно по этой ссылке.
Мы продолжаем беседовать с экспертами рейтинга сайтов университетов. Сегодня в интервью с инженером по работе с данными Центра развития образования «Интеграция», создателем телеграм-чата «ПСАЛ» Алексеем Сафоновым мы поговорили про критерии, методологию и первые впечатления от сайтов вузов.
Задайте ваш вопрос или пришлите материал на публикацию. Вы можете воспользоваться формой ниже или написать нам на
unidigital@paraweb.me
