Ui и ux: Что такое UX/UI-дизайн и как попасть в эти профессии — статьи на Skillbox

Содержание

Что такое UX/UI-дизайн и как попасть в эти профессии


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

UX (англ. user experience) значит «опыт пользователя». Если брать в целом, то это понятие пронизывает весь опыт, который получает пользователь при взаимодействии с приложением, сайтом или командой техподдержки компании.

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

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

Если вы чувствуете, что в UI/UX вам нужно больше практики, то можете попробовать себя в роли дизайнера интерфейсов на курсе «UI/UX-дизайн», здесь вы вместе с наставником шагам за шагом спроектировать и задизайнить первый проект по ТЗ от клиента. А мы пока продолжим полный обзор.

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

Графический интерфейс Adobe Photoshop 1. 0 в 1990

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

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

(с) Дональд Норман — основатель признанной в области дизайна компании Nielsen Norman Group, бывший вице-президент Apple, профессор информатики Северо-Западного университета. Автор 11 книг по дизайну.

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

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

UX-дизайнер (англ. user experience designer) — это проектировщик интерфейсов и сервисов, который вникает в потребности пользователей, строит логические схемы работы интерфейса, тестирует прототипы на целевой аудитории и составляет техническое задание для UI-дизайнера.

UX-дизайнер — это инженер-конструктор, который изучает опыт пользователей прямо в поле: вникает в аналитику, проектирует схемы потоков, прототипирует варианты решения задачи и создает техническое задание для ui-дизайнера.

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

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

UI (англ. user interface) переводится как «пользовательский интерфейс». UI – охватывает не только графический интерфейс, а еще и тактильный, голосовой или звуковой.

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

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

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

UI-дизайнер (англ. user interface designer) — это графический дизайнер адаптировавшийся к диджитал. Он легко воплотит интерфейс продукта со всеми нюансами как к пользовательскому опыту, так и эстетике и уникальному образу бренда (создаст фирменный стиль).

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

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

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

Рекомендации по проектированию интерфейсов. Шнайдерман (1987 год) и Плейзент (2009 год):

  • Стремитесь к единообразию — элементы дизайна должны легко узнаваться, даже если пользователь встретил ваш сайт впервые. Создавайте интерфейсы интуитивно понятными. Например, не красьте кнопку запуска в красный, если на большинстве сайтов она зеленая.
  • Обеспечьте одинаковое удобство в использовании — к примеру в приложении и на сайте элементы интерфейса — меню и списки — должны срабатывать одинаково на каждой странице.
  • Предусмотрите информативную ответную реакцию — современный интерфейс реагирует на действия пользователя моментально. Система должна наглядно показывать на экране актуальный статус: ожидается ли оплата, взял ли менеджер заявку в работу, доставлено ли сообщение.
  • Прорабатывайте замкнутые потоки решения задач — пользователи должны четко понимать, когда они запустили некий процесс и когда они его завершили. Этот принцип хорош в сочетании с наглядными статусами.
  • Предотвращайте ошибки — идеальный интерфейс состоит из туннелей по которым пользователи могут моментально долетать до цели. Стремитесь к точке, когда пользователи даже не смогут ошибиться на пути к цели. Даже простые шаги и статусы порой могут очень сильно помочь.
  • Обеспечивайте возможность легкой отмены действия — какой бы ни был продуманный интерфейс, все пользователи — люди, они переживают и ошибаются по разным причинам. Приготовьте сообщения с заботой на случай, если вдруг что-то пошло не по плану. Или просто дайте возможность гарантированной отмены. Такой подход поможет уберечь внимание, деньги, время и лояльность клиентов.
  • Пусть пользователи чувствуют, что контроль в их руках — хороший интерфейс как ложка в руке. Всегда знаешь, чего ждать. Пользователи понимают, что интерфейс — это машина и поэтому ожидают полной управляемости.
  • Минимизируйте нагрузку на кратковременную память — создайте ощущение “все под рукой”. Тогда пользователи не будут чувствовать, что они что-то потеряли и у них не будет повода беспокоиться, что ценную информацию или результаты работы нужно обязательно куда-то сохранить или запомнить.

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

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

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

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

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

