Разработка пользовательских интерфейсов сайта хоккейной команды Ментол Минск

Содержание

Слайд 2

Описание предметной области Объектом разработки является интерфейс сайта хоккейного клуба «Ментол

Описание предметной области

Объектом разработки является интерфейс сайта хоккейного клуба «Ментол Минск».

Данный сайт – это ресурс, где пользователь сможет получить информацию о команде, о ближайших матчах, о составе команды, забронировать себе билеты на матч, купить атрибутику и прочее.
Актуальность данной темы связана с увлеченностью человека спортом. У каждого человека есть как минимум один знакомый, который любит спорт и активно следит за всеми спортивными событиями, происходящими в мире. Этому человеку, безусловно, было бы интересно узнать о положении дел клуба, который, например, базируется в его родном городе, или же хорошо выступает на региональных, республиканских или континентальных соревнованиях. Также хоккей – один из самых популярных видов спорта в мире, и за хоккейной командой будут следить гораздо больше людей, чем за представителями другого вида спорта.
Слайд 3

Обзор аналогов Данный сайт выбран как пример хорошего сайта для хоккейной

Обзор аналогов

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

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

Для разработки удобного и понятного интерфейса необходимо провести исследование существующих аналогов сайтов хоккейных команд

Аналог №1 – сайт https://hcdinamo.by/

Слайд 4

Обзор аналогов Данный сайт выбран как пример хорошего сайта для хоккейной

Обзор аналогов

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

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

Аналог №2 – сайт https://hctraktor.org/

Слайд 5

Обзор аналогов Данный сайт выбран как пример хорошего сайта для хоккейной

Обзор аналогов

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

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

Аналог №3 – сайт https://www.nhl.com/flyers

Слайд 6

Обзор аналогов Вывод: в процессе выполнения обзора аналогов были изучены три

Обзор аналогов

Вывод: в процессе выполнения обзора аналогов были изучены три сайта

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

Описание целей и задач проекта Основной целью является проектирование интерфейса сайта

Описание целей и задач проекта

Основной целью является проектирование интерфейса сайта хоккейного

клуба «Ментол Минск», на котором пользователи могли бы ознакомиться с информацией, связанной с клубом, купить билеты на ближайшие матчи, а также ознакомиться с ассортиментом клубной атрибутики.
Во время исследования аналогов были выявлены следующие задачи данного проекта:
Анализ аналогов проекта;
Выявление целевой аудитории;
Планирование функционала сайта;
Создание удобного интерфейса;
Проведение тестирования.
Слайд 8

Описание целевой аудитории Чтобы определить, каким должен быть сайт, необходимо ознакомиться

Описание целевой аудитории

Чтобы определить, каким должен быть сайт, необходимо ознакомиться с

его целевой аудиторией.
Основная целевая аудитория – люди в возрасте 18 лет и выше, которые увлекаются спортом. Они хотят знать, как живет их любимый коллектив, с какими результатами были сыграны последние матчи, как и где можно приобрести клубную атрибутику, какие изменения произошли в составе команды и так далее.
Вторая целевая аудитория – рекламодатели, которые заходят на сайт с целью ознакомиться с его содержанием. Их цель – определить, будет ли подходить данный сайт для размещения на нем рекламы. Они ориентируются на контент, размещаемый на сайте, на его посетителей, на внешний вид страниц, на их дизайн и прочее.
Третья, но гораздо меньшая целевая аудитория, – люди, непосредственно связанные с хоккеем. Это могут быть тренеры, действующие игроки, спортивные журналисты и другие. Их цели схожи с основной целевой аудиторией – узнать любые новости, связанные с клубом.
Слайд 9

Описание персонажей Для лучшего понимания того, как будет действовать пользователь на

Описание персонажей


Для лучшего понимания того, как будет действовать пользователь на

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

Губерман Антон Моисеевич, 27 лет, не женат, журналист агентства «Shalom Talk».
Цель: узнать новости о клубе и найти контакты администрации команды
Задачи:
Зайти на сайт;
Открыть новостной раздел;
Ознакомиться с последними новостями, связанными с клубом;
Узнать контакты администрации клуба.
Требования к сайту:
Наличие новостного раздела;
Информативность;
Простота дизайна;

Слайд 10

Описание персонажей Ильинов Владислав Дмитриевич, 25 лет, женат, акционер ОАО «Белорусский

Описание персонажей


