Проектирование пользовательского интерфейса: что это такое и зачем его заказывать — Блог Live Typing — Блог Live Typing

Проектирование пользовательских интерфейсов. Краткий обзор процесса

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

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

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

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

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

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

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

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

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

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

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

Материал написан специально для блога о венчурных инвестициях и стартапах IdeaBlog.ru.

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

услуги и цены →

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

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

Платформы

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

Настольные приложения
Любые приложения для операционных систем Windows и Mac OS.

Другие платформы
Сенсорные киоски, приложения для iPhone и Android.

Время

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

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

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

Цена

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

Первый экран Этот экран стоит дороже, поскольку является определяющим для всего приложения. При его разработке мы должны учитывать структуру всего приложения.	63 700 р.
Каждый последующий экран	28 600 р.
Иконки	оцениваются отдельно

Вопросы по ценам и оплате

С чего начать

Для начала нам необходимо от Вас следующее:

Ваше приложение
Это может быть прототип, скриншоты, приложение или демо-версия.

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

Предоплата
Мы просим 50% предоплату за наши услуги.

Проектирование пользовательского интерфейса Windows 95 / Хабр

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

Статья описывает некоторые общие проблемы оболочки Менеджера программ в Windows 3.1 и рассматривает варианты разработки отдельной оболочки для «новичков». Я склоняюсь к мнению, что она предположительно создавалась в духе программы At Ease от Apple, довольно популярной во времена System 7. Я хорошо помню, как мы запускали At Ease в начальной школе, так что детишкам не приходилось возиться с жёстким диском в Finder.

Итак, вот что Кент дословно написал в своей статье под названием «Пользовательский интерфейс Windows 95: конкретный пример проектирования функциональности» (The Windows 95 User Interface: A Case Study in Usability Engineering). Публикуем её, чтобы документ никогда не потерялся.

---

В разработке пользовательского интерфейса для большого коммерческого программного продукта вроде Microsoft Windows 95 участвует много людей. У этого проекта обширные задачи и агрессивный график выполнения работ. Краткое изложение проекта здесь описывает опыт успешного применения принципов проектирования юзабилити, итеративной разработки и отслеживания проблем, чтобы повысить управляемость процессом разработки UI. Также обсуждаются конкретные проблемы дизайна и их решения.
Windows 95 — это обширное обновление продуктов Windows 3.1 и Windows for Workgroups 3.11. Почти во всех частях Windows произошли многие изменения. Не стал исключением и пользовательский интерфейс. В этой статье обсуждается дизайнерская группа, её задачи и процесс работы. Затем объясняется, как в проекте применялись принципы проектирования юзабилити, такие как итеративная разработка и отслеживание проблем. В качестве примеров приведены конкретные проблемы дизайна и их решения.

Дизайнерский отдел

Группу разработки пользовательского интерфейса Windows 95 сформировали в октябре 1992 года на ранней стадии проекта. Я подключился к группе в декабре 1992 года в статусе помощника для обеспечения сервисов юзабилити. Команда была по-настоящему междисциплинарной, со специалистами в области проектирования, графического дизайна, тестирования юзабилити и компьютерных наук. Количество сотрудников колебалось в ходе проекта, но в среднем нас было двенадцать. Ещё столько же программистов для реализации пользовательского интерфейса.

Цели дизайна

Дизайнерская группа работала над двумя очень широкими задачами:

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

С более чем 50 млн установок Windows 3. 1 и 3.11 плюс практически нетронутым рынком домашних ПК с самого начала стало понятно, что задача выпуска лучшего продукта станет нетривиальным упражнением. Без тщательного дизайна и тестирования мы скорее всего сделаем продукт, который улучшит юзабилити только для определённой категории пользователей, но ухудшит его для миллионов остальных (существующих или потенциальных). Мы хорошо понимали проблемы средних и продвинутых пользователей, но мало знали о проблемах, которые испытывают новички.

Процесс дизайна

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

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

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

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

Рис. 1: Процесс итеративной разработки Windows 95

Этап изучения

На этом первом этапе мы экспериментировали с разными направлениями дизайна и собирали первые отзывы пользователей. Мы начали с прочного фундамента визуального дизайна UI, используя работу, проделанную группой Cairo. Мы унаследовали от них значительную часть фундаментального UI и интерфейсов взаимодействия: рабочий стол, трей (область уведомлений), контекстные меню, трёхмерный вид и проч.). Мы также получили данные из службы поддержки о 20-ти главных проблемах пользователей Windows 3.1.

На рис. 2 показан прототип дизайна рабочего стола Windows 95, юзабилити которого мы тестировали в январе 1993 года. Дизайн основан на Cairo и включает в себя первый проход исправления некоторых известных проблем Windows 3.1 (в частности, управления окнами).

Рис. 2: Ранняя версия рабочего стола Windows 95 (с выносками для ясности)

Верхняя иконка File Cabinet открывала вид в стиле менеджера файлов Windows 3. 1 (слева иерархия, справа контент). Вторая иконка World показывала элементы в сети. Третья иконка Programs — это папка с другими папками, полными ссылок на программы, установленные в системе. Вдоль нижей части экрана располагается системный трей с тремя кнопками (System, Find и Help) и областью хранения файлов. Другая иконка Wastebasket представляет собой контейнер удалённых файлов.

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

Первые результаты

Юзабилити-тестирование этого прототипа принесло много результатов, в том числе несколько неожиданных:

Сравнение с Windows 3.1