Как стать UX/UI-дизайнером

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

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

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

Что почитать и посмотреть о UX/UI-дизайне

Вывод и рекомендация

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

9 шагов как стать UX/UI дизайнером, если нет образования и опыта работы. | by Sati Taschiba

= Dare to dream BIG ⭐=

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

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

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

По специальности я графический дизайнер и работала с такими компаниями как Montblanc, Dunhill, Saks Fifth Avenue и многие другие. Итого у меня в общем около 10 лет опыта работы в сфере дизайна. Спустя 7 лет работы графическим дизайнером я решила переквалифицироваться в дизайнера с уклоном на web-дизайн, говорю просто о вебе, так как в то время не было таких делений как UX, UI и другие. (Причиной смены сферы деятельности был интерес к новому направлению в дизайне, большей свободе выражения своих идей и как бы это не звучало типично- больший спрос на рынке и большие перспективы в долгосрочном плане).

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

P.S: Если вам интересно как я устроилась на работу в Германии и мои наблюдения о жизни и работе дизайнера в Берлине, добро пожаловать на мой канал в Youtube — Design Lead.

Ниже скидываю свое портфолио👇.

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

1. Поймите направления в дизайне

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

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

2. Изучите инструменты для работы

Я думаю, что далее объяснять не нужно. Как работать, если еще не освоили нужной программы? Вам повезло, если вы новичок, то вам не прийдется переучиваться с Adobe Photoshop и Illustrator, переходите сразу на Sketch или Figma. Почитайте в чем их различия, подумайте, что вы бы хотели изучить. Лайфхак от меня, если уже выбрали то направление в дизайне, по которому хотите идти, зайдите не поленитесь на Headhunter, Linkedin или любую другую платформу по поиску работ и посмотрите, что ищут работодатели, какие программы вы должны знать и пляшите уже от этой информации.

Здесь ниже свежие программы, которые могут пригодиться в работе:

  • Sketch для дизайна интерфейса
  • Figma для дизайна интерфейса с возможностью совместной работы
  • Balsamiq для создания макетов
  • Adobe XD для дизайна интерфейса, создания прототипов
  • Invision App для создания прототипов и совместной работы
  • RedPen для совместной работы

3. Начинайте обращать внимание на дизайн

До того как стать веб-дизайнером я совершенно не обращала внимание на структуру и содержание сайтов и мобильных приложений, не видела используемые цвета и шрифты, не замечала составляющие. Если вы решили стать дизайнером интерфейсов начинайте обращать внимание на всё и задавать себе вопросы: а почему они поставили логотип сюда, а не сюда? А почему кнопка одна и в конце, а не в начале? Изучите из чего обычно состоит сайт? (я говорю про элементарные вещи как header, body и footer). Задавая себе вопросы и отвечая на них, прокручивая варианты в голове, вы начнете не просто использовать сайт, а оценивать его с профессиональной точки зрения.

4. Окружите себя дизайном

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

  • Behance платформа-портфолио
  • Dribbble платформа-портфолио
  • Awwwards платформа-присуждающая звание лучших в веб-дизайне

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

5. Смотрите и повторяйте за другими

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

6. Найдите менторов и станьте менторами

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

  • Yury Vetrov дизайн директор @ Mail.Ru. Пишет о UX дизайне, создатель ежемесячного дизайн-дайджеста (можно найти в фб), ежедневно публикует тучу новых штук и новинок в дизайне
  • Tobias van Schneider был дизайнером Spotify. Еще делает кучу интересных вещей, пишет свой блог (где интересно почитать рубрики), даже кроссовки шьет
  • Alexander Kirov для мотивации почитайте его статьи про то как он нашел работу и уехал в США
  • Julie Zhuo вице-президент продукт дизайна facebook. Пишет свой блог о дизайне и о жизни.

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

7. Пройдите курсы

Многие задают вопрос нужны ли курсы? Есть разные типы личностей, кому-то интереснее и удобнее самому дома копаться в новой профессии, смотреть видео-ролики на ютубе, читать книжки и статьи. А кому-то нужно дизайн окружение и атмосфера. Если вы второй тип плюс у вас есть финансовые средства и время на прохождение курсов, то я скажу- да! Пройдите курсы! — это поможет. Только выбирайте курсы основательно, просмотрите комментарии и отзывы, посмотрите насколько популярна школа. Вот например список, что было в последнее время на слуху (сама эти курсы я НЕ проходила):

