7 простых правил по созданию шикарных элементов пользовательского взаимодействия с интерфейсом


Содержание материала:

Урок 15
Пользовательский интерфейс

Содержание урока

2.5.1. Пользовательский интерфейс и его разновидности

2.5.1. Пользовательский интерфейс и его разновидности

Ключевые слова:

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

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

На компьютерах, оперировавших только числами и символами, был реализован командный интерфейс (рис. 2.11):

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

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

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

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

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

В наши дни взаимодействие человека и компьютера строится на основе объектно-ориентированного графического интерфейса, в котором:

• все объекты представляются в виде значков (иконок, пиктограмм), выбор которых с помощью, например, мыши приводит к активизации соответствующих объектов;
• оперирование объектами осуществляется в окнах — заранее заданных, очерченных рамками частях экрана;
• основным элементом программного управления является меню — выводимый на экран список команд, которые можно задать компьютеру;
• основным элементом аппаратного управления являются различные манипуляторы (мышь, трекбол, сенсорная панель и т. д.). Каждый компьютерный объект имеет своё имя и графическое обозначение. Например:

Объекты обладают определёнными свойствами. Например:

С объектами можно совершать разнообразные действия. Например:

Основным элементом аппаратного управления компьютером в пользовательском интерфейсе является мышь, отображаемая на экране в виде указателя мыши — небольшого графического объекта, который перемещается по экрану при движении мыши. Он используется для того, чтобы указывать на различные объекты, запускать программы, выбирать пункты меню, перетаскивать объекты, выделять текст и пр. Чаще указатель выглядит как маленькая стрелка, но его вид меняется в зависимости от операций, которые выполняет пользователь. Так, если указатель имеет форму маленьких песочных часов, это означает, что компьютер занят выполнением какой-то операции. А если указатель мыши принимает вид перечёркнутого круга, это означает, что запрашиваемая операция в данном случае невозможна.

Основными приёмами управления с помощью мыши являются:

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

Интуитивная понятность объектно-ориентированного графического интерфейса объясняется тем, что в нём реализованы аналогии с привычными человеку прямым манипулированием конкретными объектами и визуализацией результатов производимых действий. Действительно, при выполнении какой-либо операции пользователь сначала выбирает объект, а затем — действие над этим объектом; мышь позволяет осуществлять прямое манипулирование выбранным объектом. Так, для копирования файла с одного каталога в другой уже не нужно набирать в командной строке определённую последовательность символов. Достаточно выделить щелчком пиктограмму предназначенного для копирования файла в окне содержащего его каталога и перетащить её в окно или на пиктограмму другого каталога. Результатом копирования файла будет его изображение в окне нового каталога.

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

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

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

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

Использование форм

Формы являются основными блоками построения пользовательского интерфейса. Каждая форма в приложении представляет окно, которое появляется перед пользователем. При работе в IDE (интегрированной среде разработки) Visual Basic, форма является конструктором, предназначенным для разработки пользовательского интерфейса приложения, практически так же, как создается рисунок в Windows Paint.

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

Каждый элемент управления в Visual Basic имеет собственное предназначение. Например, элемент TextBox используется для ввода текста, тогда как PictureBox используется для отображения рисунков. Существует более пятидесяти элементов управления из состава Visual Basic; можно также создать собственные элементы управления, которые называются пользовательскими элементами управления. В ходе дальнейших занятий Вы более подробно узнаете о каждом из видов элементов управления.

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

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

Не нашли то, что искали? Воспользуйтесь поиском:

Пользовательский интерфейс (стр. 1 из 4)

«Системное программное обеспечение»

Тема: «Пользовательский интерфейс»

1. Понятие интерфейса пользователя. 4

2. Виды интерфейсов. 7

2.1 Командный интерфейс. 8

2.2 Графический интерфейс. 10

2.2.1 Простой графический интерфейс. 11

2.2.2 WIMP — интерфейс. 12

2.3 Речевая технология. 13

2.4 Биометрическая технология. 14

2.5 Семантический (общественный) интерфейс. 15

2.6 Типы интерфейсов. 15

3. Методы и средства разработки пользовательского интерфейса. 18

4. Стандартизация пользовательского интерфейса. 21

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

Введение

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

1. Понятие интерфейса пользователя

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

Интерфейс — в широком смысле слова, это способ (стандарт) взаимодействия между объектами. Интерфейс в техническом смысле слова задаёт параметры, процедуры и характеристики взаимодействия объектов. Различают:

Интерфейс пользователя — набор методов взаимодействия компьютерной программы и пользователя этой программы.

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

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

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

Рис.1. Взаимодействие пользователя с компьютером

В основном пользователь генерирует сообщения следующих типов:

запрос операции или функции

ввод или изменение информации

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

Интерфейс пользователя компьютерного приложения включает:

средства отображения информации, отображаемую информацию, форматы и коды;

командные режимы, язык «пользователь — интерфейс»;

устройства и технологии ввода данных;

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

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

порядок использования программы и документацию на неё.

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

Это не только экран, который видит пользователь. К этим элементам относятся:

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

используемая системой метафора (например, рабочий стол в MS Windows®);

элементы управления системой;

навигация между блоками системы;

визуальный (и не только) дизайн экранов программы;

средства отображения информации, отображаемая информация и форматы;

устройства и технологии ввода данных;

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

обратная связь с пользователем;

поддержка принятия решений в конкретной предметной области;

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

2. Виды интерфейсов

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

Современными видами интерфейсов являются:

1) Командный интерфейс. Командный интерфейс называется так по тому, что в этом виде интерфейса человек подает «команды» компьютеру, а компьютер их выполняет и выдает результат человеку. Командный интерфейс реализован в виде пакетной технологии и технологии командной строки.

2) WIMP — интерфейс (Window — окно, Image — образ, Menu — меню, Pointer — указатель). Характерной особенностью этого вида интерфейса является то, что диалог с пользователем ведется не с помощью команд, а с помощью графических образов — меню, окон, других элементов. Хотя и в этом интерфейсе подаются команды машине, но это делается «опосредственно», через графические образы. Этот вид интерфейса реализован на двух уровнях технологий: простой графический интерфейс и «чистый» WIMP — интерфейс.

3) SILK — интерфейс (Speech — речь, Image — образ, Language — язык, Knowlege — знание). Этот вид интерфейса наиболее приближен к обычной, человеческой форме общения. В рамках этого интерфейса идет обычный «разговор» человека и компьютера. При этом компьютер находит для себя команды, анализируя человеческую речь и находя в ней ключевые фразы. Результат выполнения команд он также преобразует в понятную человеку форму. Этот вид интерфейса наиболее требователен к аппаратным ресурсам компьютера, и поэтому его применяют в основном для военных целей.

2.1 Командный интерфейс

Пакетная технология. Исторически этот вид технологии появился первым. Она существовала уже на релейных машинах Зюса и Цюзе (Германия, 1937 год). Идея ее проста: на вход компьютера подается последовательность символов, в которых по определенным правилам указывается последовательность запущенных на выполнение программ. После выполнения очередной программы запускается следующая и т.д. Машина по определенным правилам находит для себя команды и данные. В качестве этой последовательности может выступать, например, перфолента, стопка перфокарт, последовательность нажатия клавиш электрической пишущей машинки (типа CONSUL). Машина также выдает свои сообщения на перфоратор, алфавитно-цифровое печатающее устройство (АЦПУ), ленту пишущей машинки. Такая машина представляет собой «черный ящик» (точнее «белый шкаф»), в который постоянно подается информация и которая также постоянно «информирует» мир о своем состоянии (см. рисунок 1) Человек здесь имеет малое влияние на работу машины — он может лишь приостановить работу машины, сменить программу и вновь запустить ЭВМ. Впоследствии, когда машины стали помощнее и могли обслуживать сразу нескольких пользователей, вечное ожидание пользователей типа: «Я послал данные машине. Жду, что она ответит. И ответит ли вообще? » — стало, мягко говоря, надоедать. К тому же вычислительные центры, вслед за газетами, стали вторым крупным «производителем» макулатуры. Поэтому с появлением алфавитно-цифровых дисплеев началась эра по-настоящему пользовательской технологии — командной строки.

Рис.2. Вид большой ЭВМ серии ЕС ЭВМ

Технология командной строки. При этой технологии в качестве единственного способа ввода информации от человека к компьютеру служит клавиатура, а компьютер выводит информацию человеку с помощью алфавитно-цифрового дисплея (монитора). Эту комбинацию (монитор + клавиатура) стали называть терминалом, или консолью. Команды набираются в командной строке. Командная строка представляет собой символ приглашения и мигающий прямоугольник — курсор. При нажатии клавиши на месте курсора появляются символы, а сам курсор смещается вправо. Это очень похоже на набор команды на пишущей машинке. Однако, в отличие от нее, буквы отображаются на дисплее, а не на бумаге, и неправильно набранный символ можно стереть. Команда заканчивается нажатием клавиши Enter (или Return) После этого осуществляется переход в начало следующей строки. Именно с этой позиции компьютер выдает на монитор результаты своей работы. Затем процесс повторяется. Технология командной строки уже работала на монохромных алфавитно-цифровых дисплеях. Поскольку вводить позволялось только буквы, цифры и знаки препинания, то технические характеристики дисплея были не существенны. В качестве монитора можно было использовать телевизионный приемник и даже трубку осциллографа.

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

технические науки

  • Калимуллина Ольга Валерьевна , кандидат наук, ассистент
  • Курбанова Екатерина Сергеевна , системный инженер
  • Санкт-Петербургский национальный исследовательский университет информационных технологий, механики и оптики
  • ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС
  • АДАПТИВНОСТЬ
  • МИНИМАЛИЗМ
  • СОВРЕМЕННЫЕ ТЕНДЕНЦИИ
  • MATERIAL DESIGN
  • ЛОГИЧЕСКАЯ СТРУКТУРА
  • ИЕРАРХИЧНОСТЬ
  • ИНТУИТИВНОСТЬ

Похожие материалы

Введение

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

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

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

Современные тенденции

Активное развитие графического интерфейса началось в 1970-х годах, благодаря разработкам компании Xerox. В частности, речь идет о продукте SmallTalk. Данный продукт был задуман как язык программирования и среда проектирования программ и обладал собственным пользовательским интерфейсом. Именно эта среда ввела многие современные понятия и каноны графического пользовательского интерфейса.

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

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

  • Минимализм
  • Интуитивность
  • Адаптивность

Минимализм

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

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

  • Логическая структура
  • Дизайн элементов
  • Колористика
  • Анимация

Логическая структура

Минимализм затрагивает такие критерии, как эргономика, то есть использование меньшего для создания нужной композиции. Другими словами, это правильное и простое использование только нужного — убирая всё лишнее (или не внося его вовсе) [8]. Таким образом появляется свободное пространство. Правильная постановка свободного пространства в работе и даёт эргономичность, не отвлекает и концентрирует на нужном.

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


Рисунок 1. Пример разметки графического интерфейса

Дизайн элементов

Архитектор Людвиг Миса Ван дер Роэ обозначил минималистскую эстетику фразой «Меньше – значит больше» [2]. Цель минимализма — преподнести наиболее важным содержание ресурса на первый план, и свести к минимуму отвлекающие факторы для пользователя. Так, на рисунке представлены примеры использования минимализма в разработке дизайна элементов.

Рисунок 2. Примеры использования минимализма

Колористика

В данном разделе речь пойдёт не столько о минимализме, сколько о построении гармоничной цветовой гаммы дизайна графического интерфейса. По общему правилу рекомендуется использовать не более 5 цветов для создания цветовой схемы, но есть и примеры оригинальных и гармоничных решений, построенных вразрез данному правилу. В данной статье рассматривается одна из самых простых методик создания гармоничной палитры, а именно – круг Иттена. Принцип его построения представлен в Приложении 1.

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

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

Анимация

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

Интуитивность

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

Иерархичность

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

Рисунок 3. Пример иерархичности графического интерфейса

Привычная структура

В процессе выхода программных продуктов формировались определенные каноны расположения элементов графического пользовательского интерфейса. При сравнении различного программного обеспечения можно заметить аналогичную для всех продуктов (приложений, сайтов) структуру. Такой подход к созданию графического пользовательского интерфейса значительно повышает эргономичность программного обеспечения. Одним из наиболее ярких примеров неудачных экспериментов со структурой интерфейса является отсутствие кнопки «Пуск» в операционной системе Windows 8.

Использование аналогий

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

Рисунок 4. Пример использования аналогий

Адаптивность