С первых лабораторных экспериментов стало понятно, что нам требуется база Windows 3.1 для лучшего понимания, какие проблемы существовали до Windows 95, а какие проблемы уникальны для нового дизайна. Сначала мы собрали данные рыночных исследований о 20-ти самых частых задачах, которые выполняют пользователи Windows 3.1. Затем провели несколько лабораторных исследований, сравнивая Windows 3.1 и Windows 95 с учётом этих 20-ти задач. Мы также провели собеседования с профессиональными преподавателями Windows 3.1 (и Macintosh, для сравнения), чтобы понять, какие аспекты операционной системы они считают простыми и сложными в обучении юзеров.

Ключевые результаты:

• В Windows 3. 1 новичкам требовалось в среднем 9,5 минут для поиска и открытия программы, которая не видна сразу на экране. В нашем прототипе Windows 95 результаты оказались ненамного лучше. Такие результаты явно неприемлемы с учётом того, что данные рыночных исследований (и здравый смысл) говорили о том, что запуск программ у пользователей является задачей номер один.
• Новые и некоторые средние пользователи испытывали большие проблемы при использовании мыши, особенно двойного щелчка. В результате они часто не могли найти элементы в контейнерах, доступ в которые открывался только по двойному щелчку.
• Начинающие и многие средние пользователи для поиска команд полагались почти исключительно на визуальную информацию. Они полагались на строки меню и панели инструментов, но не использовали всплывающие (контекстные) меню даже после обучения.
• Все, кроме самых продвинутых пользователей, не понимали, как эффективно управлять множеством перекрывающихся окон. Больше всего проблем возникло у новичков — при сворачивании окна они думали, что оно «ушло», если оно было закрыто другим окном. От преподавателей мы слышали много историй (и наблюдали это в лаборатории), как пользователи исчерпывали всю оперативную память на компьютере, запуская многочисленные копии программы вместо переключения на первую запущенную копию. Средние пользователи проявили больший опыт, но тоже испытывали проблемы, особенно с приложениями Multiple-Document-Interface (MDI), такими как Менеджер программ и Microsoft Word. Данные рыночных исследований подтвердили проблему: оказалось, что 40% средних пользователей Windows не запускали больше одной программы одновременно, потому что испытывали какие-то трудности с этим.
• Начинающих пользователей сбивала с толку иерархическая файловая система. Средние пользователи обычно справлялись с иерархией, но зачастую делали это с трудом и сохраняли все свои документы в директорию по умолчанию для той программы, которую использовали. Эта проблема (особенно у новичков) наблюдалась и у пользователей Macintosh.

Смена направления

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

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

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

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

Этап быстрых итераций

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

Эволюция процесса спецификаций UI

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

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

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

1. Регулярные собрания сотрудников дизайнерского отдела. На еженедельных (иногда чаще) собраниях каждый сверял свою работу с общим проектом и все обсуждали, как работа каждого сотрудника может повлиять на других.
2. Рассылка графиков и результатов тестирования юзабилити по электронной почте. Сотрудники дизайнерской группы получали регулярные уведомления о предстоящих тестах юзабилити и результатах завершённых тестов, чтобы быть в курсе, как продвигается дизайн.
3. Формальное отслеживание проблем юзабилити. С проектом масштаба Windows 95 мы понимали, что требуется стандартный способ записи выявленных проблем юзабилити, когда и как они должны быть исправлены — а затем закрывать тикеты после исправления проблемы и успешной проверки на пользователях. Этот процесс более детально описывается в главе «Отслеживание открытых тикетов».
4. Регулярные презентации дизайна для внешних групп. По мере продвижения проекта всё больше и больше групп (внутри и за пределами Microsoft) хотели посмотреть, что мы делаем, так что мы проводили такие презентации. Они эффективнее, чем рассылка документов, потому что презентации проще поддерживать в актуальном состоянии и они позволяют своевременно обсуждать дизайн.

Отдельный UI для новичков

Первым важным изменением дизайна, которое мы рассмотрели, стал отдельный UI («оболочка») для начинающих пользователей. Дизайн быстро набросали в Visual Basic и протестировали в лаборатории юзабилити (рис. 4). Тестирование показало неплохой результат, поскольку дизайн успешно ограничивал возможный выбор действий пользователя очень маленьким набором действий, но чем больше пользователей участвовали в тестировании, тем отчётливее проявлялись ограничения:

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

Рис. 4. Частичный вид отдельной оболочки для новичков

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

Примеры быстрой итерации

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

1. Запуск программ: меню «Старт». Хотя мы отказались от идеи отдельной оболочки для новичков, мы сохранили её самые полезные функции: доступ по однократному щелчку, хорошая различимость, взаимодействие через меню. Мы набросали много вариантов в Visual Basic и проверили их на пользователях всех уровней, не только на новичках, потому что это дизайнерское решение должно было хорошо восприниматься пользователями любого уровня. Рис. 5 показывает окончательный вариант меню «Старт» и подменю «Программы». Это меню служит не только для запуска программ, но сочетает в себе и другие функции. Все они открываются нажатием одной кнопки.

Рис. 5. Меню «Старт» и подменю «Программы»

2. Управление окнами: панель задач. Наша первая идея по улучшению управлением окнами была не очень амбициозной, но мы не знали, сколько работы понадобится для решения проблемы. Первой идеей было изменить внешний вид свёрнутых окон из иконок на «плитки». (рис. 6).

Рис. 6. Свёрнутые окна в виде «плиток»