8. Читайте

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

Напишу лишь парочку книг, что меня вдохновили и возможно и вам они дадут ускорение:

“Выйди из зоны комфорта. Измени свою жизнь. 21 метод повышения личной эффективности” — Брайан Трейси

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

“Сожги свое портфолио! То, чему не учат в дизайнерских школах” — Майкл Джанда

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

“Кради как художник. 10 уроков творческого самовыражения” — Остин Клеон

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

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

“Покажи свою работу! 10 способов сделать так, чтобы тебя заметили” — Остин Клеон

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

В чем отличие UI от UX дизайна

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

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

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

Что же такое UX

Я пользователь! Я так вижу! или UX.

Сам термин расшифровывается как User Experience — что дословно переводится как “Пользовательский опыт”.

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

Термин “Пользовательский опыт” ввел в индустрию в 1995 году Дональд Норман. Обсуждая свое время работы в Apple, он рассказал, как его команда стремилась сформировать интерфейс не только программного обеспечения, но и всего, что создавало этот опыт (имеются в виду эмоции):

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

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

Что же такое UX-дизайн на самом деле

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

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

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

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

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

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

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

Что такое UI или «Пользовательский интерфейс»

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

UI — это процесс визуализации прототипа, который разработали на основе поведения пользователя и исследования целевой аудитории (на этапе проектирования UX).

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

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

Зачем тогда разграничили UX и UI?

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

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

Кратко: в чем же отличие UI и UX?

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

сходства, различия и оценка эффективности


В сфере дизайна цифровых продуктов выделяют две формы: пользовательский опыт (UX – user eXperience) и пользовательский интерфейс (UI – user interface). Под UX зачастую понимают только дизайн, красивую картинку, хотя на практике это “зона ответственности” UI.

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


О чём поговорим:

  • Принципы UX/UI

  • Сходства и различия UX и UI

  • Какие тренды существуют в UX/UI

  • Задачи UX

  • Как оценить эффективность UX

  • Зоны ответственности UX и UI

  • Аудит UX: пример из практики


Хотите разобраться в этом поподробнее? Тогда читайте дальше!

Основы UX/UI


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

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

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

Сходства и различия UX и UI


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

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


Тренды


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

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

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

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

Задачи UX


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

  • Дать пользователю ощущение уникальности продукта;

  • Побудить пользователя изучать продукт и пользоваться контентом;

  • Убедить нового пользователя “попробовать” продукт;

  • Побудить пользователя продолжать применять продукт;


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

Какую пользу UX приносит бизнесу


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

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


Таким образом, UX действительно помогает бизнесу заработать:

  • Увеличить конверсию

  • Повысить продажи

  • Повысить лояльность пользователей


Кроме того, тщательная работа с UX способна сделать продукт понятнее, а также сэкономить на его обслуживании:

  • Снизить расходы на поддержку

  • Снизить недовольство пользователей (и даже избежать судебных издержек)

  • Снизить затраты на привлечение пользователей

UX может навредить бизнесу?


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

HEART: как оценить эффективность UX


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

  • H — happiness (счастье пользователя)

  • E — engagement (вовлеченность)

  • A — adoption (принятие)

  • R — retention (удержание)

  • T — task (успешность достижения цели)

Метрики эффективности UX: примеры


Метрики счастья пользователя:

  • Рост числа положительных отзывов и сокращение отрицательных

  • Рост числа сделок, покупок

  • Удовлетворенность (net promoter score)


Метрики вовлечения:

  • Число посещений в неделю, повторных визитов

  • Количество пользователей, которые нажимают кнопку “Поделиться”

  • Число фотографий, загруженных одним пользователем


Метрики принятия:

  • Новые подписки, регистрации

  • Покупки, сделанные новыми пользователями


Метрики удержания:

  • Повторные покупки

  • Продление подписки, обновление до последней версии

  • Число активных пользователей