Адаптивность – системное свойство, которое заключается в способности системы приспосабливаться к изменившимся условиям. Значимость данного свойства растет ввиду обилия устройств, предназначенных для работы с программными продуктами. Зачастую требуется возможность не только доступа, но и комфортной работы с одним и тем же продуктом с различных устройств (смартфон, планшет, ПК) [7].

Адаптивность верстки

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

Рисунок 5. Пример адаптивного сайта

Адаптивность контента

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

Анализ пользовательского графического интерфейса на примере продуктов семейства Windows

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

Оценка выбранных продуктов определялась по шкале от 1 до 5 посредством анализа [14,15] отзывов целевой аудитории, в том числе учитывался личный опыт работы. Результаты проведенного анализа представлены в таблице. Для наглядности в Приложении 2 представлены скриншоты интерфейсов рассматриваемых операционных систем.

Таблица 1. Сравнительная характеристика последних версий ОС Windows

14 правил хорошего пользовательского интерфейса: сочетаем красоту, удобство и функциональность

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

1. Малое время загрузки

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

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

Какой должна быть скорость загрузки? Идеально — 2-3 секунды. Если ваш сайт грузится дольше, принимайте меры: оптимизируйте CSS и JavaScript, изображения, сжимайте файлы, используйте турбо-страницы.

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

2. Большие элементы

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

Не забывайте и про “воздух” — свободное пространство. Если его нет — у пользователя опять же разбегаются глаза. Вот, например, перед вами реальный сайт районной газеты. Шел 2020 год.

3. Знание целевой аудитории

Кто они, ваши пользователи? Сколько им лет, где они живут, какие у них интересы? Способны они разобраться в нестандартном меню или предпочитают сайт, сделанный по старинке? Поймут ли они, как сделать заказ онлайн, самостоятельно? Догадаются ли проскроллить страницу вниз, чтобы увидеть все данные? Что им больше понравится в дизайне: нежные или агрессивные цвета, крупные фантазийные шрифты или старая добрая классика?

Чтобы ответить на этот вопрос, нужно досконально изучить вашу ЦА. Проведите опрос, составьте портрет аудитории, обязательно проведите А/В тестирование. Исходя из полученных данных, поменяйте интерфейс на более удобный пользователям.

4. Логика

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

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

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

5. Последовательность

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

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

Это правило касается и более конкретных деталей интерфейса. На разных страницах не переставляйте местами блоки и баннеры, не играйте с формой и цветом кнопки СТА. Не экспериментируйте с дизайном (исключение может быть лишь для специальных промо-страниц, когда вашей целью становится выделить именно эти страницы и сделать их запоминающимися для пользователя). Принцип единообразия — один из основных в UX-дизайне, не пренебрегайте им.

6. Предельная ясность

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

Вы выступаете как добрая мамочка, которая за руку ведет дитятко и объясняет ему, как жить в этом безумном мире. Если нужно сделать заказ — объясняйте все на пальцах, расписывайте пошагово, что должен сделать клиент в тот или иной момент. Да, прямо так: сначала зарегистрируйтесь — ага, молодец, идем дальше. Вот корзина — туда нужно положить товар. Справились? Отлично. Теперь введите сюда (да-да, вот в эту форму) свои данные. Это не просто из любопытства — нам надо знать, куда доставить ваш товар. А теперь платите деньги — как вам удобно, давайте выберем способ оплаты.

Возможно, со стороны это кажется несколько наигранным. Пользователь — не пятилетний ребенок, сам разберется, подумаете вы и будете неправы. Тысячи людей отказываются от заказа только потому, что им недостаточно хорошо все объяснили или они не разобрались в интерфейсе. А вы говорите!

7. Предельная простота

Помните: чем меньше действий совершает посетитель сайта, тем больше он любит ваш сайт. Никому не нравится нажимать бесчисленные кнопки, чтобы добраться до сути, заполнять поля регистрации и тем более вводить капчи. Максимально упростите все, что можете: ввод данных (лучше всего сделайте возможность войти через соцсети, в один клик), текст на главной (все самое полезное о вашем сайте и компании без самовосхвалений и ненужной информации), текст на кнопках СТА (краткость — сестра таланта) и количество этих самых форм (лучше оставить несколько самых важных и в нужных местах).

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

Далее. Если у вас на сайте предполагается расчет чего-либо (рулонов обоев на комнату, оптимальное количество калорий на ваш вес и так далее) — поставьте виджет калькулятора, не заставляйте людей считать самим. Словом, все для того, чтобы облегчить жизнь посетителям вашего сайта.

8. Обратная связь

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

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

Выглядит это так. Если пользователь добавил товар в корзину — сопроводите это ободряющим сообщением (всплывающей подсказкой) типа “Отлично! Теперь ваш товар в корзине”. Если, наоборот, он что-то сделал не так — обязательно сообщите об этом: “Упс! Вы ввели неверные данные, попробуйте еще раз”. Сайт долго грузится? Сделайте анимацию — например, забавного человечка, который сидит и ждет.

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

9. Геймификация

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

Самый простой пример — проводите конкурсы и вручайте призы клиентам. Или создайте развлекательный тест на знание ваших товаров и услуг (не забудьте о вознаграждении — за успешные результаты пришлите на почту человеку полезные статьи или другие материалы). Работает всегда на отлично!

10. Группировка элементов по смыслу

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

Например, в сознании пользователя четко отлажена связь “Открыть” и “Прочитать”, “Добавить в корзину” и “Купить”. Пользуйтесь этим: объединяйте похожие элементы. Если они в виде иконок — делайте их максимально похожими. Другие по смыслу элементы пусть отличаются с помощью цвета, графики и других средств.

11. Правильная типографика

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

В хорошем интерфейсе приветствуются минимализм, цветовое единообразие или контрасты (кстати, цвета являются отличным способом подчеркнуть смысловые связи между элементами), не более 2-3 сочетающихся шрифтов, наличие “воздуха” между элементами. Подробнее о правильной типографике и трендах 2020 года мы писали в этой статье.

12. Следование принципам дизайна

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

Скажем, если принято использовать правило золотого сечения — используйте его. Веками это правило соблюдалось именно потому, что сечение действительно “золотое”. Правило третей тоже не стоит сбрасывать со счетов — зачем, если оно отлично работает? Ну и так далее.

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

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

13. Визуальная иерархия

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

Например, если у вас интернет-магазин, разделы “Хиты продаж” или “Распродажа” должны находиться вверху страницы, под меню и категориями. Разделы менее важные расположите внизу — в порядке убывания важности. Это делается для того, чтобы показать посетителю, на что стоит обратить внимание в первую очередь.

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

14. Отслеживание реакции пользователей

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

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

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

Студия IDBI знает все о правильном и удобном интерфейсе. Мы создаем сайты, которые соответствуют принципам юзабилити и запоминаются пользователям. Наши работы доступны в разделе «Портфолио». Обращайтесь, обсудим задачу!

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

Рубрика: Информационные технологии

Дата публикации: 31.07.2020 2020-07-31

Статья просмотрена: 346 раз

Библиографическое описание:

Миронов А. С. Пользовательский интерфейс // Молодой ученый. — 2020. — №15. — С. 145-147. — URL https://moluch.ru/archive/119/33034/ (дата обращения: 07.11.2020).

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

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

Топ-пост этого месяца:  Странные вопросы начинающих PHP или HTML – что лучше

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

И всё же вовсе не все разработчики и дизайнеры задумываются о создании понятного и удобного графического пользовательского интерфейса. Особенно это касается игрового интерфейса. Разработчиков обычно интересует один и тот же вопрос: верно ли, что успех или провал игры определяется ее интерфейсом? И большинство из них соглашается, что плохой интерфейс портит всю игру. Они также пришли к единому мнению, что если игра плоха, ее уже ничто не спасет, даже выдающийся интерфейс. Тем не менее нельзя забывать, что создание пользовательского интерфейса — один из важнейших этапов разработки, которым, к сожалению, в современном мире часто пренебрегают.

Сведения об интерфейсе:

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

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

– Чаще всего в интерфейсе пользователи сначала ищут предмет (существительное), а затем действие (глагол) к ней. Таким образом выполняется правило «существительное -> глагол».

– Например «файл -> открыть».

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

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

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

Какие элементы интерфейса (ЭИ)предпочтительнее создать?

– Разработка интерфейса обычно начинается с определения задачи либо комплекта задач, для которых предназначен данный продукт.

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

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

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

– Необходимо принять во внимание человеческий фактор: поведение и привычки пользователей. Не стоит менять хорошо известные всем элементы интерфейса на неожиданные, а новые ЭИ должны быть интуитивно понятными.

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

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

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

– Форма. В большинстве случаев — прямоугольник, тем более мы имеем дело с интеллектуальными приложениями класса «пошаговая стратегия».Опять же, форма как и цвет достаточно субъективна.

– Основные ЭИ (часто используемые) должны быть выделены. Например размером или цветом.

– Иконки в программе должны быть очевидными и интуитивно понятными. Если нет — следует подписать. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.

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

Как правильно расположить ЭИ на экране? Ответим на эти вопросы

– Есть утверждение, что визуальная привлекательность интерфейса основана на пропорциях. Существует так называемый принцип Золотого сечения (золотая пропорция, деление в крайнем и среднем отношении, гармоническое деление).Золотое сечение — это самая комфортная для глаза пропорция. Форма, в основе построения которой лежит сочетание симметрии и золотого сечения, способствует наилучшему зрительному восприятию и появлению ощущения красоты и гармонии. Суть данного принципа в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина окна интерфейса 900px, делим 900 на 1.62, получаем

555px, это ширина блока с содержанием. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части.

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

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

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

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

– Следует соблюдать пропорции.

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

– Делайте отступы между ЭИ равными или кратными по отношению друг к другу.

Как ЭИ должны себя вести?

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

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

– Избегайте двусмысленности. Например, на условном устройстве есть одна кнопка. По нажатии устройство включается, нажали еще раз — выключился. Если в устройстве перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или же нет. Поэтому вместо одной кнопки выключателя приоритетным вариантом будет использование переключателя (например, checkbox с двумя позициями: «вкл». и «выкл».). За исключением случаев, когда состояние задачи, очевидно.

– Такой переключатель напрямую отражает состояние ЭИ.

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

– Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не несколько. Пример — стартовая страница браузера Chrome.


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

– Элементы интерфейса должны отвечать пользователю. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.

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

Советы по созданию хорошего пользовательского интерфейса: часть 1

Хороший пользовательский интерфейс (user interface, UI) охарактеризовать несложно: такой интерфейс показывает высокие коэффициенты конверсии и удобен в использовании. Другими словами, он полезен для обеих сторон: как для бизнеса, так и для клиентов. Маркетологам, желающим создать идеальный UI, предстоит долгий путь. Чтобы начать его, стоит постоянно интересоваться новыми подходами, улучшающими пользовательские интерфейсы, и внедрять эти идеи в различных комбинациях на реальных проектах.

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

1. Макет из одного столбца вместо нескольких колонок

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

2. Подарок вместо просьбы о подписке

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

3. Объединить аналогичные функции

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

4. Социальные доказательства вместо того чтобы говорить о себе

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

5. Повторяйте

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

6. Различайте кликабельные и неактивные элементы

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

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

7. Советуйте, а не предлагайте равнозначные варианты

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

8. Откажитесь от подтверждения действия

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

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

9. Обращайтесь к целевой аудитории

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

10. Говорите прямо и без колебаний

Вы можете разместить робкое сообщение, или высказать то же самое, но твердо и уверенно. Если вы заканчиваете текст вопросительными знаками, используете такие слова, как «возможно», «может быть», «заинтересованы?», «хотите?», то выглядите не так уверенно.

А говоря прямо и по-существу, вы повысите силу убеждения своих офферов. Кто знает, возможно, это сработает. Хотите попробовать? 🙂

11. Добавьте контраста

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

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

12. Упоминайте происхождение

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

13. Снизьте число полей лид-формы

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

14. Отображайте варианты, а не скрывайте их

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

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

15. Предложите непрерывный опыт вместо «ложного дна»

Ложное дно на странице убивает ее конверсию. Да, длинные страницы бывают очень эффектными, но опасайтесь создать у посетителей ощущение, что страница подошла к концу где-то между разделами. Если скроллинг неизбежен, то попробуйте установить визуальный шаблон или ритм, который пользователь сможет изучить и использовать для дальнейшего чтения. Также будьте осторожны с большими разрывами между областями — ведь там при скроллинге может появиться «сгиб», что создаст ложное ощущение конца страницы. Конечно, здесь нужно протестировать страницу на устройствах разных размеров и форматов экрана.