Мы надеялись, что проблему можно решить, если свёрнутые окна будут отличаться на вид и иметь больший размер. Мы ошиблись! Пользователи испытывали практически такие же затруднения, как в случае с Windows 3.1. Результаты тестирования показали, что основная проблема в том, что окна не отображаются постоянно, так что пользователи не видят, какие окна открыты, и не могут быстро получить к ним доступ. Поняв это, мы быстро пришли к идее панели задач, показанной на рис. 7. У каждой задачи есть собственное место на панели, которая отображается поверх всех окон. Тестирование на пользователях показало, что это приемлемое решение проблемы.

Рис. 7. Панель задач с кнопкой «Старт», программами и часами

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

Рис. 8. Диалоговое окно открытия файла в Windows 3.1

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

Рис. 9. Диалоговое окно открытия файла в Windows 95

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

Рис. 10. Основное диалоговое окно установки принтера в Windows 3.1

Найти нужный принтер сложно, потому что все они находятся в одном длинном списке. Для выбора порта, особенно в сетевом окружении, требовалось спуститься на 4-5 уровней с нестандартными и сложными вариантами выбора. Примерно в то время, когда мы начали решать эту проблему, сотрудники дизайнерского отдела начали рассматривать мастер (визард) как решение для многоэтапных нечасто выполняемых задач. Установка принтера отлично вписался в это определение, и созданный визард показал хорошие результаты в тестировании на пользователях. На рис. 11 показан экран выбора принтера из окончательного варианта визарда.

Рис. 11. Экран мастера добавления принтера в Windows 95

5. Помощь: диалог поиска и вкладка с индексом. Лабораторное тестирование Windows 3.1 показало, что пользователи испытывают проблемы с поисковом диалогом в справочном разделе (рис. 12).

Рис. 12. Диалог поиска по справочной информации в Windows 3.1

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

Рис. 13. Вкладка индекса в справочном разделе Windows 95

Этап тонкой настройки

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

• Итоговые лабораторные тесты. Используя 20 основных задач из рыночного исследования мы провели комплексное тестирование всего UI. Пользователям разного уровня подготовки предлагали изоморфные наборы задач для измерения скорости обучения и уровня использования после освоения. Мы сравнивали эффективность работы с базовым уровнем Windows 3.1. После проведения собственного пилотного теста для выяснения возможных проблем с процедурой окончательное тестирование осуществил посторонний подрядчик, так что эти результаты можно использовать в официальных документах [3]. Результаты оказались весьма обнадёживающими — пользователи завершали выполнение задач примерно вдвое быстрее, чем в Windows 3. 1 и в 20 из 21 категорий показали большее удовлетворение работой Windows 95.
• Длительное полевое исследование. Двадцать человек приняли участие в полевом исследовании на бета-версии Windows 95. Сначала мы изучали, как они работают в Windows 3.1, а затем наблюдали за установкой Windows 95. Дополнительные тесты проводились через неделю и через месяц для проверки уровня обучения и произошедших изменений. Мы не нашли никаких серьёзных пробелов в юзабилити продукта, но подкорректировали формулировки в UI и темах справочного раздела. Некоторые из собранных данных впоследствии использовались при планировании следующей версии Windows, а также сотрудниками службы поддержки, в том числе краткий перечень тем, которые можно ожидать с началом звонков в службу поддержки.

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

Для этого мы разработали реляционную базу данных (рис. 14).

Рис. 14. Образец записи в базе данных с тикетами

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

Рис. 15. Образец отчёта в базе данных с тикетами

Отчёт

Как и в любом проекте, практика — критерий истины, так что приведу некоторые сводные статистические данные.

Лабораторные тесты

Мы провели 64 этапа лабораторного тестирования с 560 пользователями. 50% из них имели средний опыт работы с Windows 3.1; остальные — это новички, продвинутые пользователи и пользователи других операционных систем. Эти цифры не включают тестирование компонентов, поступивших от других команд (почтовый клиент Exchange, программа для отправки факсов и проч.). Тестирование этих компонентов прошло примерно в 25 этапов с участием 175 человек.

Выявление проблем

Для ключевых компонентов оболочки в ходе проекта в базу данных были внесены 699 «отчётов юзабилити». Из них 148 положительных результатов и 551 проблема. Проблемам присваивался один из трёх уровней серьёзности:

• Уровень 1: Пользователи не могут продолжать выполнение задачи или серии задач.
• Уровень 2: Пользователи испытывают значительные сложности с выполнением задачи или серии задач, но всё-таки способны продолжить её выполнение.
• Уровень 3: Пользователи испытывают незначительные сложности с выполнением задачи или серии задач.

Из 551 выявленной проблемы 15% получили уровень 1, 43% — уровень 2 и 42% — уровень 3.

Резолюции по проблемам

В ходе проекта использовалось пять резолюций по проблем:

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

К завершению проекта все проблемы с резолюциями «запланировано» или «под вопросом» перешли в одну из других категорий. 81% проблем завершились успешным решением, 8% остались с резолюцией «частично», а 11% остались нерешёнными. В большинстве случаев причиной отсутствия решения стали технические ограничения, а иногда — ограничения рабочего графика.
Для многих сотрудников отдела проект Windows 95 стал первым опытом итеративной разработки, тестирования юзабилити и отслеживания проблем.

Итеративная разработка

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

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

Процесс спецификации

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

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

Тестирование юзабилити

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

Отслеживание проблем

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

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

1. Dumas, J. S., Redish, J. C. (1993). A Practical Guide to Usability Testing (стр. 324-325). Norwood, NJ: Ablex Publishing Company.

2. Nielsen, J. (1993). Usability Engineering. San Diego, CA: Academic Press, Inc.

3. Usability Sciences Corporation. (1994). Windows 3.1 and Windows 95 Quantification of Learning Time & Productivity.