Метрики успешности выполнения задач:

  • Время на выполнение задачи (например, сколько времени уходит на совершение покупки)

  • Сокращение числа ошибок пользователей

  • Нашел ли пользователь то, что искал

Зоны ответственности UX и UI


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

  • аналитик-проектировщик — готовит прототип системы

  • бизнес-аналитик и системный аналитик — описывают бизнес и системные требования

  • UX эксперт — анализирует потребности всех стэкхолдеров и проверяет гипотезы идей

  • UI дизайнер — готовит макеты

  • представитель бизнеса — отвечает за соответствие результаты потребностям бизнеса


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

За что отвечает команда UX

  • Коммуникации — способность объяснять и интерпретировать, выступать посредником между командой разработчика и заказчиком.

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

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

  • Работа в команде. Навыки продуктивного общения обязательны. Может ли специалист доступно объяснить свою идею? А помочь в этом другому члену команды — программисту, директору, будущим пользователям продукта?

  • Проектирование «сценария взаимодействия» (User-Flow) — последовательности макетов, по которым строится путь пользователя к цели.

  • Тестирование UX/UI. Проверка корректности работы продукта. Это касается не только дизайна интерфейса UX/UI, но и всего customer journey — от первого соприкосновения с продуктом до покупки.

  • Аналитика. Эксперт на основе аналитических данных определяет, как пользователи применяют продукт, что им нравится и не нравится.

  • UX writing (копирайтинг). Создание подписей, сценариев диалогов и т.п. В большинстве продуктов текст является основой контента.

За что отвечает дизайнер UI

  • Сборка макетов (Wireframe) — это каркас интерфейса, состоящий из линий, прямоугольников и фигур.

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

  • Прототипирование. Создание прототипа — простой способ увидеть, как всё будет работать.

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

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

Исследование юзабилити UX/UI: пример из практики


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

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

Мы в своей практике часто работаем с решениями для дистанционного банковского обслуживания (ДБО). Рассмотрим на примере банковского мобильного приложения, как аудит UX помогает наметить вектор развития продукта.

Аудит банковского продукта


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

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


Как мы работаем с гипотезами:

  1. UX/UI анализ продукта начинается с выявления проблем. Для этого мы анализируем поведение пользователей и находим “узкие места” при взаимодействии с приложением.В данном случае мы опросили тех специалистов, которые являются ключевыми пользователями приложения – в первую очередь это бухгалтеры, юристы и экономисты. Выяснилось, что больше всего времени они тратят на работу с бумагами, проверку данных и перевод информации (реквизитов) из финансовых документов в электронный вид. При этом случаются ошибки: например, пользователь может ошибиться при вводе номера расчетного счета.
  2. Далее исследуем, действительно ли существует эта проблема и насколько она важна.

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

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

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


С новым ДБО наш партнер вошел в ТОП5 по версии Markswebb: мобильный банк занял 4 место среди лучших банков для малого бизнеса (2017 год), а онлайн-банк – 2 место в рейтинге интернет-банков для индивидуальных предпринимателей (2018 год). Подробнее об аудите банковского продукта мы рассказывали ранее в нашем блоге.

Подводя итоги


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

Приглашаем узнать больше о наших продуктах в разделе “Портфолио”: 

Как сделать интерфейс удобным? UI/UX исследования

Рассмотрим основные задачи специалиста в области UX дизайна:

1. Разработка структуры и стратегии работы программного продукта.

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

2.
Разработка средств коммуникации в дизайн-процессе.

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

  • Варфреймы (Wireframes)

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

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

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

Как сотруднчают UX и UI дизайнеры?

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

UI- UX-дизайн: в чём разница?

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

Читайте дальше, чтобы узнать, что означают термины «UX» и «UI», чем занимаются UX-дизайнер и UI-дизайнер, в чём различия между их деятельностью.

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

UX (от англ. user experience) — «пользовательский опыт». Эта область отвечает за разработку интерфейсов, которые ориентированы на пользователя. Для UX-дизайнера важны функциональность, адаптивность, какие впечатления вызывают у пользователя взаимодействие с сайтом/приложением, насколько легко посетителю достигнуть своих задач на ресурсе. Например, насколько легко оформить заказ при совершении покупок в Интернете? Облегчает ли приложение онлайн-банкинга управление деньгами? 

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

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

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

