Что в себя включает проектирование интерфейса пользователя
Проектирование интерфейса: 8 принципов, которые должен знать каждый UX-дизайнер
Самое важное о UX-дизайне от мировых экспертов по юзабилити.
UX-дизайн — это сложно, если не знаешь, с чего начать. Мы собрали золотые правила зарубежных специалистов Якоба Нильсена, Бена Шнейдермана и Брюса Тогнаццини и наших — Влада Головача и Ильи Бирмана. Они помогут начинающим дизайнерам, проектировщикам, UX-писателям и продакт-менеджерам создавать качественные, понятные и приятные продукты.
Опирайтесь на нужды реальных пользователей, а не на свои домыслы
Дизайн может показаться вам блестящим, но это не имеет никакого смысла, если вы не относитесь к целевой аудитории продукта.
Само понятие UX-дизайна, или дизайна пользовательского опыта, намекает, что работа дизайнера сосредоточена вокруг взаимодействия пользователей с продуктом. Значит, нужно разобраться, удобен ли целевой аудитории этот продукт.
Пишет про тексты в интерфейсе, проектирование и дизайн. Развивает направление UX-редактуры в Skyeng. Ведёт Telegram-канал про редактуру «Письма от Яны Дворецкой».
Объясняйте, что происходит
Хорошо, когда пользователи точно знают, к чему привели их действия и чего ожидать. Например, им не приходится буравить экран взглядом в мучительном ожидании: «Ну что там?» Они могут быть уверены, что данные не пропадут. Якоб Нильсен утверждает, что чем более предсказуема работа с сервисом, тем больше доверия к нему и тем приятнее пользовательский опыт.
Илья Бирман в своей книге «Пользовательский интерфейс» приводит пример о важности обратной связи:
В челябинском почтовом отделении №80 работает электронная очередь. У входа стоит машинка с единственной кнопкой. Нажимаешь кнопку, и через две секунды на чековой ленте печатается номерок. Эти две секунды — целая вечность. Многие решают, что кнопка не сработала, и жмут ещё раз. Рядом с машинкой всегда валяются «лишние» номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажатие — издавала звук или мигала лампочкой, — такой проблемы бы не было.
А Брюс Тогнаццини добавляет: «Хорошо, если пользователям не нужно искать или догадываться о состоянии системы. Они должны взглянуть на интерфейс и сразу понять, что там сейчас происходит».
Не забывайте про обратную связь. Это важно.
Делайте интерфейс продукта похожим на аналоги
Не придумывайте новое, если можно использовать старый добрый паттерн. Казалось бы, где тут креатив? Вы правы, здесь его нет. Зато есть забота о пользователях.
Чем более знакомым будет для них интерфейс продукта, тем быстрее они начнут пользоваться сервисом. Им не придётся долго учиться для этого, ведь не все готовы тратить много времени. И Бен Шнейдерман, и Якоб Нильсен уверены, что лёгкость на старте и консистентность интерфейса улучшают пользовательский опыт.
А Брюс Тогнаццини добавляет: «Мода [и красота] не должна победить юзабилити ».
Предотвращайте ошибки
В книге «Дизайн пользовательского интерфейса» Влад Головач говорит про сообщения об ошибках:
Большинство сообщений об ошибках в действительности не являются собственно сообщениями об ошибках. На самом деле они показывают пользователю, что система, которой он пользуется:
Все главные специалисты по юзабилити сходятся на том, что лучше не просто показывать хорошие уведомления об ошибках, а предотвращать их.
Существует два типа ошибок: промахи и ошибки.
Избегайте промахов — задавайте ограничения для действий и корректные значения по умолчанию. А ещё найдите места в интерфейсе, где пользователь по невнимательности может сделать что-то не так. Например, чтобы он попал пальцем на нужную ему кнопку «Сохранить», уберите от неё подальше кнопку «Удалить» или «Выйти без сохранения».
Предотвращайте ошибки — не заставляйте пользователей запоминать действия, давайте необходимую на каждом этапе информацию и возможность быстро отменять действия.
Если ошибку нельзя предотвратить, то напишите понятное сообщение о ней. Якоб Нильсен, известный специалист по юзабилити, рекомендует:
Снижайте информационную нагрузку
Так много хочется рассказать о продукте, поэтому тянет всё разом выложить на сайт, — а дальше пусть пользователи разбираются в информации и принимают решение.
Якоб Нильсен считает, что польза не в том, чтобы показать как можно больше, а в том, чтобы показать то, что нужно, в правильный момент. Так мы снижаем когнитивную нагрузку: выдаём информацию порционно и раскладываем по порядку. Люди любят порядок.
Помните, что каждая дополнительная информация в интерфейсе конкурирует с другой информацией. А значит, уменьшает её видимость, увеличивает шум, ухудшает восприятие страницы в целом.
Это не значит, что нужно срочно сокращать количество информации на лендингах и в экранах мобильных приложений. Просто определите основные потребности (боли) пользователя, сосредоточьтесь на них. Всё остальное — пусть лишь поддерживает, доказывает главные тезисы и открывается пользователю последовательно.
Именно благодаря этому принципу «Google Справка» до сих пор не превратилась в скучный справочник, в который никто не заглядывает.
Проектируйте так, чтобы пользоваться было удобно всем
15% населения земного шара — миллиард человек — живёт с инвалидностью. При этом семь из десяти пользователей с ограниченными возможностями сразу уходят с сайта, если он оказывается им недоступен. А это большая аудитория.
Бен Шнейдерман и Якоб Нильсен призывают: подумайте о потребностях и физических ограничениях целевой аудитории и разработайте дизайн, который всё это учитывает. Не забудьте про различия между новичками и экспертами — добавляйте поясняющие тултипы для первых и сложные функции, быстрые клавиши для вторых. Учитывайте возраст, инвалидность, культурные различия пользователей и типы гаджетов.
Используйте контрастные цвета для текста в макете. Это помогает слабовидящим пользователям (а также в условиях низкой освещённости) легче читать содержимое на экране. Вот как Slack.
Как узнать, что удобно пользователям? Тестируйте!
На UX-тестах пользователи взаимодействуют с продуктом, а исследователь наблюдает, возникают ли у них проблемы, где и какие. Если многие люди сталкиваются с похожими проблемами, важно внести изменения в дизайн.
Не заставляйте запоминать много информации
Информация, необходимая для работы в сервисе (например, метки полей или пункты меню), должна быть видимой или легко находимой. А для этого:
Как удачно обобщил всё это Якоб Нильсен: «Узнавание лучше, чем вспоминание».
Дайте ощущение контроля над ситуацией
Пользователи часто совершают действия по ошибке. Специалисты по UX разобрались, что им нужно в этом момент: юзеры хотят, чтобы у них был «аварийный выход».
Когда людям легко отказаться от процесса или отменить действие, они чувствуют себя свободно и уверенно. Кнопка отмены позволяет сохранять контроль над системой и избегать страха и разочарования.
Влад Головач в книге «Дизайн пользовательского интерфейса» пишет:
Почти всё время пользователь может что-либо испортить и знает это. Он может отформатировать жёсткий диск, может стереть или испортить нужный файл. Неудивительно, что пользователь часто боится. Пользователей нужно всемерно снабжать ощущением, что ничего не может произойти, пока этого не захочется самому пользователю.
Для этого он рекомендует:
Пользователь, знающий, что он не может совершить ошибку, испытывает радость и умиротворение.
Эти принципы — главное, но не всё. Чтобы проектировать удобные интерфейсы, нужно знать гораздо больше. Советуем прочитать по теме:
Анастасия Телесницкая для Skillbox
Консистентность интерфейса — целостность, последовательность и непротиворечивость элементов в интерфейсе. Один из примеров консистентности интерфейса — кнопки выполнены в одном стиле и стоят в одном и том же месте.
Проектирование пользовательского интерфейса
в этом разделе подробно описаны некоторые задачи, связанные с проектированием пользовательского интерфейса для Windows приложения.
Введение
Проектирование пользовательского интерфейса можно разделить на три ключевых элемента: функциональность, эстетичность и производительность.
Чаще всего основное внимание уделяется разработке приложений. Можно ли использовать приложение? Позволяет ли она пользователям выполнять задачи? Однако функциональность является лишь частью истории.
Эстетичность описывают, как отображаются и представлены элементы, стиль, в котором объекты сообщаются пользователю. Эстетичность являются весьма субъективными и гораздо сложнее количественно, чем функциональные требования и метрики производительности. Эстетичность обычно сводится к простым вариантам: как цвета дополняют друг друга или как элементы пользовательского интерфейса сообщают свое значение, что часто влияет на способ, которым человек полагается на нечто и влияет на его использование.
Производительность измеряется не только с увеличением скорости, но и с надежностью. Если приложение выглядит и прекрасно работает, легко использовать его, но часто завершается сбоем, скорее всего, не будет. Приложение должно предоставить пользователю полную уверенность в его надежности.
ниже приведены некоторые задачи этапа проектирования, которые могут повлиять на успешный пользовательский интерфейс для Windows приложения.
Функциональные требования
Примите во внимание следующие рекомендации на этапе проектирования, чтобы оптимизировать взаимодействие с пользователем в пределах самой широкой аудитории:
Следуйте рекомендациям по проектированию пользовательского интерфейса.
ознакомьтесь с Windows рекомендациями по взаимодействию с пользователем и часто используйте их при проектировании, реализации и тестировании пользовательского интерфейса приложения.
Убедитесь, что пользовательский интерфейс доступен.
Не забудьте интегрировать специальные возможности в разработку пользовательского интерфейса с начала жизненного цикла продукта. Доступность модернизация может быть чрезвычайно дорогостоящей, поскольку часть разработки специальных возможностей требует внимания на уровне архитектуры. Дополнительные сведения см. в книге по разработке программного обеспечения для специальных возможностей.
Поддержка международного рынка.
Windows включает в себя технологии, обеспечивающие поддержку многих языков и региональных параметров и письменных языков в приложении Windows. Если приложение предназначено для международного рынка, важно включить поддержку интернационализации в дизайне пользовательского интерфейса с самого начала проекта. дополнительные сведения см. в разделе интернационализации for Windows applications.
Анализ пользователей
Важным шагом в проектировании успешного интерфейса является получение базового представления о том, какие пользователи требуются и хотят в приложении перед написанием кода. Помните, что потенциальные пользователи приложения уже выполняют свою работу каким бы то ни было образом, и существующие инструменты и процессы должны быть как можно более понятными. Не Разработайте их без полного рассмотрения этих проблем.
Самым простым и наиболее неформальным подходом является речь о предполагаемых пользователях продукта. Получение информации непосредственно из источника — Избегайте использования руководителей и руководителей в качестве прокси-серверов для реальных потребителей. Подумайте о том, что небольшие группы разработчиков и руководителей программ оплачивают неформальные посещения пользователей на рабочих местах, где есть возможность обсудить их работу и собрать сведения о проблемах, которые они сталкивают с их текущими инструментами.
Помните, что не следует запрашивать начальные или несмещенные вопросы, так как это непосредственно повлияет на качество и достоверность отзывов пользователей. При создании вопросов на этом этапе учитывайте следующее.
Проблемные операторы
После сбора всех отзывов пользователей проанализируйте и изменяйте их в соответствующих проблемах и требованиях. Старайтесь не думать о решениях на этом этапе. Убедитесь, что проблемы полностью идентифицированы, а не только на признаки.
Часто бывает полезно составить список предложений проблем с предложениями (с точки зрения пользователей) для каждой проблемы или требования. Например, «изменение размера поля с шириной до 15 символов» не является проблемой. Но «слишком сложно ввести длинные условия поиска» — допустимая проблема. Разница заключается в значительной мере. Старайтесь не определять решение и проблему одновременно. часто реальная проблема потеряна. В этом примере может существовать множество других способов решения проблемы в условиях поиска, включая изменение размера поля ввода. Всегда учитывайте альтернативные решения.
Ниже приведены дополнительные примеры проблемных инструкций.
Если проблемные операторы достаточно широкие, то, вероятно, будет много инновационных и творческих способов их решения.
Приоритеты
При получении списка элементов и ранжировании их по приоритету определяется выпуск. Без четкого приоритета команды могут бороться и возникать в отношении того, что должно быть сделано, и какие именно вещи следует вырезать. Работа, связанная с настройками приоритетов, должна быть проще, если исследование завершено, но это всегда трудно.
Для настройки приоритетов требуется возможность оценивать по крайней мере три критерия: расписание, команда и бизнес. Для проекта может быть задано стандартное расписание, которое ограничивает размер и масштаб работы, которую можно выполнить. Проблема, которая может потребовать переписать половину кода, не должна быть предпринята в течение небольшого цикла выпуска.
Описывающего и природа команды определяют, какие виды работы можно выполнить. Какие другие обязательства имеет команда? Есть ли у команды дизайнер или инженера по удобству использования? Каковы навыки работы с веб-интерфейсом или разработчиком пользовательского интерфейса? Последнее и самое важное — рекомендации по бизнесу. Каковы цели дохода для этого проекта? Кто конкурентов? Каковы преимущества решения определенных проблем? Какие партнерства можно подделывать? Кроме того, необходимо определить все остальные аспекты, прежде чем назначать приоритеты списку.
После определения приоритета список проблемных операторов задает направление для продукта и гарантирует, что разработка будет нацелена в нужные области.
Концептуальный проект
Как правило, Пользовательский интерфейс не адресован на этапе концептуального проектирования. Однако этот этап требует тщательной бизнес-модели с полными профилями пользователей и сценариями использования, которые являются обязательными для успешного взаимодействия с пользователем.
Логическая структура
Этап логической разработки заключается в разработке начальных прототипов, которые поддерживают концептуальный проект.
На этом этапе также определяются конкретные аппаратные и программные технологии, используемые во время разработки, что позволяет определить возможности пользовательского интерфейса в окончательном продукте. Дополнительные сведения см. в разделе технологии пользовательского интерфейса.
Помимо средств разработки, необходимо определить различные требования к оборудованию и конструктивные факторы, которые должны быть предназначены для приложения.
Физическая структура
Этап физического проектирования определяет, как реализуется дизайн пользовательского интерфейса для конкретного оборудования и форм-факторов, определенных в логическом проектировании.
На этом этапе ограничения по оборудованию или конструктивному конструктивному интерфейсу могут привести к непредвиденным ограничениям пользовательского интерфейса, требующих значительных улучшений в проектировании.
Разработка пользовательского интерфейса: зачем её заказывать
Что такое UI
Прежде чем начать говорить о разработке графического интерфейса пользователя, давайте на всякий случай уточним, что это такое.
Интерфейс — общая граница между двумя функциональными объектами, требования к которой определяются стандартом; совокупность средств, методов и правил взаимодействия (управления, контроля ) между элементами системы (источник: wikipedia.org).
Это точное, но скучноватое определение.
А вот иными словами, но интереснее: пользовательский интерфейс (UI) — это «способ, которым вы выполняете задачу с помощью продукта, а именно совершаемые вами действия и то, что вы получаете в ответ» (источник: Джеф Раскин, «Интерфейс. Новые направления в проектировании компьютерных систем»).
В повседневной жизни мы постоянно сталкиваемся с интерфейсами. Это и сайты соцсетей, и элементы управления в салоне автомобиля, и пульт ДУ для телевизора, и голосовое управление умным домом, и панель кнопок в лифте.
Выходит, мы используем один продукт для управления другим продуктом. Но давайте не будем перечислять все явления в нашей жизни, а поговорим непосредственно о и приложениях и о том, как сделать их использование удобным.
Зачем нужен UI-дизайн
Мы разобрались, что такое пользовательский интерфейс, но пока неясно, насколько он нам нужен и стоит ли тратить деньги на его разработку и дизайн. Поэтому на минуту вернёмся к лифтам.
Лифт удобен. Он позволяет добраться до верхних этажей с минимумом временных и физических затрат. Но какой от него был бы толк, если бы мы не могли легко его открыть, выбрать этаж и при необходимости остановиться раньше времени? Всё перечисленное осуществимо, но каким путём? Позволит ли рычажное управление сделать пассажиру необходимые действия или разумнее будет использовать кнопочное управление? Тут и появляется важный момент: какой интерфейс управления лифтом выбрать.
Современные и системы в корне меняют работу людей. Существуют, например, системы управления театральными механизмами, которые упрощают работу с электронным оборудованием, лишая необходимости постоянно находиться у аппаратуры. Но едва ли работа упростится, если у таких систем будет слишком сложный интерфейс.
Получается, что программный интерфейс не только решает нашу проблему взаимодействия с приложением, но и делает это взаимодействие максимально комфортным. Нам важно наличие интерфейса, позволяющего при меньшем количестве усилий ознакомиться с возможностями приложения и понять основные принципы работы в нём.
Разработка UI-интерфейсов
Чтобы у нас с вами не возникло проблем при использовании приложения, умные люди визуализируют его функциональные возможности в виде понятных элементов, и за этой визуализацией кроется целая кухня UX/UI-дизайна.
Грань между UX (User Experience) и UI (User Interface) очень тонка, но если разобраться, то становится ясно, что UX помогает понять пользователя. В больше психологического аспекта, нежели технологического. UX изучает пользователя: как пользователь живёт, что он думает, как и что делает и что его окружает. Перед дизайнером ставится задача — помочь обычному человеку легко разобраться с вашим программным продуктом и получить при этом удовлетворение от работы с ним.
А понять пользователя очень важно. Никому не захочется заполнить двадцать полей формы для регистрации на сайте или перещелкать штук пятнадцать вкладок, прежде чем добраться до нужной функции. «Пользователя не следует заставлять взаимодействовать с программой дольше, чем абсолютно необходимо для решения той или иной задачи» (Алан Купер, «Психбольница в руках пациентов»).
Это реальная проблема, которую должен решить дизайнер, и с этапами решения этой проблемы мы познакомимся немного ближе.
Концепция
Сначала нам необходимо сориентироваться в элементах будущего интерфейса. Для этого мы определим задачу, исследуем предметную область, аудиторию и то, как она пользуется продуктом.
Создание мокапа
Этот этап позволяет быстро понять видение клиента и внести уйму изменений до начала разработки интерфейса пользователя. Мы намечаем расположение кнопок, форм и других нужных элементов, а уже потом подбираем цветовую палитру, шрифты, изображения, преобразуя всё это в удобный и красивый макет. То есть начинаем с варфрейма (план расположения элементов на странице), а заканчиваем созданием из этого плана красивой картинки. В случае разработки приложений под Android и iOS труд дизайнера облегчается гайдлайнами — правилами оформления и расположения элементов интерфейса, регламентом UX/UI, который был создан непосредственно экспертами по дизайну из Google и Apple.
User Flow Diagram (карта экранов)
Как только мы разобрались с эскизом, самое время приступить к карте экранов и понять, как же будет вести себя обычный человек при использовании будущего инструментария приложения и какое состояние будет принимать интерфейс при каждом взаимодействии пользователя с ним.
Утверждение структуры
Клиент утверждает разработанную структуру и пользовательские сценарии, а разработчик движется дальше. Этот этап позволяет исключить будущие изменения или сделать их незначительными. Если структура потеряет баллы в логике или дизайн потребует глобальной переработки, это не пойдёт проекту на пользу.
Выбор стиля UI
Существует множество различных концепций, например: material design, metro, skeuomorphism При выборе стиля интерфейса следует учесть текущие тенденции в дизайне, адаптивность, время на разработку и внедрение дизайна, и много других не менее важных моментов.
В любом или приложении дизайн помогает пользователю решить его насущную проблему, поэтому нестандартные фишки и яркие цвета отходят на второй план.
Согласование стиля
Наконец, клиенту можно показать версию разработанного нами дизайна, попутно обосновывая стилевые решения. На этом этапе мы обрабатываем любые замечания клиента, ведь наша работа на то и направлена, чтобы прийти к обоюдному решению. Когда стиль выбран, дизайнер рисует макет, опираясь на правила гайдлайнов и фирменную стилистику клиента. На выходе мы получаем удобный и красивый дизайн мобильного приложения. В этой статье, кстати, мы немного рассказали о этапах работы наших дизайнеров.
Интерактивный прототип интерфейса
«Прототип — это наглядная модель пользовательского интерфейса. В сущности это функционирующий „черновик“ интерфейса, созданный на основе ваших представлений о потребностях пользователей» (источник: Эд Салливан, «Время — деньги. Создание команды разработчиков программного обеспечения»).
Для более наглядной демонстрации работы приложения инвесторам и потенциальным пользователям можно заняться разработкой интерактивного прототипа. Хотя стоит отметить, что это не обязательный этап, так как мокап+user flow diagram вполне себе является прототипом, описывающим будущий продукт с точки зрения UX. Однако интерактивный прототип даст более полное представление и о возможностях приложения, и об объеме работ по их реализации.
Варианты прототипа зависят только от ваших временных ресурсов и от уровня желаемого качества. Это может быть тестовый стенд, на котором оператор вручную выполняет изменения состояния приложения в зависимости от выбора пользователя, или это может быть уже программная реализация, которую можно запустить на смартфоне или в браузере, прокликать все экраны, оценить логику работы продукта.
Задача процесса проектирования интерфейсов мобильных приложений — неотъемлемая часть прототипирования. В нашей компании дизайнеры изучают будущих пользователей, используя для этого разные методы: обсуждение вопроса с ближайшим окружением, разговор непосредственно с нашим клиентом, обсуждение с потенциальной аудиторией (вживую или на форумах) и интервью для выявления актуальности проблемы и поиска путей её решения пользователем.
Результатом такого изучения становится описание целевой аудитории и более ясное понимание того, какие трудности могут возникнуть при использовании сервиса, и как эти трудности преодолеть.
Утверждение результата
Вот он, последний этап работы над UI. Здесь всё очень просто: клиент оценивает результат, даёт комментарии и предложения, а мы при необходимости вносим правки.
К этому моменту у нас должно быть готово техническое задание, заключающее в себе всю информацию, с которой мы работали на этапе прототипирования и проектирования пользовательского интерфейса. Имея на руках готовый дизайн и ТЗ, мы приступаем к разработке приложения.
Вывод
Поэтапное создание графического интерфейса приложений и сложных систем экономит время, структурирует всю работу, уменьшает вероятность дополнительных денежных вложений. Думаю, из всего вышенаписанного уже понятно, что интерфейс в принципе необходим для удобного взаимодействия пользователя с приложением. Но что самое главное — это умение разработать интерфейс, в котором пользователь найдёт ключевые функции продукта за минимально необходимое для этого время.
Согласитесь, что эта задача не из лёгких, потому что и слишком сложный, и наоборот, непродуманный простой интерфейс могут здорово испортить всё впечатление от любого или мобильного приложения.
В «Психбольнице» Алана Купера говорится, что излишняя экономия на UI в дальнейшем выливается в трату на техподдержку, исправление ошибок, обучение новых сотрудников. Красивая обёртка в виде современного дизайна не есть человечный интерфейс; ключом к этой человечности служит проектирование под реального пользователя.
Проектирование интерфейса пользователя уменьшает время проектирования и упрощает взаимодействие пользователя с продуктом. Хорошо разработанный UI = благодарный пользователь = счастливый вы.