4. Whiteside, J. L., Bennett, J, & Holtzblatt, K. (1988). Usability Engineering: Our Experience and Evolution. In M. Helander (Ed.), Handbook of Human-Computer Interaction (стр. 791-817). Amsterdam: Elsevier Science Publishers, B. V.

5. Wiklund, M. E. (1994). Usability in Practice: How Companies Develop User-Friendly Products. Cambridge, MA: Academic Press, Inc.

Разработка интерфейсов UX и UI для приложений и корпоративных продуктов

UX дизайн

UX дизайн – это проектирование интерфейса на основе исследования пользовательского опыта и поведения.

При разработке UX дизайна приложений, мы следуем следующим принципам:

• Простота
• Интуитивность
• Гибкость
• Наглядность
• Предотвращение и устранение ошибок

 

Процесс работы над UX дизайном проходит в несколько этапов:

Исследование

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

Проектирование структуры

Создание разметки рабочей области, активных и неактивных зон; определение количества экранов/страниц и вкладок, их содержания

Написание пользовательских сценариев

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

Постановка задач для разработчиков и дизайнеров

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

UI дизайн

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

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

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

• Создание UI элементов (иконки, кнопки, формы)
• Разработка стилистического решения
• Определение цветовой палитры
• Расположение элементов интерфейса на экране

 

Мы используем современные и эффективные технологии:

• Для разработки дизайна десктопных и мобильных приложений: Java FX, Java EE, JavaServer Faces.
• Для разработки дизайна веб-приложений: React JS.

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

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

Мы создаём пользовательский интерфейс: User Interface (UI), который позволяет человеку взаимодействовать с устройством, решать свои задачи, достигать быстрее определенных целей.

Что такое UI 

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

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

Зачем нужен UI 

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

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

Этапы разработки пользовательского интерфейса

Анализ

Любой проект начинается с проработки его концепции — без понимания назначения разрабатываемого продукта не прокатит. Сбор информации о разрабатываемом продукте начинается с ответов на вопросы «для чего?», «кому?», «как?».

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

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

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

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

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

Примерно тут хорошо уже понимать, какие задачи решает интерфейс в разрезе работ. Это очень удобный фреймворк для формулирования задач. Как если бы продукт делал работу — Jobs To Be Done. Он делает ставку не на личные качества ключевой персоны, а исследует ее мотивации, потребности, проблемы. Микроволновка — греет пищу, поезд — доставляет из станции А на станцию Б, а все остальные действия интерфейса лучше упразднить. 

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

Представление интерфейса через призму UX/UI-дизайна 

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

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

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

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

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

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

Вот простой бытовой пример. Обыкновенный утюг с отпаривателем. В какой момент утюг автоматически выпустит пар из дырочек в подошве, где будет располагаться кнопка разбрызгивателя, – это сфера ответственности UX-дизайнера. А вот какой формы, какого цвета и размера будет эта кнопка, решит Visual или UI-дизайнер. 

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

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

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

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

Снова анализ

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

Что почитать

• Илья Бирман «Пользовательский интерфейс» 
• Купер Алан, Рейманн Роберт М. «Интерфейс»
• Фитцпатрик Роб «Спроси маму»

Пошейрить

Поделиться

Телеграфировать

Загрузка. ..

Дизайн и проектирование интерфейсов пользователя — требования к созданию и разработке пользовательского веб-интерфейса

Команда AskUsers

2018-01-11 • 8 мин. читать

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

Базовые требования к веб-интерфейсу были сформулированы Якобом Нильсеном в виде 10-ти универсальных эвристик, которые не теряют своей актуальности с 1990 года, когда они были впервые опубликованы. Впоследствии этот список был доработан, расширен, формализован. Он лег в основу международного стандарта юзабилити ISO 9241-110.

5 этапов создания интерфейса

В зависимости от потребностей клиента и степени готовности проекта мы можем проектировать:

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

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

Анализ

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

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

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

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

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

Что именно мы изучаем:

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

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

Представление

1. Формируем концепцию будущего проекта, продумываем и создаем пользовательские истории.

2. Разрабатываем информационную архитектуру и определяемся с функционалом системы.

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

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

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

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

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

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

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

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

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

Дизайн и разработка

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

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

Важно: Почему тестирование — это постоянный и непрерывный процесс, а не разовая акция?

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

Аналитика

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

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

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

Итоговые выводы

• Базовые принципы проектирования интерфейсов описаны в эвристиках Нильсена и в стандарте ISO 9241-110.
• Проектирование осуществляется на трех уровнях: логика, функционал, графическое представление.
• В процессе можно выделить 5 этапов: предпроектный анализ, представление, прототипирование, дизайн и разработка, аналитика.
• Тестирование и проверка идей, теорий и решений — непрерывный процесс. Он начинается с того самого момента, когда у нас появляются первые скетчи и наброски прототипов.
• Готовый интерфейс тестируется как с привлечением респондентов, так и средствами веб-аналитики на реальных пользователях. По итогам тестов формируется техзадание для его последующей доработки.

Если у вас остались вопросы по этапам проектирования и создания сайтов — задавайте их в комментариях. Мы обязательно ответим.

Закажи юзабилити-тестирование прямо сейчас

Заказать

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



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

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

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

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

Делайте это проще, но не примитивнее.

Альберт Эйнштейн

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

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

Три принципа разработки пользовательского интерфейса формулируются так:

1.Контроль пользователем интерфейса;

2.Уменьшение загрузки памяти пользователя;

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

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

Первый (краткий) список принципов проектирования принадлежит Элвину Харви Хансен (Alvin Harvey Hansen).