Цель UI-дизайна — визуально направлять пользователя по интерфейсу продукта.

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

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

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

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

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

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

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

UX vs UI-дизайнер: кто и чем занимается

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

Вот краткий пример типичных задач и обязанностей UX-дизайнера и UI-дизайнера.

UX-дизайнер UI-дизайнер
1. Анализ конкурентов.
2. Анализ целевой аудитории.
3. Структура сайта/приложения.
4. Разработка контента.
5. Прототипирование.
6. Тестирование.
7. Планирование развития.
8. Исполнение и аналитика.
9. Согласование с UI-дизайнером.
10. Согласование с разработчиком.
11. Отслеживание выполнения поставленных перед проектом целей.
1. Анализ клиентов.
2. Дизайн-исследования.
3. Брендинг.
4. Графическая разработка.
5. Интерактивность и анимация.
6. Адаптация под все размеры экрана устройства.
7. Реализация с разработчиком.

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


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

0
0
vote

Оцените статью

Что такое UX и чем отличается от UI?

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


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

Что такое UX?


Под этой аббревиатурой скрывается понятие user experience (англ. User eXperience, UX), что расшифровывается как «опыт пользователя». Термин часто используют как синоним юзабилити, потому что задача UX проектирования — сделать платформу удобной. В основе проектирования стратегии и работы с этим параметром лежит идея тесного взаимодействия с посетителями: необходимо точно определить их проблемы, понять пользовательские привычки и найти такое решение, чтобы им было комфортно находиться на сайте.


Разработка UX строится на нескольких методиках:

  • изучение потенциальных клиентов или профилирование;
  • анализ конкурентов;
  • исследование поведенческих факторов;
  • улучшение архитектуры ресурса;
  • проработка пользовательских сценариев;
  • организация контента (тексты, графика и функции).


Цель процесса — за несколько секунд дать пользователю то, за чем он пришёл. Задачи на этом этапе похожи на работу над маркетинговой стратегией. Главную роль играет анализ целевой аудитории, а после этого – создание продукта.

Отличия UI


Эстетика — не менее важный элемент качественного дизайна. Пользователь не думает о том, что спрятано за оболочкой – для него это и есть продукт. Именно оформление интерфейса подразумевается под термином «user interface». Когда дизайнеры говорят о UI, речь идёт о внешнем виде продукта: как выглядят шрифты, какая анимация уместна, какие цвета кнопок использовать и т. д.


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

Как определить причину плохой конверсии


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


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


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

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

Заказать

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

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

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

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

Содержание

Что такое UI?

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

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

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

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

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

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

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

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

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

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

Что такое UX?

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

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

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

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

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

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

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

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

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

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

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

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

>> Чтение по теме: Что такое UX Research?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 больших различия между UX и UI дизайном

Споры по поводу определений UX и UI ведутся почти столько же, сколько существуют эти термины. UX означает User Experience, а UI — пользовательский интерфейс.

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

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

Перенесемся в 90-е, когда Дон Норман помог ввести термин User Experience , работая в Apple.На конференции UX в Сан-Франциско он объясняет в видеоинтервью, что UX — это весь опыт взаимодействия пользователя с продуктом, компанией и услугами. Все, от того, как воспринимается обслуживание клиентов, до того, насколько легко продукт выходит из упаковки.

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

Одна школа мысли разделяет термины следующим образом:

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

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

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

Вот то, о чем можно договориться без особых разногласий:

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

Насколько это важно? Это может иметь большое значение.

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

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

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

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

Краткое содержание курса для UX и UI-дизайна Программы в Career Foundry иллюстрируют ключевые обязанности каждой должности.

Основные обязанности UX Designer

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

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

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

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

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

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

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

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

Хотите узнать больше?

Если вас интересует пересечение UX и UI-дизайна, подумайте о том, чтобы пройти онлайн-курс UI Design Patterns for Succesful Software или в качестве альтернативы Design Thinking: The Beginner’s Guide. Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, вы можете пройти онлайн-курс по пользовательскому опыту (или другой теме дизайна).Удачи вам в обучении!

(Lead image: Depositphotos — партнерская ссылка)

