8 характеристик успешного интерфейса пользователя


Содержание

Пользовательский интерфейс (стр. 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.1. Основные принципы проектирования пользовательского интерфейса

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

Для создания у пользователя такого ощущения «внутренней свободы» интер­фейс должен обладать целым рядом свойств (слайд 14.4):

Дружественность интерфейса (Принцип «прощения пользователя»)

Принцип «обратной связи».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цукерберг рекомендует:  Php - PHP и чекбоксы,- помогите.

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

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

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

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

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

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

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

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

Тема 3. Характеристики интерфейса взаимодействия. Естественность,согласованность интерфейса. Принцип “обратной связи”. Простота интерфейса. Свойства интерфейса. Правила создания интерфейса.

Создание качественного интерфейса предполагает реализацию принципа “интересы пользователя превыше всего” и соответствующую методологию разработки всего программного продукта. В англоязычной литературе для описания такого подхода используется термин User-centered Design ( UCD )- “Разработка, ориентированная на пользователя”. Эта технология, кроме всего прочего, предполагает как можно более раннее проектирование интерфейса с последующим его развитием в процессе разработки самого программного продукта.

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

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

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

Согласованность в пределах приложения.

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

Согласованность в пределах рабочей среды.

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

Дружественность интерфейса (принцип “прощения”).

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

Принцип “обратной связи”.

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

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

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

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

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

подробный (для начинающего пользователя);

краткий (для подготовленного пользователя).

Правило двух уровней может быть расширено до правила N-уровней диалога.

Однако такой подход имеет несколько недостатков:

— не учитывается тот факт, что навыки накапливаются постепенно;

— пользователь может хорошо знать одну часть системы и совсем не знать другую;

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

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

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

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

— опережающий ввод ответов;


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

во-первых, начинающий пользователь имеет возможность использовать большинство параметров системы по умолчанию;

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

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

нию, могут выводиться на экран вместе с соответствующим вопросом системы, например: “Дата регистрации документа? [текущая]”.

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

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

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

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

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

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

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

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

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

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

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

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

Литература:1осн. [11-59],2осн.[17-41], 3осн. [3-33], 4осн. [166-189], 7доп.[67-113].

1. Каковы свойства «хорошего» интерфейса пользователя?

2. Что означает фиксированная, полная и косметическая адаптация при проектированиии пользовательского интерфейса?

3. Как используется принцип умолчаний в пользовательских интерфейсах?

4. Как реализуется эстетическая привлекательность в пользовательских интерфейсах?

Глава 2. Характеристики человека-оператора.

Тема 4. Психофизиологические характеристики операторов. Темп ведения диалога. Время ответа (отклика) системы. Характеристики цветового восприятия. Пространственные характеристики.

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

— способности к приему и переработке информации;

— объем сенсорной и кратковременной памяти;

— умение концентрировать внимание на наиболее важной информации;

— способность воспроизводить информацию из долговременной памяти;

— моторные навыки и реакции;

— восприимчивость цветовой гаммы и т. д.

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

Темп ведения диалога.

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

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

Обычно человек может одновременно запомнить сведения о пяти — девяти предметах. Считается также, что хранение данных в кратковременной памяти ограничено по времени: около 2 секунд для речевой информации и 30 секунд для сенсорной. Поэтому люди имеют склонность разбивать свою деятельность на этапы, соответствующие порциям информации, которые они могут хранить одновременно в памяти. Завершение очередного этапа называется клаузой. Задержки, препятствующие наступлению клаузы, очень вредны и неприятны, так как содержимое кратковременной памяти требует постоянного обновления и легко стирается под влиянием внешних факторов. Зато после паузы подобные задержки вполне приемлемы и даже необходимы. Завершение задачи, ведущее к отдыху, называют закрытием. В момент исчезает необходимость дальнейшего хранения информации и человек получает существенное психологическое облегчение. Так как пользователи интуитивно стремятся к закрытию в своей работе, следует делить диалоги на фрагменты, чтобы пользователь мог “вовремя” забывать промежуточную информацию. Пользователи, особенно новички, обычно предпочитают много мелких операций одной большой операции, так как в этом случае они могут не только лучше контролировать общее продвижение решения и обеспечить ее удовлетворительный ход, но и отвлечься от деталей работы на предыдущих этапах.

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

0,1. 0,2 с — для подтверждения физических действий (нажатие клавиши, работа с мышью);

0,5. 1,0 с — для ответа на простые команды (например, от момента ввода команды, выбора альтернативы из меню до появления нового изображения на экране);

1. 2 с — при ведении связного диалога (когда пользователь воспринимает серию взаимосвязанных вопросов как одну порцию информации для формирования одного или нескольких ответов; задержка между следующими друг за другом вопросами не должна превышать указанную длительность);

2. 4 с — для ответа на сложный запрос, состоящий в заполнении некоторой формы, если задержка не влияет на другую работу пользователя, связанную с первой, могут быть приемлемы задержки до 10с;

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

Визуальные атрибуты отображаемой информации

К визуальным атрибутам отображаемой информации относятся:

— взаимное расположение и размер отображаемых объектов;

— средства привлечения внимания пользователя.

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

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

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

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

Характеристики цветового восприятия.

Цвета различаются тоном, светлотой и насыщенностью. Число различимых оттенков цвета по всему спектру при яркости не менее 10 кд/м2 и максимальной насыщенности равно приблизительно 150. Различение степеней насыщенности колеблется от 4 (для желтого) до 25 (для красного). При изолированном предъявлении человек точно идентифицирует не более 10-12 цветовых тонов, а в комбинации с другими цветами — не более восьми. Изменение яркости объекта влияет на восприятие его цвета. С уменьшением яркости происходит постепенное обесцвечивание желтого и синего цветов, а спектр становится трехцветным: красно-зелено-фиолетовым. Восприятие цвета зависит также от угловых размеров объекта: с уменьшением размера изменяется видимая яркость и искажается цветность. Наибольшему изменению подвержены желтый и синий цвета.

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

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

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

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

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

Задача с точки зрения UI-дизайна

Отправная точка — это не только определение задачи, которую надо решить, но и её понимание с точки зрения ваших клиентов.

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

20 ноября в 18:30, Москва, беcплатно

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

Разработайте собственный алгоритм подхода к дизайну

Сформируйте простой порядок действий для разработки UI-дизайна вашего приложения. Вот некоторые рекомендованные шаги:

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

Диаграмма пользовательских маршрутов

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

Как пользователи могут попасть в нужный им раздел? Можно ли на диаграмме потоков визуализировать все возможные маршруты пользователей по приложению?

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

Для удобства можно использовать различные готовые инструментарии, например, шаблоны блок-схем Miro, Milanote и Whimsical. Можно легко формировать маршруты с помощью трёх стандартных фигур:

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

Здесь проиллюстрирована диаграмма маршрутов пользователя на этапе предварительного дизайна. Исследовать другие распространённые маршруты и фильтровать широкий спектр скриншотов из iOS, Android и веб-приложений можно на Page Flows.

Изучение дизайнерских шаблонов и стилей

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

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

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

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

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

Вот ещё несколько отличных ресурсов:

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

Создание каркасов

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

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

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

Также обязательно ознакомьтесь с Balsamiq, Whimsical и OmniGraffle. Эти компоненты предварительной сборки помогут в работе со структурой вашего приложения.

Цукерберг рекомендует:  Netbeans - Помогите разобраться с Hibernate JPA

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

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

Создание макетов приложения

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

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

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

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

Что такое UI

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

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


Это точное, но скучноватое определение.

А вот иными словами, но интереснее: пользовательский интерфейс (UI) — это «способ, которым вы выполняете задачу с помощью продукта, а именно совершаемые вами действия и то, что вы получаете в ответ» (источник: Джеф Раскин, «Интерфейс. Новые направления в проектировании компьютерных систем»).

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

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

Зачем нужен UI

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

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

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

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

Разработка UI

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

Грань между UX (User Experience) и UI (User Interface) очень тонка, но если разобраться, то становится ясно, что UX помогает понять пользователя. В больше психологического аспекта, нежели технологического. UX изучает пользователя: как пользователь живёт, что он думает, как и что делает и что его окружает. Перед дизайнером ставится задача — помочь обычному человеку легко разобраться с вашим программным продуктом и получить при этом удовлетворение от работы с ним.

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

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

Концепция

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

Создание мокапа

Этот этап позволяет быстро понять видение клиента и внести уйму изменений до начала разработки интерфейса. Мы намечаем расположение кнопок, форм и других нужных элементов, а уже потом подбираем цветовую палитру, шрифты, изображения, преобразуя всё это в удобный и красивый макет. То есть начинаем с варфрейма (план расположения элементов на странице), а заканчиваем созданием из этого плана красивой картинки. В случае разработки приложений под Android и iOS труд дизайнера облегчается гайдлайнами — правилами оформления и расположения элементов интерфейса, регламентом UX/UI, который был создан непосредственно экспертами по дизайну из Google и Apple.

User Flow Diagram (карта экранов)

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

Утверждение структуры

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

Выбор стиля UI

Существует множество различных концепций, например: material design, metro, skeuomorphism При выборе стиля интерфейса следует учесть текущие тенденции в дизайне, адаптивность, время на разработку и внедрение дизайна, и много других не менее важных моментов.

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

Согласование стиля

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

Интерактивный прототип

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

Для более наглядной демонстрации работы приложения инвесторам и потенциальным пользователям можно заняться разработкой интерактивного прототипа. Хотя стоит отметить, что это не обязательный этап, так как мокап+user flow diagram вполне себе является прототипом, описывающим будущий продукт с точки зрения UX. Однако интерактивный прототип даст более полное представление и о возможностях приложения, и об объеме работ по их реализации.

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

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

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

Утверждение результата

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

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

Вывод

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

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

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

Проектирование интерфейса пользователя уменьшает время проектирования и упрощает взаимодействие пользователя с продуктом. Хорошо разработанный UI = благодарный пользователь = счастливый вы.

Этапы разработки пользовательского интерфейса: как сделать так, чтобы UI не лишил вас прибыли

В ноябре 2020 года студия «Лайв Тайпинг» рассказывала читателям vc.ru, из чего складывается стоимость мобильного приложения. Эта статья посвящена одному из слагаемых: пользовательскому интерфейсу.

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

Пользовательский интерфейс, или UI (User Interface) — это внешний вид продукта, способ общения между пользователем и программой. А ещё интерфейс влияет на то, будет ли продукт приносить деньги и пользоваться уважением и любовью аудитории.

Доказывать важность дизайна как магнита для пользователей удобно на примере соцсетей с миллионами пользователей. Резонансным случаем в рунете стал редизайн «Кинопоиска». 96% негативных отзывов на него говорят сами за себя: владельцы сайта, компания «Яндекс», сделала это без оглядки на мнение пользователей.

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

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

Редизайн «Живого журнала» в 2014 году тоже не впечатлял. Его хорошенько почистили от лишних элементов, но в целом он не вызвал восторгов: типографика, модульная сетка, адаптив — всё выглядело сырым и неудобным.

Вы хотите повторить судьбу «Живого журнала» и «Кинопоиска»? Не думаем, поэтому мы и написали эту статью. Вам как клиенту будет полезно знать, как именно создаётся дизайн сайтов и приложений, из каких этапов состоит работа и что вы должны получить. Чувство контроля над этими этапами приблизит ваш проект к успеху.

Итак, разберём особенности разработки пользовательского интерфейса пошагово.

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

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

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

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

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

  • Коридорный метод. Обратная связь поступает от родных, друзей и коллег дизайнеров. Собрать её легко, но этого недостаточно.
  • Разговор с вами. Справедливо предполагается, что вы как никто знаете, что нужно вашей аудитории.
  • Полевые исследования. В рамках метода дизайнеры идут в народ: общаются с людьми напрямую, если делают продукт для местного рынка, или читают форумы, если для зарубежного;
  • Проблемное интервью. Задавая пользователям вопросы про их жизнь и место проблемы в ней, дизайнеры узнают, как эта проблема решается сейчас и насколько полезным окажется их продукт. То, что он может оказаться бесполезным — тоже ценный результат: не придётся тратить деньги на приложение, которым никто не будет пользоваться.

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

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

Такая персона становится центром user story, или пользовательской истории. Это краткий, в несколько строк, рассказ про персону и то, как она работает с функциональностью приложения и какой цели достигает. User story строится по шаблону:

Поместив нашего 23-летнего фаната оригинальных версий в этот шаблон, получим:

Компания Intercom славится не только комплексным решением по внедрению чатов в сайты и мобильные приложения, но и изобретением подхода Jobs To Be Done. В основе подхода лежит не личное качество ключевой персоны, а обстоятельства и мотивация, которые толкают персону пользоваться продуктом. «Размышления» персоны называются Job story, а шаблон выглядит так:

Ситуация с кинолюбом в рамках такого подхода выглядит иначе:

Подробнее про подход Jobs To Be Done написала в своём блоге платформа Tilda.

От User story и Job story мы переходим к User scenario. Это маршрут взаимодействия пользователя с продуктом и достижения цели.

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

Прототипирование

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

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

Будет ли вайрфрейм грубым наброском, который вы сделали с коллегами ручкой на бумаге для принтера, или созданной в графическом редакторе организованной картой экранов — решать вам. Единственное: готовьтесь объяснить клиенту, что визуально вайрфрейм не имеет отношения к финальному продукту.

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

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

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

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

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

В качестве софта для этой задачи мы используем Overflow, чей слоган «User flows done right» даёт понять, что время за этой работой пройдёт продуктивно и с пользой. В Overflow легко импортируются экраны из Sketch или Figma, а сделать flow для 100 экранов можно за час — гораздо быстрее, чем рисовать стрелочки самому.

Нужен дополнительный уровень понимания, как продукт будет работать? С помощью таких сервисов, как Marvel, InVision, POP App и Origami Studio детализированный прототип можно превратить в интерактивный. Его польза в том, что он даёт прокликать (а в случае, если у нас мобильное приложение — прокликать прямо в телефоне) все элементы интерфейса и оценить логику работы продукта до того, как он попадёт в руки конечного пользователя.

Его создание — этап необязательный, так как с презентацией будущей работы справляются макеты и user flow. Но когда нужно показать возможности мобильного приложения и раскрыть перед клиентом предстоящий объём работ в деталях, используйте его.

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

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

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

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

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

Стилизация

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

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

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

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

Вывод

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

«Что делать?»


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

«Куда идти?»

Путь к цели лежит через взаимодействие пользователя с интерфейсом. Кнопка за кнопкой, поле ввода за полем ввода, экран за экраном — и так до заветной покупки или публикации поста. Грамотно составленный user scenario, отрепетированный на прототипе, уберёт с этого пути все ухабы.

«Куда нажимать?»

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

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

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

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

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

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

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

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

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

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

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

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

Цукерберг рекомендует:  Развертывание рядов таблицы с помощью jQuery

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. Создавайте согласованный дизайн, не заставляя людей менять паттерны поведения

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

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

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

Удобный интерфейс: 5 правил юзабилити

За пять лет работы в мобильной разработке мы сделали 40 проектов. Кроме написания собственно кода, мы также разрабатываем дизайн приложений, а точнее UX-дизайн. А это, честно говоря, похоже на магию.

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

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

Итак. Вот наши правила:

1. Думайте как пользователь

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

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

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

2. Ничего лишнего

По последним исследованиям человек может без стресса воспринимать только 3-5 объектов сразу. Видели светофор? Очень удобная штука, которая помогает нам безопасно передвигаться по городу. А теперь представьте, что в светофоре не 3 цвета, а десять, каждый из которых что-то означает. Или представьте, что вы ведете автомобиль, и перед вами вырастает десять дорожных знаков. Скорее всего, ваш мозг закипит. При создании интерфейса приложения это правило тоже действует, правда, с поправками. Нужно сокращать количество элементов до минимума пока это возможно, но не в ущерб задачам, которые решает пользователь.

3. Контекст использования тоже важен

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

Этот пункт может разрушить все ваши идеи насчет дизайна

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

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

4. Все взаимосвязанные элементы логически соединены

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

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

5. Иерархия по важности

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

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

Таким образом, степень важности элементов нисходит с верхнего левого угла к нижнему правому.

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

Резюмируем:

  1. В приложении должна быть цель — та задача, которую решает пользователь
  2. Нельзя отвлекать внимание от цели лишними элементами
  3. Элементы располагаются так, чтобы ими было удобно пользоваться в обычном для приложения контексте
  4. Связанные по смыслу элементы располагаются рядом друг с другом
  5. Элементы имеют иерархию по важности и располагаются согласно этой иерархии

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

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

Каким должен быть интерфейс?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Минимизация ошибок пользователя

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

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