Принципы звучат так:

– знание пользователя;

– сокращение запоминания;

– оптимизация операций;

– устранение ошибок.

В 1984 г. вышла в свет классическая книга по взаимодействию человека и компьютера, содержащая более полный и обобщающий список принципов проектирования. Работа принадлежала Рубинштейну и Хершу (Rubenstein and Hersch), и представляла 93 принципа разработки: от «Проектировщики создают мифы, пользователи создают концептуальные модели» до «Снимайте на видео настоящих, действительных пользователей». [3]

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

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

Правило 1: дайте контроль пользователю

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

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

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

Принципы, которые дают пользователю контроль над системой:

1. Благоразумное использование режимов.

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

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

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

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

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

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

3. Сфокусируйте внимание пользователя.

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

4. Демонстрация сообщений, окажется полезной ипоможет вработе.

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

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

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

Каждый программный продукт должен включать в себя функции отменить и повторить (UNDO/REDO).

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

6. Предоставьте пользователю понятные пути ивозможность ориентироваться

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

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

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

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

8. Облегчите работу пользователя синтерфейсом сделав его понятным и «прозрачным».

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

9. Дайте пользователю возможность приспособиться инастроить интерфейс по своему вкусу.

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

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

10. Разрешите пользователю напрямую манипулировать объектами интерфейса.

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

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

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

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

Правило 2: уменьшите нагрузку на память пользователя

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

1. Не загружайте кратковременную память.

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

2. Полагайтесь на распознавание, ане на повторение.

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

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

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

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

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

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

5. Предусмотрите «быстрые» пути.

После достаточно хорошего освоения программного продукта, пользователи испытывают потребность, (которую не стоит игнорировать, однако при разработке следует действовать в соответствии со стандартами) — потребность в ускорителях! [2]

6. Активизируйте синтаксис действий собъектами.

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

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

7. Используйте метафоры из реального мира.

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

8. Применяйте раскрытие иобъяснение понятий идействий.

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

9. Увеличьте визуальную ясность.

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

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

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

Правило 3: сделайте интерфейс совместимым

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

Принципы создания совместимого интерфейса:

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

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

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

2. Общая совместимость всех программ.

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

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

– поведение программы;

– техника взаимодействия. [5]

3. Сохранение результатов взаимодействия.

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

4. Эстетическая привлекательность ицельность.

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

5. Поощрение изучения.

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

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

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

Литература:

1. Логунова О. С. Человеко-машинное взаимодействие: теория и практика: Учебное пособие / О. С. Логунова, И. М. Ячиков, Е. А. Ильина. — Ростов: Феникс, 2006. — 285 с.

2. Головач В. Дизайн пользовательского интерфейса / первая книга

3. Купер А., Рейманн Р., Кронин Д., Носсел К. –Интерфейс. Основы проектирования взаимодействия. 4 изд. — Питер, 2017. — 720 с.

4. Тидвелл Д. Разработка пользовательских интерфейсов. 2 изд. — Питер, 2011. -480 с.

5. Акчурин Э. А. Человеко-машинное взаимодействие: Учебное пособие. — Москва: СОЛОН-ПРЕСС, 2009. — 94 с.

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

10 основных советов по дизайну UI (пользовательского интерфейса)

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

И ключ к этому — думать в первую очередь о своем пользователе и всегда.

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

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

1. Знайте своих пользователей

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

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

Каковы их цели? Что мешает им достичь этих целей? Как веб-сайт может помочь им преодолеть эти проблемы или обойти их?

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

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

2. Определите, как люди используют ваш интерфейс.

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

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

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

Примеры прямого взаимодействия

• ‍Нажатие кнопки
• Проведение карты
• Перетаскивание элемента кончиком пальца

Примеры непрямого взаимодействия

• Указание и щелчок мышью
• Использование клавишных команд / ярлыки
• Ввод в поле формы
• Рисование на планшете Wacom

‍Иногда взаимодействие оказывается слишком простым.

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

3. Устанавливайте ожидания

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

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

Задание ожиданий с помощью дизайна

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

Установка ожиданий с копией

• Написание четкой копии кнопки
• Обеспечение направленной / обнадеживающей копии в пустых состояниях
• Выдача предупреждений и запрос подтверждения

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

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

4. Предвидеть ошибки

> Человеку свойственно ошибаться; прощать, божественный.

Александр Поуп, «Эссе о критике»

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

1. Предотвратить ошибки до того, как они произойдут
2. Предоставить способы исправить их после того, как они произошли

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

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

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

Когда вы пишете сообщения об ошибках, убедитесь, что они делают две вещи:

1. Объясните проблему. Например: «Вы сказали, что родились на Марсе, который люди еще не колонизировали. Пока что.»
2. Объясните, как исправить. Например: «Пожалуйста, войдите в место рождения здесь, на Земле».

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

Принцип предупреждения ошибок пользователя называется принципом poka-yoke. Poka-yoke — это японский термин, который переводится как «защита от ошибок».

5. Дайте обратную связь — быстро

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

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

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

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

Просто убедитесь, что все происходит быстро. Usability.gov определяет любую задержку более 1 секунды как прерывание. Более 10 секунд сбой. И последний щедрый: примерно на половину U.S. население, 3 секунды достаточно, чтобы вызвать отскок.

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

6. Тщательно продумайте размещение и размер элементов.

Закон Фиттса, фундаментальный принцип взаимодействия человека с компьютером (HCI), гласит:

Время обнаружения цели зависит от расстояния до цели и ее размера. цели.

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

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

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

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

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