Полное руководство по различиям между UI и UX дизайном | Эми Смит

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

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

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

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

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

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

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

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

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

Дизайн пользовательского интерфейса и дизайн пользовательского интерфейса всегда пересекаются, но действительно ли вы четко представляете их различия? Проще говоря, UX-дизайн относится к дизайну пользовательского опыта, а UI-дизайн — к дизайну пользовательского интерфейса.Они тесно связаны в дизайне продуктов, но выполняют разные роли.

С точки зрения функциональности, UI — это то, как все выглядит, а UX — это то, как все работает. UX — это процесс, а UI — результат. Но люди легко путают эти два понятия, поскольку они склонны иметь симбиотические отношения. По словам Рахула Варшни, соавтора Foster.fm:

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

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

Прототип быстрее, умнее и проще с Mockplus

Начните работу БЕСПЛАТНО

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

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

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

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

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

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

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

Mockplus с простым и прозрачным управлением, Balsamiq со стилем эскиза и Axure с широким набором функций.Более того, использование Mockplus дает уникальное преимущество; у него есть 8 способов тестирования и предварительного просмотра проектов. Это особенно полезно во время тестирования.

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

-SteveJobs

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

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

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

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

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

Career Foundry иллюстрирует ключевые обязанности каждой должности.

  1. Контент / стратегия: анализ клиентов, анализ конкурентов, структура продукта / стратегия
  2. Прототипирование и каркасное построение: прототипирование, тестирование / итерация, разработка, планирование, каркасное построение
  3. Аналитика и выполнение: координация с разработчиками, координация с пользовательским интерфейсом Дизайнер (ы), анализ и итерация, отслеживание целей и интеграция

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

Внешний вид: Разработка брендов и графики, Руководства пользователя / Сюжетная линия, Анализ клиентов, Исследования дизайна

Отзывчивость и интерактивность: Адаптация ко всем размерам экрана устройств, интерактивность и анимация, реализация с разработчиком, прототипирование пользовательского интерфейса, Реализация с помощью Developer

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

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

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

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

По данным Glassdoor, средняя базовая зарплата дизайнера пользовательского интерфейса в США составляет 80 450 долларов в год, или 90 236 долларов в год, в то время как средняя базовая зарплата дизайнера пользовательского интерфейса (90 235 долларов США) составляет 90 697 долларов.

Для получения дополнительной информации, вот исследование зарплат UI / UX дизайнеров со всего мира.

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

Освойте основы визуализации: как стать UI / UX дизайнером-самоучкой | by Dawid Tomczyk

Имейте в виду, что есть много разных способов попасть в эту область — не существует единого / простого пути, по которому все идут! Вот как я начал, и ваш путь становления UI / UX, вероятно, будет совершенно другим.Тем не менее, я хотел бы выделить несколько моментов, которые могут быть полезны на вашем пути становления UI / UX дизайнером.

1. Освоить основы визуального и веб-дизайна

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

1.

Цвет

Отличная серия из трех частей по теории цвета — словарь цвета, основы и психология цветов.
Теория цвета для дизайнеров

2. Системы сеток

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

3.Композиция и баланс

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

4. Типография

Better Web Type — это простой в использовании курс электронной почты по веб-типографии для веб-дизайнеров и веб-разработчиков . Создано Matej Latin
Запишитесь на бесплатный курс типографики

5. Contrast

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

2. Понимание процесса проектирования UX

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

Что такое дизайн-мышление?

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

Дизайн-мышление — это гибкий и повторяющийся процесс

1. Подчеркните

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

2. Определение

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

3. Идея

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

4. Прототип

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

5. Тест

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

Дизайн-мышление — это гибкий и итеративный процесс. — это означает, что процесс не должен следовать этапам в последовательном последовательном порядке — 5 этапов следует понимать как разные режимы, которые вносят вклад в проект. Я очень кратко описал эти шаги, поэтому, если вам нужно узнать больше о каждом конкретном шаге, посетите сайт www.interaction-design.org

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

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

Ознакомьтесь с шаблонами проектирования UI / UX

Вам необходимо познакомиться с шаблонами проектирования UI / UX и с какими конкретными проблемами они решают.

