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

 

Міністерство освіти та науки, молоді та спорта України

Український державний хіміко-технологічний університет













Реферат

по дисциплине: "Проектирование пользовательских интерфейсов"

тема: "Пользовательский интерфейс программы кластеризации данных"












м. Днепропетровск 2014

Оглавление


1Десять эвристик Якоба Нильсена

.1Информированность о состоянии системы

.2Схожесть системы с реальным миром

.3Свобода действий

.4Единообразие и стандарты

.5Предотвращение ошибок

.6На виду, а не в памяти

.7Гибкость и эффективность

.8Эстетичный и минималистичный дизайн

.9Понимание проблем и их решение

.10Справочные материалы и документация

Экспертная оценка

Карточная сортировка

Анкетирование

Коридорное тестирование и тест пяти секунд

Описание метода GOMS

Интерфейс программы кластеризации данных

Выводы

Литература


Введение


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

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

Методы, описанные в данной работе, нашли свое применение в создании пользовательского интерфейса программы кластеризации данных.

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

1Десять эвристик Якоба Нильсена


Десять правил выведены гуру юзабилити Якобом Нильсеном - одним из основателей компании Nielsen Norman Group, оказывающей консультационные услуги в области юзабилити. Свои правила Нильсен назвал эвристиками.

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

Якоб Нильсен сформулировал 10 эвристик в 1990 году, но, несмотря на прошедшие годы, они не теряют своей актуальности.

Когда можно использовать эвристики?

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


1.1Информированность о состоянии системы


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

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

<#"justify">1.2Схожесть системы с реальным миром


<#"justify">Рис. 2 - Пример непродуманного интерфейса интернет магазина


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

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

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


1.3Свобода действий


Дайте пользователям возможность отмены действий, а также возврата к ранее отмененным действиям.

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

Например, при удалении страницы система дает возможность ее восстановить рис. 3.


Рис. 3 - Интерфейс с возможностью отката совершенного действия


1.4Единообразие и стандарты


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

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

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

Если же все товары у вас находятся в Каталоге товаров, то при переходе со страницы на страницу пользователь не должен вдруг обнаружить раздел Наша продукция.


1.5Предотвращение ошибок


Сведите к минимуму количество условий, в которых могут быть допущены ошибки.


Рис. 4 - Всплывающее окно подсказки


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

Или еще лучше - с примерами данных рис. 5:

Рис. 5 - Пример правильного заполнения формы


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


1.6На виду, а не в памяти


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

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

Рис. 6 - Вся необходимая информация под рукой


1.7Гибкость и эффективность


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

Упрощайте функции, которыми посетители вашего сайта пользуются чаще всего рис.7:

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

Еще один пример гибкости на сайте - использование выпадающих списков в формах регистрации/заказа вместо полей свободного ввода с клавиатуры. Исследования подтверждают: выбирать из вариантов гораздо проще, чем вписывать данные. Особенно странно выглядят формы, в поля которых требуется ВПИСАТЬ город проживания или дату доставки.

Рис. 7 - Громоздкое описание часто используемых функций


Рис. 8 - Избыточность необходимой информации

1.8Эстетичный и минималистичный дизайн


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

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

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

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


1.9Понимание проблем и их решение


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

Рассмотрим пример: пользователь в поиске на сайте ввел некорректный запрос. Хороший ресурс не пугает его пустой страницей без результатов или строками кода с ошибкой, а предлагает варианты решения проблемы рис. 9:

Рис. 9 - Коррекция интерфейса неправильного ввода пользователя


1.10Справочные материалы и документация


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

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

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

Рис. 10 - Справочная информация в реальном времени


а)


б)

Рис. 11 а) и б) - Обучение в реальном времени

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


2Экспертная оценка


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

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

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

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

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


Рис. 12 - Список решений для оценки трудозатрат


3Карточная сортировка


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

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

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

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

Полезно попросить участников сортировки в конце теста найти информацию в той структуре, которую они сами создали: так можно проверить, внимательно ли они отнеслись к заданию.

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

Самый главный плюс этого метода - объективно удобная архитектура сайта, которую спроектировали сами пользователи, а не менеджер проекта или дизайнер на основании своих догадок.

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

4Анкетирование


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


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

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



Для такого теста достаточно опросить 7-10 представителей ЦА и на основании результатов выбрать тот вариант дизайна, который в наибольшей степени вызывает «целевые» эмоции у ваших посетителей.

Формальная анкета представляет собой список утверждений, которые пользователи должны оценить применительно к себе по 10-балльной (или иной) шкале. Существует множество западных готовых формальных анкет, например, QUIS (Questionnaire for User Interface Satisfaction), CSUQ (Computer System Usability Questionnaire) или PUEU (Perceived Usefulness and Ease of Use) от компании IBM. Приведу в пример некоторые утверждения из этих списков:

. Использование системы в моей работе позволит мне выполнять задачи быстрее.

. Начать работу было легко; я не столкнулся с существенными трудностями.

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

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

5. Система работает достаточно быстро.