7. Не игнорируйте стандарты

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

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

Это практическое правило объясняет, почему в строке меню Документов Google представлены почти все те же параметры, что и в Microsoft Word до Vista:

‍ Строка меню Microsoft Word до Vista.

Строка меню Google Docs, 2015

‍

Это также объясняет, почему Pocket пришлось изменить расположение кнопки архива в своем приложении для Android несколько лет назад.

‍‍Изменение одной кнопки для большего соответствия шаблонам проектирования Android повысило вероятность продолжения использования Pocket у новых пользователей на 23%.

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

Это крошечное изменение «увеличило вероятность [новые пользователи] продолжать использовать Pocket с этого момента на 23%.

8. Сделайте ваши интерфейсы легкими для изучения

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

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

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

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

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

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

9. Упростите процесс принятия решений

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

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

Это влияет практически на все, что мы создаем:

• Общие макеты
• Меню навигации
• Страницы с ценами
• Индексы блогов
• Каналы контента
  

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

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

Связанные чтения: UX vs UI: ключевые различия, которые должен знать каждый дизайнер

10.Прислушайтесь к данным.

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

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

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

Итак, настройте аналитику для своего сайта и регулярно анализируйте ее. Существует множество различных инструментов аналитики, но я рекомендую Google Analytics и / или Mixpanel, в зависимости от типа проекта.

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

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

Ссылки по теме: 17 полезных инструментов для UI / UX дизайнеров

Великолепный дизайн взаимодействия на сайтах Webflow

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

Расширяющееся круговое меню для навигации

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

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

Ты купишь той девушке выпить?

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

Редизайн Uniqlo

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

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

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

Lead Sport Accelerator

В начале 2017 года дизайнер Яро Квастенберг запустил сайт, который действительно демонстрирует мощь визуального взаимодействия в Webflow: Lead Sport Accelerator.

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

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

Хорошо, вы освоили основы

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

‍

10 эвристик юзабилити для проектирования пользовательского интерфейса

Загрузите бесплатный плакат с 10 эвристиками юзабилити Якоба в конце статьи.

# 1: Видимость состояния системы

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

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

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

Наконечники

• Четко сообщайте пользователям о состоянии системы — никакие действия с последствиями для пользователей не должны предприниматься без их уведомления.
• Предоставьте отзыв пользователю как можно быстрее (в идеале — немедленно).
• Укрепляйте доверие через открытое и постоянное общение.

Узнать больше

# 2: соответствие системы и реального мира

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

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

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

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

Наконечники

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

Узнать больше

# 3: Контроль и свобода пользователя

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

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

Пример эвристики юзабилити № 3:
Цифровым пространствам нужны быстрые «аварийные выходы», как и физическим пространствам.

Наконечники

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

Узнать больше

# 4: Последовательность и стандарты

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

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

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

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

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

Есть два типа ошибок: промахи и ошибки. Промахи — это неосознанные ошибки, вызванные невниманием. Ошибки — это сознательные ошибки, основанные на несоответствии мысленной модели пользователя и дизайна.

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

Наконечники

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

Узнать больше

# 6: Узнавать, а не вспоминать

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

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

Пример эвристики юзабилити # 6:
Большинству людей легче узнать столицы стран, чем запоминать их. Люди с большей вероятностью ответят на вопрос Лиссабон — столица Португалии? , а не Какая столица Португалии?

Наконечники

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

Узнать больше

# 7: Гибкость и эффективность использования

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

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

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

Наконечники

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

Узнать больше

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

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

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

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

# 9: Помогите пользователям распознать, диагностировать и исправить ошибки

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

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

Пример эвристики юзабилити # 9:
Знаки неправильного пути на дороге напоминают водителям о том, что они движутся в неправильном направлении, и просят их остановиться.

Наконечники

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

Узнать больше

# 10: Справка и документация

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

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

Пример эвристики юзабилити # 10:
Информационные киоски в аэропортах легко узнаваемы и мгновенно решают проблемы клиентов.

Наконечники

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

Узнать больше

Записка Якоба

Изначально я разработал эвристику для эвристической оценки в сотрудничестве с Рольфом Молихом в 1990 году [Molich and Nielsen 1990; Нильсен и Молич 1990]. Четыре года спустя я усовершенствовал эвристику на основе факторного анализа 249 проблем юзабилити [Nielsen 1994a], чтобы получить набор эвристик с максимальной объяснительной силой, в результате чего получился этот пересмотренный набор эвристик [Nielsen 1994b].

В 2020 году мы обновили эту статью, добавив дополнительные объяснения, примеры и ссылки по теме. Хотя мы немного уточнили язык определений, сама эвристика 10 остается актуальной и неизменной с 1994 года. Если что-то остается верным в течение 26 лет, это, вероятно, будет применяться и к будущим поколениям пользовательских интерфейсов.

10 бесплатных эвристических плакатов

