Проектирование веб-интерфейса это длительный процесс, который включает в себя, в том числе, определение основных требований и характеристик и создание модели будущего продукта, которой, в данном случае, выступает прототип интерфейса. Важным этапом перед созданием прототипа и выделением его ключевых характеристик является оценка уже существующего опыта, а также потребностей целевой аудитории сайта.
Таким образом, основной целью данной работы выступает проектирование веб-интерфейса и оценка его эффективности, для достижения данной цели был поставлен ряд задач:
- Анализ контекста использования и конкурентов;
- Анализ задач и сценариев использования будущего сайта;
- Разработка статичного прототипа и его оценка;
- Разработка прототипа веб-интерфейса и его юзабилити-тестирование.
1.1 Выбор объекта для разработки
В качестве объекта для разработки был выбран веб-интерфейс образовательного курса для подготовки школьников к ЕГЭ. Актуальность вопроса продиктована большим объемом знаний и навыков, которые должен демонстрировать школьник. Для того, чтобы сформулировать более четкие рамки и задачи подготовки необходимо верно ориентироваться в системе школьных знаний. А значит, особенности формирования веб-интерфейса данного образовательного ресурса состоят в многоуровневой структуре предлагаемой информации, которая при этом должна быть доступна и понятна для пользователя. С практической точки зрения, в качестве инструментов для реализации этой структуры необходимо несколько меню, и, вероятно, личный кабинет пользователя, упрощающий доступ к информации, а также, организация связей внутри и между различными предметами и темами.
Организация подобных связей требует глубокой проработки материала, и четкого понимания структуры школьной программы и требований, выставляемых школьникам единым государственным экзаменом. Так как эта задача не входит в рамки данного курса, а кроме того, требует значительных затрат времени, то дальнейшая работа представляет собой приблизительный вариант реализации искомого веб-ресурса.
1.2 Анализ контекста использования и конкурентов
Для понимания структуры будущего веб-интерфейса полезно будет изучить наиболее успешные аналоги, которые существуют в этой области, и, разумеется, потребности целевой аудитории.
В качестве целевой аудитории нашего будущего сайта выступают преимущественно школьники 9-11 классов, группа в среднем однородная по социальному положению и интересам. Основной целью использования сайта будет подготовка к ЕГЭ с помощью изучения материалов курсов, в качестве вторичной цели возможна организация онлайн-общения между пользователями сайта.
Энергетическое использование биомассы
... что экономически оправданное использование биомассы, как энергетического топлива, позволяет покрыть 26 % мировой энергетической потребности. При этом, как показано, за счет использования биомассы в качестве возобновляемого источника ... установок). Известно, что уже в обозримом будущем человечество может начать испытывать дефицит в природных энергетических ресурсах. С учетом темпов их наращивания, ...
В качестве конкурентов предлагаются следующие ресурсы, успешно реализующие обучающие курсы в России:
1. Coursera;
2. Udacity;
3. Intuit;
4. Chan Academy.
В качестве первого объекта для анализа конкурентов предлагается обучающая система открытых онлайн курсов «Курсера» (www.coursera.org).
Проект сотрудничает с университетами и научными институтами, которые публикуют и ведут в системе курсы по различным направлениям знаний. Слушатели проходят курсы, сдают по ним контрольное тестирование и экзамены непосредственно на сайте Coursera.org. Также система предполагает получение пользователем сертификата по итогам обучения, подтверждающее завершение курса и квалификацию пользователя.
Реализован как бесплатный, так и платный доступ к системе, интерфейс системы максимально удобный, однако не отображается в старых версиях браузера.
Основные задачи сайта: предоставить доступ к онлайн-курсам, стимулировать пользователя к оплате курса, привлечь пользователя к участию в других курсах.
Целевая аудитория данного проекта, предположительно, разнообразная, значительную часть из них, вероятно, составляют студенты и люди до 40 лет, различных национальностей, со знанием английского языка (существуют курсы и на других языках, но преимущественно на английском).
Из этого вытекает несколько простых требований: удобный и понятный интерфейс, не перегруженный дизайн, свободный доступ к информации, понимание еѐ ценности и структуры.
Основные задачи, которые решает данный сайт, это доступ пользователя к обучающим курсам различной тематики, а также получение сертификатов по итогам завершения курса.
Достоинства ресурса: разнообразный контент, бесплатный доступ к материалам курса, удобная навигация по сайту, аннотация к курсу, а также страница с описанием курса содержит практически всю необходимую информацию.
Недостатки ресурса: платные сертификаты, подтверждающие окончание курса, нет связи между различными курсами, для знакомства с материалами необходима запись на курс, все курсы охватывают широкие темы, и не слишком удобен, если вы хотите ознакомиться с узким вопросом.
Рисунок 1 Страница сайта Coursera
Следующий конкурент Udacity.com, этот ресурс также предлагает доступ к онлайн-курсам, однако тематика их ограничена вопросами, связанными преимущественно с программированием.
Интерфейс сайта достаточно прост, аннотация курса отражает необходимую информацию по его содержанию: название, краткое описание курса и уровень сложности. Картинка рядом с курсом позволит его идентифицировать и сделать более привлекательным для пользователя.
По содержанию, курсы состоят из видео-уроков и литературы для ознакомительного прочтения. Также в ходе курса вы должны выполнять задания, кроме того, в сами видео уроки встроены вопросы по текущему материалу, что увеличивает интерактивность и качество усвоения материала. Реализован как платный, так и бесплатный доступ к материалам. Платный доступ предполагает несколько преимуществ: отзыв тренера (преподавателя), помощь в прохождении одного этапа обучения, заверенный сертификат по итогам завершения курса. Стоимость курса рассчитывается за месяц.
Разработка системы для дистанционного обучения
... так же непосредственной разработке системы дистанционного обучения и посвящена дипломная работа. 1. НЕОБХОДИМОСТЬ ВНЕДРЕНИЯ ДИСТАНЦИОННОГО ... сайта. На сегодняшний день пользователями сайта уже создано более 532 000 статей на русском языке. Такой подход имеет ряд недостатков. По ... возможность посредствам специального программного обеспечения иметь доступ к виртуальному классу, просматривают лекции, ...
Интерфейс системы удобный, количество переходов минимизировано за счет того, что вся информация по конкретному курсу представлена на одной странице. В основном меню есть фильтры по направлению курса, уровню требуемых знаний и организации, предоставляющей курс. Основная задача большинства страниц — стимулировать пользователя пройти тот или иной курс. Цветовая гамма и шрифт сайта направлены на удобство восприятия и читабельность текста.
Таким образом, преимуществами сайта можно считать: интуитивно понятный интерфейс, не перегруженный деталями, удобная навигация, подробная аннотация к курсу.
Недостатки: все курсы на английском языке, поэтому ресурс неэффективен для пользователей без знания английского языка, узкий круг тем.
Рисунок 2 – Страница сайта Udacity
Далее предлагаем рассмотреть один из русских образовательных ресурсов Национальный открытый университет “Интуит”. Этот сайт предоставляет услуги дистанционного обучения по различным образовательным программам. Сайт содержит несколько сотен открытых образовательных курсов, по итогам прохождения которых можно бесплатно получить электронный сертификат. Также возможно получение платных сертификатов о повышении квалификации.
Меню сложное, и предоставляет для пользователя множество отдельных разделов, курсы поделены по темам и специальностям. Как и в предыдущем ресурсе, есть аннотация к материалам курса, в которой отражается: уровень курса, доступ к курсу (ограниченный/свободный), количество студентов, участвующих в курсе, оценка курса, краткое описание курса; тема; специальности, для которых рекомендуется участие в курсе, теги, дата создания, иконка курса.
Интерфейс читабельный, в желтых тонах, однако меню перегружено ссылками. Вся информация по конкретному курсу представлена на одной странице, однако в слишком краткой форме, не отвечающей на все вопросы пользователя: по содержанию материалов, форме, уровню требуемых навыков, длительности.
Достоинства системы: бесплатный доступ, курсы представлены на русском языке.
Недостатки системы: сложная навигация по сайту, информация по курсу представлена в недостаточном объеме, значительная часть курсов представлено в текстовом формате, узость охвата тем (большинство курсов посвящено информационным технологиям).
Рисунок 3 – Страница сайта системы «ИНТУИТ»
Последний ресурс — Академия Хана (https://ru.khanacademy.org).
Сайт академии предоставляет доступ к коллекции из более чем 4200 бесплатных лекций по математике, истории, здравоохранению и медицине, финансам, физике, химии, биологии, астрономии, экономике, космологии, органической химии, основам американской гражданственности, истории искусства, макро и микроэкономике, компьютерным наукам. Материалы представлены на английском, однако часть материалов переведена волонтерами на другие языки. Кроме того, при переходе на сайт вы попадаете в русскоязычную версию меню, которое включает в себя перечисление всех тем курсов, без фильтров и навигации. Курсы представляют собой краткие видеоуроки, посвященные конкретному вопросу.
Проект электронного учебного курса «Свободное программное обеспечение»
... недостаточно. Для достижения поставленной цели необходимо решить следующие задачи: автоматизированный учебный курс сайт вычислительный изучить способы проектирования и использование электронного учебника в ... технических средств обучения. Актуальность настоящего исследования обусловлена потребностью в разработке новых подходов и совершенствовании существующих общедидактических, лингвистических и ...
Достоинства системы: полностью бесплатный доступ ко всем материалам ресурса, для доступа к материалам не нужна регистрация, на странице курса представлен необходимый минимум информации, вы можете изучить отдельный вопрос темы.
Недостатки системы: отсутствие навигации, ссылки на все курсы представлены на стартовой странице, хаотичное расположение тем.
Рисунок 4 – Страница сайта «Академии Хана»
На основании приведенного анализа, можно выделить несколько общих достоинств у представленных ресурсов: бесплатный доступ к информации, удобная навигация, аннотация к курсу. Однако, стоит избегать излишнего укрупнения навигации, как в случае сайтов Интуита и Академии Хана.
1.3 Анализ задач и сценарии использования
Общей схемой алгоритма выполняемых пользователем на сайте задач будет следующая:
Начало
Пользователь
вошел на сайт
Пользователь Регистрация
ДА
новый пользователя на сайте
НЕТ
НЕТ
произведена администратору
ДА
ИЛИ ДА
Создание виртуальных
Переход к
социальных связей/
Поиск курса материалам текущих
общение с другими
курсов пользователя
пользователями
НЕТ Знакомство с
Выполнение
материалами курса
других действий
на сайте
Курс пройден
ДА
Переход к итоговому
тестированию
Конец НЕТ
Рисунок 5 – Общий алгоритм задач, выполняемых пользователем на
сайте
Основной задачей, реализуемой пользователем в рамках образовательного ресурса, выступает, разумеется, изучение материалов курса/темы. Для упрощения записи на курс предполагается создать систему, автоматически фиксирующую разделы, которые посещал пользователь. Однако для этого необходима авторизация пользователя. Таким образом, одной из задач пользователя будет процедура авторизации на сайте, и изменение настроек аккаунта. Также, для получения обратной связи на начальном этапе развития проекта необходима организация коммуникации между пользователем и администратором сайта.
Вход в
Завершение
систему ДА
действия
произведен
НЕТ
Поиск панели
Ввод данных
пользователя
ДА
Данные
подтверждены,
вход в систему
произведен
НЕТ
Повторный
ввод данных
пользователя
ДА
Данные
подтверждены,
вход в систему
произведен
НЕТ
Отправить
сообщение
администратору
сайта
Рисунок 6 – Сценарий для авторизации пользователя на сайте
Отправить
сообщение
администратору
сайта
Поиск адреса
Есть возможность электронной почты в
отправить сообщение НЕТ разделе «Контакты»/
через сайт «О нас», либо в
шапке/футере сайта
ДА
Формирование
Адрес э.п.
текста ДА найден
сообщения
НЕТ
Невозможно
Отправка
завершить
сообщения действие
Рисунок 7 – Сценарий для отправки сообщения администратору
На тема «Создание WEB- сайтов»
... гипертекстовый браузер WorldWideWeb с функционалом веб-редактора, первый сервер на базе NeXTcube и первые веб-страницы. Создание сайтов 1 Способ. Заказываем сайт в веб-студии Разработанный с использованием новых ... просмотра веб-страниц (так называемая кроссбраузерность). Браузеры могут одни и те же элементы разметки или правила CSS интерпретировать по-своему, в результате чего некоторые пользователи ...
Кроме прохождения курса, необходим контроль знаний, который предполагает наличие итогового тестирования по результатам изучения материалов курса. А значит, еще одной задачей для пользователя будет заполнение данного теста.
Так как второй дополнительной задачей, которую призван решать данный ресурс, выступает общение между пользователями, предлагается реализовать в рамках сайта усеченный аналог социальной сети, с возможностью обмена сообщениями и образованием внутренних групп. Таким образом, пользователь должен также уметь пользоваться инструментами организации внутренних виртуальных связей. Последняя задача, которая должна быть реализована, это поиск контента внутри сайта, который позволит пользователю, не знакомому со структурой сайта, быстрее найти необходимую информацию.
Поиск интересующего
курса
Интересующий Ипользование
курс найден НЕТ инструмента поиска по
сайту
ДА
Знакомство с Интересующий
аннотацией курса курс найден
Аннотация Повторный поиск соответствует Невозможно
курса НЕТ требованиям завершить действие
пользователя к
содержанию курса
ДА
Изучение
материалов курса
НЕТ
Пользователь
завершил курс
ДА
Заполнение
итогового
тестирования
Тестирование Повторное
пройдено НЕТ заполнение теста
успешно
ДА
Переход к другому Тестирование
курсу/ следующим пройдено
материалам данного ДА
курса успешно
НЕТ
Невозможно
завершить действие
Рисунок 8 – Сценарий поиска курса и заполнения итогового
тестирования Создание виртуальных связей
Войти в личный кабинет
НЕТ
Определить Искомый Есть «Друзья пользователя, Формирование и пользователь на сайте» НЕТ который будет отправка заявки подтвердил
«Другом» заявку
Вернуться в
ДА личный кабинет
НЕТ
Состоит ли Группа пользователь в Определить Формирование и подтвердила каких-либо НЕТ целевую группу отправка заявки группах заявку
ДА
Написать сообщение ДА «Другу»/группе
Рисунок 9 – Создание виртуальных социальных связей на сайте Поиск по сайту
Искомая информация Завершение
ДА найдена с помощью действия навигации
НЕТ
Поиск строки Инструмент Невозможно поискового поиска по сайту НЕТ выполнить запроса по сайту найден действие
ДА
Ввод запроса для
поиска
НЕТ НЕТ
Поиск
произведен
ДА
Результаты поиска
содержат необходимую НЕТ Повторный поиск
информацию
ДА
Переход по ссылке к Результаты поиска
искомым ДА содержат необходимую
материалам информацию
Рисунок 10 – Сценарий поиска по сайту
1.4 Разработка прототипов веб-интерфейса и итеративный дизайн
В качестве инструмента для разработки прототипа интерфейса сайта был использован онлайн-ресурс Mocup Builder. Было создано несколько прототипов, отражающих будущее содержание страниц сайта. На рисунке 9 представлена главная страница сайта, в качестве основных разделов которой будут: меню пользователя, боковое меню со ссылками на основные курсы, и центральный блок с контентом конкретного раздела.
Поиск работы на рынке труда
... по нахождению наиболее приемлемого варианта трудоустройства. С макроэкономической точки зрения процесс поиска работы является важной составляющей функционирования рынка труда. Он обеспечивает пересечение требований ... Реферат посвящен одному из элементов функционирования рынка труда, которым является процесс поиска работы, который, в свою очередь, обеспечивает установление реального соотношения между ...
Рисунок 11 – Главная страница сайта
Внутри страницы курса предполагается разместить информацию о его структуре, со ссылками на внутренние темы и блоки материалов, а также основную информацию о его содержании. Кроме того, возможно описание внутренней связи тем и акцент на приобретаемых по завершению курса знаниях и навыках.
Рисунок 12 – Содержание курса
Внутри отдельной темы (крупного блока информации) также возможно краткое описание содержания материалов, его связи с другими блоками информации, и, непосредственно материалы курса и контрольные вопросы.
Рисунок 13 – Структура темы курса
По результатам тестирования данного прототипа, было отмечено отсутствие поисковой панели, также предлагается сместить меню пользователя в правый верхний угол, для большего удобства обращения. Также предлагается укрупнить темы, и вместо бокового меню создать стандартное горизонтальное меню в шапке сайта.
1.5 Реализация прототипа веб-сайта
На основании проведенного анализа и разработанного статичного прототипа, предлагается следующий возможный вариант прототипа вебсайта, реализованный с помощью CMS WordPress.
Рисунок 14 – Стартовая страница сайта
На главной странице, в данном случае, представлены новости, основная информация о проекте, и ссылки на часть ресурсов сайта. С помощью основного горизонтального меню сайта пользователю предлагается выбрать интересующий его курс. В правом верхнем углу представлен личный кабинет пользователя, отдельная ссылка на него содержится в основном меню, в данный момент это раздел «Активности», в котором в будущем предполагается сохранение результатов текущей активности пользователя, его рейтинга, и ссылки на материалы курсов, которые он в данный момент проходит. На странице реализованы инструменты поиска на правой боковой панели и в меню личного кабинета пользователя, для этого была произведена установка дополнительного плагина Relevanssi. Внутри страниц отдельных курсов будет содержаться их визуальная структура, со ссылками на отдельные темы и вопросы.
Рисунок 15 – Внутренняя структура курса
Страница отдельной темы курса содержит материалы курса, а также ссылки на следующую тему данного раздела. По завершению курса пользователь может перейти к итоговому тестированию по изученному материалу. Для этого был реализован пробный вариант теста по курсу английского языка с помощью плагина Wp-testing.
Рисунок 16 – Итоговое тестирование по английскому
Для организации виртуального взаимодействия между пользователями на платформу CMS был установлен плагин BuddyPress, который позволяет добавлять пользователей в «Друзья», обмениваться сообщениями, вступать в группы, и отслеживать собственную активность на сайте, а также управлять настройками профиля.
Рисунок 17 Личный кабинет пользователя
Таким образом, данный прототип реализует основные требования и сценарии работы, описанные в предыдущих разделах, однако теперь важно оценить, насколько он удобен с точки зрения пользователя.
Аналого-цифровые преобразователи и системы сбора данных по курсу
... физических величин: давления, уровня, потока, температуры, ускорения и т.д. 1.3. Аналого-цифровой преобразователь Бурный рост и развитие микропроцессорной техники привели к тому, что обрабатывать и хранить информацию, ... сигнала. Процесс преобразования аналогового сигнала в цифровой представлен на рисунке 2.1. Рисунок 2.1 – Преобразование аналогового сигнала в цифровой периодом дискретизации ...
1.6 Юзабилити-тестирование
Данное тестирование проводится для оценки успешности реализации взаимодействия пользователя с сайтом посредством его интерфейса. Это необходимо для отладки ошибок, которые не были учтены разработчиком. В ходе данной работы было проведено юзабилити-тестирование приведенного выше веб-прототипа, и были поставлены следующие задачи пользователя:
2. Вступить в группу/ отправить заявку в «Друзья»;
3. Поиск по сайту;
4. Ознакомиться с содержанием курса «Английский»;
5. Заполнить итоговый тест в курсе «Английский»;
6. Написать администратору сайта;
7. Изменить настойки аккаунта;