6. Мне нравится внешний вид интерфейса.

. Систему можно легко настроить под мои нужды.

. В любой момент времени я понимал, что должен сделать дальше.

. Система дает сообщения об ошибках, которые ясно говорят мне, как исправлять проблемы.

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


5Коридорное тестирование и тест пяти секунд


Следующие два способа оценки интерфейса относятся к экспресс-методам.

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

При этом, показывая макет коллеге, задайте ему ряд вопросов, которые вас волнуют, например: «Что ты ожидаешь увидеть, если перейдешь в этот раздел?» или «Чтобы найти информацию/решить задачу, где бы ты искал?». Такие вопросы на тестирование ожиданий дадут понять, однозначно ли другие люди понимают идеи и логику, которые вы заложили в интерфейс.

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

Суть метода пяти секунд заложена в его названии: вы предлагаете человеку в течение пяти секунд посмотреть на макет, затем убираете его и спрашиваете, что он увидел или запомнил. Этот тест позволяет узнать, какие элементы на странице больше всего «западают в душу» пользователям и на что они обращают внимание в первую очередь. Это лучше всего работает при тестировании рекламных баннеров и промоматериалов. Например, так можно сравнить эффективность рекламных мест на странице или протестировать содержание самих баннеров, спросив после пяти секунд: «О чем был баннер на макете?» или «Какой баннер вы запомнили?»

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


6Описание метода GOMS

это семейство методов, позволяющих провести моделирование выполнения той или иной задачи пользователем и на основе такой модели оценить качество интерфейса (точнее говоря оценить время выполнения задачи как основной критерий качества). GOMS это сокращение от английского Goals, Operators, Methods, and Selection Rules - Цели, Операторы, Методы и Правила выбора. Данный способ был предложен S. K. Card, T. P. Moran и A. Newell в 1983 году.

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

Принципы

Goals (цели или задачи) - то, чего хочет достичь пользователь. Они могут быть определены на различных уровнях абстракции, от целей высокого уровня (например, написать научную статью) до целей низкого уровня (например, удалить слово). Цели более высокого уровня можно разложить на подцели и расположить иерархически.(операторы) - элементарные моторные, познавательные действия, которые используются для достижения целей (например, «кликнуть» манипулятором «Мышь», нажать клавишу Insert). Операторы не разложимы. Предполагается, что пользователю требуется определенное количество времени, чтобы выполнить каждый оператор.(методы) - это описание процедуры для достижения целей. По сути, метод является алгоритмом, чтобы пользователь запомнил последовательность подцелей и операторов, необходимых для достижения желаемой цели. Например, один из способов достижения цели «Удалить слово» это поставить курсор в начало слова с помощью мыши и нажать комбинацию клавиш Ctrl+Delete. Другой способ достичь той же цели - с помощью клавиш со стрелками поставить курсор в начало слово и нажать комбинацию клавиш.Rules (правила выбора) - определяют, какие методы должны быть использованы для достижения данной цели, в зависимости от контекста. Правила выбора обычно принимают форму условного оператора, например, «если слово будет расположено менее чем на три линии от текущего положения курсора, тогда используем метод «удаление слова-использование клавиш со стрелками», иначе используем метод «удаление слова - использование мыши».

Варианты метода

1.Card, Moran and Newell GOMS (CMN-GOMS) - оригинальная формулировка, предложенная Кардом, Мораном и Ньюэллом. Определяет то, как выразить в иерархии главную цель и подцели, методы и операторы, и как формулируются правила выбора.

2.Cognitive Perceptual Model (CPM) - эта модель предполагает, что перцептивные, когнитивные и моторные операторы могут выполняться параллельно. Для изображения операторов и зависимостей между ними используется график (т.н. PERT диаграмма). Последовательность, которая представляет собой самый длинный путь на графике, называется критическим путем и является оценкой общего времени, необходимого для выполнения данной задачи.

3.Keystroke-level Model (KLM) - упрощенная версия CMN модели, в которой используются только операторы, нет целей, методов или правил выбора. Аналитик просто перечисляет нажатия на клавиши, движения мышью, которые должен произвести пользователь, чтобы решить задачу, а затем использует несколько простых эвристических правил, чтобы расставить операторы М (операторы ментальной подготовки).

4.Natural GOMS Language (NGOMSL) - более строго определенная версия, представляет собой процедуру выявления всех GOMS компонентов, выраженную обычным языком программирования. NGOMSL включает в себя эмпирические правила о количестве возможных шагов в методе, как ставить и завершать постановку целей, и какую информацию должен помнить пользователь, решая задачу.


Таблица 1 - Обозначение операторов