Загрузите бесплатный плакат Якоба «10 эвристик юзабилити» внизу этой статьи в разделе Загрузок . Вы можете скачать итоговый плакат в 3-х размерах: полный плакат, A4 и Letter. Вы также можете загрузить полный набор из 11 плакатов (10 эвристик юзабилити и итоговый плакат.

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

См. Также

Примеры

Контрольные списки и инструкции

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

• Молич, Р.и Нильсен Дж. (1990). Улучшение диалога между человеком и компьютером, Коммуникации ACM 33, 3 (март), 338-348.
• Нильсен, Дж., И Молич, Р. (1990). Эвристическая оценка пользовательских интерфейсов, Учеб. ACM CHI’90 Conf. (Сиэтл, Вашингтон, 1–5 апреля), 249–256.
• Nielsen, J. (1994a). Повышение объяснительной способности эвристики юзабилити. Proc. ACM CHI’94 Conf. (Бостон, Массачусетс, 24–28 апреля), 152–158.
• Nielsen, J. (1994b). Эвристическая оценка. В Nielsen, J., and Mack, R.L. (Eds.), Методы проверки юзабилити, John Wiley & Sons, Нью-Йорк, Нью-Йорк.

Многие люди спрашивают, могут ли они использовать эту эвристику в своей работе. Да, но, пожалуйста, укажите Якоба Нильсена и укажите адрес этой страницы [nngroup. com/articles/ten-usability-heuristics] или процитируйте статью выше [Nielsen 1994a]. Если вы хотите распечатать копии этой страницы или воспроизвести контент в Интернете, пожалуйста, ознакомьтесь с нашей информацией об авторских правах для получения подробной информации. Авторские права © Якоб Нильсен. ISSN 1548-5552

Дизайн пользовательского интерфейса (UI) | Определение дизайна

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

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

Дизайн пользовательского интерфейса (UI-дизайн) относится к визуальным элементам продукта или цифрового опыта.

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

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

Краткая история

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

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

TUI по-прежнему актуальны и сегодня в виде текстовых редакторов, включая Terminal для Mac и Командную строку для Windows. Фактически, большинство инженеров проводят свой день в текстовых пользовательских интерфейсах, пишут код, который затем будет отображаться браузером или сервером.

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

К концу 1960-х годов исследователи из Стэнфордского исследовательского института под руководством Дугласа Энгельбарта разработали онлайн-систему, в которой использовались текстовые гиперссылки, управляемые с помощью мыши. Однако до 1983 года, когда была выпущена Apple Lisa, компьютеры с графическим пользовательским интерфейсом (GUI) не были доступны отдельным пользователям.И потребуется еще год, прежде чем графические интерфейсы станут широко использоваться на Macintosh 128K в 1984 году.

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

Что отличает хороший дизайн пользовательского интерфейса?

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

Хороший пользовательский интерфейс — это…

1. Clear: Интерфейс понятен и никогда не бывает чрезмерно приукрашенным или избыточным.Ясность на каждом экране.
2. Интуитивно: Он предоставляет пользователю все, что ему нужно, в тот момент, когда это нужно.
3. Структура: Она продумана до мелочей, связанные элементы сгруппированы в целенаправленную структуру. Элементы четкие, последовательные и узнаваемые.
4. Реагирует: Пользователь видит четкие изменения состояния как при успешном, так и при неудачном выполнении его действий. Это можно применить даже к микровзаимодействию с помощью анимации кнопок или обратной связи в полях ввода.
5. Согласованный: Он должен повторно использовать поведения и компоненты, которые позволяют пользователю полагаться на его шаблоны.
6. Гибкость: Он должен снизить стоимость ошибок и проактивно предотвращать ошибки. Он также должен быть терпимым и изящно обрабатывать различные типы ситуаций.

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

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

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

UI и UX: в чем разница?

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

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

Люди часто используют эти термины как синонимы, а иногда и неправильно. Если вы когда-нибудь задавались вопросом: «Что такое UI, что такое UX и в чем разница между ними?» в сегодняшнем посте мы немного углубимся в UI и UX, чтобы лучше понять различия между ними.

Содержание

Что такое UI?

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

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

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

К 1980-м годам первый графический пользовательский интерфейс (GUI) был разработан компьютерными учеными из Xerox PARC. Благодаря этому революционному нововведению пользователи теперь могут взаимодействовать со своими персональными компьютерами, визуально отправляя команды через значки, кнопки, меню и флажки.

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

К 1984 году Apple Computer выпустила персональный компьютер Macintosh, который включал в себя мышь «укажи и щелкни».Macintosh был первым коммерчески успешным домашним компьютером, в котором использовался интерфейс такого типа.

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

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

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

>> Ссылки по теме: Невидимый пользовательский интерфейс, скрытая возможность для отличного UX

Что такое UX?

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

Источник: User Experience Rocks

Когнитивисту Дону Норману приписывают создание термина «пользовательский опыт» еще в начале 1990-х годов, когда он работал в Apple, и определяет его следующим образом:

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

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

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

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

Источник: Питер Морвилл

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

• Как они узнают о вашей компании product
• Последовательность действий, которые они совершают при взаимодействии с интерфейсом
• Мысли и чувства, которые возникают при выполнении своей задачи
• Впечатления, которые они получают от взаимодействия в целом

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

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

>> Ссылки по теме: Что такое UX Research?

В чем разница между UI и UX?

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

Дон Норман и Якоб Нильсен красиво резюмировали это, сказав:

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

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

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

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

UI / UX экспертов весят

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

Вот что они сказали о разнице между UI и UX:

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

Кен Нортон — партнер Google Ventures, бывший менеджер по продукту в Google

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

2. UX-дизайнер занимается концептуальными аспектами процесса проектирования, оставляя UI-дизайнеру сосредоточиться на более осязаемых элементах

Энди Бадд — соучредитель Clearleft, основатель UX London

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

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

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

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

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

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

3. Нет разницы между UX и UI дизайном, потому что это две вещи, которые не сопоставимы друг с другом

Крейг Моррисон, руководитель отдела продуктов в RecordSetter, основатель Usability Hour

«Я слышал этот вопрос все время, и я отвечал на него несколько раз.В конечном итоге я пришел к такому выводу…

Нет разницы между UX и UI дизайном, потому что это две вещи, которые не сопоставимы друг с другом.

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

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

Вот еще несколько вопросов, чтобы проиллюстрировать мою точку зрения:

• В чем разница между MacBook и формой клавиш клавиатуры?
• В чем разница между чаем и материалом, из которого сделан чайный пакетик?
• В чем разница между автомобилем и цветом, который он окрашен?

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

(Примечание: Крейг еще более подробно описывает разницу между дизайнерами UI и UX в своем сообщении: Почему не следует нанимать UI / UX Designer )

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

Джейсон Огл — ведущий и продюсер подкаста User Defenders, дизайнер в NCM

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

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

UI — это мост, который ведет нас на другую сторону того места, где мы хотим идти.

UX — это ощущение, которое мы испытываем, когда добираемся туда, когда мост хорошо построен, или стремительно обрушивается насмерть (говорите о плохом UX!).

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

Имейте в виду, что мы всегда создаем UX, все время за клавиатурой, в продуктовом магазине, на рабочем месте или на автостраде (да поможет нам Бог).

Подводя итог, я всегда говорю своим супергестям в конце каждого эпизода подкаста User Defenders: Продолжайте сражаться, создавая отличный UX для других людей!

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

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

Скотт Дженсон, специалист по стратегии продукта в Google

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

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

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

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

Чинве Оби — исследователь UX в UserTesting

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

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

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

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

Как вы думаете?

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

Итак, что вы думаете? В чем разница между UI и UX? Должны ли они использоваться взаимозаменяемо или означают разные вещи? Поделитесь с нами своим мнением в Twitter, Facebook и Linkedin.

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

Ясность — работа №1

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

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

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

Сдержать внимание любой ценой

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

Держите пользователей под контролем

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

Прямая манипуляция лучше

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

Одно основное действие на экран

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

Оставить второстепенные действия второстепенными

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

Обеспечить естественный следующий шаг

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

Внешний вид следует за поведением

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

Последовательность имеет значение

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

Лучше всего работают сильные визуальные иерархии

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

Умная организация снижает когнитивную нагрузку

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

Выделить, не определять, цветом

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

Прогрессивное раскрытие

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

Помогите людям в строю

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

Решающий момент: нулевое состояние

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

Великолепный дизайн незаметен

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

Использование других дизайнерских дисциплин

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

Существуют интерфейсы для использования

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

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

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

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

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

Дизайн пользовательского опыта

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

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

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

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

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

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

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

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

Физическая ручка и кнопка управления климат-контролем на старом Mercedes. Пользовательский интерфейс климат-контроля с сенсорным экраном на новом Mercedes AMG.

Какое количество UI

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

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

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

Google удается предоставить отличный UX с чрезвычайно простым пользовательским интерфейсом.

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

Как вы определяете UX и UI?

Дизайн пользовательского интерфейса | UC San Diego добавочный номер

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

Примечание. Участники онлайн должны иметь установленный Adobe Photoshop CC (Creative Cloud) на своих компьютерах. Студенты будут использовать LinkedIn Learning в качестве справочника по учебникам.Хотя это и не требуется, онлайн-студентам рекомендуется использовать подписку на LinkedIn Learning в качестве дополнения к курсу.

Номер курса: ART-40535
Кредиты: 3,00 единицы
Соответствующие программы сертификации: Коммуникационный дизайн, Front End разработка, техническая коммуникация, дизайн взаимодействия с пользователем (UX)

+ Expand All

29.03.2021 — 29.05.2021

$ 670

Онлайн

В корзину

• ТИП КЛАССА:

  Асинхронный онлайн.

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

• Секор, Кристиан, разработчик, преподаватель и автор веб- и мобильных технологий.

  Кристиан Секор в течение десяти лет преподавал темы веб-дизайна, начиная от программирования на стороне сервера и заканчивая пользовательским опытом, и провел более 200 курсов по семнадцати темам. Он создал веб-сайты для различных рынков, таких как школьные округа и спортивные клубы.Он получил степень магистра eMedia в университете Quinnipiac и докторскую степень. в учебном руководстве Университета Аргози.

• УЧЕБНИКИ:

  ТРЕБУЕТСЯ

  Проектирование интерфейсов: шаблоны для эффективного взаимодействия Дизайн 3-й
  Дженифер Тидвелл, Чарльз Брюэр, Эйн Валенсия
  ISBN / ASIN: 9781492051961

  Учебники можно приобрести в книжном магазине Калифорнийского университета в Сан-Диего.

• ПОЛИТИКА:

  Разрешение на парковку UCSD не требуется.
  Посетители не допускаются.
  Нет возврата после: 12.04.2021.
  Скидка за раннюю регистрацию: 670 долларов (695 долларов при регистрации после 08.03.2021).
  

• ПРИМЕЧАНИЕ:

  Это асинхронный онлайн-курс. Все инструкции и материалы курса доставлены и завершено онлайн между опубликованным началом курса и даты окончания. У вас будет доступ к вашему курсу на опубликованная дата начала ИЛИ через 1 рабочий день после вашего зачисление подтверждается, если вы зарегистрируетесь на или после опубликованная дата начала.Чтобы войти в курс, перейдите в MyExtension учетной записи, выберите Мои курсы, выберите этот курс, а затем щелкните ссылку, которая отображается в разделе «Интернет-провайдер».

• 29.03.2021 — 29.05.2021
  extensioncanvas.ucsd.edu
  У вас будет доступ к материалам вашего курса в указанную дату начала ИЛИ через 1 рабочий день после подтверждения вашей регистрации, если вы зарегистрируетесь в опубликованную дату или позже. Дата начала.

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