Что такое UX/UI дизайн на самом деле? / Хабр

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

Я хочу раз и навсегда поставить точку и простым понятным языком объяснить, что значит «UX/UI дизайн».

_{Разные типы интерфейсов для заточки лезвий.}

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

Цель UI/UX дизайнера — довести пользователя до какой-то логической точки в интерфейсе. Сделать так, чтобы пользователь достиг своей цели.

Что такое UX/UI, прямым текстом

_{(в этом разделе будут банальные фразы)}

UX — это User Experience (дословно: «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.

А UI — это User Interface (дословно «пользовательский интерфейс») — то, как выглядит интерфейс и то, какие физические характеристики приобретает. Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку попадать пальцем в кнопочки, читабельным ли будет текст и тому подобное…

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

Что такое UX и UI дизайн, другими словами

Прямая обязанность UX/UI дизайнера — это, например, «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?» Нравится или не нравится. Купить или не купить.

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

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

Вот первый пример: когда Вильгельм Шиккард в 1623 году изобретал арифмометр, он уже был UX/UI дизайнером.

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

Ещё один более древний и примитивный пример — точильный камень (колесо). Уже даже в раннем средневековье было много разновидностей и механизмов такого колеса:

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

Всё это были разные типы интерфейсов.

Так вот, когда изобретатель очередного точильного камня думал:

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

то в тот момент он был UX дизайнером.

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

И тот способ, каким бы вы затачивали меч — назывался бы интерфейс.

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

В последнее время популяризация профессии UX/UI дизайнера связана скорее с развитием цифровых технологий. А вот именно тот «бум» (когда мы стали видеть термин «UX/UI» в каждом втором объявлении о работе) связан с самим названием, которое кто-то придумал совсем недавно.

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

UX и UI — это не тренды. Технологи развиваются. Спрос на сайты растёт. Цифровые приложения появляются как грибы. А инструменты дизайна и разработки упрощаются настолько, что уже практически любой человек без знания программирования может «на коленке» сделать сайт-визитку. Вот только этот сайт должен как-то выглядеть. И не просто как абстрактный каркас из текста и кнопок. Тут программистам и нужна помощь UX/UI дизайнера.

Разделение на веб-дизайнеров и UX/UI дизайнеров появилось с развитием интернета. Со временем понадобились более узкие специалисты, которые делали бы интерфейсы именно для веб-сайтов.

Да, UI/UX дизайн — это более широкое и емкое понятие чем веб-дизайн.

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

основные характеристики и особенности элементов

Привет, дорогой читатель! Вы наверняка встречали в статьях загадочные аббревиатуры UX и UI дизайн, но возможно, не вникали в смысл. На самом деле в этих буквах нет ничего сложного. Сегодня расскажем, что такое UX/UI дизайн простыми словами, кто этим занимается и как не перепутать эти понятия. Начали!

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

Термин UX впервые появился в 1993 году в компании Apple. Аббревиатура означает User eXperience, или “пользовательский опыт”. То есть UX-дизайн — это работа, направленная на эффективное взаимодействие пользователя с интерфейсом сайта, мобильного приложения или любой компьютерной программы. Проще говоря, UX-дизайн нужен, чтобы пользователю было удобно и приятно. Ведь если это не так, человек вряд ли будет залезать в дебри структуры ресурса — просто покинет его и уйдет. А вы потеряете прибыль и лиды.

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

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

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

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

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

Кто такой UX-дизайнер?

Человек, который все это делает. А именно:

• прорабатывает цели и задачи клиента и определяет, как их можно достичь (например, привлечь трафик, увеличить продажи, количество клиентов). Внимание заказчику! Чтобы исполнитель лучше понял, что вам нужно, составьте ТЗ для веб-дизайнера. Расскажите, для чего создается сайт, какие продукты вы собираетесь реализовывать, на какую целевую аудиторию рассчитываете. В ответ хороший дизайнер также пришлет вам ТЗ, где распишет свое видение будущего сайта: общую структуру, детальную проработку каждой страницы, дизайн сайта, место для рекламных баннеров и виджетов обратной связи, интерактивные элементы — кнопки корзины, иконки, и их расположение и многое другое;
• подбирает подходящие UX-инструменты, которые помогут в создании дизайна. Обычно это специальные сервисы и программы, заточенные конкретно под каждый элемент дизайна. Например, Perfect Icons – инструмент для создания иконок соцсетей, который можно применить и в обычной, и в мобильной версии. Или Flat UI Color Picker – инструмент для создания цветовых нюансов будущего сайта. Заказчику не обязательно вникать в эти инструменты, главное — получившийся результат;
• разрабатывает UX-дизайн прототипа (эскиза, наброска) сайта, опираясь на собственные знания и опыт, пожелания заказчика и возможности инструментов. Лучше составить несколько вариантов и потом сравнить их;
• далее дизайнер проектирует взаимодействие и тестирует продукт на соответствие тому самому “пользовательскому опыту”- продумывает, как посетитель будет пользоваться сайтом. Для этого составляются несколько вариантов каркасов сайта, карт маршрутов пользователей, проверяется и сравнивается несколько вариантов и выбирается лучший. Также на помощь приходят специальные инструменты: например, UX Checklist. Это реальный чек-лист на соответствие каждого параметра принципам UX-дизайна. Если программа показывает, что сайт оставляет желать лучшего — значит, придется подождать еще немного. Хороший веб-дизайнер не успокоится, пока не доведет дело до конца;
• согласует получившийся результат с заказчиком, при необходимости вносит правки и выслушивает пожелания. На этом этапе вы вспомните про ТЗ и возблагодарите Бога, что составили его. Дело в том, что получившийся результат и ваши пожелания могут существенно отличаться. Без обид, но вы — не специалист в сфере дизайна. Успешный бизнесмен — да, талантливый менеджер — да, но не дизайнер. Поэтому то, что вы придумали и представляли себе долгими вечерами, специалист может забраковать. Не обижайтесь: это значит, что придуманные вами идеи не помогут развитию вашего бизнеса, а может быть, и оттолкнут посетителей. Придется довериться дизайнеру: он лучше знает, как привлечь трафик и сделать сайт продающим.

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

Что такое UI-дизайн

Если UХ-дизайн — это скелет будущего сайта, то UI-дизайн — его детальная проработка и визуальное воплощение. Грубо говоря, первое понятие можно сравнить с планировкой дома, второе — с покупкой мебели и деталей интерьера. UI-дизайн (User Interface) переводится как “пользовательский интерфейс”. Это комплекс графических решений, которые определяют, удобно пользователям будет находиться на сайте или не очень.

Рассмотрим основные правила UI-дизайна:

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

Что делает UI-дизайнер?

Часто UX- и UI-дизайнер — это один и тот же человек. Универсальный специалист обычно умеет создавать прототипы сайта и прорабатывать его детальное наполнение:

• разрабатывает дизайн и элементы управления каждой страницы. Дизайнер продумывает даже такие на первый взгляд мелочи, как расположение личного кабинета — слева или справа на верху страницы, цвет кнопки призыва к действию и количество слов, написанных на ней, количество шагов, который должен сделать пользователь, чтобы сделать заказ в интернет-магазине или зарегистрироваться;
• подбирает подходящие UX-инструменты и программы. В основном это графические редакторы: Photoshop, Illustrator, Sketch, Adobe XD, Figma и другие;
• следит за тем, чтобы каждая страница и каждый элемент органично смотрелись и вызывали положительные эмоции на всех носителях: стационарном компьютере, планшете или ноутбуке, смартфоне. То есть иметь адаптивную верстку;
• учитывает основные тренды веб-дизайна: наличие свободного пространства, смелые сочетания шрифтов, четкие крупные шрифты, минимализм и лаконичность. Польза — это здорово, но красоту и приятный взгляду интерфейс тоже никто не отменял. Впрочем, почти всегда UX-дизайн и современные решения идут рука об руку;
• так же согласовывает проект с заказчиком, при необходимости вносит правки, тестирует и принимает окончательное решение.

Что еще должен уметь дизайнер?

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

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

1. Различать специализацию. Веб-дизайнер — понятие широкое. Среди них и визуальные дизайнеры, и графические дизайнеры и, конечно, UX (дизайнеры пользовательского опыта) и UI (дизайнеры интерфейса). Если специалист говорит, что он мегапрофи в любой области — проверьте его слова. Как правило, если человек действительно профи, он сам понимает, какое направление ему ближе, и начинает совершенствоваться именно в этой сфере.
2. Постоянно развиваться. Тренды дизайна меняются каждый год, чтобы не отставать от модных тенденций, нужно постоянно адаптироваться к изменениям. Для этого дизайнер просто обязан изучать тематические статьи, читать книги, мониторить новости. В то же время слепое поклонение трендам — тоже не есть хорошо. Важно найти баланс между пользой для пользователя и погоней за модой.
3. Иметь чувство прекрасного. Проверить это можно одним способом — попросить дизайнера показать свое портфолио, лучшие работы. Если ваши вкусы различаются — лучше найдите другого специалиста. Иначе готовьтесь к бесконечным баталиям и непредсказуемому результату.

Надеюсь, мы сумели объяснить, что такое UX/UI дизайн, простыми словами. Желаем найти хороших специалистов, которые заставят ваш сайт работать. Удачи в продвижении!

TOP-10 UX навыков, чтобы начать работать UX дизайнером

Вы читаете перевод статьи “How to Get Started with UX”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

В этой статье я постараюсь ответить на следующие вопросы:

• Что такое UX?
• Как научиться проектировать UX?
• И что представляет собой работа UX-дизайнера?

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

UX

UX — часто переводят как «Пользовательский опыт» (User Experience). Если копать дальше, то за двумя трендовыми буквами можно найти гигантскую отрасль, в которой работают «Дизайнеры взаимодействия» (Interaction Designer).

А еще, UX-дизайн – это больше чем просто кнопки:

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

Как утверждает стратег Facebook, Майк Атертон:

Вы должны создавать лучшее, а не просто «улучшать».

UX дизайн существует уже давно. Его предки были выходцами из промышленного дизайна (industrial design), дизайна ориентированного на пользователя (user centered design) и человеко-машинного взаимодействия (human-computer interaction, HCI).

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

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

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

Это звучит как «дизайн мышление!»

Дизайн-мышление – это тоже трендовое словцо, как и «UX». «Дизайн мышление» — это такая точка обзора, с которой новички быстро схватывают, что дизайн — это не просто создание красивых вещей.

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

Так в чем же отличие между дизайном интерфейсов (UI) и UX дизайном?

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

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

«Но люди взаимодействуют (Interact) с тем, что создают дизайнеры интерфейсов, а значит они получают некий опыт (Experience). Поэтому они все-таки UX-дизайнеры, не так ли?»

Нет! Не так!

Ладно, уточню: в узком смысле они все-таки UX-дизайнеры.

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

Общая картина (BIG PICTURE)

Дон Норман пытается втиснуть свой новый Macintosh в машину

Давайте разбираться, что же действительно означает UX. Давайте нырнем в историю возникновения термина и найдем там легендарного UX-дизайнера по имени Дон Норман. Он разработал концепцию UX в начале 90-х, работая в Apple:

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

Т.е мы говорим не только о приложении. Мы говорим о полном опыте, который получает потребитель от бренда или продукта.

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

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

Slack vs. IRC

Пока мало компаний понимают это, и еще меньше могут добиться качественного UX.

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

К сожалению, большинство digital-компаний на рынке: это просто хлам, который еще предстоит разобрать.

10 ключевых UX навыков

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

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

Навык 1. Общение и коммуникация

Технические моменты в UX-дизайне освоить просто. А вот освоить «soft-skills», такие как: обсуждение, переговоры и совместная работа с целым спектром людей, среди которых другие дизайнеры, клиенты, кодеры, продакт-менеджеры и руководители – в разы сложнее.

Ветеран отрасли Раскин прекрасно подытожил:

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

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

Недостаточно делать просто отличную работу. Вы должны быть в состоянии объяснить, убедить и продать эту работу, или она никогда не увидит свет.

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

Без этих навыков, ваши идеи не приживутся, даже если они «технически» превосходны:

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

Навык 2. Исследование пользователей

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

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

• К делу: Перед стартом следующего проекта, спросите себя: «Кому это нужно и зачем?» — Что именно им нужно и как мы можем помочь?
• Еще ​​лучше — опросите некоторых потенциальных пользователей и составьте список их потребностей и проблем, с которыми они сталкиваются в той области, которую вы решили улучшить. Используйте этот список, чтобы создать «Персон» (Personas), описать Job Story и задать вектор для направления своей работы;
• Прочтите книгу Джеффа Готельфа Lean UX. Она конечно немного техническая, но на самом деле, в ней вы найдете «все, что вы когда-либо хотели знать о разработке цифровых продуктов, но очень боялись спросить». Она обязательна к прочтению начинающим дизайнерам.

Навык 3. Информационная архитектура

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

На самом деле, информационная архитектура — это набор инструментов, которые ПОМОГУТ ВАМ УБРАТЬ ЭТОТ БЕСПОРЯДОК. И как только это случится, все встанет на свои места. И у вас будет эскиз того, где вы находитесь, и куда вы хотите пойти.

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

Ваша задача на старте всегда — вернуться к началу и выяснить, «что у нас есть», «куда мы хотим идти» и «как туда добраться». Будьте готовы ответить на такие вопросы, как:

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

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

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

Навык 4. Воркшопы и совместная работа

Вернемся к навыкам общения. Именно здесь они понадобятся в полной мере.

• Можете ли вы ясно изложить свою идею на бумаге?
• Можете ли вы помочь каждому в команде выразить свои идеи так, чтобы другие поняли?

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

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

• К делу: Прочитайте книгу Джейка Наппа «Спринт».
• Google Ventures используют 5-дневные «Дизайн-спринты», чтобы помочь стартапам понять свою суть и проверить новые идеи.

Навык 5. Сборка макетов (Wireframe) и сценариев взаимодействия (User-Flow)

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

Как сказал Форд:

Если бы я спросил людей, чего они хотят, они бы попросили более быструю лошадь.

Итак. Макет (Wireframe) — это каркас интерфейса. Он собирается с помощью черно-белых линий, прямоугольников и фигур. Wireframe – это простой способ рассказать о своей идее. А «сценарий взаимодействия» (User-Flow) представляет собой последовательность макетов, которые проходит пользователь, пока не дойдет до цели.

• К делу: в следующий раз, когда вы будете создавать дизайн, сначала зарисуйте свои идеи на бумаге! Неважно, насколько грубоваты ваши рисунки — просто попробуйте сделать это с парой идей;
• А еще ​​лучше, попробуйте полдюжины идей и выберите любимую. Не садитесь за комп, пока не получите что-то достойное. То, чем вы уже можете гордиться;
• Компьютеры идеально подходят для проработки проектов, но на старте – они тормозят вас и ваши идеи.

Навык 6. Копирайтинг

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

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

Навык 7. Визуальный дизайн

Без понимания основ графического дизайна, дизайна интерфейса и теории цвета, как вы можете оттачивать UX? Даже прототип требует визуальной иерархии и хорошей типографики!

Брендинг, использование цвета и типографики – это значительная часть «пользовательского опыта» (User Experience). И если они плохие, то и продукт будет на ощупь так себе. И помните, талантливый UI-дизайнер может не оказаться рядом.

• К делу: визуальный дизайн лучше всего изучается на практику, поэтому попробуйте один из этих онлайн-курсов: Alison, Udemy, Canva или Skillshare;
• А еще, попробуйте онлайн-курс с преподавателем, например, Design Lab. (Признаюсь, я здесь преподавал!)

Навык 8. Прототипирование

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

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

• К делу: Создайте бесплатную учетную запись на Marvel и поиграйтесь! Попробуйте примеры прототипов и попробуйте собрать свой;
• Очень просто создать что-то, если есть дизайн, или хотя бы фото эскизов, сделанное на телефон.

Навык 9. Тестирование продукта

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

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

Главное здесь — не задавать «наводящие» вопросы. Например: «Как вы думаете, иконки социальных сетей достаточно легко найти?» Или «Этот новый дизайн понятнее предыдущего?»

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

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

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

Навык 10. Аналитика

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

Кто-нибудь нажимает на эту кнопку? Нет? Ну, может быть, вам следует избавиться от нее.

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

• К делу: добавьте Hotjar, Mixpanel, UXcam, или Appsee в свои сайты или мобильные приложения. И вы начнете получать полезную информацию о том, как люди взаимодействуют с вашим продуктом. Это даже забавно, увидеть действия пользователей! Вы можете очень многому научиться, подсматривая за ними через системы аналитики.

Последнее примечание

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

Начало работы с UX

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

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

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

Единственное, что их объединяет — увлечение UX и энтузиазм к обучению.

Для тех из вас, кто ищет с чего начать, вот несколько идей:

Поговорите с товарищами по команде

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

Обратитесь к друзьям

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

Посещайте митапы

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

Я очень рекомендую мероприятия Ассоциации по дизайну взаимодействия(IxDA). Также заслуживает внимания Ассоциация пользовательского опыта(UXPA). А еще я слышал положительные отзывы о UXCrunch в Лондоне.

Запишитесь на курсы

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

Такие компании, как General Assembly и Webcredible предлагают действительно сильные курсы, которые помогут вам поменять профессию и найти работу. [Признаюсь, я учился и преподавал в General Assembly].

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

Учитесь онлайн

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

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

Найдите курсы с практикующими наставниками, которые будут беседовать с вами еженедельно. DesignLab, Interaction Design Foundation, General Assembly, Springboard и Udemy заслуживают вашего внимания.

Посмотрите видео Диего Мендеса для получения дополнительной информации о том, как попасть в UX. Ссылка в сносках.

Вывод

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

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

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

Ресурсы по UX дизайну

Видео [en]

• Время стать UX дизайнером  — на сцене дизайнер и отчасти стендап комик. Замечательное выступление ветерана индустрии — Джареда Спула, который действительно понимает всю пользу UX;
• Майк Монтейро — 13 способов дизайнеру накосячить на презентации перед клиентом. Как видите, мне нравятся забавные ораторы. Майк говорит, все как есть. Это выступление не очень сфокусировано на «UX», но замечательно погружает в жизнь дизайнера и общение с клиентами.

Короткие статьи [en]

Книги, которые вам понравятся [en]

Краткое описание книг, упомянутых выше:

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

Наконец, пара книг Дона Нормана, ставших классическими:

Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.

Самый полный обзор трендов веб-дизайна (UI/UX) на 2020 год

Вы читаете перевод статьи “UI/UX Design Trends for 2020”. Над переводом работали: Над переводом работали: Анастасия Свеженцева, Ольга Жолудова.

Итак. Что же тут у нас сегодня. Поехали. Кстати, если вам интересно расширить свой арсенал навыков, поглядите новый обзор курсов по UI-дизайну и анимации.

Тренд 1: Продвинутое ценностное предложение

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

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

Фалтер Инферно, Wild. Изображение сегодняшнего живого ада, взывающего вас взглянуть в зеркало.

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

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

Причина, по которой вы делаете что-то, будет важнее того, что вы делаете.

Тренд 2: UI-анимация с упором на пользовательский опыт и впечатления

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

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

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

Corn. Revolution от Resn с сайта GreenSock.

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

Время двигаться. В прямом смысле.

Тренд 3. Асимметрия и экран пополам

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

Baas Amsterdam и ассиметричный макет.

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

2019 – ежегодный отчет от Abb-d Choudhury и Sara Scobie.

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

Разделяйте.

Тренд 4. Неброские градиенты

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

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

10 Quota – Держите цитату дня ✌️ Анимация Sebastian Jungbluth

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

Не раздувайте пламя.

Тренд 5. Гармоничные цвета

Цвета 2020 года сочетают в себе оптимизм и недосказанность.

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

A+WQ / Young Lab Slider Animation от Zhenya Rynzhuk.

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

Сбавьте тон.

Тренд 6. Пишите для людей

Развивающийся UX-копирайтинг в последние два года добрался до высокой планочки для копирайтеров. Сам термин «UX Writing» скорее всего исчезнет, ​​поскольку любой копирайтинг для людей и есть UX-копирайтинг.

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

До: «Ом» — облачная платформа для управления командной работой, контроля качества обслуживания клиентов и управления ресурсами.

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

Не срывать сроки. Раздаете сотрудникам задания, они видят их в «Оме» и выполняют. Когда придет срок, «Ом» напомнит сотруднику о задаче. Если сотрудник не справится — «Ом» вам сообщит.

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

Увольнять бездельников. «Ом» знает, кто, что и как делает в компании. Если кто-то из менеджеров постоянно срывает срок или закрывает мало сделок, «Ом» покажет это в отчете.

Не существует волшебных слов.

Тренд 7. Миксуем опыт

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

Кофейная компания Allpress Culture.

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

Аниме “OBSOLETE” от JUNNIE.

Создавайте опыт, а не ui-киты и руководства по стилю.

Тренд 8. Красота вернулась

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

Загмайстер и Уолш: О Красоте

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

«Убедитесь, что ваше решение создано людьми, для людей».

– Стефан Сагмейстер.

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

Тренд 9. Desveloper (Дизайнер разработчик в одном лице)

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

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

Когда все движется к дизайну взаимодействия (interaction-based design), становится все труднее объяснить, как то самое взаимодействие должно работать и выглядеть. Поэтому важность и необходимость такого визуального инструмента для воплощения решений трудно переоценить.

Станьте «опасным» дизайнером. Возьмите код на вооружение.

Тренд 10. Белое пространство

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

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

Домашняя страница творческой студии Hello Monday с большим количеством пустого пространства.

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

Белое пространство – инструмент умелого дизайнера

Тренд 11. Рендеры с чувственным опытом

Кроме применения векторных иконок, особенно в блоках «наши фишки», топовые дизайнеры продолжат активно применять рендеры в своих работах.

Потрясающая презентация Apple AirPods Pro / лендинг.

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

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

Вот это по настоящему, я чувствую это.

Тренд 12. Множество вариаций UX

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

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

Веб-сайт изменяет размер изображения iPhone 11 Pro в зависимости от вашего скролла.

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

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

Тренд 13. Мобильный опыт

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

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

Юморист Эстер Повицки демонирует Cake – мобильный браузер.

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

Встречайте свайп.

Тренд 14. Наслоение типографики

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

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

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

В студии Spatzek нет никакой суеты.

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

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

Замолвите за это словечко.

Тренд 15. Иллюстрации выражение особой культуры компании и продукта

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

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

Иллюстрации Absurd.design

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

Иллюстрированное меню Qode Interactive Catalog

Сначала веселье, потом бизнес.

Тренд 16. Кастомная навигация

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

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

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

Меню навигации сайта 2ndstreet повторяет расположение заголовка страницы.

Плывите по эффекту, а не ждите его окончания.

17. Полноэкранные визуальные эффекты

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

Главная страница сайта Brand Studio – это окошко в безумный мир.

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

Shimane Misato из Японии – это интерактивная полноэкранная история.

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

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

Не стройте стены, сносите их.

18. Визуализация данных

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

WebGL и 3D – это крутая комбинация, особенно если есть интересные данные. Любая выборка данных – это ценный источник для лидогенерации. Все, что нам нужно сделать, это отфильтровать их, найти наиболее сочные и интересные фактыы и применить их.

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

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

Визуализируйте, что важно, а не то, что доступно.

19. Непрерывный UX

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

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

А что, если бы, сайту для отправки покупки было нужно только ваше намерение совершить покупку. Одна кнопка для управления всем процессом. Мобильный телефон уже применяет этот прием, интегрируя в платежи простые жесты, а еще есть Face ID. Нам еще предстоит увидеть рост этого тренда в Интернете.

Конфигурация велосипеда от Den Klenkov – это потрясающий пример совершенно нового опыта покупки онлайн.

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

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

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

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

20. Собственный путь

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

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

Быстрый тест. Прокрутите публикации в своем творческом аккаунте за последний год. Сколько хайповых вещей вы там нашли? Уверен, что тоже самое будет с Cybertruck через год. Нет ничего плохого в том, чтобы зарабатывать деньги, но дизайнеров запоминают за то, что они не такие как другие. Рецепта успеха нет, но есть преимущество в его поиске.

В заключение я приведу цитату из книги Марти Ноймайера «46 правил гения: руководство по креативности для новаторов»:

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

UX/UI-дизайнер о золотом сечении, свободе и требованиях заказчика

Onliner продолжает изучать IT-профессии вместе с компанией ISsoft. В этот раз мы пообщались с UX/UI-дизайнером Александром Чернушиным. Он, как и другие люди этой профессии, не только визуализирует продукт, но и отвечает за то, как тот или иной проект воспринимается конечным пользователем. Значит, и ответственность на таком специалисте лежит немаленькая.

— Нужно уметь хорошо рисовать?

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

— Рисовать прямо на бумаге? 

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

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

О золотом сечении

— Правило золотого сечения действительно работает или это выдумки маркетологов?

— Относительно UI — да, оно работает и применяется. Золотое сечение вообще везде проявляется: космические объекты, раковины, человеческие тела. Практика очень удобная, ее можно использовать при проектировании интерфейса — размер кнопок, шрифтов, отступы. Если возьмете макеты ведущих дизайнеров и просто наложите на них золотое сечение, то увидите, что оно применяется.

Причем дело не только в том, что наше тело построено по такому принципу. Наш глаз видит и сразу подмечает, по каким пропорциям все построено. Этим как раз и можно объяснить тягу человека к золотому сечению. Даже если вы не знаете, что это такое, все равно просто по наитию, подсознательно можете сказать: «Вот это выглядит лучше, чем то».

— Есть какие-нибудь стереотипы в UI-дизайне? Например, «приложение для женской аудитории должно быть в розовых тонах».

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

Мнение творца vs требования заказчика

— У дизайнера много свободы в работе?

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

— А что делать с «художник так видит»? 

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

— У дизайнеров же есть разделение на «джуниоров», «мидлов» и так далее? Как понять, что дизайнер — «сеньор»? 

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

— Как приходят в эту профессию?

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

Хочешь пойти в дизайн — развивай вкус

— С чего начинать людям, которые хотят пойти в дизайн? 

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

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

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

— Есть ли примеры таких дизайнеров? 

— Сугубо мое мнение: посмотрите на Hello Monday и Clay — это топовые диджитал-агентства мира. У них потрясающие работы, занимаются в том числе мобильными интерфейсами, сайтами.

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

Об уважении к дизайнеру

— Дизайн — это про творчество или про выполнение пожеланий заказчика? 

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

— Но заказчик платит дизайнеру. Значит, у него есть власть над финальным продуктом? 

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

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

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

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

Когда дизайнер может сказать «я сделал»

— Как отвечать заказчику, который о работе дизайнера говорит «мне не нравится»?

— У дизайнера работа «сделана» не тогда, когда она закончена, а когда ее приняли. Вот тогда можно сказать «я сделал». С клиентом нужно проводить экспертизу материального дизайн-продукта персонально. Всегда надо четко согласовывать заказ, бриф, контент.

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

— Правильно понимаю, что в последние 5—7 лет тренд в UX/UI-дизайне — максимальное упрощение? С чем это связано?

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

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

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

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

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

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

— Что посоветуете дизайнеру?

— Сразу вспомнил фильм «Спасти рядового Райана»: «Будь честным!» Я бы, наверное, тоже поддержал героя картины. Дизайн — это достоинство, право быть собой.

Компания ISsoft — один из крупнейших белорусских разработчиков IT-решений для рынков США и Западной Европы. Основана в Минске в 2004 году как дочерняя компания корпорации Coherent Solutions, Inc. (США). Резидент Парка высоких технологий с 2007 года. Центры разработки ISsoft в Минске и Бресте насчитывают более 1000 квалифицированных сотрудников. Компания ежегодно входит в рейтинги Inc.5000 и Software 500.

Спецпроект подготовлен при поддержке иностранного производственного унитарного предприятия «ИССОФТ СОЛЮШЕНЗ», УНП 190819327.

Читайте также:

Библиотека Onliner: лучшие материалы и циклы статей

Наш канал в Telegram. Присоединяйтесь!

Быстрая связь с редакцией: читайте паблик-чат Onliner и пишите нам в Viber!

Перепечатка текста и фотографий Onliner без разрешения редакции запрещена. [email protected]

47 важных советов для UI и UX дизайнеров

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

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

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

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

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

4 золотых правила UI дизайна

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

Оригинальная статья — 10 золотых правил UI дизайна.

1. Проектируйте для плотности, а не для пикселей

Пиксельное значение в 3 или 4 раза больше значения dp

Что такое плотность? Плотность – это количество пикселей на дюйм экрана, также известное как PPI. Единица измерения «dp» – это сокращение от выражения «независимый от плотности экрана пиксель», иногда можно встретить сокращение «dip».

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

Мы делаем это, потому что, если мы, например, создадим актив кнопки с разрешением 200 x 50 dp, он будет отображаться с разрешением 200 x 50 px на экране с плотностью 160 ppi и 400 x 100 px на экране с плотностью 320 ppi (в 2 раза больше первоначального размера актива).

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

Как плотность переводится на размер экрана? Например, размеры экрана iPhone XS Max составляют 414 x 896. Но это не пиксели, а количество точек. В пикселях это 1242 x 2688 px. Учитывая это, при проектировании для iPhone XS Max я бы выбрал размер 414 x 896 точек, а затем масштабировал активы в @ 3x.

2. Используйте шаг 8dp

Зачем проектировать с шагом 8? Этому есть простое объяснение. Причина, по которой мы используем магическое число 8, а не 5, заключается в том, что, если устройство имеет разрешение 1,5x, оно не сможет правильно отобразить нечетное число.

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

Ваши дизайны будут выглядеть согласованными, если вы будете проектировать с шагом 8 на сетке 8-pt. Больше не придется угадывать интервал, и все идеально согласуется с выбранными вами интервалами.

Хотите узнать больше? Прочтите эту статью.

3. Используйте цветовой вес, чтобы установить иерархию

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

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

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

Если вы хотите  с помощью оттенков быстро создать вес, попробуйте Shaderade.

4. Не замедляйте меня

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

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

«Я хочу двигаться быстро»

– Рики Бобби

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

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

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

Пример плохой для UX анимации

Какова оптимальная скорость анимации?  «Многочисленные исследования показали, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Эти цифры основаны на определенных свойствах человеческого мозга. Любая анимация короче 100 мс является мгновенной и не распознается вообще. Между тем, анимация продолжительностью более 1 секунды вызовет ощущение задержки и, следовательно, будет скучной для пользователя» —  Руководство по правильному использованию анимации в UX

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

5 принципов этического UX дизайна

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

Оригинальная статья – 10 принципов этического UX-дизайна

5. Уведомьте меня

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

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

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

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

6. Выделяйте негативную информацию

Airbnb

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

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

7. Прекратите спамить

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

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

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

8. Прозрачная политика конфиденциальности

Хватит скрывать все за политикой конфиденциальности.

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

9. Сделайте отписку максимально простой

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

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

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

4 способа придать изюминку вашему дизайну

Способы улучшения дизайна вашего интерфейса.

Оригинальная статья – 10 способов улучшить дизайн интерфейса.

10. Вдохните жизнь в свой текст

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

Ааррон Уолтер, директор по UX в MailChimp, говорит: «Мы обнаружили, что юмор, переплетенный с текстом, обезьянка Фредди MailChimp, и множество пасхалок, спрятанных в рабочем процессе, могут превратить обычную задачу в опыт, которого люди ждут с нетерпением, и по которому иногда даже скучают».

Текст, в который вдохнули жизнь – это разница между словами «загрузка…» и «наша команда высококвалифицированных обезьян работает над этим». Это неожиданно и веселит вашего пользователя.

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

Юмор также может быть чрезмерным, и он просто не подходит для некоторых приложений или отраслей. Как пишет Lianna на своем веб-сайте punchlinecopy: «Морги, врачи и атомные электростанции должны держаться подальше от юмористического текста».

MailChimp такой крутой

Алексис Оганян, соучредитель Reddit, сказал: «Потратьте немного времени, чтобы сделать его чуть более человечным или – в зависимости от вашего бренда – немного смешнее, немного уникальнее. Это того стоит, и это моя задача».

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

11. Добавьте функцию темной темы

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

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

12.

10 золотых правил UI дизайна

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

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

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

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

1. Проектируйте для плотности, а не для пикселей

Значения пикселей в 3 или 4 раза больше значений dp (независимые от плотности экрана пиксели)

Если вы не знаете, плотность – это количество пикселей на один дюйм экрана или PPI. Единица измерения «dp» – это сокращение от выражения «независимый от плотности экрана пиксель», иногда можно встретить сокращение «dip».

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

Причина, по которой мы это делаем, заключается в том, что, если мы создадим актив кнопки, например, с разрешением 200 x 50 dp, он будет отображаться 200 x 50 px на экране 160 ppi и 400 x 100 пикселей на экране 320 ppi (в 2 раза больше первоначального размера актива).

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

Например, размеры экрана iPhone XS Max составляют 414 x 896. Но это не пиксели, а количество точек. В пикселях это 1242 x 2688 px. Учитывая это, при проектировании для iPhone XS Max я бы выбрал размер 414 x 896 точек, а затем масштабировал активы в @ 3x.

2. Используйте шаг 8dp

Зачем проектировать с шагом 8? Ну, этому есть простое объяснение. Причина, по которой мы используем магическое число 8, а не 5, заключается в том, что, если устройство имеет разрешение 1,5x, оно не будет правильно отображать нечетное число.

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

Проектируя с шагом 8 на сетке 8-pt ваши дизайны будут выглядеть согласованными. Больше не надо угадывать интервал, и все идеально согласуется с обозначенными вами интервалами.

Если хотите подробнее узнать об этой теме, прочтите эту статью.

3. Уберите линии и рамки

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

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

4. Обращайте внимание на контраст

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

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

Правила доступности веб-контента (WCAG) требуют контрастности не менее 4,5: 1.

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

5. Используйте знакомые пользователям стандарты

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

Например, если вы создадите кнопку в виде круга и разместите на ней текст «Start Free Trial», то он займет слишком много вертикального пространства.

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

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

6. Используйте цветовой вес, чтобы установить иерархию

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

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

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

7. Старайтесь не использовать больше двух шрифтов

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

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

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

При выборе шрифта найдите семейства, которые имеют различные веса (light, regular, medium, bold, extra bold, а также такие стили, как сжатый, расширенный и курсив). Это даст вам больше возможностей для изучения различных стилей без добавления дополнительных шрифтов.

8. Узнавать знакомое, а не пытаться вспомнить

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

Страницы оформления заказа, почтовые ящики, история поиска, кнопки «Назад» и т. д. являются хорошими примерами.

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

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

«Минимизируйте нагрузку на пользователя, делая объекты, действия и параметры видимыми. Пользователь не должен помнить информацию из одной части диалога в другой. Инструкции по использованию системы должны быть видимыми или легко доступными при необходимости» — Nielson Norman Group

9. Не замедляйте меня

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

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

«Я хочу двигаться быстро» – Рики Бобби

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

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

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

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

«Многочисленные исследования показали, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Эти цифры основаны на конкретных качествах человеческого мозга. Любая анимация короче 100 мс является мгновенной и не распознается вообще. Между тем, анимация продолжительностью более 1 секунды вызовет ощущение задержки и, следовательно, будет скучной для пользователя» — Руководство по правильному использованию анимации в UX

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

10. Меньше значит больше

Дайте знать, если захотите инвестировать в эту революционную идею

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

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

Прости Yahoo, я должен был это сделать

Одна из моих любимых цитат: «Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать». – Антуан де Сент-Экзюпери

Спасибо за прочтение!

Подписывайтесь на автора на Dribbble и Medium.Пишите ему в LinkedIn.

Разница между UX и дизайном пользовательского интерфейса

UX и UI: два термина, которые часто используются как синонимы, но на самом деле означают очень разные вещи. Так в чем именно разница?

Мы все слышали разговоры, прогулки по модным улицам технологических столиц мира, дискуссии о прекрасном «UX» продукта или плохом «UI» веб-сайта. Это секретный язык, который вы никогда не услышите? Эти люди используют сленг только для того, чтобы выглядеть круто?

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

1. В чем разница между UX и UI дизайном?
2. Как взаимодействуют UX-дизайн и UI-дизайн?
3. UX vs. UI-дизайн: какой карьерный путь подходит вам?
4. Почему я написал эту статью?
5. Подведение итогов и дополнительная литература

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

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

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

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

Что такое дизайн пользовательского опыта (UX)?

Дизайн пользовательского опыта — это способ создания продуктов, ориентированный на человека. Дон Норман, ученый-когнитивист и соучредитель консалтинговой компании Nielsen Norman Group Design Consulting, придумал термин «пользовательский опыт» в конце 1990-х годов.Вот как он это описывает:

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

— Дон Норман, когнитивист и архитектор пользовательского опыта

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

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

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

Мы ответим на вопрос «Чем занимается UX дизайнер?» в четвертом разделе. А пока вот что вам нужно знать о UX-дизайне в двух словах:

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

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

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

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

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

Так какой из них правильный? Печальный ответ: ни то, ни другое.

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

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

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

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

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

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

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

Основные различия между UX и UI

Мне нравится использовать аналогию для описания различных частей (цифрового) продукта:

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

Но не волнуйтесь, если вы все еще не уверены! Ты не единственный!

По словам Рахула Варшни, соавтора Foster.fm:

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

Если у вас есть место для еще одной аналогии, Дейн Миллер прекрасно резюмирует взаимосвязь между UX и UI-дизайном:

«UI — это седло, стремена и поводья. UX — это ощущение, что вы можете ездить на лошади ».

— Дейн Миллер, веб-разработчик

Важно понимать, что UX и UI идут рука об руку; одно без другого невозможно.Однако вам не нужно обладать навыками проектирования пользовательского интерфейса, чтобы стать UX-дизайнером, и наоборот — UX и UI представляют собой отдельные роли с отдельными процессами и задачами!

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

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

С нанесенным на карту скелетом продукта дизайнер пользовательского интерфейса воплощает его в жизнь.Дизайнер пользовательского интерфейса рассматривает все визуальные аспекты пути пользователя, включая все отдельные экраны и точки касания, с которыми может столкнуться пользователь; подумайте о нажатии кнопки, прокрутке страницы вниз или пролистывании галереи изображений. В то время как UX-дизайнер составляет карту пути, дизайнер UI фокусируется на всех деталях, которые делают это путешествие возможным. Это не значит, что дизайн пользовательского интерфейса — это внешний вид; Дизайнеры пользовательского интерфейса имеют огромное влияние на то, будет ли продукт доступным и инклюзивным.Они будут задавать такие вопросы, как «Как можно использовать различные цветовые комбинации для создания контраста и улучшения читаемости?» Или «Какие сочетания цветов подходят для лечения дальтонизма?» Вы можете узнать больше о дизайне пользовательского интерфейса для обеспечения доступности здесь.

Надеюсь, теперь вы начинаете понимать, что UX и UI-дизайн — это действительно две очень разные вещи. Подводя итог:

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

2. Как UX-дизайн и UI-дизайн работают вместе?

Мы изучили различия между UX и UI; теперь давайте посмотрим, как они работают вместе. Вы можете задаться вопросом, а не одно ли важнее другого, но на самом деле они оба важны! Позвольте мне процитировать дизайнера и эксперта Хельгу Морено, которая довольно красноречиво выразила это в своей статье «Разрыв между UX и UI дизайном:

».

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

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

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

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

С другой стороны, приходилось ли вам когда-нибудь сталкиваться с действительно красивым веб-сайтом, чтобы обнаружить, что, помимо умопомрачительной анимации и точной цветовой схемы, пользоваться им действительно сложно? Хороший UI никогда не может компенсировать плохой UX; это все равно, что взять красиво украшенный торт, который на самом деле ужасен на вкус, когда вы его откусите.

Итак, когда дело доходит до дизайна продукта, UX и UI дополняют друг друга — и на сегодняшнем конкурентном рынке правильное решение обоих аспектов является абсолютной необходимостью. Независимо от того, выберете ли вы работу UX-дизайнером или UI-дизайнером, полезно понимать и то, и другое; в конце концов, вы неизбежно будете работать вместе. Это подводит нас к следующему разделу…

3. UX vs. UI-дизайн: какой карьерный путь подходит вам?

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

Чем занимается UX дизайнер?

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

Стратегия и содержание:

• Анализ конкурентов
• Анализ клиентов и исследования пользователей
• Структура и стратегия продукта
• Разработка контента

Каркас и прототипирование:

Исполнение и аналитика

• Согласование с дизайнером (ами) пользовательского интерфейса
• Согласование с разработчиками
• Отслеживание целей и интеграция
• Анализ и повторение

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

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

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

Внешний вид продукта:

• Анализ клиентов
• Проектные исследования
• Разработка бренда и графики
• Руководства пользователя и сюжетные линии

Время отклика и интерактивность:

• Прототипирование пользовательского интерфейса
• Интерактивность и анимация
• Адаптация ко всем размерам экрана устройств
• Реализация с разработчиком

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

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

Что лучше платное: UX или UI?

Заработная плата, конечно, определяется многими факторами, но в первую очередь:

• Расположение
• очков опыта
• Промышленность
• Тип проекта / продукта

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

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

Годовой:

• Заработная плата младшего уровня 28 000–33 000 евро
• Средняя зарплата 38 000–45 000 евро
• Зарплата старшего звена 50 000–80 000 евро

В час:

• Младший фрилансер 30–50 евро
• Фрилансер среднего уровня 50–75 евро
• Консультант старшего уровня 75–100 евро

* Цифры основаны на данных о заработной плате в Германии и Центральной Европе.

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

Почему компании часто рекламируют роли UX / UI как единое целое?

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

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

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

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

UX vs. UI: как решить, что лучше?

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

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

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

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

Как вы изучаете навыки UX и UI-дизайна?

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

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

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

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

4. Почему я написал эту статью?

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

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

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

5. Подведение итогов и дополнительная литература

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

,

30 лучших бесплатных руководств по UX / UI дизайну (обновлено за 2019 г.)

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

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

5 лучших руководств по дизайну UX / UI на YouTube

1. Учебное пособие по UX-дизайну для начинающих (№1)

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

Что вы узнаете:

• Основы UX / UI
• Общий процесс проектирования цифрового продукта
• Процесс проектирования, ориентированный на пользователя
• Как принимать решения, связанные с дизайном, и ставить пользователей на первое место

2.Ускоренный курс по дизайну пользовательского интерфейса 2019 для начинающих

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

Что вы узнаете:

• Очень важные основы дизайна, которые вам необходимо понять в первую очередь.
• Как создать дизайн с нуля с помощью приложения для создания прототипов Adobe XD
• Мысли о дизайне UI

3. UX-дизайн против UI-дизайна | Какая разница? Какой мне подходит?

Между UX и UI есть некоторое сходство, но эти две роли совершенно разные по своей природе. Ты знаешь разницу? Этот урок посвящен этому моменту и поможет вам прояснить ситуацию. Что наиболее важно, он разделяет несколько мнений, которых вам следует придерживаться.

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

Что вы узнаете:

• Роли, инструменты и ожидания повседневной жизни для UX и UI рабочих мест
• Полезные ссылки для обучения UX / UI дизайну

4. ИДЕНТИЧНЫЙ ДИЗАЙН: БРЕНДИНГ

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

Что вы узнаете:

• Разница между айдентикой и брендом
• Как определить бренд
• Как создать дизайн и зарисовать

5. Что такое UX-дизайн? Определение дизайна взаимодействия с пользователем и объяснение процесса

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

Что вы узнаете:

• Что такое дизайн пользовательского опыта
• Что такое колесо взаимодействия с пользователем
• Как сделать редизайн сайта
• Как определять личности пользователей и задачи пользователей

6 руководств по дизайну UX / UI с примерами дизайна

6.Дизайн приложений Adobe XD Auto Animate — Урок

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

Что вы узнаете:

• Как строить графики и анимировать числа
• Как начать работу с Adobe XD

7. Учебное пособие по дизайну пользовательского интерфейса — карточка продукта | Кодирование скорости HTML CSS

В этом руководстве по дизайну пользовательского интерфейса вы научитесь создавать карточку продукта с помощью HTML и CSS.Если вас интересует кодирование, это видео идеально вам подойдет. В конце концов, при проектировании полезно знать немного кода.

Что вы узнаете:

• Как разрабатывать и создавать сайты
• Как использовать код в дизайне

8. Как создать шаблон в Photoshop | Учебное пособие по веб-дизайну UI / UX бесплатно

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

Что вы узнаете:

• Как начать работу с Photoshop
• Как создать веб-шаблон

9. Страница входа в систему Учебное пособие по дизайну мобильного приложения | UI / UX дизайн | Как разработать пользовательский интерфейс | # Maxpoint-Hridoy

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

Что вы узнаете:

• Материальное исполнение
• Как сделать дизайн мобильного интерфейса
• Как создать макет приложения в Photoshop CC

10. Учебное пособие по созданию посадочной страницы Adobe XD с помощью unDraw

Это руководство предназначено для изучения UI / UX-дизайна и использования инструмента дизайна Adobe XD.Из этого видео вы узнаете, как создать красочную целевую страницу для маркетинговой компании с иллюстрациями unDraw и Adobe XD.

Что можно узнать:

• Что такое целевая страница
• Как создать лендинг

11. Процесс разработки логотипа от начала до конца

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

5 Руководств по дизайну UX / UI с использованием программного обеспечения для дизайна пользовательского интерфейса

12. Дизайн пользовательского интерфейса в Photoshop — Простое руководство по Photoshop

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

: Photoshop

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

13. Как дублировать объекты по кругу | Учебник для Illustrator

Программное обеспечение для дизайна пользовательского интерфейса: Adobe Illustrator CC 2017

Adobe XD — инструмент для проектирования и создания прототипов. В этом руководстве вы узнаете, как создать пользовательский интерфейс мобильного приложения в Adobe XD. В следующем эпизоде ​​вы узнаете, как анимировать дизайн с помощью приложения ProtoPie. Вы также научитесь разрабатывать адаптивные веб-сайты с мощным взаимодействием без необходимости кодирования.Лучше всего? Все это бесплатно!

14. Дизайн пользовательского интерфейса мобильного приложения в Adobe XD — 1 из 2

Инструмент дизайна пользовательского интерфейса: Adobe XD

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

15. Создание пользовательского интерфейса веб-приложения Nike в эскизе — Учебное пособие по Speed ​​Art

Инструмент дизайна пользовательского интерфейса: Sketch

Sketch — это инструмент для векторного дизайна. В этом руководстве показано, как создать пользовательский интерфейс веб-сайта Nike в приложении Sketch.

16. Видео с использованием инструмента интеллектуального прототипирования — Mockplus

Инструмент дизайна пользовательского интерфейса: Mockplus

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

17. Руководство по UX / UI дизайну для начинающих в PDF

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

Скачать бесплатно

18. Курс дизайна, который прост и эффективен — hack design

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

19. Вопрос, который стоит задать всем UI / UX-дизайнерам: что такое дизайн-мышление?

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

20.Учебник по UI UX-дизайну просто определяет ваш процесс проектирования — «Основы UX: прототипирование» Джеймса Уильямсона

По мнению Джеймса Вильямсона, процесс проектирования состоит из 5 этапов:

• Мозговой штурм
• Планирование проекта
• Прототип
• Тестирование
• Нефтепереработка

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

21. 40 отличных примеров дизайна руководств по UI / UX-дизайну от Forty Agency

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

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

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

23. Пользовательский интерфейс CSS — w3schools

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

Есть также другие бесплатные онлайн-курсы по UX / UI дизайну, которые вы можете изучить.

Скачать бесплатно

Учебное пособие по UX / UI дизайну [Статьи]

24. Начало работы с каркасами

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

25. 5 шагов для успешного веб-дизайна

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

26. Руководство для новичков о том, что такое веб-дизайн и как он работает

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

27. Как создавать прототипы с помощью инструмента для создания прототипов Mockplus

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

28. Полное руководство по тому, что такое каркас — каркасный дизайн веб-сайта

Что такое каркас? Как создать каркас сайта? Какой инструмент для создания каркасов вам нужен? Все о каркасном моделировании будет рассказано в этой статье.

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

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

30. UX-дизайн для мобильных устройств: нижняя навигация

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

При закрытии

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

,

Что такое UI-дизайн? Что такое UX-дизайн? UI vs UX: в чем разница | автор: ✨ They Make Design ✨

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

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

Ramotion

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

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

Фото CareerFoundry

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

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

Проектирование в вакууме приводит к далеко не идеальным результатам.

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

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

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

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

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

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

Tweet by LukeW

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

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

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

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

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

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

Исследования для UX-дизайна

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

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

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

.

Топ-5 агентств дизайна UI / UX в мире — август 2020 г.

FAQ: Работа с агентством UI / UX-дизайна

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

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

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

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

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

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

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

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

Для UX-агентства в США или Западной Европе ставки находятся в диапазоне от 150 до 250 долларов при минимальном участии в проекте не менее 50 000 долларов.Вы можете ожидать еще более высоких ставок в таких местах, как Сан-Франциско и Нью-Йорк. Иногда агентства дизайна UX используют недельные ставки для команды дизайнеров и директора по дизайну. Еженедельные ставки зависят от состава команды и обычно находятся в диапазоне от 7 000 до 15 000 долларов для средней фирмы в Соединенных Штатах.

В: Чем мне нужно поделиться с агентством, чтобы получить предложение по моему проекту дизайна UI UX?
A: Вы должны начать с отправки электронного письма с кратким описанием проекта без излишних подробностей.Убедитесь, что он выглядит интересным и понятным. Это увеличит ваши шансы получить своевременный ответ. Получив ответ, запланируйте быстрый телефонный звонок, чтобы узнать, подходит ли вам агентство.

Будьте готовы предоставить дополнительную информацию:

• Расскажите им о своих целях, KPI и других показателях успеха. Что вы пытаетесь достичь? Это разработка нового мобильного приложения или обновление устаревшего корпоративного продукта?
• Опишите целевую аудиторию вашего продукта.
• Задокументируйте историю вашего продукта, а также то, как изменился пользовательский опыт и почему. Расскажите им о любых проведенных пользовательских тестах и ​​экспериментах.
• Многие агентства будут интересоваться демонстрацией продукта, чтобы лучше понять продукт — его особенности, сильные и слабые стороны, а также возможности для улучшения.
• Создайте демо-счет с некоторыми данными и попросите их создать новую учетную запись, чтобы увидеть первый опыт.
• Соберите любую доступную документацию по существующему UX и UI, например истории пользователей, дорожную карту продукта, исследовательские материалы и другие требования.
• Обеспечьте доступ к вашей аналитике (или экспорту данных) и любым другим инструментам, используемым для сбора поддающихся количественной оценке данных.
• Наконец, создайте краткое изложение проекта, чтобы обобщить проект и ваши ожидания — обзор, цели, требования, бюджет и сроки, рекомендации по предложению. Сделайте это дружественным, потому что агентства ненавидят и высмеивают слишком официальные RFP.

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

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

Компании, которые предпочитают работать с небольшими бутиками UX, делают это по нескольким причинам:

• Более мелкие фирмы менее избалованы крупными клиентами. Они жаждут проектов и делают все, чтобы добиться наилучшего результата.
• У них меньше накладных расходов, потому что им не нужно поддерживать армию менеджеров и другого вспомогательного персонала.
• Они обеспечивают более индивидуальный подход. Вы будете напрямую взаимодействовать с UI / UX дизайнерами и дизайнерами без лишних дополнительных уровней управления.
• Они более охотно интегрируются с вашими собственными разработками или ресурсами по продукту и становятся продолжением дизайна вашей команды.

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

В: Лучше ли работать с местным дизайнерским агентством UI / UX?
A: Короткий ответ — всегда лучше местное. Я не против использования удаленных ресурсов для проекта, но я твердо убежден, что проекты UX-дизайна не могут выполняться на 100% удаленно. Вот почему:

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

В: Какого процесса мне следует ожидать от компании, занимающейся UX-дизайном?
A: Процесс проектирования UI / UX гибок по своей природе и обычно определяется деталями проекта и вашими потребностями. Многие агентства используют процесс, похожий на структуру дизайн-мышления, которая может выглядеть примерно так:

• Discover. Он включает интервью с ключевыми заинтересованными сторонами проекта, чтобы лучше понять их видение и требования, а также передать знания. Некоторые фирмы также будут проводить интервью с вашими пользователями, проводить опросы или проводить другие исследования пользователей. Они проанализируют ваших конкурентов, чтобы понять общие шаблоны UI / UX и лучшие отраслевые практики.
• Цифровая стратегия и дизайн. Процесс проектирования начинается с определения информационной архитектуры, изучения UX, визуального дизайна и идей брендинга, а также разработки контентной стратегии.Результатом является концепция дизайна UI / UX, которая охватывает критические аспекты будущего взаимодействия с пользователем и определяет будущий подход к дизайну. В корпоративном мире довольно популярен термин цифровая трансформация, который обычно означает модернизацию устаревшего программного решения.
• Выполнить. Как только концепция дизайна определена, начинается производство дизайна пользовательского интерфейса и пользовательского интерфейса. Он включает в себя отображение основных пользовательских потоков, создание каркасов, а затем разработку пользовательского интерфейса (UI) мобильного приложения или веб-сайта.Компетентное UX-агентство всегда будет вовлекать пользователей и заинтересованные стороны в проект на протяжении всего процесса разработки продукта, проводя непрерывные тесты с использованием интерактивных прототипов, а затем учитывая эти отзывы. Часто конечный результат — это всеобъемлющее руководство по стилю, которое определяет все аспекты дизайна UI / UX и брендинга. Он также служит практическим руководством для непрерывной разработки продукта.

В: Где я могу найти в Интернете другие компании по UX / UI дизайну?
A: Существует множество списков лучших дизайнерских агентств UI / UX, и вы можете легко проводить дни, просто исследуя их.Хотя большинство из них — мусор, есть один, которому вы можете доверять, под названием Clutch (и его публикация The Manifest). Они проводят телефонные интервью с бывшими клиентами агентств и проводят отраслевые исследования. Вам также следует посетить различные дизайнерские сообщества, такие как Dribbble или Behance.

.