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

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

Реферат

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

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

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

• 1 Десять эвристик Якоба Нильсена
• 1.1 Информированность о состоянии системы
• 1.2 Схожесть системы с реальным миром
• 1.3 Свобода действий
• 1.4 Единообразие и стандарты
• 1.5 Предотвращение ошибок
• 1.6 На виду, а не в памяти
• 1.7 Гибкость и эффективность
• 1.8 Эстетичный и минималистичный дизайн
• 1.9 Понимание проблем и их решение
• 1.10 Справочные материалы и документация
• 2 Экспертная оценка
• 3 Карточная сортировка
• 4 Анкетирование
• 5 Коридорное тестирование и тест пяти секунд
• 6 Описание метода GOMS
• 7 Интерфейс программы кластеризации данных
• Выводы
• Литература
• Введение
• Данная работа направлена на изучение различных подходов к построению максимально понятного, удобного в использовании и визуально гармоничного интерфейса программы, интернет сайта или приложения.
• Рассматриваемые методы разработаны ведущими специалистами в сфере юзабилити (удобства в использовании), которые проанализировали всевозможные аспекты человеческого организма к восприятию информации, например: психологическое состояние человека, его уровень интеллектуального развития и т. д.
• Методы, описанные в данной работе, нашли свое применение в создании пользовательского интерфейса программы кластеризации данных.
• От того, насколько пользовательский интерфейс будет функционален, понятен и удобен конечному пользователю, во многом зависит успешность решения задачи поставленной при проектировании ПО.

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

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

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

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

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

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

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

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

пользовательский интерфейс сайт дизайн Рис. 1 — Пример продуманного интерфейса интернет магазина Одна из частых ошибок многих интернет-магазинов — после оформления и отправки формы заказа пользователем оставлять его наедине с самим собой. Сразу возникает много сомнений — а работает ли магазин? Все ли верно я сделал? Может быть, ошибся в контактных данных? Когда я получу свой заказ? Особенно страшно, когда заказ был оплачен, например, банковской картой.

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

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

Рис. 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. Приведу в пример некоторые утверждения из этих списков:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Принципы

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

Operators (операторы) — элементарные моторные, познавательные действия, которые используются для достижения целей (например, «кликнуть» манипулятором «Мышь», нажать клавишу Insert). Операторы не разложимы. Предполагается, что пользователю требуется определенное количество времени, чтобы выполнить каждый оператор.

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

Selection 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 — Обозначение операторов

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

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

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

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с.

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

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

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

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

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

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