16. Фокусируйте внимание на одном действий

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

17. Покажите прогресс

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

18. Формулируйте тексты СТА из преимуществ вместо описания задач

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

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

19. Прямая манипуляция вместо контекстного меню

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

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

20. Выделите поля, не создавая дополнительных страниц

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

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

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

22. Постепенное вовлечение вместо поспешных сделок

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

23. Уберите лишние границы

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

24. Используйте преимущества вместо функций

Люди, как правило, больше озабочены преимуществами, а не особенностями продукта. Преимущества несут более четкую ценность. Крис Гиллебо (Chris Guillebeau) в «Стартапе за 100 долларов» пишет, что люди действительно заботятся о том, чтобы получить больше: любви, денег, одобрения, свободного времени, в то же время желают снизить стресс, конфликты, хлопоты и неопределенность. Поэтому, отображая функции, не забудьте привязать их к преимуществам, насколько это возможно.

25. Создайте хороший дизайн не только для наполненных, но и для пустых страниц

Иногда на странице будет 0, 1, 10, 100 или 10000+ результатов данных, отображенных различными способами. . Наиболее распространенным сценарием станет, вероятно, переход от пустой страницы отображения данных к большему количеству информации. Но мы часто забываем проработать качественный дизайн для этого начального окна, на котором еще не представлены данные — и тем самым пренебрегаем пользовательским опытом. Когда пользователь впервые обращается к вашему приложению и видит пустое, холодное окно, он, вероятно, получает не слишком сногсшибательное впечатление. Но ведь такие начальные окна приложений — идеальное место повысить квалификацию посетителей и показать им, как приступить к работе. Пользовательские интерфейсы здесь не исключение.

26. Попробуйте Opt-Out вместо opt-in

Стратегия opt-out подразумевает, что пользователи или клиенты могут участвовать в чем-либо или дать на что-либо согласие (например, подписаться на рассылку), не предпринимая никаких действий. В качестве альтернативы, существует более традиционная стратегия opt-in, которая требует от людей сначала предпринять что-то, чтобы поучаствовать в чем-то или получить что-либо. Есть две веских причины, по которым opt-out лучше, чем opt-in. Во-первых, он снижает сопротивление, так как пользователю ничего не нужно делать. Во-вторых, это также формат рекомендаций, социальных доказательств, подразумевающий некую норму — «поскольку окружающие воспринимают это положительно, я поступлю так же».

Разумеется, стратегия opt-out часто воспринимается как спорная, поскольку существуют незадачливые маркетологи, которые злоупотребляют ею. Одно из таких злоупотреблений — ухудшение читаемости текста opt-out, а другое — использование запутанного текста, например, с двойным отрицанием. Цель обоих методов — сбить пользователей с толку, чтобы они не поняли, что они что-то подписывают. Но если помнить об этике продаж, то все будет в порядке.

27. Создавайте согласованный дизайн, не заставляя людей менять паттерны поведения

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

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

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

Элементы управления, используемые для построения пользовательских интерфейсов и взаимодействия с пользователями

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

Элементы управления для разработки «инфографичных» пользовательских интерфейсов для платформы универсальных приложений для Windows (UWP)

Элемент управления «Кнопка» [66] предоставляет пользователю возможность немедленно начать выполнение какого-либо действия. Существует несколько состояний кнопок:

«не нажата, но без передачи фокуса» (рис. 54а);

«курсор наведен, не нажата, но без передачи фокуса» (рис. 546); «нажата, но без передачи фокуса» (рис. 54в);

«недоступна» (рис. 54г);

«нажата, с передачей фокуса» (рис. 54д).

Рисунок 58 Состояние элемента управления «Кнопка»

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

  • 1. Назначение кнопки и ее состояние должно быть понятно пользователю. Не допускается размещение большого количества информации на одной кнопке.
  • 2. Текст, описывающий действия, которое выполняет кнопка, должен быть кратким, конкретным и не требующим разъяснений пользователю (рекомендуется текст в виде глагола из одного слова). Текст можно (но нежелательно) заменять иконками или сочетанием иконки и текста. Не допускается изменять названия кнопок «Далее» на название «Продолжить».
  • 3. Если текст надписи на кнопке динамический, то необходимо, чтобы кнопка могла изменять свои размеры в соответствии с размерами текста, не мешая при этом другим элементам пользовательского интерфейса.
  • 4. Для действий, которые требуется выполнить над большим количеством диалоговых окон программного приложения лучше не повторять кнопку с одним и тем же названием в каждом диалоговом окне, а использовать команду в составе элемента управления «панель команд» (см. далее в этой главе).
  • 5. Рекомендуется делать одновременно доступными пользователю только одну или две кнопки (например, «Принять» и «Отклонить»). Если требуется предоставить пользователю больший выбор действий, то рекомендуется ввести в пользовательский интерфейс флажки или переключатели, с помощью которых пользователь сможет выбрать нужные действия.
  • 6. Кнопка по умолчанию в пользовательском интерфейсе должна использоваться для работы с наиболее часто используемой или рекомендуемой командой. Не допускается менять местоположение кнопок, предусмотренных в пользовательском интерфейсе по умолчанию (например, таких как «Отправить», «Сбросить»).
  • 7. При взаимодействии пользователя с кнопкой состояние и внешний вид кнопки должны меняться, отражая отклик на действия пользователя. Выполнение действия начинается в момент, когда пользователь касается кнопки или нажимает ее.
  • 8. Кнопки не должны использоваться для задания состояния программного приложения.
  • 9. Для обеспечения обратной навигации используется кнопка «Назад» [42]. Расположение кнопки «Назад» должно быть оптимизировано для каждого устройства и способа ввода информации. Для телефона кнопка «Назад» должна быть расположена в нижней части устройства (рис. 55а). Для планшета кнопка «Назад» на панели навигации в нижней части устройства (рис.556). Для ПК и ноутбуков кнопка «Назад» расположена в заголовке диалогового окна программного приложения (рис.55в). Для устройства Surface Hub кнопка «Назад» расположена в нижней части устройства (рис. 55г).

Рисунок 55 Рекомендации по расположению кнопки «Назад» для различных устройств

Элементы управления датой и временем [41] позволяют пользователю просматривать и устанавливать дату и время. В процессе проектирования пользовательского интерфейса можно выбрать любой из четырех элементов управления датой и временем (табл. 4):

Виды элемента управления датой и временем

Выбор даты в календаре

Управляющий элемент выбор даты

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

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

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

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

Рисунок 56 Работа с элементом типа «выбор даты»

Элемент управления «поле автозаполнения» [43] — это текстовое поле, в котором отображается список основных вариантов поиска. Такой список формируется автоматически на основе объединения условий поиска и слов, ранее введенных пользователем (рис.57а).

Рисунок 57 Элемент управления «Поле автозаполнения»

Список предъявляется пользователю сразу же после начала ввода текста в элементе управления (список отображается над элементом управления или под ним, при этом появляется кнопка в виде крестика, обозначающая выполнение команды «Очистить все», рис.57а).

В случае использования данного элемента управления в пользовательском интерфейсе необходимо учесть, что если для введенного в элементе управления текста поиск не дает результатов, то должна быть выведена строка сообщения «Результатов нет» (для того чтобы пользователь знал, что поисковый запрос был выполнен, рис. 576).

Элемент управления «флажок» («check box») [44] используются пользователями для выбора (или отмены выбора) одного или нескольких выполняемых действий в предлагаемом пользователям списке. Элемент управления предусматривает три состояния выбора: «не выбран», «выбран» и «не определен», «не доступен» (рис. 58а).

Рисунок 58 Элемент управления «Флажок»

При этом состояние «не определен» возникает, когда в списке возможных вариантов для каждого флажка есть одновременно состояния «не выбран» и «выбран», и при этом пользователь пока не сделал выбора.

При использовании элемента управления «флажок» рекомендуется придерживаться следующих рекомендаций:

  • 1. Желательно использовать один элемент управления «флажок» для выбора из двух вариантов «да» или «нет» (например, при подтверждении условий соглашения на обслуживание, рис 586).
  • 2. Необходимо использовать несколько элементов управления «флажок» (рис. 62в) в случае множественного выбора (пользователь может выбрать один или несколько элементов, не исключающих друг друга).
  • 3. Необходимо, чтобы цель использования элемента управления и их текущие состояния были понятны пользователю. Необходимо добиваться того, чтобы пользователь понимал, что произойдет, если он выберет (снимет) «флажок».
  • 4. Длина текстового содержимого, связанного с элементом управления, не должна превышать двух строк. При этом текст должен быть сформулирован как инструкция, в которой выбор флажка соответствует значению «да», а снятие «флажка» обозначает «нет».
  • 5. Если пользователю необходимо представить большое количество вариантов выбора, и при этом объем содержимого не помещается в окне просмотра, то окно просмотра, в котором размещаются элементы управления «флажок», можно дополнить элементом управления «средство прокрутки» (класс ScrollViewer) [45] (рис. 59).

Рисунок 59 Элемент управления «средство прокрутки»

Жесты пользователя (касания сенсорного экрана) можно использовать для сдвигания и масштабирования (полосы прокрутки изменяют цвет во время управления), а для прокрутки можно использовать указатель мыши. Быстрое движение пальца пользователя по поверхности экрана заставит содержимое прокручиваться по инерции. Если содержимое пользовательского интерфейса выходит за обе границы окна просмотра (вертикальную и горизонтальную), необходимо применять сдвиг сразу по двум направлениям. Если пользователю предстоит просматривать большой объем текста, то необходимо, чтобы прокрутка осуществлялась только по вертикали. Также «средство прокрутки» может быть использовано в элементах управления списком, раскрывающихся списках, полях текстового ввода, представлениях сетки, представлениях списка и главных разделом.

  • 6. Если в названии «флажка» («чекбокса») применяется динамическое текстовое содержимое, необходимо учесть возможное изменение размеров элемента управления и его влияние на другие элементы управления, находящиеся в пользовательском интерфейсе.
  • 7. Если «флажки» разделены на группы, то не рекомендуется размещать две группы флажков рядом (вполне возможно, что пользователи в этом случае не смогут определить, какие «флажки к каким группам принадлежат). Поэтому рекомендуется использовать текстовые обозначения для каждой из групп «флажков».
  • 8. Элементы управления «флажок» не рекомендуется использовать для отображения диалоговых окон.
  • 9. Для одиночного «флажка» нежелательно по умолчанию использование состояния «не определен».
  • 10. И «флажок», и «переключатель» («радиокнопка») могут использоваться для отображения двоичного выбора. Группа «переключателей» предоставляет пользователю единственно возможный выбор. Если же используется группа «переключателей», то каждый «флажок» в группе обеспечивает отдельный выбор, независимый от других «флажков». Если в группе выбор применим к нескольким «флажкам», то существует несколько вариантов, выбора «флажков»: ко всем, к некоторым или ни к одному из них. Если выбор применен только к некоторым дочерним «флажкам» (выбраны не все дочерние элементы управления), то, чтобы обозначить смешанный выбор, необходимо использовать состояние «не определен» для родительского «флажка» (рис 60).

Рисунок 60 Состояние родительского «флажка»

(«не определен») в случае смешанного выбора дочерних «флажков»

«Переключатели» типа RadioButton («радиокнопка») [46] позволяют пользователю выбрать один вариант выполнения задачи из нескольких предлагаемых вариантов. Каждый вариант выбора представлен одним переключателем, пользователь может выбрать только один переключатель из группы. «Переключатели» могут находиться в следующих состояниях (рис. 61):

