|
|
Практическая работа. Анализ пользовательского интерфейса. ПЗ№5. Практическая работа 5 Графический интерфейс пользователя Время выполнения 4 часа
Практическая работа №5
Графический интерфейс пользователя
Время выполнения: 4 часа?
Графический интерфейс пользователя (GUI) — разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на дисплее, исполнены в виде графических изображений.
В GUI пользователь имеет произвольный доступ (с помощью устройств ввода — клавиатуры, мыши, джойстика и т. п.) ко всем видимым экранным объектам (элементам интерфейса) и осуществляет непосредственное манипулирование ими. Графический интерфейс пользователя является частью пользовательского интерфейса и определяет взаимодействие с пользователем на уровне визуализированной информации.
Можно выделить следующие виды графического интерфейса пользователя:
простой: типовые экранные формы и стандартные элементы интерфейса, обеспечиваемые самой подсистемой GUI;
истинно-графический, двухмерный: нестандартные элементы интерфейса и оригинальные метафоры, реализованные собственными средствами приложения или сторонней библиотекой;
трёхмерный.
Проектирование графического интерфейса пользователя представляет собой междисциплинарную деятельность. Оно требует усилий многофункциональной бригады — один человек, как правило, не обладает знаниями, необходимыми для реализации многоаспектного подхода к проектированию GUI-интерфейса. Надлежащее проектирование GUIинтерфейса требует объединения навыков художника-графика, специалиста по анализу требований, системного проектировщика, программиста, эксперта по технологии, специалиста в области социальной психологии, а также, возможно, некоторых других специалистов, в зависимости от характера системы. В современном мире миллиарды вычислительных устройств. Еще больше программ для них. И у каждой свой интерфейс, являющийся «рычагами» взаимодействия между пользователем и машинным кодом. Не удивительно, что чем лучше интерфейс, тем эффективнее взаимодействие. Однако далеко не все разработчики и даже дизайнеры, задумываются о создании удобного и понятного графического интерфейса пользователя.
Какие элементы интерфейса (ЭИ) создавать?
1 Разработка интерфейса обычно начинается с определения задачи или набора задач, для которых продукт предназначен.
2 Простое должно оставаться простым. Не стоит усложнять интерфейсы. Нужно постоянно думать о том, как сделать интерфейс проще и понятнее.
3 Пользователи не задумываются над тем, как устроена программа. Все, что они видят — это интерфейс. Поэтому, с точки зрения потребителя именно интерфейс является конечным продуктом.
4 Интерфейс должен быть ориентированным на человека, т.е. отвечать нуждам человека и учитывать его слабости. Нужно постоянно думать о том, с какими трудностями может столкнуться пользователь.
5 Необходимо думать о поведении и привычках пользователей. Не менять хорошо известные всем ЭИ на неожиданные, а новые делать интуитивно понятными.
6 Разрабатывать интерфейс необходимо исходя из принципа наименьшего возможного количества действий со стороны пользователя.
Чеклист для оценки юзабилити приложения
1. Понятна ли основная функция приложения с первого взгляда на главный экран
Здесь важно продумать сценарий использования приложения пользователем — и решить, что именно он ожидает увидеть, открыв приложение. Ради чего он нажал на иконку? Есть подписи, комментарии к полям и кнопкам
Хорошо продуманный путь пользователя покажет правильную последовательность экранов. Каждый последующий экран должен приближать пользователя к цели. Не нужно искусственно уменьшать или увеличивать количество шагов.
Соблюсти логику движения поможет правило «один экран — одна основная функция». Остальные функции на экране должны быть менее заметными.
2. Все ли кнопки имеют понятный пользователю дизайн и удобный размер
Приложение провалит любое юзабилити-тестирование, если кнопки будут:
Непонятны.
Неудобны.
Незаметны.
Это странно, но в некоторых приложениях кликабельные элементы не очевидны на фоне других. Фактически обнаружить такую кнопку можно лишь «методом тыка». Получается, что и нажать на кнопку можно случайно. Всё это затрудняет взаимодействие с интерфейсом.
3. Может ли пользователь легко вернуться на предыдущий экран
Худшее решение — вообще лишить пользователя такой кнопки (например, заставляя раз за разом возвращаться в меню).
4. Может ли пользователь воспользоваться поиском и фильтром, если список слишком длинный
Если в приложении пользователь натолкнётся на длинный список товаров, картинок, файлов, сообщений, то нужно предоставить пользователю инструмент, который поможет найти то, что нужно.
С другой стороны, важно понимать, что фильтр уместен, когда у позиций поиска есть категории и различные свойства. А также если пользователи точно не знают, что ищут. В противном случае фильтр может лишь затруднить поиск.
5. Сохраняются ли данные при выходе из приложения
Представьте, вы заполняете корзину, потом решаете поразмыслить и выходите из приложения. И вот вы решились оформить покупку, входите в приложение, а корзина пуста. Самые стойкие заполнят корзину вновь, другие плюнут и уйдут к конкурентам.
То же касается непредвиденных сбоев. После сбоя введённые данные должны сохранятся.
6. Правилом "хорошего тона" является сообщение пользователю кратких сведений о работе с программой (справка и информация о разработчике, или ссылка)
Если приложение будет отвечать хотя бы этим простым правилам юзабилити, пользователи уже будут благодарны.
Какой должен быть дизайн элементов интерфейса?
В дизайне ЭИ нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:
1 Цвет. Цвета делятся на теплые (желтый, оранжевый, красный), холодные (синий, зеленый), нейтральные (серый). Обычно для ЭИ используют теплые цвета. Это как раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.
2 Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Опять же, форма как и цвет достаточно субъективна.
3 Основные ЭИ (часто используемые) должны быть выделены. Например, размером или цветом.
4 Иконки в программе должны быть очевидными. Или подписанными. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.
Как правильно расположить элементы интерфейса на экране?
1 Есть утверждение, что визуальная привлекательность основана на пропорциях. Помните известное число 1.62? Это так называемый принцип Золотого сечения. Суть в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина сайта 900px, делим 900 на 1.62, получаем 555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части.
2 Перед расположением, ЭИ следует упорядочить (сгруппировать) по значимости. Т.е. определить, какие наиболее важны, а какие — менее.
3 Обычно (но не обязательно), элементы размещаются в следующей градации: слева направо, сверху вниз. Слева вверху самые значимые элементы, справа внизу — менее. Это связано с порядком чтения текста. В случае с сенсорными экранами, самые важные элементы, располагаются в области действия больших пальцев рук
4 Необходимо учитывать привычки пользователя. Например, если в Windows кнопка закрыть находится в правом верхнем углу, то программе аналогичную кнопку необходимо расположить там же. Т.е. интерфейс должен иметь как можно больше аналогий, с известными пользователю вещами.
5 Размещать ЭИ стоит поближе там, где большую часть времени находится курсор пользователя. Что бы ему не пришлось перемещать курсор, например, от одного конца экрана к другому.
6 Элемент интерфейса можно считать видимым, если он либо в данный момент доступен для органов восприятия человека, либо он был настолько недавно воспринят, что еще не успел выйти из кратковременной памяти. Для нормальной работы интерфейса, должны быть видимы только необходимые вещи — те, что идентифицируют части работающих систем, и те, что отображают способ, которым пользователь может взаимодействовать с устройством.
7 Отступы между ЭИ лучше делать равными или кратными друг-другу.
Как элементы интерфейса должны себя вести?
1 Пользователи привыкают. Например, при удалении файла, появляется окно с подтверждением: «Да» или «Нет». Со временем, пользователь перестает читать предупреждение и по привычке нажимает «Да». Поэтому диалоговое окно, которое было призвано обеспечить безопасность, абсолютно не выполняет своей роли. Следовательно, необходимо дать пользователю возможность отменять, сделанные им действия.
2 Если пользователю дают информацию, которую он должен куда-то ввести или как-то обработать, то информация должна оставаться на экране до того момента, пока человек ее не обработает. Иначе он может просто забыть.
3 Нужно избегать двусмысленности. Например, на фонарике есть одна кнопка. По нажатию фонарик включается, нажали еще раз — выключился. Если в фонарике перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или нет. Поэтому, вместо одной кнопки выключателя, лучше использовать переключатель (например, checkbox с двумя позициями: «вкл.» и «выкл.»). За исключением случаев, когда состояние задачи, очевидно.
4 Имеет смысл делать монотонные интерфейсы. Монотонный интерфейс — это интерфейс, в котором какое-то действие, можно сделать только одним способом. Такой подход обеспечит быструю привыкаемость к программе и автоматизацию действий.
5 Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не несколько. Пример — стартовая страница браузера Chrome.
6 Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмотрена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (status bar).
7 ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.
Что делать с результатами тестирования
Если вы провели тест самостоятельно, отдайте результаты разработчикам. Разработчики помогут расставить ошибки по приоритету.
Например:
Эти ошибки должны быть исправлены незамедлительно.
Эти ошибки должны быть исправлены до определённого срока.
Эти ошибки требуют более детального тестирования. Нужно назначить тест.
В общем, тестирование ради тестирования — пустая трата времени. Поэтому после тестирования важно разработать чёткий план по устранению найденных недочётов. Также не лишним бывает обратиться к независимой команде разработчиков для взгляда со стороны.
Итог
Первые правила юзабилити:
Основная функция приложения понятна с первого взгляда.
Все кликабельные элементы понятны, удобны, видны.
Пользователь может быстро вернуться на предыдущий экран.
Пользователь быстро находит нужную информацию в списках.
При выходе из приложения данные сохраняются.
Задание:
1. Изучите ГОСТы в папке \\192.168.100.3\prep_std\Кравченко Н.В\Задания от преподавателя\ТРПО\ПЗ №5
Заполнить таблицу
Номер стандарта
|
Номер стандарта
|
Номер стандарта
|
Название
|
Название
|
Название
|
Основное содержание (о чем?)
|
Основное содержание (о чем?)
|
Основное содержание (о чем?)
|
|
|
|
Откройте приложение по заданию №1 из практической работы №4.
2. Создайте карту навигации для вашей работы.
3. Проанализируйте интерфейс. Заполните таблицу
Выявленная ошибка
|
Приоритет
|
|
|
|
|
|
|
4. Преобразуйте интерфейс, исправляя выявленные ошибки.
5. Создайте карту навигации измененного приложения. Проанализируйте изменилась карта? Почему? |
|
|
Скачать 27.44 Kb.