что это такое и зачем его заказывать — Блог Live Typing — Блог Live Typing
Что такое UI
Прежде чем начать говорить о разработке графического интерфейса пользователя, давайте на всякий случай уточним, что это такое.
Интерфейс — общая граница между двумя функциональными объектами, требования к которой определяются стандартом; совокупность средств, методов и правил взаимодействия (управления, контроля и т. д.) между элементами системы (источник: wikipedia.org).
Это точное, но скучноватое определение.
А вот иными словами, но интереснее: пользовательский интерфейс (UI) — это «способ, которым вы выполняете какую-либо задачу с помощью какого-либо продукта, а именно совершаемые вами действия и то, что вы получаете в ответ» (источник: Джеф Раскин, «Интерфейс. Новые направления в проектировании компьютерных систем»).
В повседневной жизни мы постоянно сталкиваемся с интерфейсами. Это и сайты соцсетей, и элементы управления в салоне автомобиля, и пульт ДУ для телевизора, и голосовое управление умным домом, и панель кнопок в лифте.
Выходит, мы используем один продукт для управления другим продуктом. Но давайте не будем перечислять все явления в нашей жизни, а поговорим непосредственно о веб-сервисах и приложениях и о том, как сделать их использование удобным.
Зачем нужен UI-дизайн
Мы разобрались, что такое пользовательский интерфейс, но пока неясно, насколько он нам нужен и стоит ли тратить деньги на его разработку и дизайн. Поэтому на минуту вернёмся к лифтам.
Лифт удобен. Он позволяет добраться до верхних этажей с минимумом временных и физических затрат. Но какой от него был бы толк, если бы мы не могли легко его открыть, выбрать этаж и при необходимости остановиться раньше времени? Всё перечисленное осуществимо, но каким путём? Позволит ли рычажное управление сделать пассажиру необходимые действия или разумнее будет использовать кнопочное управление? Тут и появляется важный момент: какой интерфейс управления лифтом выбрать.
Современные веб-сервисы и системы в корне меняют работу людей.
Существуют, например, системы управления театральными механизмами, которые упрощают работу с электронным оборудованием, лишая необходимости постоянно находиться у аппаратуры. Но едва ли работа упростится, если у таких систем будет слишком сложный интерфейс.
Получается, что программный интерфейс не только решает нашу проблему взаимодействия с приложением, но и делает это взаимодействие максимально комфортным. Нам важно наличие интерфейса, позволяющего при меньшем количестве усилий ознакомиться с возможностями приложения и понять основные принципы работы в нём.
Пример перегруженного интерфейса. Источник: lingscars.com
Пример «чистого» интерфейса. Источник: carsales.com.au
Разработка UI-интерфейсов
Чтобы у нас с вами не возникло проблем при использовании какого-либо приложения, умные люди визуализируют его функциональные возможности в виде понятных элементов, и за этой визуализацией кроется целая кухня UX/UI-дизайна.
Грань между UX (User Experience) и UI (User Interface) очень тонка, но если разобраться, то становится ясно, что UX помогает понять пользователя.
В UX-дизайне больше психологического аспекта, нежели технологического. UX изучает пользователя: как пользователь живёт, что он думает, как и что делает и что его окружает. Перед дизайнером ставится задача — помочь обычному человеку легко разобраться с вашим программным продуктом и получить при этом удовлетворение от работы с ним.
А понять пользователя очень важно. Никому не захочется заполнить двадцать полей формы для регистрации на сайте или перещелкать штук пятнадцать вкладок, прежде чем добраться до нужной функции. «Пользователя не следует заставлять взаимодействовать с программой дольше, чем абсолютно необходимо для решения той или иной задачи» (Алан Купер, «Психбольница в руках пациентов»).
Это реальная проблема, которую должен решить дизайнер, и с этапами решения этой проблемы мы познакомимся немного ближе.
Концепция
Сначала нам необходимо сориентироваться в элементах будущего интерфейса. Для этого мы определим задачу, исследуем предметную область, аудиторию и то, как она пользуется продуктом.
Создание мокапа
Этот этап позволяет быстро понять видение клиента и внести уйму изменений до начала разработки интерфейса пользователя. Мы намечаем расположение кнопок, форм и других нужных элементов, а уже потом подбираем цветовую палитру, шрифты, изображения, преобразуя всё это в удобный и красивый макет. То есть начинаем с варфрейма (план расположения элементов на странице), а заканчиваем созданием из этого плана красивой картинки. В случае разработки приложений под Android и iOS труд дизайнера облегчается гайдлайнами — правилами оформления и расположения элементов интерфейса, регламентом UX/UI, который был создан непосредственно экспертами по дизайну из Google и Apple.
Пример мокапа. Источник: medium.com
User Flow Diagram (карта экранов)
Источник: dribbble.com
Как только мы разобрались с эскизом, самое время приступить к карте экранов и понять, как же будет вести себя обычный человек при использовании будущего инструментария приложения и какое состояние будет принимать интерфейс при каждом взаимодействии пользователя с ним.
Утверждение структуры
Клиент утверждает разработанную структуру и пользовательские сценарии, а разработчик движется дальше. Этот этап позволяет исключить будущие изменения или сделать их незначительными. Если структура потеряет баллы в логике или дизайн потребует глобальной переработки, это не пойдёт проекту на пользу.
Выбор стиля UI
Skeuomorphic design и flat design. Источник: obsid.se
Существует множество различных концепций, например: material design, metro, skeuomorphism и т. д. При выборе стиля интерфейса следует учесть текущие тенденции в дизайне, адаптивность, время на разработку и внедрение дизайна, и много других не менее важных моментов.
В любом веб-сервисе или приложении дизайн помогает пользователю решить его насущную проблему, поэтому нестандартные фишки и яркие цвета отходят на второй план.
Согласование стиля
Наконец, клиенту можно показать версию разработанного нами дизайна, попутно обосновывая стилевые решения. На этом этапе мы обрабатываем любые замечания клиента, ведь наша работа на то и направлена, чтобы прийти к обоюдному решению.
Когда стиль выбран, дизайнер рисует макет, опираясь на правила гайдлайнов и фирменную стилистику клиента. На выходе мы получаем удобный и красивый дизайн мобильного приложения. В этой статье, кстати, мы немного рассказали о этапах работы наших дизайнеров.
Интерактивный прототип интерфейса
«Прототип — это наглядная модель пользовательского интерфейса. В сущности это функционирующий „черновик“ интерфейса, созданный на основе ваших представлений о потребностях пользователей» (источник: Эд Салливан, «Время — деньги. Создание команды разработчиков программного обеспечения»).
Интерактивный прототип мобильного менеджера задач Yodel, разработанного Лайв Тайпинг
Для более наглядной демонстрации работы приложения инвесторам и потенциальным пользователям можно заняться разработкой интерактивного прототипа. Хотя стоит отметить, что это не обязательный этап, так как мокап+user flow diagram вполне себе является прототипом, описывающим будущий продукт с точки зрения UX.
Однако интерактивный прототип даст более полное представление и о возможностях приложения, и об объеме работ по их реализации.
Варианты прототипа зависят только от ваших временных ресурсов и от уровня желаемого качества. Это может быть тестовый стенд, на котором оператор вручную выполняет изменения состояния приложения в зависимости от выбора пользователя, или это может быть уже программная реализация, которую можно запустить на смартфоне или в браузере, прокликать все экраны, оценить логику работы продукта.
Задача процесса проектирования интерфейсов мобильных приложений — неотъемлемая часть прототипирования. В нашей компании дизайнеры изучают будущих пользователей, используя для этого разные методы: обсуждение вопроса с ближайшим окружением, разговор непосредственно с нашим клиентом, обсуждение с потенциальной аудиторией (вживую или на форумах) и интервью для выявления актуальности проблемы и поиска путей её решения пользователем.
Результатом такого изучения становится описание целевой аудитории и более ясное понимание того, какие трудности могут возникнуть при использовании сервиса, и как эти трудности преодолеть.
Утверждение результата
Вот он, последний этап работы над UI. Здесь всё очень просто: клиент оценивает результат, даёт комментарии и предложения, а мы при необходимости вносим правки.
К этому моменту у нас должно быть готово техническое задание, заключающее в себе всю информацию, с которой мы работали на этапе прототипирования и проектирования пользовательского интерфейса. Имея на руках готовый дизайн и ТЗ, мы приступаем к разработке приложения.
Вывод
Поэтапное создание графического интерфейса приложений и сложных систем экономит время, структурирует всю работу, уменьшает вероятность дополнительных денежных вложений. Думаю, из всего вышенаписанного уже понятно, что интерфейс в принципе необходим для удобного взаимодействия пользователя с приложением. Но что самое главное — это умение разработать интерфейс, в котором пользователь найдёт ключевые функции продукта за минимально необходимое для этого время.
Согласитесь, что эта задача не из лёгких, потому что и слишком сложный, и наоборот, непродуманный простой интерфейс могут здорово испортить всё впечатление от любого веб-сервиса или мобильного приложения.
В «Психбольнице» Алана Купера говорится, что излишняя экономия на UI в дальнейшем выливается в трату на техподдержку, исправление ошибок, обучение новых сотрудников. Красивая обёртка в виде современного дизайна не есть человечный интерфейс; ключом к этой человечности служит проектирование под реального пользователя.
Проектирование интерфейса пользователя уменьшает время проектирования и упрощает взаимодействие пользователя с продуктом. Хорошо разработанный UI = благодарный пользователь = счастливый вы.
Проектирование графического интерфейса пользователя / Хабр
yadobr
Интерфейсы *
Из песочницы
Введение
В современном мире миллиарды вычислительных устройств. Еще больше программ для них. И у каждой свой интерфейс, являющийся «рычагами» взаимодействия между пользователем и машинным кодом.
Не удивительно, что чем лучше интерфейс, тем эффективнее взаимодействие.
Однако далеко не все разработчики и даже дизайнеры, задумываются о создании удобного и понятного графического интерфейса пользователя.
Для себя я начал с постановки вопросов: общие принципы, какие элементы интерфейса(ЭИ) создать, какой у них должен быть дизайн, где их правильно размещать и как они должны себя вести.
Ниже я постараюсь ответить на эти вопросы.
Общие принципы
- Интерфейс должен быть интуитивно понятным. Таким, чтобы пользователю не требовалось объяснять как им пользоваться.
- Для упрощения процесса изучения необходима справка. Буквально — графическая подсказка, объясняющая значение того или иного ЭИ. Полное руководство должно быть частью интерфейса, доступной в любой момент.
- Возвращайте пользователя в то место, где он закончил работу в прошлый раз. Зачем нажимать все заново?
- Чаще всего, пользователи в интерфейсе сначала ищут сущность(существительное), а затем действие(глагол) к ней.
Следуйте правилу «существительное -> глагол». Например, шрифт -> изменить. - Чем быстрее человек увидит результат — тем лучше. Пример — «живой» поиск, когда варианты, в процессе набора поискового запроса. Основной принцип: программа должна взаимодействовать с пользователем на основе наименьшей значимой единицы ввода.
- Используйте квазирежимы. Например, ввод заглавных букв с зажатой клавишей shift — это квазирежим. С включенным capslock — режим. Основное отличие в том, что человек может забыть в каком режиме он находится, а в квазирежиме(с зажатой доп. клавишей) это сделать гораздо сложнее.
- Следует с осторожностью предоставлять пользователю возможность, по установке личных настроек. Представьте, сколько времени потратит сотрудник настраивая Word, если его интерфейс был полностью переделан предыдущим.
- Чем больше пользователь работает с какой-то конкретной задачей, тем больше он на ней концентрируется и тем меньше перестает замечать подсказки и сообщения, выводимые программой. Чем более критической является задача, тем меньше вероятность того, что пользователь заметит предупреждения относительно тех или иных потенциально опасных действий.
Следуйте правилу «существительное -> глагол». Например, шрифт -> изменить.
Чем более критической является задача, тем меньше вероятность того, что пользователь заметит предупреждения относительно тех или иных потенциально опасных действий.Какие ЭИ создать?
- Разработка интерфейса обычно начинается с определения задачи или набора задач, для которых продукт предназначен
- Простое должно оставаться простым. Не усложняйте интерфейсы. Постоянно думайте о том, как сделать интерфейс проще и понятнее.
- Пользователи не задумываются над тем, как устроена программа. Все, что они видят — это интерфейс. Поэтому, с точки зрения потребителя именно интерфейс является конечным продуктом.
- Интерфейс должен быть ориентированным на человека, т.е. отвечать нуждам человека и учитывать его слабости. Нужно постоянно думать о том, с какими трудностями может столкнуться пользователь.
- Думайте о поведении и привычках пользователей. Не меняйте хорошо известные всем ЭИ на неожиданные, а новые делайте интуитивно понятными.
- Разрабатывайте интерфейс исходя из принципа наименьшего возможного количества действий со стороны пользователя.
Какой должен быть дизайн ЭИ?
На самом деле, дизайн ЭИ — тема отдельной статьи. Тут нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:
- Цвет. Цвета делятся на теплые(желтый, оранжевый, красный), холодные(синий, зеленый), нейтральные(серый). Обычно для ЭИ используют теплые цвета. Это как раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.
- Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Полностью прямоугольные ЭИ, лично мне нравятся меньше. Возможно из-за своей «остроты». Опять же, форма как и цвет достаточно субъективна.
- Основные ЭИ(часто используемые) должны быть выделены. Например размером или цветом.
- Иконки в программе должны быть очевидными. Если нет — подписывайте. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.
- Старайтесь не делать слишком маленькие элементы — по ним очень трудно попасть.
Например размером или цветом.Как правильно расположить ЭИ на экране?
- Есть утверждение, что визуальная привлекательность основана на пропорциях. Помните известное число 1.62? Это так называемый принцип Золотого сечения. Суть в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина сайта 900px, делим 900 на 1.62, получаем ~555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части:
- Перед расположением, ЭИ следует упорядочить(сгруппировать) по значимости. Т.е. определить, какие наиболее важны, а какие — менее.
- Обычно(но не обязательно), элементы размещаются в следующей градации: слева направо, сверху вниз. Слева в верху самые значимые элементы, справа внизу — менее. Это связано с порядком чтения текста. В случае с сенсорными экранами, самые важные элементы, располагаются в области действия больших пальцев рук.
- Необходимо учитывать привычки пользователя. Например, если в Windows кнопка закрыть находится в правом верхнем углу, то программе аналогичную кнопку необходимо расположить там же. Т.е. интерфейс должен иметь как можно больше аналогий, с известными пользователю вещами.
- Размещайте ЭИ поближе там, где большую часть времени находится курсор пользователя. Что бы ему не пришлось перемещать курсор, например, от одного конца экрана к другому.
- Соблюдайте пропорции
- Элемент интерфейса можно считать видимым, если он либо в данный момент доступен для органов восприятия человека, либо он был настолько недавно воспринят, что еще не успел выйти из кратковременной памяти. Для нормальной работы интерфейса, должны быть видимы только необходимые вещи — те, что идентифицируют части работающих систем, и те, что отображают способ, которым пользователь может взаимодействовать с устройством.
- Делайте отступы между ЭИ равными или кратными друг-другу.
Слева в верху самые значимые элементы, справа внизу — менее. Это связано с порядком чтения текста. В случае с сенсорными экранами, самые важные элементы, располагаются в области действия больших пальцев рук.
Как ЭИ должны себя вести?
- Пользователи привыкают. Например, при удалении файла, появляется окно с подтверждением: «Да» или «Нет». Со временем, пользователь перестает читать предупреждение и по привычке нажимает «Да». Поэтому диалоговое окно, которое было призвано обеспечить безопасность, абсолютно не выполняет своей роли. Следовательно, необходимо дать пользователю возможность отменять, сделанные им действия.
- Если вы даете пользователю информацию, которую он должен куда-то ввести или как-то обработать, то информация должна оставаться на экране до того момента, пока человек ее не обработает. Иначе он может просто забыть.
- Избегайте двусмысленности. Например, на фонарике есть одна кнопка. По нажатию фонарик включается, нажали еще раз — выключился. Если в фонарике перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или нет. Поэтому, вместо одной кнопки выключателя, лучше использовать переключатель(например, checkbox с двумя позициями: «вкл. » и «выкл.»). За исключением случаев, когда состояние задачи, очевидно.
Такой переключатель напрямую отражает состояние ЭИ - Делайте монотонные интерфейсы. Монотонный интерфейс — это интерфейс, в котором какое-то действие, можно сделать только одним способом. Такой подход обеспечит быструю привыкаемость к программе и автоматизацию действий.
- Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не несколько. Пример — стартовая страница браузера Chrome.
- Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмотрена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (status bar).
- ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.
» и «выкл.»). За исключением случаев, когда состояние задачи, очевидно.
В заключении
Эта статья не претендует на самый полный справочник принципов проектирования интерфейса. Графический интерфейс пользователя — это обширная тема, тесно переплетенная с психологией, занимающая умы ученых и сотни страниц книг и исследований. В столь малом формате, никак не выразить всю полноту затронутой темы. Однако, соблюдение базовых принципов, позволит строить интерфейсы более дружелюбными к пользователю, а так же упростить сам процесс проектирования.
Спасибо за внимание.
Литература
Джеф Раскин, «Интерфейс: новые направления в проектировании компьютерных систем»
Алан Купер, «Об интерфейсе. Основы проектирования взаимодействия»
Алан Купер, «Психбольница в руках пациентов»
Теги:
- графический интерфейс пользователя
Хабы:
- Интерфейсы
Всего голосов 66: ↑55 и ↓11 +44
Просмотры167K
Комментарии 90
@yadobr
Frontend Engineer
Комментарии Комментарии 90
Проектирование и разработка интерфейсов пользователя: что нужно знать
Проектировщик интерфейсов пользователя — это профессия, на которой лежит большая ответственность.
Проектирование интерфейса пользователя — сложная штука, пока не знаешь несколько основных принципов. А когда возникает понимание как работает интерфейс и что нужно людям от вашего приложения, тогда получается наладить диалог между этими двумя сторонами: человеком и компьютерным устройством.
Проектировщик интерфейсов: принципы проектирования
Проектировщик интерфейсов — это профессионал, который разрабатывает интерфейсы для пользовательских программ. Проектирование интерфейсов — это очень неоднообразное мероприятие, в котором есть место для творчества и собственных идей. Однако существуют общие практики создания интерфейса, которые отточены годами и претендуют на «бессмертность». С лучшими практиками-принципами мы вас сегодня познакомим.
Принципы проектирования интерфейсов пользователя:
Интерфейс нужно делать для пользователей, а не потому, что вы так решили. Важно определить потребности потенциальных клиентов будущей программы, чтобы сделать дизайн интерфейса согласно их вкуса. Если этого не делать, тогда может сложиться ситуация, когда ваш «супер блестящий» интерфейс остался никому не нужным. А все потому, что вы его проектировали по своему собственному вкусу, а не по вкусу будущих клиентов.
Пользователи не должны догадываться, что происходит. Проектировщик интерфейсов должен все продумать таким образом, чтобы пользователю все было ясно: что и как будет происходить, если выполнить какое-то действие. Поэтому в интерфейсе важна его предсказуемость, а не его загадка.
Интерфейс должен быть знакомым пользователю. Креатив и унификация в интерфейсе — это важно.
Нужно избегать ошибок в интерфейсе. Некоторые проектировщики интерфейсов особое внимание уделяют сообщению, которое показывает, что пользователь совершил какую-то ошибку на сайте. Подход должен быть таким: сообщение такое должно быть, но ситуаций, где его применить, не должно быть. То есть важно до мелочей все продумать и «обработать» те места, где пользователь может совершать ошибки.
Не перегружайте интерфейс информацией. Проектировщик интерфейсов часто допускает такую ошибку: пытается всю информацию о своем продукте или программе отразить в интерфейсе.
Интерфейс должен быть удобным для всех. Каждый пользователь по своему уникален. Есть новички в вашей нише, а есть эксперты. И те, и другие будут посещать ваш программный продукт, однако подаваться для них информация должна по-разному. Поэтому к сложным функциям, иконкам и кнопкам важно добавлять пояснение, для тех, кто встречается с ними впервые. Еще есть категория пользователей, которые живут с инвалидностью. Их интересы также важно учитывать.
Пользователи не должны все запоминать. Часто так бывает, что в продукте реализовано какое-то взаимодействие с пользователем. В этом случае нужно реализовать все таким образом, чтобы пользователю не приходилось «на стороне» искать объяснение своим действиям.
Пользователи должны ощущать контроль над ситуацией. Они все равно будут ошибаться, используя ваш программный продукт. Поэтому тут важно не указывать им на ошибку, а давать возможность выбирать и «контролировать» ситуацию. К примеру, пользователь случайно нажал на «удалить учетную запись». Не нужно ему показывать сообщение об ошибке, а лучше показать сообщение, где он должен будет подтвердить свое действие. Поэтому, реализуя все что угодно в своем продукте, всегда оставляйте возможность пользователю аварийно завершить выполняемое действие и отказаться от запущенного процесса. Пользователь должен понимать, что он не сможет случайно совершить ошибку и у него всегда будет возможность «вернуться назад» в случае, если он ошибется.
Заключение
Проектировщик интерфейсов — это профессионал, который делает пользование компьютерным устройством легким, удобным и понятным для большинства пользователей.
Ведь интерфейс пользователя — это «промежуточный механизм» между пользователем и программой, который помогает человеку взаимодействовать с программным продуктом. Поэтому, чем эффективнее интерфейс, тем эффективнее будет взаимодействие с программой. 
Но также важно, чтобы интерфейс был знакомым вашему пользователю. Для этого не брезгуйте делать так же, как у ваших популярных конкурентов, но с собственной «изюминкой», чтобы не творить плагиат и банально не копировать. Уже неоднократно доказано, что чем более знакомым будет продукт для пользователей, тем быстрее они начнут им пользоваться.
В результате получается куча непонятно чего, с которой пользователям приходится долго разбираться, чтобы найти что-то нужное. Информацию нужно выдавать дозировано, а не всю сразу. Важно показывать только ту информацию, которая нужна пользователю в конкретный момент времени.
Поэтому важна система подсказок и помощи, но реализованная таким образом, чтобы пользователю не приходилось запоминать правильный ответ или подсказку. Поэтому все должно быть вовремя.
С одной стороны кажется, что проектирование интерфейса пользователя — это простой процесс, который не подчиняется никаким принципам. Но если разобраться, тогда видно, что разработка графического интерфейса — это целая наука и немного магии.Схожие статьи
Другое
Функция в контексте программирования: что это может значить
Другое
Как создать bat-файл в Windows? Bat-файл для запуска .exe в командной строке
Другое
Ченджлог или журнал изменения проектов: нужно использовать или нет?
Другое
Профилирование в программировании: какой профилировщик выбрать
элементов пользовательского интерфейса | Usability.gov
При разработке интерфейса старайтесь быть последовательным и предсказуемым в выборе элементов интерфейса. Осознают они это или нет, но пользователи уже знакомы с элементами, действующими определенным образом, поэтому принятие этих элементов, когда это уместно, поможет в выполнении задачи, эффективности и удовлетворении.
Элементы интерфейса включают, но не ограничиваются:
- Элементы управления вводом : флажки, переключатели, раскрывающиеся списки, списки, кнопки, переключатели, текстовые поля, поле даты
- Навигационные компоненты : навигационная цепочка, ползунок, поле поиска, нумерация страниц, ползунок, теги, значки
- Информационные компоненты : всплывающие подсказки, значки, индикатор выполнения, уведомления, окна сообщений, модальные окна
- Контейнеры : аккордеон
Элементы управления вводом
| Элемент | Описание | Примеры |
|---|---|---|
| Флажки | Флажки позволяют пользователю выбрать один или несколько вариантов из набора. Обычно лучше представить флажки в виде вертикального списка. Более одного столбца также допустимо, если список достаточно длинный, чтобы его можно было прокручивать, или если может потребоваться сравнение терминов. | |
| Радиокнопки | Радиокнопки используются, чтобы позволить пользователям выбирать один элемент за раз. | |
| Выпадающие списки | Выпадающие списки позволяют пользователям выбирать по одному элементу за раз, аналогично радиокнопкам, но они более компактны и позволяют сэкономить место. Рассмотрите возможность добавления текста в поле, например «Выберите один», чтобы помочь пользователю распознать необходимое действие. | |
| Списки | Списки, как и флажки, позволяют пользователям выбирать несколько элементов одновременно, но они более компактны и при необходимости могут поддерживать более длинный список параметров. | |
| Кнопки | Кнопка указывает действие при касании и обычно помечается текстом, значком или и тем, и другим. | |
| Кнопка раскрывающегося списка | Кнопка раскрывающегося списка состоит из кнопки, при нажатии которой отображается раскрывающийся список взаимоисключающих элементов. | |
| Тумблеры | Кнопка-переключатель позволяет пользователю изменять настройку между двумя состояниями. Они наиболее эффективны, когда состояния включения/выключения визуально различимы. | |
| Текстовые поля | Текстовые поля позволяют пользователям вводить текст. Он может разрешать либо одну строку, либо несколько строк текста. | |
| Средства выбора даты и времени | Средство выбора даты позволяет пользователям выбирать дату и/или время. С помощью средства выбора информация последовательно форматируется и вводится в систему. |
Компоненты навигации
| Элемент | Описание | Примеры |
|---|---|---|
| Поле поиска | Окно поиска позволяет пользователям вводить ключевое слово или фразу (запрос) и отправлять их для поиска в индексе с целью получения наиболее релевантных результатов. Обычно поля поиска представляют собой однострочные текстовые поля и часто сопровождаются кнопкой поиска. | |
| Панировочные сухари | Хлебные крошки позволяют пользователям определять свое текущее местоположение в системе, предоставляя интерактивную цепочку страниц, по которым можно перемещаться. | |
| Пагинация | Разбивка на страницы разделяет контент между страницами и позволяет пользователям пропускать страницы или просматривать контент по порядку. | |
| Теги | Теги позволяют пользователям находить контент в той же категории. Некоторые системы тегов также позволяют пользователям применять свои собственные теги к контенту, вводя их в систему. | |
| Слайдеры | Ползунок, также известный как трекбар, позволяет пользователям устанавливать или корректировать значение. Когда пользователь изменяет значение, это не меняет формат интерфейса или другую информацию на экране. | |
| Иконки | Значок представляет собой упрощенное изображение, служащее интуитивно понятным символом, помогающим пользователям ориентироваться в системе. Как правило, значки имеют гиперссылки. | |
| Карусель изображений | Карусели изображений позволяют пользователям просматривать набор элементов и выбирать один из них, если они того пожелают. Как правило, изображения имеют гиперссылки. |
Информационные компоненты
| Элемент | Описание | Примеры |
|---|---|---|
| Уведомления | Уведомление — это сообщение об обновлении, в котором сообщается о чем-то новом, что может увидеть пользователь. Уведомления обычно используются для указания таких элементов, как успешное выполнение задачи, сообщение об ошибке или предупреждение. | |
| Индикаторы выполнения | Индикатор выполнения показывает, где находится пользователь, когда он продвигается по ряду шагов в процессе. Как правило, индикаторы выполнения не кликабельны. | |
| Наконечники инструментов | Всплывающая подсказка позволяет пользователю видеть подсказки при наведении курсора на элемент с указанием имени или назначения элемента. | |
| Окна сообщений | Окно сообщения — это небольшое окно, которое предоставляет пользователям информацию и требует от них выполнения действия, прежде чем они смогут двигаться дальше. | |
| Модальное окно (всплывающее окно) | Модальное окно требует, чтобы пользователи каким-то образом взаимодействовали с ним, прежде чем они смогут вернуться в систему. |
Контейнеры
| Элемент | Описание | Примеры |
|---|---|---|
Аккордеон | Аккордеон — это вертикальный список элементов, который использует функцию отображения/скрытия. При нажатии на ярлык расширяется раздел, показывающий содержимое внутри. Одновременно может отображаться один или несколько элементов, а также могут быть состояния по умолчанию, которые отображают один или несколько разделов без нажатия пользователем кнопки 9.0048 |
Дополнительная информация
- Джесси Джеймс Гарретт, Элементы взаимодействия с пользователем: ориентированный на пользователя дизайн для Интернета и не только (2-е издание)
- Информация о пользовательском интерфейсе для разработчиков Android
Основы интерактивного дизайна | Юзабилити.
govПерейти к основному содержанию
Интерактивный дизайн фокусируется на создании привлекательных интерфейсов с хорошо продуманным поведением. Понимание того, как пользователи и технологии взаимодействуют друг с другом, имеет основополагающее значение для этой области. С этим пониманием вы можете предвидеть, как кто-то может взаимодействовать с системой, устранять проблемы на ранней стадии, а также изобретать новые способы ведения дел.
Передовой опыт проектирования интерактивных элементов
Учитывайте эти качества и связанные с ними вопросы при создании цифровых продуктов, содержащих интерактивный элемент:
| Вопросы, которые следует учитывать при проектировании взаимодействия | |
|---|---|
| Определите, как пользователи могут взаимодействовать с интерфейсом |
|
| Дайте пользователям подсказки о поведении до того, как будут предприняты действия |
|
| Предвидеть и устранять ошибки |
|
| Учитывать обратную связь системы и время отклика |
|
| Стратегически думайте о каждом элементе |
|
| Упрощение для обучаемости |
|
д.
Это особенно важно в мобильном контексте, который, вероятно, включает сенсорный компонент.
При этом он также отмечает, что нужно помнить, что вещи можно упростить только до определенного момента, прежде чем они перестанут функционировать.Каталожные номера
- Проектирование для взаимодействия: создание инновационных приложений и устройств (2-е издание), Дэн Саффер.
- Информационная архитектура для всемирной паутины: проектирование крупномасштабных веб-сайтов Питера Морвилля и Луи Розенфельда.
- Полное руководство для начинающих по интерактивному дизайну
- Знакомство с интерактивным дизайном
Что такое дизайн пользовательского интерфейса? Введение для начинающих дизайнеров
Вы всегда были творческим человеком, и идея зарабатывать на жизнь карьерой, которая позволяет использовать эту творческую энергию, безусловно, звучит привлекательно.
Хорошей новостью является то, что существует множество надежных вариантов творческой карьеры — теперь вам просто нужна небольшая помощь, чтобы разобраться во всех них.
Одной из областей дизайна, которая, возможно, привлекла ваше внимание, является дизайн пользовательского интерфейса (UI). Хотя этот термин может натолкнуть вас на мысли о футуристических научно-фантастических технологиях, сегодня эта дисциплина дизайна в значительной степени ориентирована на практические потребности пользователей. В этой статье мы предоставим простое руководство о том, что такое дизайн пользовательского интерфейса, почему это важно и что вам нужно как профессионалу в области дизайна, чтобы преуспеть в этой области.
Что вообще такое дизайн пользовательского интерфейса?
В дизайне интерфейс — это место, где пользователи-люди могут вводить данные для компьютеров или машин. Хотя это может показаться абстрактным, каждый день вы окружены примерами этого. Сенсорный экран на вашем мобильном телефоне, система меню пульта телевизора и приложения, которые вы используете каждый день, имеют интерфейс, который передает информацию от компьютера к пользователю и наоборот.
Дизайн пользовательского интерфейса направлен на то, чтобы сделать этот интерфейс интуитивно понятным, простым в использовании и эстетически приятным.
«Основное внимание уделяется максимальному удобству использования и созданию простых и приятных впечатлений, — говорит Стив Джонстон, менеджер по продуктам Infragistics.
Почему важен дизайн пользовательского интерфейса?
Подумайте об этом так: у вас может быть самый мощный инструмент в мире, но если он запутан и сложен в использовании, люди откажутся от него и перейдут к чему-то более простому для понимания и достаточно хорошо работающему. . В большинстве случаев «инструмент», с которым работает UI-дизайнер, представляет собой часть программного обеспечения или веб-сайт, и у пользователей есть довольно четкие представления о том, как они должны работать. Вот где в игру вступает родственная дисциплина — пользовательский опыт.
Работа специалиста по пользовательскому опыту (UX) заключается в том, чтобы лучше понять «путешествие» пользователя при взаимодействии с сайтом или частью программного обеспечения.
Они хотят понять, какую информацию пользователи считают наиболее важной, где они ожидают ее найти, как они ее получат, как они будут с ней взаимодействовать и многое другое. Кроме того, они ищут пользовательскую информацию о болевых точках или областях, которые делают общий опыт неуклюжим или далеким от идеального. После сбора они дают рекомендации по улучшению.
«Хороший пользовательский интерфейс обычно является результатом тщательного проектирования UX и пользовательского интерфейса», — говорит UX-дизайнер Андреас Йоханссон.
Пользовательский интерфейс — это огромная часть головоломки UX. Имеют ли иконки смысл того, что они представляют? Имеет ли макет логическую последовательность? Можно ли найти информацию там, где она должна быть? Приводит ли это к тому, что пользователи делают то, что от них хочет владелец проекта, например, регистрируются для получения информации, совершают покупку или публикуют в ленте? Имея согласованную и хорошо спроектированную систему, вы упрощаете использование продуктов, что, в свою очередь, может привести к положительным результатам.
На какие элементы дизайна влияет дизайн пользовательского интерфейса?
Краткий ответ: практически все! Общий внешний вид интерфейса — результат совокупных усилий: кнопки, шрифты, значки, изображения, пустое пространство, макеты, интерактивные реакции и цветовые палитры объединяются в единую систему. Хотя дизайнер пользовательского интерфейса может потратить время на создание отдельного элемента интерфейса, такого как кнопка или строка меню, эта работа не выполняется в вакууме. Он должен соответствовать общей структуре, а также быть технически осуществимым.
Что нужно знать начинающим дизайнерам о дизайне пользовательского интерфейса?
В этой нише дизайна есть что освоить, и не все сразу. При этом есть несколько вещей, с которыми профессиональные дизайнеры, с которыми мы говорили, советуют вам помнить, когда вы начинаете работу.
1. Вы проектируете для цели, а не для себя
Это довольно универсальная проблема для всех дизайнеров, независимо от специальности.
Легко увлечься собственной грандиозной идеей о том, что будет хорошо смотреться в проекте, но вам нужно оставаться приземленным и помнить о потребностях вашего работодателя и потребностях пользователя. Йоханссон говорит, что хотя балансировка всего этого может добавить дополнительный уровень сложности в вашу работу, работа может быть полезной.
«Лучшая часть проектной работы — это решение проблем, — говорит Йоханссон. «Хороший дизайн — это решение проблем как для бизнеса, так и для пользователей. Затем вам нужно сбалансировать ценность для бизнеса и пользователей с тем, что технически возможно сделать».
2. Ваш дизайн должен работать на различных устройствах
«В дизайне пользовательского интерфейса вам необходимо разработать дизайн для нескольких разрешений экрана (адаптивный дизайн) и обеспечить, чтобы ваш дизайн хорошо переводился во все эти форматы. То же самое происходит, когда вы разрабатываете приложения», — объясняет Йоханссон. «Тогда вам нужно убедиться, что вы понимаете технические ограничения, а также то, как дизайн будет переведен на реальный экран».
Во многих дизайнерских проектах ваш холст более или менее статичен, и ваш дизайн должен работать только для одного типа макета. С пользовательским интерфейсом вы часто работаете с дисплеями на мобильных устройствах, планшетах и настольных компьютерах, которые имеют различные размеры и потенциальные технические препятствия. Вам нужно подумать о том, как сохранить единообразный внешний вид, независимо от устройства пользователей.
3. Доступность имеет значение
В отличие от «плоского» дизайна рекламного щита или плаката, интерфейс является интерактивным и должен обеспечивать максимальную доступность. Смогут ли пользователи с нарушениями зрения или слуха использовать этот интерфейс? Достаточно ли контраста в этом дизайне, чтобы сделать текст легко читаемым? Что вы можете сделать, чтобы предоставить альтернативу? Это те типы вопросов, которые вам также необходимо иметь в виду при разработке элементов дизайна для интерфейса.
4. Чем меньше, тем лучше
Дизайн пользовательского интерфейса может оказаться непростой задачей.
Клиенты часто хотят втиснуть как можно больше информации, функций и различных наворотов в дизайн или макет, но вы должны помнить о пользователе. Иногда это означает сокращение клиентского «списка пожеланий» или поиск способов сжать эту информацию во что-то более простое в использовании и навигации.
«Менее опытные дизайнеры могут попытаться втиснуть в дизайн слишком много элементов, даже если общая эстетика выглядит хорошо», — говорит Стефани Уильямсон, опытный дизайнер в Hudson Integrated. «Возможность удалять элементы, которые не нужны, при этом обеспечивая достаточное направление, чтобы направлять пользователя, — это приятное место».
Уильямсон добавляет, что для дизайнеров пользовательского интерфейса важно время от времени останавливаться, делать шаг назад и критически оценивать, действительно ли элемент или компонент дизайна необходим для успеха.
Что нужно, чтобы стать дизайнером пользовательского интерфейса?
В отличие от того, чтобы стать медсестрой или бухгалтером, где есть очень четко определенные пути обучения для каждой роли, путь к тому, чтобы стать дизайнером пользовательского интерфейса, не такой простой.
Это относительно новая дисциплина, требующая уникального набора навыков.
Чтобы помочь вам лучше понять набор навыков и необходимое обучение, мы использовали программное обеспечение для анализа вакансий в режиме реального времени, чтобы изучить более 12 000 объявлений о вакансиях дизайнера пользовательского интерфейса. Данные помогли нам определить некоторые из лучших навыков, которые ищут работодатели.
Вот что мы нашли: 1
- Adobe Creative Suite®
- UX-вайрфрейминг
- Дизайн пользовательского интерфейса
- Прототип
- JavaScript®
- Графический дизайн
- Исследование пользователей
- Веб-дизайн
- HTML5
- УСБ
- Юзабилити-тестирование
Как видно из приведенного выше списка, эта должность часто требует сочетания навыков графического дизайна и веб-разработки, но конкретные требуемые навыки могут различаться в зависимости от работодателя.
Некоторые могут искать профессионалов с более обширным опытом веб-дизайна и разработки, в то время как другие могут рассматривать это как набор навыков, который «приятно иметь».
«Вам не обязательно знать интерфейсную разработку — если вы немного знаете CSS, это будет бонусом, — но вам нужно знать среду, которую вы проектируете», — объясняет Йоханссон.
Уильямсон говорит, что всегда полезно иметь хорошее представление о фронтенд-разработке. «Теоретически вы можете спроектировать что угодно, но это не значит, что это возможно с точки зрения разработки», — говорит она. «Понимание HTML и CSS позволит вам думать о том, что реалистично при разработке, и, в конечном счете, о том, как это будет работать после разработки».
Сделайте первый шаг
Путь к тому, чтобы стать дизайнером пользовательского интерфейса, может начинаться во многих местах. Независимо от того, какой маршрут вы выберете, понимание принципов дизайна и того, как визуально передавать информацию, является огромной частью головоломки.
