41 термин в дизайне, полезный для ux-исследователя

UI элементы:

UI элементы обычно делятся на одну из следующих четырех категорий:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

Input Controls

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

Navigation Components

Navigation Components помогают пользователям перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню гамбургеров на Android.

С чего начать обучение UX-редактуре — первые 10 шагов UX-редактора

Изучать ролики на YouTube, просматривать интерфейсы на Бехансе или Дрибббле, изучать, из каких элементов состоят интерфейсы, читать Медиум или все же поступить на специальность в онлайн-университет? Разбираем, как стать UX-редактором, когда все вокруг так стремительно развивается.

Шаг 1. Начните использовать ежедневно самые свежие версии топовых приложений

Начните активно потреблять современную UX-культуру, зарабатывайте насмотренность и вкус

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

Это бренды, которых ежедневно касается миллионная аудитория:

• Desktop: Figma, Jetbrains
• Веб-приложения: Stripe, Mailchimp, Intercom
• Мобильные приложения: Uber, Airbnb, Spotify

Шаг 2. Изучите лучшие UX-кейсы и международные практики

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

• Дизайн-платформа Uber. Изучать кейс →
• UI/UX кейс: Uber Navigation — дизайн приложения для таксистов. Изучать кейс →
• Проектирование нового Foursquare. Изучать кейс →
• UI/UX кейс: Продуктовый дизайн панели инструментов Stripe под iPhone. Изучать кейс →

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

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

Шаг 4. Изучите ТОП-3 книги по UX (международный ТОП)

Мои первые три книги, которые прямо зашли и разожгли интерес к UX-дизайну:

• Веб-юзабилити и здравый смысл. 3-е издание | Круг Стив
• Интерфейс. Основы проектирования взаимодействия | Купер Алан, Рейманн Роберт М.
• Веб-дизайн. Книга Дж. Гарретта. Элементы опыта взаимодействия | Гарретт Джесс

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

Шаг 6. Проведите юзабилити-тестирование и улучшите по результатам интерфейс приложения

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

Шаг 7. Вступите в самые популярные UX-сообщества и задайте самый волнующий вопрос

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

• UxJournal | Максимально полезные статьи для дизайнеров:
• UxClub | Форум практиков продуктового дизайна:
• Дайджест продуктового дизайна:

Шаг 8. Опубликуйте портфолио

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

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

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

Шаг 9. Пройдите практику на боевом продукте

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

Что такое UX дизайн?

UX практически всегда сопровождается словом “дизайн”. Люди, работающие в этой области – UX дизайнеры.

Простыми словами, User Experience Design (UXD или UED) – это процесс создания физического или электронного продукта, который полезен, легок в использовании и приятен для взаимодействия. Но на самом деле все значительно сложнее:

01. UX дизайн больше чем юзабилити

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

Юзабилити – это качественный атрибут пользовательского интерфейса, который устанавливает, легок ли продукт в изучении, насколько он эффективен, и так далее.

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

02. UX дизайн не является визуальным или UI дизайном

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

Пользовательский интерфейс (UI) определяется как средство связи между человеком и системой. С увеличением популярности персональных компьютеров и мобильных девайсов этот термин обычно приравнивают к “графическому пользовательскому интерфейсу (graphical user interface (GUI))” – внешний вид и ощущение, презентация и интерактивность продукта.

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

UX соединяет разрыв между тем как что-то выглядит и как оно работает и чувствуется.

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

03. UX дизайн – это люди

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

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

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

04. UX дизайн имеет разные размеры

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

05. UX дизайн – это постоянно продолжающийся процесс

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

Принципы UI успешного сайта

1 принцип

Старайтесь использовать на страницах, где много текста одну колонку, а не несколько.

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

2 принцип

Объединяйте похожие функции в один фрагмент, например, пункт меню с контактами.

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

3 принцип

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

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

4 принцип

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

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

5 принцип

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

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

6 принцип

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

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

7 принцип

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

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

8 принцип

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

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

9 принцип

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

10 принцип

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

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

11 принцип

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

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

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

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

(Visited 1 196 times, 1 visits today)

Онлайн-курсы от Breezzly по интерактивному дизайну (ux/ui) и анимации интерфейсов (Job Shadowing)

Объем курсов: 4 часа, 4 проекта, 32 видеоурока

Стоимость: 4 000 ₽

Фишка: осваиваете полный комплект инструментов UX-дизайнера (Figma, Principle, InVision Studio, Tilda) на жизненных учебных проектах: мобильное приложение, iWatch App, сайт и веб-приложение