pttrns.com Отличная коллекция шаблонов дизайна для мобильных устройств

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

Я составил список лучших мест, где можно найти шаблоны дизайна в сети:

Копируйте лучших дизайнеров

Нет ничего лучше, чем учиться у лучших и более опытных дизайнеров. Не у всех есть наставник или кто-то, помогающий в изучении UI / UX-дизайна, поэтому я хотел бы поделиться с вами очень эффективным методом, который поможет вам улучшить свои визуальные навыки самостоятельно. Как начать? Вам нужно зайти на Dribbble, Behance, Pinterest (или любой другой веб-сайт, где вы можете найти хорошие дизайны) и буквально начать копировать ведущих дизайнеров .Хотя не следует просто слепо и копировать эти дизайны, вам нужно внимательно изучить их и обратить пристальное внимание на следующее:

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

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

«Лучший и самый быстрый способ изучить дизайн, на который можно смотреть и подражать более опытным и опытным дизайнерам»

Приложение для мероприятий Якуба Анталика

Важны детали

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

«Дьявол кроется в деталях»

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

Вот мои любимые сайты для вдохновения:

  • behavior.net Откройте для себя последние работы из лучших онлайн-портфолио творческих профессионалов из разных отраслей.
  • dribbble.com Сообщество дизайнеров, делящихся своими работами.
  • Uplabs курирует лучшие идеи в области дизайна и разработки,
  • awwwards.com Веб-сайт наград, поощряющий дизайнерские таланты.
  • uimovement.com Лучшее вдохновение для дизайна пользовательского интерфейса, каждый день.

4. Работа над фальшивыми / обучающими проектами

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

Roxane5.Изучите инструменты, связанные с ui / ux

Несколько лет назад, когда я начал заниматься дизайном UI / UX, на рынке не было так много инструментов дизайна — у дизайнеров не было большого выбора, и они начали использовать Adobe Photoshop в качестве основного интерфейса. Инструмент UX-дизайна (в том числе и я). Adobe Photoshop как программное обеспечение никогда не создавалось для разработки веб-сайтов или приложений. В настоящее время на рынке существует масса отличных и гораздо более эффективных инструментов дизайна UI / UX — хорошая новость в том, что вам не нужно изучать их все.Просто попробуйте несколько из них, а затем придерживайтесь одного / двух и овладейте ими. Приложение

Sketch — один из самых популярных инструментов дизайна UI / UX (MAC)

Я уже давно использую приложение Sketch , поэтому, если вы пользователь Mac, я настоятельно рекомендую этот инструмент. Если вы работаете в Windows, попробуйте Adobe XD. Вот список программного обеспечения, которое вы должны попробовать:

  • Sketch — ведущий инструмент дизайна UI / UX (для пользователей Mac)
  • Adobe XD для дизайна интерфейсов и прототипирования
  • Framer — Инструмент интерактивного дизайна и прототипирования
  • Figma для совместного проектирования интерфейсов
  • UXPin — для дизайна, прототипирования, совместной работы (приложение на основе веб-браузера)
  • Invision App для создания прототипов и совместной работы

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

Sketch вместе — один из лучших каналов YouTube для изучения приложения Sketch Принципы для Mac Учебники Дэниела Хупера UPin Tutorials6. Инвестируйте в свои знания

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

Вот список моих любимых веб-сайтов и блогов, связанных с дизайном:

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

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

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

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

Давайте посмотрим, как эти две области различаются, и сформируем проект.

Определение UX и UI

Возможно, вы слышали, что люди используют UX и UI как синонимы, но это не одно и то же.

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

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

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

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

Питер Морвилл, дизайнер и информационный архитектор, разработал соты взаимодействия с пользователем, чтобы проиллюстрировать 7 аспектов дизайна взаимодействия с пользователем:

Соты взаимодействия с пользователем.Источник изображения: Semantic Studios.

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

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

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

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

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

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

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

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

Image by Webflow.

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

Ключевые различия между UX и UI

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

UX ищет решения, а пользовательский интерфейс определяет внешний вид.

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

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

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

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

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

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

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

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

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

UX фокусируется на пути пользователя, а UI — на снимках продукта.

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

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

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

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