Ильинов Владислав Дмитриевич, 25 лет, женат, акционер ОАО

«Белорусский металлургический завод».
Цель: узнать стоимость билетов на ближайший матч и оформить заказ.
Задачи:
Зайти на сайт;
Открыть раздел по покупке билетов;
Выбрать места и забронировать/оплатить билеты.
Требования к сайту:
Наличие раздела по покупке билетов;
Возможность оформления заказа онлайн.
Слайд 11

Описание персонажей Тришкина Виктория Валерьевна, 20 лет, не замужем, рекламщик агентства

Описание персонажей


Тришкина Виктория Валерьевна, 20 лет, не замужем, рекламщик

агентства «Pyaterka Squad».
Цель: купить атрибутику клуба.
Задачи:
Зайти на сайт;
Открыть раздел с клубной атрибутикой;
Оформить заказ.
Требования к сайту:
Наличие раздела по покупке атрибутики;
Возможность оформления заказа онлайн.
Слайд 12

Список потребностей пользователя и возможностей на проекте Среди потребностей посетителей сайта

Список потребностей пользователя и возможностей на проекте

Среди потребностей посетителей сайта хоккейной

команды можно выделить:
Желание почитать последние новости клуба;
Покупка билетов на ближайший матч;
Покупка атрибутики клуба;
Просмотр текущего состава клуба;
Ознакомление с историей клуба;
Связь с представителями клуба с целью обсуждения различных рода вопросов;
Просмотр расписания ближайших матчей.
Слайд 13

Список потребностей пользователя и возможностей на проекте Пользователи сайта смогут: Получать

Список потребностей пользователя и возможностей на проекте

Пользователи сайта смогут:
Получать актуальную информацию

о положении дел в клубе (состав, календарь встреч, результаты последних матчей, исторические факты и т.д.);
Узнать стоимость билетов и клубной атрибутики и оформить заказ;
Получить контакты представителей клуба.
Слайд 14

Информационная структура Информационная структура - это своеобразный каркас необходимого содержания на

Информационная структура

Информационная структура - это своеобразный каркас необходимого содержания на сайте,

который служит хорошей основой для дальнейшего успешного проектирования.
Слайд 15

Результат прохождения элементов нашими персонажами

Результат прохождения элементов нашими персонажами


Слайд 16

Статический и динамический прототипы После определения общей информации о каждой странице

Статический и динамический прототипы

После определения общей информации о каждой странице и

о том, что должно на них находиться, необходимо создать прототип системы для дальнейшего тестирования. Прототипы интерфейса разрабатываются исходя из задач пользователя и сценариев использования.
Слайд 17

Прототип главной страницы

Прототип главной страницы

Слайд 18

Прототип страницы «Матчи»

Прототип страницы «Матчи»

Слайд 19

Прототип страницы «Состав»

Прототип страницы «Состав»

Слайд 20

Прототип страницы «Фан-шоп»

Прототип страницы «Фан-шоп»

Слайд 21

Прототип страницы «Клубная история»

Прототип страницы «Клубная история»

Слайд 22

Прототип страницы «Контакты»

Прототип страницы «Контакты»

Слайд 23

Прототип формы для регистрации

Прототип формы для регистрации

Слайд 24

Прототип формы для оформления заказа

Прототип формы для оформления заказа

Слайд 25

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

Тестирование прототипа и его доработка по замечаниям респондентов

Теперь появился динамический прототип,

который можно протестировать. На основе этого тестирования будет проверена последовательность действий, описанных в сценариях, функционал сайта, удобство и мелкие недочеты. Для тестирования сформируем последовательность действий, основанную на пользовательских сценариях, описанных ранее.
В отличие от пользовательских сценариев, добавим реальные данные, с которыми оперирует пользователь и выберем реальных людей для тестирования.
Наблюдение за пользователем. Пользователям были даны следующие задания:
Главная → Фан-шоп → Экипировка;
Главная → Матчи → Турнирная таблица;
Главная → Состав → Тренерский штаб;
Главная → Клубная история → Контакты → Главная (через логотип).
Слайд 26

Тестирование прототипа и его доработка по замечаниям респондентов На основе проведенного

Тестирование прототипа и его доработка по замечаниям респондентов

На основе проведенного тестирования