Изучить курсы: https://breezzly.ru/catalog/design-interfeisov-v-figma

Здесь вы учитесь применять полный комплект инструментов ux-дизайнера в нестандартных и жизненных проектах: мобильные приложения, приложения для Smart Watch, сайты и веб-приложения.

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

Для кого: курс зайдет, если вы хотите попробовать себя в роли UX-дизайнера и получить полное представление на практике. Здесь вас встретят дизайн-проекты во всех популярных инструментах (Figma, InVision Studio, Principle) и на всех видах популярных у клиентов проектов.

Чему научитесь

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

Автор курса: Анастасия Свеженцева, продуктовый дизайнер и бренд-дизайнер. 5 лет опыта работы в двух международных компаниях iSpring Solutions и Omega-R. Сейчас помогает стартапам и продуктовым командам по всему миру: проектирует интерфейсы мобильных и веб-приложений, создает сайты, помогает улучшить дизайн. Любит прорабатывать логотипы, фирменный стиль и уникальную графику с характером. Активно изучает коммерческую иллюстрацию, поведенческую психологию и брендинг. Преподает дизайн с 2015 года. Пришла в дизайн из программирования.

Темный режим

Да-да, эта тенденция не нова, и тренд сохраняется уже как минимум 3 года. Темный режим для ценителей предлагают самые известные продукты и крупные бренды: будь то Instagram, Android или Google. 

Темная тема сохранит актуальность и в этом 2021 году. Вот несколько причин: 

• на темном фоне проще выделить нужные дизайнерские элементы; 
• ультрасовременный внешний вид; 
• для устройств с OLED- / AMOLED-экранами существенно экономится ресурс аккумулятора; 
• при плохой освещенности нагрузка на глаза меньше. 

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

medium.com 

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

Словарь UI элементов:

Аккордеоны (Accordion)

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

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

Хлебные крошки (Breadcrumb)

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

Кнопки позволяют пользователю взаимодействовать с формами на сайте.

Карточка (Card)

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

Карусель (Carousel)

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

Checkbox

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

Лента (Feed)

Сложно представить соц сети такие как Facebook, twitter и т.п без ленты. Содержание ленты варьируется от простого текста до изображений и видео. 

Loader

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

Модальное окно (popup)

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

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

Пагинация (Pagination)

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

Picker

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

Progress Bar

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

Radio Buttons похожи на чекбоксы, но отличаются тем, что можно 1 из нескольких вариантов. 

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

Ползунок (Slider Controls)

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

Stepper

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

Тэг (Tag)

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

Tab Bar

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

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

Кто он — UI/UX-дизайнер?

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

User Interface является инструментом User Experience. Так что эти понятия по факту зависят друг от друга и отдельно в принципе не работают — это не эффективно.

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

Можно ставить эти понятия рядом, но ни в коем случае не объединять: UI- и UX-дизайнеры фокусируются на разном. И зачастую желание «быть универсальным» может на деле означать «быть везде бесполезным».

UX/UI дизайн в БВШД – работа в команде, плечом к плечу с профи в своем деле (оффлайн в Москве)

Все преподаватели являются практикующими лидерами индустрии, лауреатами профессиональных конкурсов и создают дизайн продуктов с миллионными индексами MAU (monthly active users).

Автор курса: Команда преподавателей БВШД. Куратор курса Ярослав Шуваев, руководитель R&D в Ak Bars Digital Technologies (Банк Ак Барс)

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

Объем курса: 1 год

Стоимость: 350 000 руб. в год

Фишка: погружение в профессию через реальные проекты и живое взаимодействие с экспертами: Банк Ак Барс, ExactFarming, Tele2, IBM Interactive Experience Россия, Райффайзенбанк, VRTech, Сбербанк

Изучить курс: https://britishdesign.ru/courses/ux-ui/

UX/UI в цифрах

• 40% пользователей признались, что не будут пользоваться сайтом, если у него неопрятный вид.
• 94% посетителей сайтам с плохим дизайном.
• 67% потребителей предпочитают покупать с телефона.
• 73% топ-менеджеров заявили, что собираются увеличить количество UX-дизайнеров в своей организации в ближайшие пять лет.
• Средняя зарплата UX-дизайнера в Москве составляет 91 570 рублей в месяц.

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

Пользователи могут прокручивать сайт до основной части истории, но кратко все три части представлены в первом экране. Визуальные эффекты и текст рассказывают, зачем помогать людям и компании Upstream. Завершается повествование call-to-action – кнопкой Submit. UX здесь ведет пользователя по истории и подводит к логическому действию: просит присоединиться к программе.