Будь умным!


У вас вопросы?
У нас ответы:) SamZan.net

LinguLeo6 152Интерфейс сайта developer

Работа добавлена на сайт samzan.net:

Поможем написать учебную работу

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

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 2.6.2024

2

Содержание

Содержание 1

1. Аналитическая часть 2

1.1. Основные принципы создания интерфейса 2

1.2. Эргономичность интерфейса 2

1.3. Снижение числа ошибок пользователя при работе 3

1.4. Субъективное удовлетворение пользователя 3

1.4.1. Эстетика 3

1.4.2. Размещение информации на экране 5

1.4.3. Цвет 5

1.5. Сравнение аналогов 5

1.5.1. Интерфейс сайта «LinguaLeo» 6

1.5.2.Интерфейс сайта developer.alexanderklimov.ru 9

1.6. Заключение 11

2. Конструкторская часть 14

2.1. Главное окно интерфейса 14

2.2. Дочерний контент интерфейса 16

Заключение 18

Список литературы 19


1. Аналитическая часть

Человеко-машинное взаимодействие (HCI – Human-Computer Interaction) –  полидисциплинарное научное направление, существующее и развивающееся в целях совершенствования методов разработки, оценки и внедрения интерактивных компьютерных систем, предназначенных для использования человеком, а также в целях исследования различных аспектов этого использования

  1.  Основные принципы создания интерфейса

Основные принципы создания  интерфейса состоят в следующем:

естественность (интуитивность): отсутствие сложностей в поиске необходимых элементов интерфейса для управления процессом решения поставленной задачи;

непротиворечивость: использование идентичных приемов работы в разных частях системы;

неизбыточность: минимизация ввода информации;

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

гибкость: удобство использования интерфейса для пользователей с различными навыками.

1.2. Эргономичность интерфейса

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

Критерии эргономичности (качества) интерфейса:

скорость работы пользователя;

количество ошибок пользователя;

субъективная удовлетворенность пользователей;

скорость обучения пользователей.

Эргономичность оценивается по нескольким критериям. При проектировании интерфейса особое внимание уделялось следующим критериям: уменьшение количества ошибок и субъективная удовлетворенность пользователей.

1.3. Снижение числа ошибок пользователя при работе

Типы ошибок, совершаемые пользователем:

ошибки, вызванные недостаточным знанием предметной области;

опечатки.

При борьбе с ошибками необходимо:

плавное обучение пользователя в процессе работы;

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

снижение чувствительности системы к ошибкам;

самостоятельный выбор параметров (использование памяти программ, автозаполнение и т.д.).

1.4. Субъективное удовлетворение пользователя

Субъективная удовлетворенность складывается из следующих составляющих:

эстетика интерфейса;

субъективное восприятие скорости работы. Длительность различных процессов для пользователя воспринимается по-разному;

уменьшение вероятности стрессовых ситуаций;

интерфейс сообщения об ошибках.

1.4.1. Эстетика

Конструируемый предмет не должен быть заметен в процессе его использования. Необходимо добиваться неощущаемости интерфейса на подсознательном уровне. Для этого необходимо стараться придерживаться следующих правил:

избегать развязанности в визуальном дизайне (неупорядоченное расположение полей ввода, чрезмерное использование крупных объектов, различных цветов);

необходимо избегать ярких цветов, цветов которые «бьют» по глазам;

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

необходимо сделать дизайн интерфейса максимально легким и естественным. Облегчение идет за счет увеличения расстояния между объектами на форме. Необходимо добиваться контраста расположением пустот между этими элементами.

Красота – это относительное понятие. В интерфейсах нужно стремиться не столько к красоте интерфейса, сколько к его элегантности.

Преимущества элегантного интерфейса:

элегантный интерфейс не надоедает;

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

элегантный интерфейс приносит эстетическое удовольствие независимо от культурного уровня пользователя.

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

Даже самые незначительные закономерности в интерфейсе воспринимаются на подсознательном уровне. Под закономерностью понимается любое методически выдерживаемое соответствие свойств у разных объектов. Однажды используемые закономерности должны применяться во всей системе.

1.4.2. Размещение информации на экране

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

1.4.3. Цвет 

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

Наиболее эффективно применение цвета для следующих действий:

группировки информации;

выделения различий между информацией;

выделения простых сообщений (ошибки, состояния и т.д.).

1.5. Сравнение аналогов

Компьютерные обучающие программы заявили о себе как о средстве обучения в начале 70-х годов, в период появления персональных компьютеров, но до сих пор не имеют общепризнанного, «узаконенного» названия. Наиболее часто встречаются такие формулировки, как программно-методический комплекс, программные средства учебного назначения, контролирующие обучающие программы и др.

Рассмотрим некоторые из них.