динамической версии приложения (исходя из наблюдений за пользователями и их действиями) были сделаны следующие выводы:
При переходе на какую-либо страницу выпадающее меню закрывает часть контента, находящегося на странице. Для решения данной проблемы было принято опустить весь контент на страницах немного ниже.
На сайте отсутствует футер с минимальной информацией о сайте, со ссылками на аккаунты клуба в популярных социальных сетях и какими-либо минимальными данными о контактах. Для решения данной проблемы было решено добавить на всех страницах футер с соответствующей информацией.
Слайд 27

До:

До:

Слайд 28

После:

После:

Слайд 29

Дизайн проекта Дизайн сайта — это оформление контента, совокупность всех графических

Дизайн проекта

Дизайн сайта — это оформление контента, совокупность всех графических элементов на веб-странице. 
Основная

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

Логотип Логотип, представляющий серьезную компанию, должен быть довольно простым и отражать

Логотип

Логотип, представляющий серьезную компанию, должен быть довольно простым и отражать какие-либо

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

Цветовая гамма Исходя из того, что в логотипе были использованы зеленый

Цветовая гамма

Исходя из того, что в логотипе были использованы зеленый и

черный цвета, цветовая схема была определена как смесь оттенков зеленого и черного (с возможным использованием прозрачности). Также было принято решение делать сайт в светлых тонах с черными и зелеными вкраплениями, так как именно белый цвет и его оттенки являются самыми предпочитаемыми для пользователя.
Ниже представлены цвета, используемые на сайте.
Белый (#FFFFFF)
Черный (#000000)
Зеленый (#006041)
Слайд 32

Шрифт На нашем сайте, как и на логотипе, будет использоваться шрифт

Шрифт

На нашем сайте, как и на логотипе, будет использоваться шрифт Sitka.

Он подходит для данного сайта, так как не является слишком детским и может показать определенный стиль.
Слайд 33

Сетка Так как количество элементов нам заранее известно, то для более

Сетка

Так как количество элементов нам заранее известно, то для более комфортной

работы пользователей используется сетка, сделанная по подходу «от строки».
В качестве размеров страниц используем стандартный десктопный размер, предлагаемый программой Figma – 1440х1024. Разобьём нашу сетку на квадратные модули размером 20x20 пикселей для более удобного размещения элементов. Если расположить по строчкам элементы на странице (не учитываем скроллинг, т.е. предположим, что одна страница занимает размер 1440х1024), то они в сумме будут занимать 70-75 строк, а высота макета 1024, поэтому если делить высоту на количество занимаемых строк, то мы получим результат ±15.
Слайд 34

Главная страница с модульной сеткой

Главная страница с модульной сеткой

Слайд 35

Форма для регистрации с модульной сеткой

Форма для регистрации с модульной сеткой

Слайд 36

Страница «Фан-шоп с модульной сеткой»

Страница «Фан-шоп с модульной сеткой»

Слайд 37

Главная страница Дизайн проекта

Главная страница

Дизайн проекта

Слайд 38

Страница «Матчи»

Страница «Матчи»

Слайд 39

Страница «Состав»

Страница «Состав»

Слайд 40

Страница «Фан-шоп»

Страница «Фан-шоп»

Слайд 41

Страница «Клубная история»

Страница «Клубная история»

Слайд 42

Страница «Контакты»

Страница «Контакты»

Слайд 43

Формы для регистрации и входа в профиль

Формы для регистрации и входа в профиль

Слайд 44

Формы для оформления заказа атрибутики или билетов

Формы для оформления заказа атрибутики или билетов

Слайд 45

Новостная страница

Новостная страница

Слайд 46

Адаптивная версия сайта

Адаптивная версия сайта

Слайд 47

Слайд 48

Слайд 49

Юзабилити-тестирование В любом проекте последним этапом является тестирование готового продукта. Оно

Юзабилити-тестирование

В любом проекте последним этапом является тестирование готового продукта. Оно проводится

с целью выявления и исправления ошибок, а также для проверки общего удовлетворения пользователя.
У юзабилити есть пять количественных составляющих:
обучаемость: как легко пользователи могут начать взаимодействовать с новым для них интерфейсом;
эффективность: то, как быстро и удобно пользователь сможет воспользоваться функционалом приложения;
запоминаемость: потенциал интерфейса оставить след в сознании пользователя, чтобы ему легко было вернуться к моему продукту;
ошибки: сколько ошибок совершает пользователь в ходе выполнения необходимых действий, какова их серьёзность и возможность исправления;
удовлетворенность: общее состояние пользователя после и во время работы с моим интерфейсом.
Именно на них будет сделан упор вовремя тестировании интерфейса моего сайта, по этим показателям можно будет судить о завершенности продукта.
Слайд 50

Юзабилити-тестирование Рассмотрим тестирование на основе мнения и впечатлений случайных пользователей-респондентов: анкета

Юзабилити-тестирование

Рассмотрим тестирование на основе мнения и впечатлений случайных пользователей-респондентов:
анкета по

словам: некоторый набор слов (чаще всего прилагательных, эпитетов) с различной окраской – отрицательной, нейтральной и положительной, из которых респондент выбирает те, которые больше всего, по его мнению, характеризируют тестируемый ресурс. На основании количества положительных и отрицательных характеристик, которые выбрал пользователь, а также смотря на смысловую нагрузку выбранных эпитетов, можно сделать выводы о впечатлении, которое произвел данный продукт, и о его проблемах;
формальное анкетирование: конкретно сформулированные вопросы, на которые могут быть предложены варианты ответов, которые чаще всего представляют собой шкалу от оценки «Отлично» до «Плохо», с различным количеством мест в шкале – их может быть всего 2, что разумеется очень жестко ограничивает респондента, а может быть 5, что дает пользователю задуматься, и окрасить свой ответ не так категорично, как в случае с 2-умя вариантами;
Слайд 51

Юзабилити-тестирование определение соответствия конкретным требованиям: чек-лист обычно составлен очень хорошо, но

Юзабилити-тестирование

определение соответствия конкретным требованиям: чек-лист обычно составлен очень хорошо, но тем

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

Юзабилити-тестирование Тестовое задание Каждому респонденту было выдано 3 задания: Пройти регистрацию

Юзабилити-тестирование

Тестовое задание
Каждому респонденту было выдано 3 задания:
Пройти регистрацию на сайте;
Найти и

просмотреть информацию о игроке по имени Егор Сучков;
Оформить заказ билетов на матч «Ментол Минск» - «СКА Санкт-Петербург».
Слайд 53

Юзабилити-тестирование Респондент №1 (Андрей). Респондент справился с заданиями. Времени потребовалось чуть

Юзабилити-тестирование

Респондент №1 (Андрей). Респондент справился с заданиями. Времени потребовалось чуть больше,

чем остальным, но в ходе выполнения в системе не были обнаружены сложные и непонятные элементы, которые затрудняли бы выполнение поставленной задачи.
Респондент №2 (Дмитрий). Респондент справился с заданиями. У него не возникло трудностей. Никаких дополнений не внес. В ходе выполнения заданий очень быстро изучил и запомнил общую структуру системы
Респондент №3 (Надежда). Респондент справился с заданиями. У него не возникло трудностей. Никаких дополнений не внес. В ходе выполнения заданий освоился и изучил основную структуру системы.
Слайд 54

Юзабилити-тестирование Анкетирование по словам После оценки восприятия дизайна с помощью набора

Юзабилити-тестирование

Анкетирование по словам

После оценки восприятия дизайна с помощью набора прилагательных необходимо

рассчитать процент удовлетворенности от продукта в среднем по пользователям по следующей формуле:
Слайд 55

Юзабилити-тестирование Формальное анкетирование За каждый ответ, отражающий позитивную оценку сайта, начисляется

Юзабилити-тестирование

Формальное анкетирование

 За каждый ответ, отражающий позитивную оценку сайта, начисляется соответствующее количество

баллов. Так сайт не получил неудовлетворительных оценок, то все баллы будут складываться. Итого, из возможных 45 баллов каждый респондент поставил:
Андрей – 41;
Дмитрий – 42;
Надежда – 39.
Слайд 56

Юзабилити-тестирование Результаты экспертного тестирования информационная структура сайта обеспечивает необходимую скорость работы,

Юзабилити-тестирование

Результаты экспертного тестирования

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

при этом понятной и удобной для пользователя.
2) элементы интерфейса выполнены в соответствии с едиными принципами, оставляют впечатления целостного интерфейса, а не набора фигур. Интерфейс выполнен качественно.
3) элементы правильно выполняют свои функции, сайт полностью работоспособен.
Слайд 57

Юзабилити-тестирование Выводы По результатам экспертного тестирования нарушений в данном интерфейсе выявлено

Юзабилити-тестирование

Выводы

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

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