ОператорВремяОписаниеK0.28 секНажатие клавиши. Время, необходимое для того, чтобы нажать клавишу.T(n)n*K секПоследовательность нажатий клавиш. Время, необходимое для того, чтобы нажать последовательно несколько клавиш.P1.1 секУказание. Время, необходимое пользователю для того, чтобы указать на какую-то позицию на экране монитора.B0.1 секНажать/отпустить кнопку мыши. Время, необходимое пользователю, чтобы нажать или отпустить кнопку мышиBB0.2 секКлик кнопкой мыши. Время, необходимое пользователю, чтобы сделать один клик мышью.H0.4 секПеремещение. Время, необходимое пользователю для того, чтобы переместить руку с клавиатуры на ГУВ или с ГУВ на клавиатуру.M1.2 секМентальная подготовка. Время, необходимое пользователю для того, чтобы умственно подготовиться к следующему шагу.W (t)0,1 секОтвет. Время, в течение которого пользователь должен ожидать ответ компьютера.

Самым распространенным остается метод KLM (Keystroke-level-Model). Он представляет собой быстрый и эффективный способ оценки времени выполнения заданий опытными пользователями. Подходит для сравнения множества альтернативных решений в плане задач на большом числе пользователей.

Таблица 2 - Пример описания действий эксперта

Действие: запуск сканирования диска С в антивирусе Avast экспертом№Тип операцииВремя операцииОписание1H0,4Перемещение руку к манипулятору «Мышь».2M1,2Обдумывание.3P1,1Перевести указатель «Мыши» к разделу «Сканировать компьютер» в меню.4BB0,2Клик «Мышкой».5M1,2Обдумывание.6P1,1Перевести указатель «Мыши» к разделу «Выберите папку для сканирования», к кнопке «Пуск».7BB0,2Клик «Мышкой».8M1,2Обдумывание.9P1,1Переместить указатель мыши к чекбоксу «Локальный диск С».10BB0,2Клик «Мышкой».11M1,2Обдумывание.12P1,1Переместить указатель мыши к кнопке «Ок».13BB0,2Клик «Мышкой».Сумма 10,4

Таблица 3 - Пример описания действий пользователя

Действие: запуск сканирования диска С в антивирусе Avast пользователем№Тип операцииВремя операцииКомментарий1H0,4Перемещение руку к манипулятору «Мышь».2M1,2Обдумывание.3P1,1Перевести указатель мыши к разделу «Сканировать компьютер» в меню.4BB0,2Клик «Мышкой».5M1,2Обдумывание.6M1,2Перевести указатель мыши к разделу «Выберите папку для сканирования», к кнопке «Пуск».7BB0,2Клик «Мышкой».8M1,2Обдумывание.9P1,1Переместить указатель мыши к чекбоксу «Локальный диск С».10BB0,2Клик «Мышкой».11M1,2Обдумывание12P1,1Переместить указатель мыши к кнопке «Ок».13BB0,2Клик «Мышкой».14M1,2Обдумывание.15P1,1Перевести указатель «Мыши»к разделу.16BB0,2Клик «Мышкой».Сумма 13

7Интерфейс программы кластеризации данных



Описание интерфейса:

«Выбор набора данных» и «Количество кластеров» - расширенные комбобоксы (выпадающие списки) со значениями наборов данных предоставляемых пользователю на выбор.

«Еще…», «Пуск», «График» - кнопки обработки сценария работы программы.

Exponent, Max. Iterations, Min. Improvement - поля ввода данных пользователя, заполненные значениями по умолчанию.

Выводы


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

Использованы различные методы оценки эффективности ПИ в процессе проектирования.

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

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

Использовано четыре основных критерия качества интерфейса:

·скорость работы пользователей

·количество человеческих ошибок

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

·субъективное удовлетворение

Литература


1.Cooper A. About Face 2.0: The Essentials of Interaction Design / Alan Cooper, Robert Reimann. - Wiley Publishing Inc.- 2003, - 540с.

2.Дизайн Пользовательского Интерфейса / В. Головач.- М.: Вилиямс.- 2002.- 150с.

.Головач В.5 ПРАВИЛ хорошего интерфейса, - М.: Открытые системы.- №6.- 2000.- 246с.

.Купер А. об интерфейсе. Основы проектирования взаимодействия. / Алан Купер .- Символ-Плюс: 2009.- 336с.

.Уодтке К.: Информационная архитектура. Чертежи для сайта. / Кристина Уодтке .- Кудиц-образ: 2004.- 452с.

.Нильсен Я., Лоранжер Х. Web-дизайн. Удобство использования Web-сайтов. / Якоб Нильсен. Хоа Лоранжер.- Вильямс: 2007.- 268с.

.Круг С. Веб-Дизайн: книга Стива Круга или не заставляйте меня думать!. / Стив Круг.- Символ-Плюс: 2008.- 458с.

.Тидвелл Д. Разработка пользовательских интерфейсов. / Дженнифер Тидвелл.- Питер: 2007.- 244с.


Міністерство освіти та науки, молоді та спорта України Український державний хіміко-технологічний університет

Больше работ по теме:

КОНТАКТНЫЙ EMAIL: [email protected]

Скачать реферат © 2017 | Пользовательское соглашение

Скачать      Реферат

ПРОФЕССИОНАЛЬНАЯ ПОМОЩЬ СТУДЕНТАМ