1.5.1. Интерфейс сайта «LinguaLeo»

Рис. 1. Интерфейс сайта LinguaLeo

Сайт http://lingualeo.ru разработан в соответствии с современными тенденциями и позволяет пользователю в простом и удобном виде использовать широкие возможности для эффективной организации обучения английскому языку. Интерфейс представлен на рис. 1.

По данным создателей сервиса, на 11 июля 2013 года на нём зарегистрировано более 4.500.000 пользователей, преимущественно из России и стран СНГ.

Сервис заявляет, что базируется на принципах, которые названы на сайте как «семь секретов изучения иностранных языков» и включают:

мотивацию и влечение;

восприятие аутентичного, живого языка;

моделирование и копирование;

Взаимовлияние;

оптимальную интенсивность;

регулярность;

практичность и эффективность.

Задача пользователя — выбирать и осваивать интересные тексты, отмечая неизвестные для себя слова с переводом, проходить тренировки и выполнять квесты.

В проекте реализована игрофикация с использованием персонажа — льва Лео.

14 июня 2012 года компания LinguaLeo объявила о привлечении венчурных инвестиций в объёме $3.000.000 от российского венчурного фонда Runa Capital.

Рис. 2. Меню пользователя

Пользователи веб-сервиса LinguaLeo получают доступ к библиотеке видео, аудио и текстовых материалов; интерактивным тематическим курсам (видео и грамматика);

Рис. 3. Журнал прогресса обучения

личному словарю с ассоциациями и озвучкой к каждому слову; набору тренировок (аудирование, кроссворд, перевод слов), тематическим глоссариям; а также к журналу развития, где отображается реальный и

возможный прогресс в     изучении языка.

Бизнес-модель сервиса — freemium: часть возможностей, например, изучение больше десяти слов в день, доступна только для платных пользователей (цена варьируется ежедневно).

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

Рассмотрим выявленные преимущества и недостатки интерфейса системы.

Преимущества интерфейса:

интуитивно понятный интерфейс, облегчающий обучение пользователя. Разделение интерфейса на окна, группировка объектов;

приятные, сглаженные шрифты в основных окнах приложения;

яркие в меру цвета, которые улучшают восприятие информации;

при наведении курсора на любой объект интерфейса появляется описание содержимого;

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

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

Недостатки:

отсутствие справочной информации и информации о проекте;

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

  1. бизнес – модель сервиса сильно ограничивает изучение языка для пользователей, обучающихся на бесплатной основе;
  2.  

Рис. 4. План изучения языка

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

1.5.2.Интерфейс сайта developer.alexanderklimov.ru 

Данный сайт позволяет решать обширный круг задач, связанных с обучением языка Java и написания программ для мобильной платформы Android. Данный интернет - ресурс подойдет как для начинающих пользователей, которые начинают учить данный язык программирования с нуля так и для опытных, уже имеющих определенные знания и навыки для восполнения пробелов в некоторых областях предмета.

Данный сайт представляет собой собственный проект разработчика Александра Климова, который назвал его «Освой Android играючи».

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

Интерфейс сайта представлен на рис. 5.

Рис. 5. Интерфейс сайта developer.alexanderklimov.ru

Преимущества:

приятный интуитивно понятный интерфейс;

интерфейс позволяет сконцентрироваться и не отвлекает внимание пользователя;

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

материал представлен в форме, хорошо понятной для восприятия:

множество примеров, описываемых исходным кодом, а также его подробным пояснением;

цвета интерфейса не кричащие, не отвлекают от изучения основного материала.

Недостатки:

сайт имеет довольно «простой» внешний вид с эстетической точки зрения;

отсутствие скругленных элементов;

более 70 процентов информация закрыто для пользователя и доступно только после оплаты доступа;

Рис. 6. Основной контент сайта

простой интерфейс сайта кажется еще более неестественнее из—за рекламы в правой части окна сайта;

 

1.6. Заключение

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

Оценим каждый из интерфейсов (табл. 1) по следующим параметрам:

скорость работы;

скорость обучения;

эстетика;

экранная плотность;

цвет.

Оценка производится по 10-балльной шкале следующим образом:

1 балл соответствует низкому уровню;

10 баллов соответствует высокому уровню;

5 баллов соответствует среднему уровню;

промежуточные баллы соответствуют понятиям «постольку, поскольку», «более или менее», «выше среднего» и т.д.

Таблица 1

Название

Скорость работы

Субъективная удовлетворенность

Система уведомления об ошибках

Скорость обучения

Эстетика

Разреженность элементов

LinguaLeo

8

6

9

8

7

Developer.

alexanderclimov

6

8

4

6

3

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

В качестве ключевых направлений, способствующих созданию удобного интерфейса, были выбраны следующие:

создать актуальный, но не перегруженный интерфейс;

необходимо грамотно распределить информационную нагрузку приложения, максимально возможно снизив экранную плотность;

реализовать систему помощи;

использовать в работе не более четырех цветов;

корректно применить автозаполнение;

особое внимание уделить возникновению и отображению ошибок: необходимо минимизировать возможность возникновения ошибок; информация об ошибках не должна парализовать действия пользователя, а должна способствовать разрешению проблемной ситуации;

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


2. Конструкторская часть

Рис. 7. Главное окно личного кабинета студента

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

2.1. Главное окно интерфейса

В ходе проектирования был разработан следующий интерфейс главного окна (рис. 7).

При входе в систему «УМКА» студент вводит свои личные данные. Логином является фамилия, паролем – номер зачетной книжки. После идентификации введенных данных и определения статуса пользователя, студент попадает в личный кабинет.

Рис. 8. Второй уровень отображения контента

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

Далее идет динамическое построение первого уровня меню.

2.2. Дочерний контент интерфейса

Справа отображается контент. В нем содержится блоки уведомлений о событиях, происходящих в зависимости от заданного для них времени (например уведомление о выдаче новой работы, о приближении конца срока сдачи работы).

При выборе в меню определенного предмета, открывается перечень работ по данному предмету (второй уровень меню). Также здесь можно просмотреть и другие доступные работы для данного времени (рис.8).

Рис. 9. Контент с конкретными заданиями

Выполненные работы становятся неактивными, выделяются серым цветом, их можно скрыть. Доступные работы выделяются зеленым цветом, горящие – красным.

Нажав на кнопку «Просмотр» в поле конкретной работы переходим к этой конкретной работе (рис. 9).

Здесь можно увидеть подробное описание задания к работе. Также предполагается, что часть работ выполняется в текущем интерфейсе (например тестирование, в курсовом проекте существует возможность прикрепить файлы программы и записку для отправки преподавателю на проверку).

Также имеется блок контента, отвечающий за выполнение двух действий: можно задать вопрос преподавателю и распечатать задние.

Заключение

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

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

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

На данном этапе в УМКА реализованы методы вывода учебного плана для конкретного пользователя, в выводимой таблице представлена информация о сроках сдачи работ о датах их доступности к выполнению. Для каждого студента выводится информация о количестве попыток сдачи работ и информация о лучшем результате.

В качестве дальнейшего направления развития модуля предполагается разработка бально-рейтинговой системы оценки успеваемости. Данная система на основе известного учебного плана позволит формировать максимальный рейтинг на каждый день и рассчитывать текущий рейтинг студента.

список литературы

  1.  Дуванов, А.А. Web-конструирование. HTML/А.А. Дуванов –СПб: БХВ-Петербург, 2009.-503с.
  2.  Дунаев, В.В. Основы web дизайна. Самоучитель/В.В. Дунаев –СПб: БХВ-Петербург, 2008.-504с.
  3.  Карпова, Т.С. Базы данных: модели, разработка, реализация. –СПб: Питер, 2008.-458с.
  4.  Кириленко, А. Самоучитель HTML/А. Кириленко –М.: Питер, 2008.-271с.
  5.  Колисниченко, Д.Н. PHP 5 в теории и на практике: самоучитель. – СПб: Наука и техника, 2008. – 640с.




1. Контрольная работа.html
2. Фінанси як наукова дисципліна
3.  Предпосылки Крепостнический строй вступивший в стадию своего разложения стал восприниматься мыслящей ч
4. Вариант 1 1 Rp
5. Сопротивление материалов
6. Специфика психического развития ребенка
7. ИОводителя Модель автоб
8. Статья- Детская ревность
9. Реферат на тему- Залежність клімату від широти підстиляючої поверхні циркуляції атмосфери
10. Волны, фотоны, кванты
11. Основные принципы избирательного права
12. практическая конференция ТЕНЕНЦИИ ФОРМИРОВАНИЯ НАУКИ НОВОГО ВРЕМЕНИ 2728 декабря 2013Г
13. Введение Жизнь без компьютеров уже не представляется реальной ни для взрослых ни для детей
14. Русская литература конца восстановительного и начала реконструктивного периода1
15. Апология сумасшедшего
16. ЗАПИСКА Розрахунковографічна робота 1 ldquo;Розрахунок та проектування вантажних гвинтових пристроївr
17. Анкетирование.html
18. етичних теорій які утворювали власні школи Академії Ліцеї тощо у яких пропагували моральні цінності гума
19. Кинетика замедленной флуоресценции органических молекул в Н-парафинах при 77 К и ее математическая модель
20. транспортное происшествие ДТП ~ транспортная авария возникшая в процессе дорожного движения с участием тр