UX и UI дополняют друг друга

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

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

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

UX и UI дизайнеры имеют разные роли

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

UX-дизайнеры за работой

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

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

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

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

UI-дизайнеры за работой

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

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

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

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

Рекомендуется ли смешанная роль дизайнера UX / UI?

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

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

UX и UI живут в гармонии

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

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

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

Никогда не называйте себя UI-дизайнером: UI — это UX

UI и UX — два очень распространенных термина дизайна; однако эти термины часто используются в неправильном контексте.

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

Разве пользовательский интерфейс не является частью UX?

Почему «UI» стало таким модным словом?

UX vs.UI

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

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

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

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

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

Назову несколько:

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

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

На самом деле мы даже не проектируем. Мы занимаемся искусством.

Пользовательский опыт и пользовательский интерфейс. (Иллюстрация Шейна Раунса)

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

Почему не следует «Дизайн для лайков»

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

Введите Dribbble или, скорее, то, что известно как «эффект Dribbble».

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

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

Что в этом плохого?

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

Давайте посмотрим на некоторые неудачи дизайна на Dribbble.

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

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

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

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

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

Откуда взялась эта одержимость визуальным дизайном?

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

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

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

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

Принципы дизайна UX

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

  • Скорость
    • Приложение или веб-сайт работают медленно (или кажутся медленными)?
    • Требуется ли от пользователя щелкать / прокручивать / взаимодействовать чаще, чем необходимо?
    • Слишком много отвлекающих факторов и / или решений, которые нужно принять?
    • Есть ли трение, которое останавливает / задерживает пользователя в получении желаемого?
  • Интуиция
    • Очевидно ли для пользователя, что им делать дальше?
    • Можем ли мы определить, чего хочет пользователь, и соответственно отображать контент?
  • Доступность
    • Может ли пользователь получить доступ к пользовательскому интерфейсу независимо от возраста или инвалидности?
    • Задумывались ли мы о множестве различных типов дальтонизма?
  • Удобство использования
    • Соответствуют ли размеры ответвлений на мобильных устройствах?
    • Легко ли доступны мишени для больших пальцев?
    • Адаптивный ли дизайн? Адаптируется ли он ко всем устройствам?

Сьюзан Вайншенк и Дин Баркер (Weinschenk and Barker 2000) исследовали рекомендации и эвристики юзабилити из многих источников (включая Nielsen, Apple и Microsoft) и создали этот набор из 20 эвристик юзабилити для проверки.

Визуальный дизайн по-прежнему важен

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

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

  • Скорость
    • Может ли пользователь быстро, определить, где ему нужно смотреть и взаимодействовать, используя контраст , цвет и интервал в качестве визуальных подсказок?
    • Отображается ли пользовательский интерфейс / контент в верхней части страницы немедленно, объясняет ли пользователь, что нужно сделать на указанном экране, и имеет ли четкий призыв к действию?
  • Доступность
    • Создают ли выбранные цвета достаточный контраст?
    • Достаточно ли велик пользовательский интерфейс для тех, кто плохо видит?
  • Удобство использования
    • Существует ли визуальная иерархия, иллюстрирующая важность каждого элемента?
    • Выражаем ли мы визуально доверие и безопасность, когда это применимо?
    • Реализуем ли мы микровзаимодействия, которые кажутся естественными и разъясняют действия, предпринимаемые пользователем?

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

Amazon заработал 1,9 миллиарда долларов за последние три месяца 2017 года, но вы не догадались бы об этом по дизайну пользовательского интерфейса.

Дизайн UX / UI должен основываться на данных

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

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

Заключение

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

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

• • •

Дополнительная литература в блоге Toptal Design:

UI против UX — исследуйте основные различия

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

Итак, что конкретно делает каждая роль? Какие отличия? И действительно ли одно важнее другого? Читай дальше что бы узнать.

Что такое UX?

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

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

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

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

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

Что такое UI?

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

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

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

Один важнее другого?

Короткий ответ: нет.

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

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

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

• • •

Дополнительная литература в блоге Toptal Design:

Понимание основ

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

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

Что вы подразумеваете под UX-дизайном?

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

Добавить комментарий

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