не нажатое (нормальное и доступное) состояние (рис. 61а); включенное (нажатое) состояние с переданным фокусом (рис.

отключенное (не нажатое и доступное) состояние после покидания элемента управления курсором мыши (рис. 61 в);

отключенное (не нажатое и доступное) состояние после нажатия на другой элемент управления «переключатель» (рис.61г);

не доступное состояние (рис. 61д).

Рисунок 61 Состояния «переключателя»

Все «переключатели» (в пределах одной группы) равнозначны. Если вариантов выбора слишком много (более 8) и при этом они занимают слишком много места в пользовательском интерфейсе, а также отвлекают пользователя от запланированных действий, то рекомендуется вместо группы «переключателей» использовать другие элементы управления (например, списки, в том числе, раскрывающиеся). Если пользователю для выбора предлагаются числа с фиксированной величиной шага (5, 10, 15, . ), то рекомендуется вместо нескольких «переключателей» использовать «ползунки» (элементы управления Slider).

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

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

В процессе работы с «переключателями» пользователь должен получать от программного приложения видимую ответную реакцию (обратную связь).

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

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

Список (элемент управления «выбор») предоставляет пользователю возможность выбрать из предлагаемого списка один или несколько элементов. Элемент управления списком по умолчанию представляет список по вертикали. Список может быть представлен и в горизонтальном виде (например, для размещения фотографий). Существуют три режима выбора элементов списка:

выбор одного элемента (рис. 65, левая часть); выбор нескольких элементов с помощью модификатора (рис. 63);

выбор нескольких элементов без использования модификаторов (рис. 65, правая часть).

Касание пользователя сенсорного экрана в месте расположения элемента списка пометит элемент списка как выбранный, а в режиме с множественным выбором касание выбранного элемента списка отменит его выбор. В режиме с единственным выбором касание другого элемента делает его выбранным. При этом выбор элемента списка, сделанный ранее, отменяется. Скольжение пальца по вертикали позволяет прокручивать список вверх или вниз по инерции. Список имеет полосу прокрутки, положение бегунка которой показывает приблизительное положение пользователя в списке элементов, а размер «бегунка» в полосе прокрутки показывают пропорции представления элементов в списке. Существует несколько шаблонов списков [62]: раскрывающиеся списки; представления списка; представления сетки;

окна со списками.

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

Библиотека содержимого используется для отображения списка, содержащего изображения и видео. В библиотеке содержимого пользователь должен иметь возможность касаться элемента списка с помощью сенсорного экрана.

Топ-пост этого месяца:  Форум SMF для Joomla

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

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

Раскрывающиеся списки [47] дают пользователям возможность выбора одного значения какого-либо параметра из нескольких вариантов значений, представленных в виде многострочного списка. Элемент управления рекомендуется использовать в том случае, если для отражения всех элементов списка не хватает места на пользовательском интерфейсе. Элемент управления может находиться в следующих состояниях:

в доступном и не активном состоянии (рис. 62а);

в активном состоянии при прикосновении пальца к сенсорному экрану (рис. 626);

в активном состоянии при передаче фокуса с помощью клавиатуры (рис. 62в);

в не доступном состоянии (рис. 62г).

Справа от элементов списка по умолчанию выделено свободное пространство (27 пикселей) для того чтобы элементы списка не перекрывалось полосами прокрутки.


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

Рисунок 62. Состояния раскрывающегося списка

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

  • 1. Текстовое содержание элемента списка должно состоять только из одной строки.
  • 2. Элементы списка должны располагаться логично (за счет применения сортировки: по частоте использования, алфавиту, хронологии и т.д.).

Элементы управления «список» типа «представление списка» используются:

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

если необходимо создать основную панель в элементе управления «шаблон основных и подробных данных» (см. далее в этой главе).

Списки типа «представление списка» с заголовками групп отображаются в один столбец (рис.63), читаются сверху вниз и «прокручиваются» по вертикали. При этом все элементы списка должны реагировать одинаково на действия пользователя.

Рисунок 63 Элемент управления «список» типа «представление списка»

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

Элементы управления «список» типа «представление сетки» рекомендуется использовать в случае, если пользователю необходимо осуществить выбор изображения в коллекции, предъявляемой пользователю (рис. 64). Для комфортной работы пользователя и комфортного считывания информации элементы списка в элементе управления такого типа должны располагаться справа налево и сверху вниз. Представление сетки является целесообразно применять для коллекции, в которой представлено мультимедийное содержимое.

Рисунок 64 Элемент управления «список» типа «представление сетки»

Элемент управления «список» типа «окно со списком» позволяет пользователю выбрать один или несколько элементов из коллекции элементов (рис. 65). Элемент управления «окно со списками» всегда открыт (в отличие от «раскрывающегося списка»). Если для отображения предъявляемого пользователю списка не хватает места, то элементы списка можно прокручивать с помощью линии прокрутки. Элементами «окна со списками» могут быть строки текста, числовые значения, а также любые визуальные элементы. Субъективная удовлетворенность пользователя повышается, если взаимодействует напрямую с содержимым приложения. Поэтому в элементе управления «окно со списками» в качестве элементов списка может быть показано актуальное содержимое программного приложения. При этом каждый элемент списка реагирует на прикосновение пользователя к сенсорному экрану. В результате становится понятно, что элемент списка выбран.

Рисунок 65 Элемент управления «список» типа «окно со списком»

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

В случае использования элементов управления «окно со списком» для построения пользовательского интерфейса следует придерживаться следующих рекомендаций:

  • 1. Если списки состоят из 3 или 4 элементов, то возможно применение «переключателей». Оптимальное количество элементов в списке — от 3 до 9. Если каждый элемент списка предусматривает двоичный выбор, то вместо элементов списка могут использоваться «флажки» или «тумблеры» (Toggle Switch, см. далее в этой главе). В случае очень большого количества элементов в списке наилучшим вариантом могут быть элементы управления «представление сетки» или «представление списка» (при этом для сгруппированных списков должны использоваться элементы управления «контекстное масштабирование»). Если список элементов представляет собой ряд числовых значений, то возможно использовать элемент управления «ползунок» (см. далее в этой главе).
  • 2. Если элементы списка могут динамически изменяться в ходе работы программного приложения, то хорошо применимы элементы управления «окно со списком». Размер элемента управления «окно со списком» желательно выбирать таким образом, чтобы список элементов не нужно было сдвигать или прокручивать.
  • 3. Цель «окна со списком», а также элементов списка должны быть понятны пользователю. Элементы списка должны располагаться логично (группировка зависимых элементов, сортировка элементов по частоте использования, сортировка элементов в алфавитном порядке или по дате).
  • 4. Необходимо предусмотреть визуальные эффекты и анимацию в виде изменения состояния элемента управления для отображения реакции программного приложения на прикасания пользователя к сенсорному экрану.
  • 5. Поясняющий текст в элементах списка должен быть ограничен одной строкой. Если элементы списка представлены визуальными элементами, то их размер должен настраиваться. При этом если элементы «окна со списком» содержат несколько строк текста или изображений, то необходимо использовать представление сетки или представление списка. Для поясняющего текста должен использоваться шрифт по умолчанию (если не требуется использования другого шрифта).
  • 6 Элемент управления «окно со списком» не должен использоваться для выполнения команд, а также скрытия либо отображения других элементов управления.
  • 7. При выборе элементов, отвечающих за выполнение команд, которые могут привести к выполнению необратимых действий, рекомендуется предъявлять пользователю диалоговое окно подтверждения.

Элемент управления «контекстное масштабирование» (класс SemanticZoom) [49] дает пользователю возможность работать с двумя представлениями для одного и того же набора данных. Элемент управления (в зависимости от текущего состояния программного приложения) изменяет графическое представление и отображаемую структуру данных, предъявляемых пользователю.

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

  • 1. Пользовательский интерфейс может содержать только один элемент управления «контекстное масштабирование».
  • 2. Размер представления данных не может выходить за границы элемента управления «контекстное масштабирование».
  • 3. Касание пальцем пользователя заголовка группы данных должно переключать представления данных. Например, на рис. 66 касание пальцем заголовка группы (рис. 66, левая часть) вызовет более подробное отображение данных (рис. 66, правая часть).
  • 4. Переходы между представлениями данных должны быть последовательными и предсказуемыми.
  • 5. Количество экранов в каждом из представлений должно быть не более трех (большее количество экранов снижает практическую ценность применения контекстного масштабирования).
  • 6. Элемент управления не должен применяться для изменения объема представления данных (например, фотографии не должны преобразовываться в иконки соответствующих им файлов).
  • 7. Для каждого представления необходимо использовать понятную для пользователя структуру и семантику данных. Если данные объединяются в группы, то необходимо использовать понятные для пользователя названия групп. Данные, не объединенные в группы, необходимо упорядочивать (по алфавиту, дате и т.д.).

Рисунок 66 Применение элемента управления «контекстное масштабирование»

Элемент управления «тумблер» (Toggle Switch) имитирует физический переключатель (рис. 67), позволяющий пользователям включать и выключать что-либо [50]. Он имеет два состояния: включен (true) или выключен (false).

Рисунок 67 Элемент управления «тумблер» (Toggle Switch)

В случае использования элемента управления «тумблер» при разработке пользовательского интерфейса необходимо придерживаться следующих рекомендаций:

1. Необходимо различать случаи, когда выгоднее использовать «тумблеры», а когда «флажки». Элемент управления «тумблер» необходимо использовать для случаев, когда изменение состояния элемента управления приводит к немедленному выполнению какого-либо действия (на рис. 68а показано выключение и включение WiFi). При использовании элемента управления «тумблер» видно, что беспроводная связь включена (рис 686), и пользователю понятно, что нужно сделать для ее выключения. При использовании «флажка» (рис. 686) пользователю может быть не ясно, что беспроводная связь включена (пользователь может подумать, что нужно дополнительно нажать на «флажок» для ее вк

Рисунок 68 Использование элемента управления «тумблер» (Toggle Switch) и «флажок»

  • 2. Элементы управления «тумблер» лучше не применять в случаях, когда пользователю необходимо выполнить какие-то дополнительные действия для того чтобы изменения вступили в силу (например, согласовать выполнение какого-либо действия, как это показано на рис. 69а). В таких случаях лучше применять элементы управления «флажок».
  • 3. Элементы управления «тумблер» не рекомендуется применять для случаев, если пользователю предъявляется несколько элементов, каждый из которых может принимать лишь два значения «да» и «нет». В этом случае рекомендуется применять списки или «флажки» (рис. 696).

Рисунок 69 Случай, в котором «тумблер» лучше не использовать

4. Текст, поясняющий работу «тумблера», не должен быть длинным. При этом текст «Включено» и «Выключено» рекомендуется не менять на какой-то другой, если в этом нет необходимости. Но предпочтительными являются текстовые обозначения длиной 3-4 символа.

Встроенный пользовательский интерфейс захвата с камеры CameraCaptureUI [51] позволяет пользователям:

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

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

настраивать параметры камеры (яркость, контрастность и экспозиция).

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

  • 1. Если планируется управлять изображениями в режиме реального времени, то интерфейс CameraCaptureUI не дает прямого контроля над видеопотоком. Поэтому вместо него следует использовать интерфейс API MediaCapture, который управляет асинхронной операцией захвата видеопотока.
  • 2. Если пользовательский интерфейс CameraCaptureUI не совместим с элементами управления, которые необходимо разместить в пользовательском интерфейсе программного приложения. В этом случае следует также использовать интерфейс API MediaCapture.
  • 3. Если в программном приложении требуется реализовать низкоуровневое программное управление видеопотоком, включая управление фокусом, вспышкой и стабилизацией изображения. Поэтому вместо интерфейса CameraCaptureUI следует использовать интерфейс API MediaCapture.

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

Элемент управления «панель команд» [52] предоставляет пользователям возможность работы с командами или параметрами, относящимися к работе пользователя. Элемент управления «панель команд» состоит из двух компонентов: пространства действий для размещения команд или элементов навигации (должны оставаться видимыми) и области «Дополнительно», представленной в виде многоточия (рис. 70).

Рисунок 70 Элемент управления «панель команд»

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

Элемент управления «панель команд» может быть размещен в верхней части экрана, в нижней части экрана, а также в верхней и нижней частях экрана (рис. 71).

При использовании элемента управления «панель команд» в процессе разработки пользовательского интерфейса следует придерживаться следующих рекомендаций:

  • 1. При использовании только одного элемента управления «панель команд» в программном приложении желательно поместить его в нижней части экрана, что облегчает доступ пользователя.
  • 2. Если в нижней части экрана расположен элемент управления «вкладка», то элемент управления «панель команд» необходимо разместить в верхней части экрана для того чтобы пользовательский интерфейс не был загроможден в нижней части экрана.
  • 3. При размещении элемента управления «панель команд» на большом экране рекомендуется поместить его в верхней части экрана.
  • 4. Элементы управления «панель команд» могут быть встроенными для того чтобы пользователи могли использовать их для контекстных операций.

Рисунок 71 Варианты размещения элемента управления «панель команд»

5. Элементы управления «панель команд» могут быть размещены на экране в случае с одним представлением (рис. 72, слева) и в случае с несколькими представлениями (рис. 72, справа).

Рисунок 72 Размещение элемента управления «панель команд» в случаях с одним и двумя представлениями

  • 6. Элементы управления «панель команд» могут быть размещены в любом месте действий пользователя на экране.
  • 7. Приоритет команд в элементе управления «панель команд» зависит от их порядка расположения в элементе управления. На самых маленьких экранах устройств (шириной в 320 ерх, эффективных пикселей) в элементе управления размещаются 2-4 элемента.
  • 8. Менее важные команды размещаются в области «Дополнительно» в раскрывающемся меню.
  • 9. Команды в пространстве действий элемента управления «панель команд» изображаются с помощью значков или кнопок. В случае использования значков к ним должно быть добавлено текстовое пояснение, которое отображается под значком.
  • 10. Команды, которые будут доступны во всех диалоговых окнах, необходимо размещать одном и том же месте в каждом диалоговом окне. Это позволит пользователям более комфортно работать с программным приложением и применять полученный опыт навигации в приложениях с аналогичными пользовательскими интерфейсами.
  • 11. Недопустимо, чтобы все команды находились в списке раскрывающегося меню области «Дополнительно». Скрытие всех команд может привести к значительному снижению скорости работы пользователя с программным приложением.
  • 12. При использовании элемента управления «панель команд» могут быть использованы всплывающие подсказки, в которых необходимо предусмотреть поиск необходимой команды с помощью логическую группировки или сортировки (рис. 73).

Рисунок 73 Варианты всплывающих подсказок элемента управления «панель команд»

Элемент управления «вкладки» («сводки») используются для перехода к разделам информации, которые часто используются [53]. Шаблон элемента управления состоит из двух или нескольких панелей с информацией и соответствующих им заголовками (рис. 74) [53]. Заголовки располагаются на экране, при этом пользователь (для того чтобы понимать, с какой категорией информации он работает) должен видеть, что заголовок выделен.

Рисунок 74 Элемент управления «Вкладки»

Вкладки и сводки эквивалентны и основаны на элементе управления Pivot.

При разработке программного приложения и использовании элемента управления «вкладка» необходимо учитывать несколько особенностей [53]:

  • 1. Элементы управления «вкладки» могут быть размещены в верхней или нижней части экрана (рис. 75).
  • 2. У заголовков элементов управления «вкладки» могут быть значки с текстом (или только текст, или только значок, рис. 75).
  • 3. Заголовки элементов управления «вкладка» могут выравниваться по левому краю или по центру. Рекомендуется определять выравнивание заголовков в зависимости от размера экрана. Для ширины экрана меньше 720 ерх (эффективных пикселей) лучше всего подходит выравнивание по центру, а выравнивание по левому краю рекомендуется в большинстве случаев для ширины экрана более 720 ерх.
  • 4. Элементы управления «вкладка» могут быть использованы для навигации пользователя в пользовательском интерфейсе и размещены на верхнем уровне навигации или подуровне навигации. Заголовки элементов управления «вкладка» верхнего уровня и заголовки подуровней должны визуально различаться.
  • 5. Элементы управления «вкладка» могут поддерживать сенсорные жесты. Могут быть использованы следующие способы взаимодействия с элементом управления для навигации между категориями информации:

Рисунок 75 Расположение значков и текста в элементах управления «вкладки»

  • 1. Прикосновение пользователя к заголовку «вкладки» для перехода к информации, соответствующей «вкладке», или «прокрутка» пальцем для перехода к смежной категории информации.
  • 2. Прикосновение пользователя к заголовку «вкладки» для перехода к информации, соответствующей «вкладке» (без «прокрутки»).
  • 6. Оптимальное расположение элементов управления «вкладка» зависит от способа взаимодействия пользователя с программным приложением и устройства, на котором работает программное приложение [53].
  • 7. Необходимо сохранять одно и то же общее количество заголовков «вкладок» в альбомной и книжной ориентации экрана. В «карусельном» режиме не рекомендуется использовать более 5 заголовков (это может снизить скорость работы пользователя с программным приложением).

Элемент управления «контекстное меню» — это меню, которое позволяет пользователю мгновенно выполнять команды из списка пользовательских команд [54]. Список может предъявляться пользователю в любом месте пользовательского интерфейса, например, при нажатии правой клавиши мыши. Контекстные меню можно закрыть с помощью нажатия левой клавишей мыши (или прикоснувшись к сенсорному экрану) за пределами панели, в которой находится список команд меню. Элемент управления «контекстное меню» может использоваться в следующих целях:

для выполнения контекстных команд с выделенным участком текста («Копировать», «Вырезать», «Вставить», «Проверка орфографии» и

для работы с буфером обмена;

для выполнения пользовательских команд (в соответствии с контекстом выполняемого программного приложения);

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

Контекстное меню с одной панелью (рис. 76а) рекомендуется применять для относительно короткого списка команд. При этом необходимо использовать разделители для логической группировки команд. Если число команд большое, то может применяться каскадное контекстное меню [54], в котором используются всплывающие элементы и возможность прокрутки. Также могут использоваться разделители для группировки логически связанных команд (рис. 766). В случае использования элемента управления «контекстное меню» в процессе разработки пользовательского интерфейса необходимо придерживаться следующих рекомендаций:

  • 1. Название команд в списке контекстного меню должны быть короткими. Длинные команды рекомендуется обрезать. Имя команды должно начинаться с прописной буквы
  • 2. Между группами логически связанных команд необходимо использовать разделители.
  • 3. Количество команд в списке контекстного меню не должен быть большим. Это необходимо для увеличения скорости работы пользователя.
  • 4. Если команда уже есть в пользовательском интерфейсе, то ее нежелательно использовать в контекстном меню (то есть, в списке контекстном меню должны быть расположены команды, которые отсутствуют на экране).

Рисунок 76 Элемент управления «контекстное меню»

Элемент управления «диалоговое окно» пользовательского интерфейса предоставляет пользователю информацию о текущем состоянии программного приложения [55]. В большинстве случаев диалоговые окна являются модальными и блокируют дальнейшую работу с программным приложением (пока не будут закрыты явным образом, например, с помощью нажатия кнопки). Как правило, диалоговые окна требуют от пользователя выполнения некоторого действия. Диалоговые окна предназначены для того чтобы сообщить пользователю некоторую информацию о дальнейшей работе с программным приложением. Пользователь должен прочитать эту информацию, осознать ее перед продолжением работы и подтвердить дальнейшее действие (рис. 77). Элемент управления «диалоговое окно» рекомендуется использовать в следующих случаях [55]:

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

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

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

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

В случае использования элемента управления «диалоговое окно» желательно соблюдать следующие рекомендации [55]:

  • 1. В первой строке текста (в заголовке) диалогового окна необходимо изложить, что должен делать пользователь в диалоговом окне. При этом заголовок не обязателен, хоть он и является основной инструкцией для пользователя. Заголовок текста диалогового окна должен быть кратким (заголовки, превышающие одну строку, рекомендуется усекать). Если диалоговое окно используется для простого сообщения или вопроса, то заголовок можно опустить. В этом случае необходимую информацию для пользователя должен передавать текст сообщения. При этом необходимо, чтобы заголовок и текст сообщения соответствовали выбору кнопок в диалоговом окне.
  • 2. Сообщение внутри диалогового окна является обязательным. Содержание сообщения должно быть как можно проще. Если есть заголовок диалогового окна, то сообщение внутри диалогового окна должно быть использовано для более подробных сведений или пояснения терминологии.
  • 3. В диалоговом окне должна быть хотя бы одна кнопка. Название кнопки должно отражать конкретный вариант ответа на инструкцию, приведенную в содержании сообщения внутри диалогового окна.
  • 4. Диалоговые окна после возникновения ошибок отображают сообщение об ошибке в диалоговом окне, а также сведения о причинах ошибки и вариантах дальнейших действий пользователя.

Рисунок 77 Модальное диалоговое окно

Использование фильтрации позволяет пользователю просмотреть элементы списка, удовлетворяющие заданному критерию фильтрации [56]. В результате фильтрации происходит скрытие элементов списка, не удовлетворяющих условию, заданному пользователем. На рис. 78а приведено использование условия «Best rates» для списка категорий. Фильтрация наиболее применима в случаях, если предъявляемый пользователю список состоит из большого количества элементов (более 25 элементов) с применением прокрутки. Использование команды сортировки в отличие от команды фильтрации не скрывает элементы списка, а просто меняет их порядок (рис. 786). Сортировка также лучше всего применима для списков большого размера с прокруткой (более 25 элементов).

Рисунок 78 Примеры использования фильтрации и сортировки

Существует несколько способов выполнения фильтрации.

  • 1. Фильтрация произвольной формы. Для такого вида фильтрации может быть использован элемент управления «поле автозаполнения» для ввода текста. В результате ввода текста в элемент управления «поле автозаполнения» (описан выше в данной главе) отображаются только элементы списка, которые соответствуют тексту фильтра. Фильтрацию произвольной формы лучше всего применять в случае, если пользователь знает содержание списка. При этом реализация такого типа фильтрации на пользовательском интерфейсе не занимает много места на экране.
  • 2. Предопределенные параметры фильтрации. Пользователю предоставляется набор параметров фильтрации, которые относятся к элементам в списке. Такой вид фильтрации лучше всего применять, когда пользователь не очень хорошо знаком с содержанием списка. Данный вид фильтрации более сложный по сравнению с фильтрацией произвольной формы. При этом реализация фильтрации такого типа может занимать много места на пользовательском интерфейсе в зависимости от количества параметров фильтрации.

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

  • 1. Необходимо сообщать пользователю об активации фильтра. Если пользователь не видит активации фильтра, то он может не знать о том, что, кроме отфильтрованных элементов списка, есть и другие (скрытые) элементы списка.
  • 2. Должна быть реализована очистка фильтра.
  • 3. Пользователи должны знать о возможности добавления или исключения параметров фильтрации.
  • 4. Необходимо информировать пользователя о том, каким образом сортируются элементы (для того, чтобы пользователь понял, как просматривать элементы списка).

Элемент управления «элемент пролистывания» (FflipView) [57] предназначен для просмотра коллекции изображений. Элемент управления позволяет отображать только одно изображение. В случае наличия сенсорного экрана для прокрутки коллекции необходимо сдвинуть элемент управления с помощью жеста. В случае манипуляции мышью в пользовательском интерфейсе должны быть кнопки навигации, которые выделяются при наведении на нее указателя мыши (рис. 79а). В случае перемещения по коллекции изображений с использованием клавиатуры необходимо использовать клавиши со стрелками. В случае использования элемента управления «элемент пролистывания» следует придерживаться следующих рекомендаций:

  • 1. Элемент пролистывания лучше всего подходит для просмотра содержимого маленьких и средних коллекций изображений (до 25 элементов в коллекции).
  • 2. Для удобства работы с коллекцией необходимо добавление индикатора страницы, который обеспечивает наличие удобной точки отсчета. На рис. 796 применен индикатор страницы в виде серии точек, каждая из которых может быть выбрана и соответствует изображению в коллекции. Оптимальным расположением индикатор контекста обычно является расположение по центру и ниже коллекции. Выделенная точка указывает текущий элемент коллекции и обычно имеет белый цвет. Остальные точки имеют серый цвет. Количество точек для удобства пользователя должно быть ограничено (не более 10 точек). В случае большего количества точек пользователь может испытывать затруднения с определением своего положения в коллекции изображений.
  • 3. В случае коллекций изображений, состоящей из 10-25 элементов и, если пользователю тяжело ориентироваться в коллекции изображений, вместо индикатора страницы используется индикатор контекста (рис. 79в), который позволяет пользователям переходить к определенным элементам коллекции. Кроме того, индикатор контекста, позволяет пользователям получать информацию о том, насколько велика коллекция и в каком месте коллекции он находится.
  • 4. Пользователю должна быть предоставлена возможность быстрого перехода к нужному элементу коллекции изображений, а также возможность контроля своего положения в коллекции изображений.
  • 5. Стандартной формой реализации «элемента пролистывания» является горизонтальный просмотр коллекции изображений, начиная с крайнего левого элемента (рис. 84а). Такая форма реализации «элемента пролистывания» может применяться как в книжной, так и в альбомной ориентации на экранах всех устройств.
  • 6. В больших коллекциях изображений (более 25 изображений) использование «элемента пролистывания» не рекомендуется, так как длительное перелистывание элементов коллекции может стать утомительным для пользователя. Для таких коллекций изображений рекомендуется использовать списки (рассмотрены ранее в данной главе).

Рисунок 79 Реализация пролистывания в пользовательском интерфейсе

С помощью элемента управления «всплывающий элемент» («FlyOut») [58] производится реализация всплывающих контекстнозависимых диалоговых окон, которые появляются на пользовательском интерфейсе в зависимости от действий пользователя. Элемент управления позволяет показать меню, обнаружить скрытый элемент управления, отобразить дополнительные сведения о каком-либо элементе управления пользовательского интерфейс, а также запросить у пользователя подтверждение его действий. Всплывающее диалоговое окно закрывается

  • (исчезает) после нажатия на участок экрана за пределами диалогового окна. Всплывающее диалоговое окно содержит простое сообщение без кнопок. Текст в диалоговом окне должен переноситься по словам. Если же размер текста превышает контейнер диалогового окна, то необходима полоса прокрутки. Элемент управления «всплывающий элемент» может быть использован в следующих случаях:
    • 1. Для показа пользователю сообщений в случае отображения в пользовательском интерфейсе каких-либо ранее скрытых от пользователя элементов управления.
    • 2. Для отображения дополнительных сведений, таких как сведения об элементах управления на пользовательском интерфейсе, не скрытых от пользователя.
    • 3. Для показа пользователю предупреждений и подтверждений, в том числе связанных с потенциально опасными действиями.

Если для построения пользовательского интерфейса используются элементы управления «всплывающий элемент», то необходимо придерживаться следующих рекомендаций:

  • 1. Всплывающие диалоговые окна должны появляться рядом с теми точками пользовательского интерфейса, из которых они вызываются.
  • 2. Должен быть указан элемент управления пользовательского интерфейса, к которому привязано всплывающее диалоговое окно и сторону элемента управления, над которой появилось всплывающее диалоговое окно.
  • 3. Всплывающее диалоговое окно не должно загораживать важные для пользователя элементы пользовательского интерфейса.
  • 4. Всплывающее диалоговое окно должно закрываться после того, как пользователь что-то в нем выберет.
  • 5. Если с помощью всплывающих диалоговых окон реализуется меню, то предпочтительным является использование одноуровневых всплывающих меню.

Элемент управления «главный раздел» («Hub») позволяет группировать информацию, предъявляемую пользователю в пользовательском интерфейсе программного приложения, в связанные между собой разделы (категории) [59].

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

Рисунок 80 Элемент управления «главный раздел»

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

  • 1. Навигация (элемент управления позволяет визуально отображать информацию в кратком и наглядном виде, что позволяет легко ее просматривать).
  • 2. Разделение информации, содержащейся в элементе управления, на разделы (категории), в каждом из которых информация упорядочена определенным образом.
  • 3. Возможность использования различного визуального отображения разделов (различные геометрические размеры и соотношения сторон) в случае, если в разделах элемента управления содержится разнородная информация.
  • 4. Поддержка различной ширины разделов в случае отображения информации, находящейся на различных уровнях вложенности.

Элемент управления используется для отображения большого объема информации, организованного в форме иерархии. В элементе управления могут отражаться различные категории содержимого. Каждая из категорий соответствует отдельной странице с информацией (рис. 81). Страницы отображаться в той форме, которая наилучшим образом соответствует содержимому категории.

Рисунок 81 Иерархическая организация элемента управления «главный раздел»

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

  • 1. Горизонтальный сдвиг элемента управления с вертикальной прокруткой списка или сетки.
  • 2. Вертикальный сдвиг с горизонтальной прокруткой списка или сетки. При этом списки содержимого в элементе управления «главный раздел» сдвигаются в направлении, перпендикулярном направлению прокрутки элемента управления.

При разработке пользовательского интерфейса с использованием элемента управления «главный раздел» необходимо придерживаться следующих рекомендаций:

  • 1. В случае разработки программных приложений для мобильных устройств не могут одновременно отображаться несколько элементов управления «главный раздел».
  • 2. Содержимое элемента управления «главный раздел» может быть раскрыто более подробно. Для того чтобы пользователь видел возможность более подробного раскрытия информации, предъявляемое пользователю содержимое элемента управления (верхний «слой» содержимого) должно быть уменьшено таким образом, чтобы из-под него была видна часть более подробного содержимого (часть нижнего «слоя»).
  • 3. В элемент управления «главный раздел» может быть добавлено несколько разделов, каждый из которых будет выполнять свою функцию. Переход между разделами пользователь может осуществлять с помощью касаний, поддержка которых встроена в элемент управления.
  • 4. Для того чтобы адаптировать содержимое элемента управления под различные размеры экранов устройств, на которых используется программное приложение, необходимо производить динамическое переформатирование содержимого элемента управления в соответствии с размерами экрана устройства.
  • 5. Если программное приложение использует несколько элементов управления «главный раздел», то для корректного отражения элементов управления может быть использован элемент управления «контекстное масштабирование» (рассмотрен ранее в данной главе).
  • 6. Не рекомендуется использовать в разделах элемента управления «главный раздел» элементы управления для ссылок на другие разделы. Для перехода к другому разделу рекомендуется использовать интерактивные заголовки.
  • 7. Элемент управления «главный раздел» должен быть настроен в соответствии с потребностями проектируемого программного приложения. Могут быть настроены следующие параметры:

тип содержимого в каждом из разделов;

размещение и порядок следования разделов;

размер разделов, интервалы между разделами;

интервалы между разделами сверху или снизу от главного раздела;

стиль и размер текста в заголовках и содержимом, цвет фона, разделов, заголовков разделов и содержимого разделов.

При использовании элемента управления «гиперссылка» [60] пользователь либо переходит в другую часть программного приложения, либо к другому программному приложению, либо открывает определенный URI-адрес в отдельном программном приложении-браузере. Используются два типа элемента управления «гиперссылка»: текстовый элемент, который отображается в виде динамического текста (класс HyperLink, рис. 82а), и кнопка, которая отображается в виде размеченного текста (класс HyperLinkButton, рис. 826).

Рисунок 82 Элемент управления «гиперссылка»

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

  • 1. Элемент управления применяется в случае, если в пользовательском интерфейсе необходимо иметь фрагмент текста, который будет реагировать выбор его пользователем и перенаправлять пользователя по адресу, указанному во фрагменте текста.
  • 2. Текстовая гиперссылка используется, если пользователь не нуждается в разрыве фрагмента текста (текстовая гиперссылка занимает мало места и поэтому может быть успешно применена в составе фрагмента текста). При этом текстовые гиперссылки обычно небольшие, и на них бывает трудно попасть, особенно на устройствах с сенсорным экраном.
  • 3. Кнопка-гиперссылка используется в том случае, если нужен автоматический разрыв строки или если необходим более крупный (чем текстовая гиперссылка) элемент управления. Высота кнопки- гиперссылки составляет 44 ерх (эффективных пикселя).

Элемент управления «всплывающая подсказка» (класс ToolTip) [61] — это краткое сообщение, привязанное к другому элементу управления (рис. 83).

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

Рисунок 83 Элемент управления «всплывающая подсказка»

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

Также можно использовать всплывающую подсказку для отображения названия элемента управления для выполнения команды (это позволяет пользователю удостовериться в правильности выбора элемента управления).

При использовании элемента управления «всплывающая подсказка» следует придерживаться следующих рекомендаций:

  • 1. Элемент управления следует использовать только тогда, он должен отображаться только в результате действий пользователя. Не допускается самостоятельное отображение всплывающих подсказок.
  • 2. Всплывающие подсказки следует использовать для тех элементов управления, для которых нет текстовых обозначений (внутри элементов управления расположены иконки или графические метки).
  • 3. Элемент управления необходимо использовать, если необходимо более подробное описание какого-либо элемента управления на пользовательском интерфейсе. При этом может не хватать места на пользовательском интерфейсе для размещения дополнительной информации.
  • 4. Элемент управления не следует использовать, если в нем должна выдаваться информация об ошибках, предупреждениях, а также о статусе элементов управления пользовательского интерфейса.
  • 5. Если пользователю необходимо будет взаимодействовать с всплывающей подсказкой, то элемент управления «всплывающая подсказка» не рекомендуется использовать.
  • 6. Если всплывающие подсказки раздражают или отвлекают пользователя, то элемент управления «всплывающая подсказка» не рекомендуется использовать.
  • 7. Текст в элементе управления «всплывающая подсказка» должен быть кратким и информативным. В тексте не должно повторяться текст, который уже есть в пользовательском интерфейсе. Текст должен состоять из дополнительной информации, без которой пользователь может обойтись.
  • 8. Использование изображений в подсказках рекомендуется для случаев их применения для перехода со страницы на страницу.
  • 9. В элементе управления «всплывающая подсказка» не должны содержаться интерактивные элементы управления.

Шаблон «панель навигации» (класс Split View) [62] позволяет сохранять свободное пространство экрана устройства за счет использования элементов навигации верхнего уровня. В основном такой шаблон используется в программных приложениях для мобильных устройств, но также шаблон применяется и для устройств с большими экранами. Шаблон используется в режиме наложения или в режиме стыковки. При использовании в режиме наложения панель навигации остается свернутой и не открывается до тех пор, пока пользователь не нажмет кнопку (если экранного пространства недостаточно для отражения всех элементов управления пользовательского интерфейса). При использовании в режиме стыковки панель навигации всё время остается в развернутом состоянии (пользователь будет иметь больше возможностей навигации в пользовательском интерфейсе, если экранное пространство позволяет разместить все элементы управления пользовательского интерфейса). Шаблон «панель навигации» состоит из кнопки, панели для категорий навигации и области содержимого (рис. 84) [76].

Рисунок 84 Элемент управления «панель навигации»

Кнопка позволяет пользователю открывать и закрывать панель и представляется по умолчанию в виде трех горизонтальных линий («кнопка-гамбургер»: левый верхний угол, рис. 846). Такая кнопка позволяет пользователю открывать и закрывать «панель навигации» по мере необходимости. Кнопка не перемещается вместе с «панелью навигации». Обычно кнопка имеет название в виде текстовой строки. На верхнем уровне навигации пользовательского интерфейса поясняющий текст кнопки располагается рядом с кнопкой. На более низких уровнях навигации поясняющий текст может быть связан со страницей, на которой в данный момент находится пользователь. Если «панель навигации» отображается в режиме стыковки, то кнопка может не использоваться. Панель категорий навигации предназначена для размещения элементов навигации (рис. 84в, 84а, левая часть). В области содержимого (рис. 84а, правая часть) отображаются сведения из выбранного элемента навигации. В области содержимого могут содержаться отдельные элементы управления пользовательского интерфейса, отражающие содержание выбранного элемента навигации. Также в области содержимого могут отражаться или элементы навигации другого подуровня. Шаблон «панель навигации» лучше всего использовать в следующих случаях:


  • 1. Для программных приложений, в которых предусмотрены элементы навигации верхнего уровня для представления однородной информации (например, информации по категориям товаров мебельного магазина).
  • 2. Для организации навигации пользователя в программном приложении (если в пользовательском интерфейсе используется только элемент управления «панель навигации»).
  • 3. В случае если количество категорий навигации верхнего уровня, которые необходимо использовать в пользовательском интерфейсе, больше 10.
  • 4. В случае если необходимо экономить место в пользовательском интерфейсе (использование элемента управления в режиме наложения). В этом случае данный элемент управления может быть использован для скрытия тех элементов пользовательского интерфейса, которые редко используются.
  • 5. В режиме наложения «панель навигации» может быть использована для экранов любого размера (как в книжной, так и в альбомной ориентации). В режиме наложения «панель навигации» по умолчанию находится в свернутом состоянии. Поэтому в пользовательском интерфейсе отображается только кнопка. Нажатие кнопки открывает и закрывает «панель навигации». Развернутое состояние отменяется, когда пользователь осуществляет выбор, когда нажата кнопка «Назад», когда пользователь касается экрана или кликает левой клавишей мыши за пределами панели. Следует учесть, что «панель навигации» при появлении из режима наложения появляется поверх элементов управления пользовательского интерфейса, не адаптируясь под их расположение. Лучше всего «панель навигации» в режиме наложения использовать при разработке программных приложений для устройств с небольшими экранами (мобильные телефоны и фаблеты).
  • 6. В режиме стыковки шаблон «панель навигации» лучше всего использовать для устройств с большими экранами (планшеты) с шириной экрана более 720 ерх (эффективных пикселей). Для альбомной ориентации экрана необходимо применять масштабирование содержимого «панели навигации».
  • 7. Работа с шаблоном «панелью навигации» должна поддерживать действия по перетаскиванию объектов в «панель навигации» и из неё.
  • 8. Элементы списка в «панели навигации» (те, которые выбраны пользователем) должны быть выделены.
  • 9. Если экран устройства слишком узкий для показа «панели навигации» в режиме стыковки, то при повороте устройства из альбомной в книжную ориентацию «панель навигации» должна переходить в режим наложение (свернутое состояние). Если происходит поворот из книжной в альбомную ориентацию, то «панель навигации» может переводиться из режима наложения (свернутого состояния) в режим стыковки.
Топ-пост этого месяца:  Фразы-ассоциации чем полезны, как собирать и использовать для продвижения

Элемент управления «ползунок» (элемент управления диапазоном, Slider) [63] позволяет выбрать значение параметра из заданного диапазона. Ползунок состоит из «дорожки» и «бегунка» (рис. 85). Элемент управления «ползунок» может быть расположен по горизонтали или по вертикали.

Рисунок 85 Элемент управления «ползунок»

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

В случае использования элементов управления «ползунок» при разработке пользовательского интерфейса необходимо придерживаться следующих рекомендаций:

  • 1. Элемент управления «ползунок» рекомендуется применять, если пользователь должен видеть мгновенную реакцию программного приложения на изменение значения параметра. Элемент управления «ползунок» не должен использоваться для индикации хода выполнения задачи.
  • 2. Если параметр может принимать менее четырех значений, то рекомендуется использовать элемент управления «переключатель». Если значение параметра не может быть представлено в виде относительной величины, то рекомендуется применять элементы управления «переключатель» или «список».
  • 3. Размер элемента управления «ползунок» должен позволять пользователю легко выбрать нужное значение параметра с помощью мыши, клавиатуры или сенсорного экрана. Размеры «бегунка» (входит в состав элемента управления «ползунок») не должны меняться в процессе работы программного положения. Частота расположения делений на «дорожке» (входит в состав элемента управления «ползунок») должна позволять пользователям различать их. При отключении «ползунка» необходимо отключать и все связанные с ним метки или визуальные индикаторы.
  • 4. Для показа диапазона значений параметра необходимо использовать метки диапазона. Если «ползунок» используется для выбора целочисленных значений, то необходимо установить фиксированное целочисленное значение шага. Последний шаг диапазона значений параметра соответствует максимальному значению.
  • 5. Отображение текущего значения «ползунка» производится с помощью метки значения (текста). Также текущее значение «ползунка» может отображаться в ином визуальном представлении (показ рядом с «бегунком» результатов применения выбранного значения параметра).
  • 6. Метка (поясняющий текст) для «ползунка» должна указывать, для чего он используется. Метку «ползунка» не рекомендуется размещать под «ползунком» (в этом случае при прикосновении пользователя к «ползунку» палец пользователя может загородить метку). Текст метки «ползунка» не должен содержать знаки препинания и состоять из одного слова. Метки на краях «ползунка» должны носить описательный характер и иметь противоположные значения (например, «Макси- мум/минимум»).
  • 7. Необходимо придерживаться естественного расположения «ползунка» в соответствии с аналогами в реальном мире (например, для отображения температуры должна использоваться вертикальная ориентация, а для отображения объектов мультимедиа используется горизонтальная ориентация). Также ориентация «ползунка» должна соответствовать макету страницы. Если «ползунок» расположен по вертикали, то максимальное значение параметра должно быть размещено наверху. Если же «ползунок» расположен горизонтально, то при расположении содержимого пользовательского интерфейса «слева направо» минимальное значение параметра должно быть размещено слева.
  • 8. Если элемент управления используется на странице, которая прокручивается только в одном направлении, то необходимо использовать ориентацию «ползунка», отличную от направления прокрутки. В противном случае пользователи могут посчитать, что «ползунок» предназначен для прокрутки страницы.

Элемент управления «метка» (Label) [64] предназначен для отображения имени или названия элемента управления или группы элементов управления (рис. 86).

Рисунок 86 Элемент управления «метка» (расположен над текстбоксом)

При использовании элемента управления «метка» для разработки пользовательского интерфейса следует придерживаться следующих рекомендаций:

  • 1. Элемент управления «метка» следует использовать для отображения пояснений пользователю о назначении элементов управления в пользовательском интерфейсе или о действиях, который он должен выполнить.
  • 2. Текст в метке для элементов управления должен отображаться в виде одного существительного или короткого текста. При этом в тексте не должно быть знаков препинания.

В шаблоне основных и подробных данных [65] отображается главная панель (с представлением списка) и область сведений для содержимого. Если выбрать элемент в главном списке, область сведений обновляется. При реализации шаблона основных и подробных данных рекомендуется использовать стиль «стопкой» или стиль «рядом» в зависимости от доступного места на экране устройства (если доступная ширина окна устройства 320-719 ерх, то рекомендуемый стиль — стопкой, если более 720 ерх, то рекомендуемый стиль — «рядом»). При использовании расположения «стопкой» отображается только одна панель: главная или область сведений (рис. 87). Пользователь начинает работу с главной панели и детализирует информацию вплоть до ее появления в области сведений. При использовании стиля «рядом» главная панель и область сведений отображается одновременно (рис. 88).

Рисунок 87 Реализация шаблона основных и подробных данных (стиль «стопкой»)

Рисунок 88 Шаблон основных и подробных данных

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

  • 1. Шаблон основных и подробных данных хорошо подходит для работы с электронной почтой, адресными книгами, для случаев, когда необходимо выделить главный элемент в большой коллекции информации, а также в случае необходимости быстрого обмена информацией (удаление, перемещение, добавление) между элементами коллекции.
  • 2. При разработке шаблона основных и подробных данных используются отдельно друг от друга страница (шаблон) для построения главной панели и отдельно страница (шаблон) для построения области сведений.
  • 3. Для построения главной панели шаблона основных и подробных данных, в которой отображается список, который может содержать текст и изображения, лучше всего использовать элемент управления «список» («представление списка», см. выше в данной главе). В области сведений шаблона основных и подробных данных рекомендуется использовать элемент управления содержимым [21], который предназначены для поддержки интерактивной связи с пользователем. Элемент управления содержимым представляет собой специализированный тип элемента управления, который может хранить некоторое содержимое. Все элементы управления содержимым являются наследниками класса ContentControl, который позволяет:

определять содержимое внутри элемента управления;

определять порядок перехода между разделами содержимого;

отображать фон (цвет поверхности), передний план и рамки;

поддерживать форматирование размера текстового содержания и шрифта.

Если в содержимом много разделов, то для размещения содержимого может быть использован элемент управления «список» («представление сетки», см. выше в данной главе).

Элемент управления «проигрыватель мультимедиа» (класс SystemMediaTransportControls) предназначен для просмотра и прослушивания видео, звуков и изображений [67] и содержит стандартный набор кнопок (кнопка воспроизведения/паузы, переход вперед, переход назад), некоторые из которых отображаются, а некоторые остаются скрытыми в зависимости от устройства. Воспроизведение мультимедиа может быть встроенным (внедренным в просматриваемую страницу или в группу других элементов управления) или выполняться в специальном полноэкранном режиме. Элемент управления «проигрыватель мультимедиа» поддерживает однострочный и двухстрочный режимы работы. Однострочный режим предусматривает работу с кнопкой «Воспроизве- дение/пауза», расположенной слева от временной шкалы (рис. 89а). Такой режим работы лучше всего подходит для компактных экранов устройств.

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

Рисунок 89 Однострочный и двухстрочный режимы работы элемента управления «проигрыватель мультимедиа»

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

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

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

В элементе управления «проигрыватель мультимедиа» могут быть размещены дополнительные средства управления (кнопки и другие элементы управления). При этом панель управления внутри не должна быть перегружена средствами управления.

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

Элемент управления «индикатор выполнения» (Progress, ProgressBar, ProgressRing) [68] служит для уведомления пользователя о том, что выполняется длительная операция. Определенный «индикатор выполнения» (рис. 90в) показывает степень выполнения операции в процентах. Определенный «индикатор выполнения» представляет собой цветную полоску, увеличивающуюся в размере и стремящуюся заполнить серую фоновую полоску. Пропорция цветной полоски по отношению к фоновой полоске дает приблизительное представление о том, какая часть команды уже выполнена. Неопределенный индикатор выполнения (рис. 90а) и кольцевой индикатор выполнения (рис. 906) показывает, что операция еще выполняется, и неизвестно, сколько времени до конца ее выполнения. Индикатор выполнения доступен только для чтения (с ним нельзя взаимодействовать). Неопределенный «индикатор выполнения» или кольцевой «индикатор выполнения» состоит из непрерывно движущихся цветных точек. Элемент управления «индикатор выполнения» необходимо отображать в пользовательском интерфейсе очень аккуратно (чрезмерное использование «индикатора выполнения» может отвлекать пользователя от работы с программным приложением и значительно снижать скорость работы с приложением).

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

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

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

Для обозначения незавершенности выполнения команды необходимо использовать многоточия (рис. 90г). Если выполняется несколько команд, то может быть отображено количество оставшихся задач (при завершении задач «индикатор выполнения» должен исчезать).

Рисунок 90 Элемент управления «индикатор выполнения»

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

Если при выполнении команды может быть определена часть выполненной работы (завершение команды предсказуемо, а продолжительность выполнения известна), то используется определенный «индикатор выполнения». В противном случае должен быть использован неопределенный «индикатор выполнения» или кольцевой «индикатор выполнения».

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

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

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

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

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

Использование «индикатора выполнения» не должно происходить одновременно с использованием вида курсора для ожидания «песочные часы» (наличие двух способов для визуализации хода выполнения задачи отвлекает внимание пользователя от работы с программным приложением).

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

Расположение и размер «индикатора выполнения» не должны изменяться в ходе выполнения команды.

Обновление хода выполнения команды должно происходить равномерно. Не должно быть остановок индикации хода выполнения команды. После 100-процентного выполнения команды необходима пауза для окончательного заполнения «индикатора выполнения». После этого «индикатор выполнения» необходимо скрыть.

Если выполнение команды остановлено (самим пользователем или по каким-то другим причинам) и при этом пользователь может возобновить ее выполнение, то необходимо визуально отображать остановку выполнения. В этом случае под «индикатором выполнения» должна быть размещена текстовая строка с соответствующим сообщением.

Если выполнение задачи остановлено, и выполнение команды нельзя возобновить или необходимо начать выполнение команды с начала, то необходимо визуально отобразить сообщение об ошибке. В этом случае под «индикатором выполнения» должна быть размещено текстовое сообщение, объясняющее пользователю, что произошло и что как решить проблему (если это возможно).

Если для определения точного времени выполнения команды необходимо некоторое время (или выполнение какого-либо действия), то необходимо сначала использовать неопределенный «индикатор выполнения», а затем необходимо переключиться на определенный индикатор. После переключения «индикатор выполнения» должен находиться в одном и том же месте пользовательского интерфейса и иметь такой же размер.

Если имеется список элементов, и при этом над каждым из элементов может быть выполнена какая-то определенная команда, то необходимо отобразить определенный «индикатор выполнения» рядом с элементом (рис. 91). При этом название команды необходимо отображать над «индикатором выполнения», а состояние выполнения необходимо отражать под «индикатором выполнения». Текст, поясняющий состояние выполнения команды, не отображается, если состояние является очевидным для пользователя. После завершения выполнения команды необходимо скрыть «индикатор выполнения».

Рисунок 91 Размещение списка «индикаторов выполнения»

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

Если выполняемая команда блокирует выполнение программного приложения, то «индикатор выполнения» должен быть отображен в панели (плитке) этого программного приложения.

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

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

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

В диалоговом окне программного приложения, если команда должна завершиться до перехода к другому диалоговому окну, необходимо отобразить кольцевой «индикатор выполнения» над областью элемента управления, с помощью которого пользователь запустил выполнение команды. При этом расположение кольцевого «индикатора выполнения» необходимо выровнять по левому краю в соответствии с расположением содержимого диалогового окна (рис.92а). В диалоговом окне программного приложения с элементами управления, выровненными по правому краю (рис. 926), кольцевой «индикатор выполнения» необходимо размещать слева от элемента управления, с помощью которого пользователь запустил выполнение команды, или над ним. В диалоговом окне программного приложения с элементами управления, выровненными по левому краю (рис. 92в), кольцевой «индикатор выполнения» необходимо размещать справа от элемента управления, с помощью которого пользователь запустил выполнение команды, или под ним. При отображении в пользовательском интерфейсе списка запущенных команд (рис. 92г) необходимо кольцевой «индикатор выполнения» и текст, поясняющий состояние выполнения команды, разместить под названием элемента списка. В случае окончания выполнения команды или возникновения ошибки при выполнении команды необходимо скрыть кольцевой «индикатор выполнения», а на его месте необходимо отобразить текстовое сообщение о завершении выполнения команды или о произошедшей ошибке. Ход выполнения команды во всплывающем элементе отражается с помощью неопределенного «индикатора выполнения», расположенного в верхней части всплывающего элемента (рис. 92).

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

Рисунок 92 Рекомендации по размещению кольцевого «Индикатора выполнения»

Неопределенный индикатор может располагаться по ширине диалогового окна (рис. 93а). Ширина неопределенного «индикатора выполнения» настраивается так, чтобы он занимал всю ширину всплывающего элемента. В этом случае «индикатор выполнения» сообщает пользователю о выполнении команды, но практически не отвлекает внимание пользователя. Для того чтобы не мешать отображению «индикатора выполнения», в верхней части всплывающего элемента не должно быть поясняющего текста о назначении всплывающего элемента. Рекомендации по размещению неопределенного «Индикатора выполнения»: ширина окружающих линий в случае размещения «Индикатора выполнения» внутри диалогового окна (верхняя часть рис. 936) и в верхней части диалогового окна (нижняя часть рис. 936).

Для описания состояния выполнения команды необходимо использовать существительные, образованные от глаголов («Соединение», «Скачивание», «Отправка»). Если выполнение команды приостановлено или при выполнении команды возникла исключительная ситуация, то для описания состояния выполнения команды необходимо использовать причастия («Приостановлено», «Скачивание прервано» или «Выполнение отменено»).

Элемент управления «оценка» (объект Rating) [69] предназначен для демонстрации пользователем степени предпочтения, оценки или удовлетворенности чем-то (информационным сервисом, фильмом, программным приложением, предприятием). Элемент управления «оценка» содержит пять звезд: одна звезда означает самую низкую оценку, а пять звезд означает самую высокую оценку. Элемент управления «оценка» может показывать три вида оценок: среднюю оценку (рис. 94а), предварительную оценку (рис. 946) и пользовательскую оценку (рис. 94в).

Рисунок 94 Элемент управления «оценка»

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

После выставления оценки пользователем элемент управления «оценка» отключается для того чтобы пользователь не мог добавить или изменить оценку. Если элемент управления «оценка» выключен, то сделанная пользователем оценка продолжает отображаться. При этом пользователи не могут добавлять или изменять оценку. Если элемент управления «оценка» доступен в режиме «только чтение» и его невозможно включить, то его размер должен быть меньше по сравнению с элементами управления «оценка», значение которых может изменить пользователь (рис 956). При использовании элемента управления «оценка» (если необходимо пользователю) одновременно отображается средняя оценка и оценка пользователя (рис. 95в).

При этом может два варианта такого отображения: среднее значение отображается в текстовой строке, прикрепленной к элементу управления «оценка»;

одновременно отображаются два элемента управления «оценка» (для отображения оценки пользователя и для отображения средней оценки).

Рисунок 95 Использование элемента управления «оценка»

С помощью элемента управления «поиск» (класс AutoSuggestBox) позволяет обнаружить необходимую для пользователя информацию в пользовательском интерфейсе программного приложения [70]. Ввод текста для поиска информации является самым распространенным режимом ввода данных. Другими способами ввода данных для поиска информации является голосовой ввод и жестовый ввод, которые требуют наличия дополнительного оборудования для взаимодействия с устройством, а также наличия дополнительных элементов управления или специального диалогового окна в пользовательском интерфейсе.

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

Рисунок 96 Варианты реализации элемента управления «поиск»

Результаты поиска, как правило, отображаются рядом с элементом управления «поиск». Размещение рядом поля ввода и результатов поиска позволяет пользователю осуществить быстрый доступ к результатам запроса или вводу нового запроса.

При повторном использовании элемента управления «поиск» происходит выделение предыдущего запроса (текстовая строка, которая была ранее в поле ввода исчезает, но при этом строка предыдущего запроса остается в поле для того чтобы пользователь мог ее выбрать для редактирования).

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

Для отображения в элементе управления «поиск» подсказок об области поиска необходимо использовать текстовую строку (рис. 966), в которой сообщаются области поиска (например, «Поиск в Windows», «Поиск в списке контактов», «Поиск в почтовом ящике», «Поиск в настройках», «Поиск места»).

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

Для осуществления поиска в элементе управления «поиск» используется глиф увеличительного стекла (рис. 96а), в качестве которого используется символ шрифта Segoe UI размером 15 эффективных пикселей или глиф микрофона (рис. 966).

Элемент управления «комбинированный режим» [71] имеет в составе разворачиваемую и сворачиваемую панель, а также область содержимого. Область содержимого остается всегда видимой. Панель можно развернуть, свернуть, расположить в левой (правой части) диалогового окна программного приложения.

Панель элемента управления «комбинированный режим» может использоваться в трех режимах:

  • 1. Наложение (панель скрыта, а после открытия перекрывает содержимое диалогового окна программного приложения).
  • 2. Встроенный режим (пользователь постоянно видит панель, которая не перекрывает содержимое диалогового окна программного приложения, при этом пространство диалогового окна делится между областью, занимаемой панелью, и областью, где отражена информация для пользователя, рис. 97а).

Рисунок 97 Панель элемента управления «комбинированный режим»

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

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

Элемент управления «представление веб-страницы» (класс Web- View) [72] внедряет в программное приложение возможности по работе с информацией, аналогичные с возможностями браузера Microsoft Edge, который предназначен для замены браузеров Internet Explorer 11 и Internet Explorer Mobile на всех устройствах, которые будут поставляться с операционной системой Windows 10. В Microsoft Edge появились возможности по созданию заметок из веб-страниц. Пользователь может делать пометки или рисунки непосредственно на веб-странице и затем передавать веб-страницу с обновлениями. Элемент управления «представление веб-страницы» предназначен для отображения:

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

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

Урок 15
Пользовательский интерфейс

Содержание урока

2.5.1. Пользовательский интерфейс и его разновидности

2.5.1. Пользовательский интерфейс и его разновидности

Ключевые слова:

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

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

На компьютерах, оперировавших только числами и символами, был реализован командный интерфейс (рис. 2.11):

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

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

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

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

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

В наши дни взаимодействие человека и компьютера строится на основе объектно-ориентированного графического интерфейса, в котором:

• все объекты представляются в виде значков (иконок, пиктограмм), выбор которых с помощью, например, мыши приводит к активизации соответствующих объектов;
• оперирование объектами осуществляется в окнах — заранее заданных, очерченных рамками частях экрана;
• основным элементом программного управления является меню — выводимый на экран список команд, которые можно задать компьютеру;
• основным элементом аппаратного управления являются различные манипуляторы (мышь, трекбол, сенсорная панель и т. д.). Каждый компьютерный объект имеет своё имя и графическое обозначение. Например:

Объекты обладают определёнными свойствами. Например:

С объектами можно совершать разнообразные действия. Например:

Основным элементом аппаратного управления компьютером в пользовательском интерфейсе является мышь, отображаемая на экране в виде указателя мыши — небольшого графического объекта, который перемещается по экрану при движении мыши. Он используется для того, чтобы указывать на различные объекты, запускать программы, выбирать пункты меню, перетаскивать объекты, выделять текст и пр. Чаще указатель выглядит как маленькая стрелка, но его вид меняется в зависимости от операций, которые выполняет пользователь. Так, если указатель имеет форму маленьких песочных часов, это означает, что компьютер занят выполнением какой-то операции. А если указатель мыши принимает вид перечёркнутого круга, это означает, что запрашиваемая операция в данном случае невозможна.

Основными приёмами управления с помощью мыши являются:

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

Интуитивная понятность объектно-ориентированного графического интерфейса объясняется тем, что в нём реализованы аналогии с привычными человеку прямым манипулированием конкретными объектами и визуализацией результатов производимых действий. Действительно, при выполнении какой-либо операции пользователь сначала выбирает объект, а затем — действие над этим объектом; мышь позволяет осуществлять прямое манипулирование выбранным объектом. Так, для копирования файла с одного каталога в другой уже не нужно набирать в командной строке определённую последовательность символов. Достаточно выделить щелчком пиктограмму предназначенного для копирования файла в окне содержащего его каталога и перетащить её в окно или на пиктограмму другого каталога. Результатом копирования файла будет его изображение в окне нового каталога.

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

Разработка интерфейсов мобильных приложений

7 важных советов по разработке интерфейсов мобильных приложений

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

1. Правила интерактивного дизайна применимы всегда

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

Некоторые эксперты выделяют 5 основных принципов интерактивного дизайна:

  • Дизайн, ориентированный на потребителя. Дизайн разрабатывается для конкретных пользователей. Исследования целевой группы, опросы и интервью позволят нарисовать точный портрет потребителя, составить представление о тех, кто вероятнее всего будет пользоваться разработкой. Ориентируясь на эти данные, можно создать функционал приложения, исходя из интересов и потребностей конечного пользователя.
  • Юзабилити. Это представляется самоочевидным, но не будет лишним напомнить, что приложение в первую очередь должно быть удобным. Если целевая аудитория не может без каких-либо сложностей пользоваться приложением, тогда люди попросту не будут его загружать из App Store.
  • Подсказки. Пример: синий подчеркнутый текст является свидетельством того, что за кликом по нему последует перенаправление в другое место. Подсказки стоит применять корректным образом, чтобы пользователям не приходилось задумываться о том, зачем, собственно, нужен определенный элемент.
  • Легкость освоения. Для того, чтобы интерфейс был интуитивно понятен, при разработке простых мобильных приложений лучше использовать привычные модели функционирования (об этом речь пойдет позже). Знакомые элементы позволяют быстрее освоить приложение.
  • Фидбек и время реакции. Элемент обратной связи — это возможность узнать, была ли задача выполнена или нет. Им может быть простейший звуковой сигнал или же более сложная деталь, такая как диалоговое окно. Стоит перепроверить, что фидбек реализован должным образом, а время реакции не выходит за рамки, очерченные исследователями Nielsen Norman Group.

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

2. Сведения о пользователях

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

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

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

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

3. Контент и пользовательский маршрут как отправные точки UX-дизайна

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

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

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

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

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

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

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

Как описывается в бесплатной книге Mobile UI Design Patterns, существуют две категории моделей интерактивного дизайна, которые следует непременно применять.

  • Жесты. Функционал тачскринных устройств построен на жестах (касание, свайп, двойной клик, масштабирование).
  • Анимация. Анимированный видеоряд задерживает внимание на интерфейсе в то время, пока загружается контекст.

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

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

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

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

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

5. Дизайн для толстых пальцев

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

Вот несколько советов по созданию кнопок и других подобных элементов:

  • Люди держат свои телефоны и управляют ими по-разному. Некоторые аналитики выделяют три основных способа: в одной руке и одним пальцем, двумя руками и одним пальцем, двумя руками и двумя пальцами. Планшеты пользователи тоже держат по-разному.
  • Согласно исследованию MIT Touch Lab, ширина среднестатистического указательного пальца составляет 1.6-2 см, или 45-57 пикселей, что больше тех данных, которые сообщаются в большинстве пособий. К примеру, Apple рекомендует придерживаться 44 пикселей, однако это не всегда уместно. Если кнопка слишком большая, пользователи могут и не понять, что это кнопка действия. Но, как бы то ни было, следует принимать в расчет размеры пальцев и способы взаимодействия с приложением.

6. Тренды веб-дизайна: градиенты и тени пока еще рано списывать со счетов

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

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

Благодаря теням и даже градиентам UI смотрится естественнее, эти детали можно использовать для создания 3D-кнопок и форм ввода.

7. Базовый принцип простого дизайна: устранить беспорядок

И хотя миф об эффективности правила трех кликов в веб-дизайне уже давно развенчан, это правило, тем не менее, может оказаться достаточно эффективным применительно к приложениям. В идеале пользователь должен выполнять задачи быстро и за ограниченное количество шагов. Гендиректор Yahoo Марисса Майер советует дизайнерам придерживаться правила «двух нажатий». По ее словам, «если в приложении недостаточно двух нажатий, чтобы сделать все необходимое, значит этому приложению необходим редизайн». «В Yahoo Flickr это присутствует повсеместно: открыв экран, вы можете выбирать изображения, просматривать альбомы, группы, устанавливать уведомления, выполнять другие действия — и все это с помощью только лишь двух кликов».

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

Добавить комментарий