UX/UI – что это? Разбираемся в терминах

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

UX	UI
Аналитика и исследование пользователей: Персонажи Сценарии использования продукта Customer Journey Map Карта эмпатии А/B-тестирование Прототипирование: На бумаге В специальных программах —  Axure Pro, WireframeSketcher, SketchFlow В графических программах — Photoshop, Illustrator, InDesign	Интерфейс сайта и его составляющие: Кнопки Иконки Поп-апы Таблицы Чекбоксы Меню Предупреждения (алерты) Ярлыки и лейблы Формы с полями ввода Уведомления Переключатели Галереи Подсказки Пагинация Вкладки и хлебные крошки Прогресс-бары

В UX все определяют аналитика и прототипы, а в UI – базовые правила юзабилити и UX. В аналитике и сборе данных UX сходен с DDD.

Тренды

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

Упрощение визуальной части интерфейсов

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

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

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

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

Появление множества специализированных инструментов для веб-дизайна: Sketch, Figma, Readymag, Framer и другие. Это облегчило и ускорило работу дизайнерам.

Figma в действии

Вывод

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

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

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

---

Материалы по теме:

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 правил («Вам не обязательно быть гением», «Делитесь чем-то небольшим каждый день»), которые помогут вам стать смелым, продуктивным, открытым и известным.

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

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

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

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

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

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

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

UI, UX: Кто чем занимается? Руководство дизайнера по IT-индустрии.

ПЛЮС: Как Apple, Facebook, Google и другие тяжеловесы из мира высоких технологий характеризуют свою дизайнерскую работу.

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

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

«У этого вопроса нет единственного правильного ответа.»

Давайте попытаемся разобраться что на самом деле это означает в ИТ-индустрии.

UX дизайнер

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

«Определять модели взаимодействия, поток задач пользователя и специфику интерфейса. Разрабатывать сценарии, end-to-end взаимодействия, модели взаимодействия, разработка графического интерфейса пользователя. Работа с нашим креативным директором и графическим дизайнером, чтобы оъединить визуальную сторону Twitter с его функциональными особенностями. Разрабатывать и поддерживать, вайрфреймы, мокапы и спецификации по мере необходимости».

Описание должности UX дизайнера в Twitter.

Пример экрана приложения, разработанного UX дизайнером

Источник: Kitchenware Pro Kit Wireframe от Neway Lau на Dribbble.

Задача: Вайрфреймы экранов, раскадровки, план сайта

Инструменты: Photoshop, Sketch, Illustrator, Fireworks, InVision

Вы скорее всего слышали от него: «Страницу „Спасибо“ пользователь должен увидеть после окончания регистрации».

UI дизайнер

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

«Концепция и реализация визуального языка Airbnb.com. Создание расширенного стайлгайда.»

Требования к UI дизайнеру в Airbnb

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

UI дизайнер определяет общее восприятие и внешний вид приложения.
Источник: Metro Style Interface 4 работа Ionut Zamfir на Dribbble.

Инструменты: Photoshop, Sketch, Illustrator, Fireworks

Вы скорее всего слышали от него: «Поля „войти“ и „зарегистрироваться“ нужно переместить в правый верхний угол».

Графический дизайнер

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

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

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

Требования к графическому дизайнеру в Google

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

Графический дизайнер проектирует, направляет и регулирует каждый пиксель, чтобы обеспечить идеальный конечный результат.
Источник: IOS 7 Guide Freebie PSD от Seevi kargwal на Dribbble.

Инструменты: Photoshop, Sketch

Вы скорее всего слышали от него: «Уменьшить кернинг и перенести кнопку на 1 пиксель влево!»

Моушн дизайнер

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

«Требуется знание графического дизайна, моушн дизайна, диджитал арт, чувство цвета и типографики, общая осведомленность материалов/текстур и практическое понимание анимации. Знание прошивок iOS, OS X, Photoshop и Illustrator, а также знакомство с Director (или эквивалент), Quartz Composer (или эквивалент), 3D компьютерное моделирование, моушн графика».

Требования к моушн дизайнеру в Apple

Инструменты: AfterEffects, Core Composer, Flash, Origami

Вы скорее всего слышали от него: «Меню должно всплывать слева через 800 мс.»

UX исследователь

UX исследователь знает все о потребностях пользователей.

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

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

Требования к UX Исследователю в Facebook

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

Задача: персонажи, результаты А/B тестов, мониторинг действий пользователей и опросов.

Инструменты: Mic, Paper, Docs

Вы скорее всего слышали это от него: «Согласно нашему исследованию, типичный пользователь …»

Фронтенд-разработчик

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

Инструменты: CSS, HTML, JavaScript

Вы скорее всего слышали это на практике: «Я использую 12-колоночную сетку на 960 пикселей.»

Продакт-дизайнер

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

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

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

«Владение всеми аспектами дизайна: взаимодействия, визуальным, продакт, прототипирования. Создание пиксельных макетов и кодов для новых функций интернета и мобильных.»

Требования к продакт дизайнеру в Pinterest

«Я ищу дизайнера»

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

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

ТОП-20 Примеров Плохого UX Дизайна — Plerdy

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

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

Итак:
UI (User Interface) — это то, как выглядят некоторые элементы. К пользовательскому интерфейсу относятся размер кнопок и шрифтов, форма, окраска и т.д. Если провести аналогию, например, с гитарами, то UI — это выбор цвета деки и ее оформление.

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

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

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

1. Проблемы расположения контента

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

2. Категории, вызывающие недоумение у посетителей

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

3. Разрозненность контента и проблемы с его поиском

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

4. Отсутствие логики в переходах между станицами

Это одна из самых популярных UX ошибок. Последствиями размещения ссылок в нелогичном порядке может стать отказ пользователя от дальнейшего ознакомления и переход на сайты ваших конкурентов.
Как исправить ошибки: Установите код отслеживания Plerdy для анализа поведения пользователей.

5. Скрытые интеграции с платежными системами и попытки взимать плату с клиентов

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

6. Микросайты и проблемы с их использованием

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

7. Качество поиска на сайте

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

8. Фильтры и ошибки связанные с ними

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

9. Статьи и описания больших размеров

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

10.Неверное оформление ссылки

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

11. Игнорирование потребностей целевой аудитории

Это очень важный момент, без которого не избежать проблем с UI / UX. В идеале, потребности, видение и предыдущий опыт целевой аудитории следует учитывать еще на этапе проектирования и разработки сайта. Необходимо хорошо понимать чего именно хочет пользователь, с какой целью посещает сайт и почему может его заблаговременно покинуть. Именно поэтому профессиональные дизайн-агентства часто создают “портрет” потенциального посетителя. Хорошей идеей является проверка готового концепта на определенной «фокус-группе» еще до этапа разработки. Все это необходимо предусматривать поскольку видение одних и тех же вещей сильно отличаться у разных людей. Разработка веб-продукта «на свой вкус», увеличивает риски того, что пользователь останется недоволен.

Что же делать если ресурс уже работает, его процент конверсии низкий? Один из методов выявления причины проблемы — юзабилити аудит. Бывает и так, что сайт имеет серьезные ошибки в UX дизайне. Из собственной практики можем привести пример ресурса с низким показателем конверсии. В результате юзабилити аудита стала понятна причина — чрезвычайно сложная навигация сайта. Хотя владелец и позаботился о логике распределения категорий, она все равно оказалась слишком запутанной для значительного сегмента целевой аудитории.

Итак, владельцам веб-ресурсов всегда стоит ориентироваться на клиента, учитывать его пожелания и предыдущий UX.
Как исправить ошибки: Попробуйте PopUP формы для информирования посетителей о маркетинговых мероприятиях (скидках, акциях и т. Д.).

12. Автозапуск аудио/видео

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

Почему это имеет значение? Потому что после появления HTML5 импортировать видео и аудио стало намного проще, а потому разработчики все чаще используют доступные решения в дизайне. Однако, в прекрасной, на первый взгляд, идее было скрыто огромное зло: именно таким атрибутам как autoplay и loop пользователи обязаны громким звукам, которые самостоятельно, без согласия пользователя, начинают воспроизводиться сразу после открытия определенной страницы.

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

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

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

13. Избыточность

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

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

14. Неправильные формы

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

Наиболее распространенными проблемами являются:

1. Слишком большое количество вопросов;
2. Слишком большое количество обязательных полей;
3. Некорректно настроенная валидация.

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

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

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

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

15. Проблемы авторизации / выхода

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

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

Последний пункт — далеко не всегда ошибка. Например, распространенной практикой среди мобильных приложений является то, что для выхода из аккаунта следует пройти через несколько экранов. Однако, то что является нормой для приложений, не всегда является приемлемым для сайта. Так, например, если пользователю нужно пройти путь «Личный кабинет» — «Настройка» — «Учётная запись» — «Выход» — это негативно влияет на его впечатление о ресурсе.
Как исправить ошибки: Попробуйте программу проверки SEO , чтобы увеличить посещаемость вашего сайта и ускорить его оптимизацию.

16. Мобильные устройства

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

17. Правило 3-х кликов

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

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

18. Отсутствие интуитивности

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

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

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

19. Цветовая гамма

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

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

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

20. Техническая оптимизация

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

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

Вывод

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

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

UX и UI — в чем разница?

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

UX и UI дизайн: объясняем на пальцах

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

Представьте, что вы решили построить дом. Въезду в новое жилье будет предшествовать два глобальных этапа: само строительство и проведение отделки. Дом, созданный по самому безупречному проекту, окажется бессмысленным, если внутри будут голые стены, пыль и холод. Точно так и наоборот: хорошо меблированная комната с потолками 150 см окажется бесполезной для человека ростом 180 см. Через эту аналогию наглядно раскрывается суть наших двух понятий. UX-дизайнер отвечает за строительство условных стен, а UI-дизайнер — за внутреннюю отделку.

Что такое UX?

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

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

Задачи UX-дизайнера

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

1. Постановка целей и задач — чего команда хочет достичь разработкой того или иного веб-продукта. В рамках глобальной подготовки изучают конкурентов в своем сегменте, анализируют конкретную целевую аудиторию, разрабатывают стратегию развития продукта.
2. Подбор нужных UX-инструментов для реализации намеченных целей.
3. Создание продукта, который будет удобным, понятным и полезным для конкретной целевой группы.
4. Анализ результата — соответствует ли интерфейс ожиданиям заказчика и пользовательской аудитории.

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

Вам также может быть интересно:
Ревизия UX: что мешает карточке товара продавать?

Что такое UI?

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

Правила UI дизайна

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

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

Соблюдение этих и других правил входит в перечень обязанностей UI-дизайнера.

Подводя итог

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

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

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

В чем отличие 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-дизайнер продумывает, как будут выглядеть эти шаги и путь к цели в целом.

UI против UX-дизайна: определение, использование и различия

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

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

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

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

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

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

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

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

Теперь давайте подробнее рассмотрим типичные задачи дизайнера пользовательского интерфейса.

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

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

Отзывчивость и интерактивность

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

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

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

Однако Джонатан довольно четко видит пределы UX с точки зрения разработки продуктов и веб-дизайна:

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

Исследования и стратегия

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

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

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

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

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

Чтобы проиллюстрировать это, Джонатан использует Trainline (thetrainline.com) в качестве примера. Trainline — это то, как почти все покупают билеты на поезд онлайн в Великобритании.Их билеты не дешевле, чем если бы вы их покупали непосредственно на отдельных сайтах железнодорожных служб или в мобильных приложениях.

Однако все варианты билетов отображаются на одной странице. А перейти с домашней страницы на кассу относительно просто. Результат? В прошлом году они продали билетов на сумму 3,7 миллиарда фунтов стерлингов — по сравнению с 3,2 миллиардами фунтов стерлингов годом ранее.

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

Легкий способ объяснить разницу между UI и UX — это простая аналогия Джонатана:

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

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

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

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

Но необходимо заявление об отказе от ответственности.

Стоит ли мне беспокоиться о точной разнице между UX и UI?

№Джонатан совершенно ясно это понимает. Вот почему:

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

Но поскольку область разработки приложений и продуктов все еще быстро растет, все время появляются новые, более специализированные роли и термины, такие как UX Writer, Content Designer и Interaction Design.То, как мы думаем о дизайне, постоянно развивается. Это часть того, что делает эту область интересной.

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

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

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

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

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

Это приводит к аналогичному вопросу для новичков в области дизайна.

На чем мне специализироваться: UX или UI?

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы начинающий дизайнер и ищете вдохновляющее введение в пространство дизайна в целом, Джонатан рекомендует прочитать «Дизайн повседневных вещей» Дона Нормана:

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

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

Потому что, в конце концов, практический дизайн намного ценнее, чем упор на определения. Как выразился Джонатан:

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

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

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

Крейг Моррисон, заместитель креативного директора Truvani

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чинве Оби — старший научный сотрудник WW

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

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

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

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

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

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

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

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

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

Узнайте больше о UI / UX дизайне

Что на самом деле означают UI и UX?

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

UX означает «User Experience», а UI — «User Interface».

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

Что такое UX?

«Пользовательский опыт» восходит к 90-м годам, когда этот термин был придуман Дональдом Норманом, вице-президентом Apple по передовым технологиям в то время. В электронном письме, объясняющем, как он это сделал, он написал:

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

Дон утверждает, что сегодня этим термином ужасно злоупотребляют. Когда люди говорят, что занимаются UX, они имеют в виду, что они создают приложения и веб-сайты. Но что такое на самом деле UX? Речь идет не только о том, чтобы «подтолкнуть пиксели» и сделать вещи красивыми. Фактически, это все, что связано с вашим опытом работы с продуктом или услугой. Это даже не значит, что вы используете продукт, а просто рассказываете о нем кому-то другому.

Основная задача

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

Индустрия постоянно развивается, но главный вопрос остается неизменным: «Как я могу сделать это лучше для пользователя?»

Что такое UI?

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

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

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

Разница между UI и UX

Споры о том, стоит ли сравнивать UX и UI-дизайн, все еще продолжаются, и некоторые дизайнеры радикально возражают против термина «UX vs UI». Это легко объяснить тем фактом, что роли внутри обоих постоянно меняются. Более того, мы должны говорить о UX и UX в противоположность UX и UX, поскольку они оба работают вместе, и оба необходимы для отличного конечного продукта. Учитывая, что UX означает «пользовательский интерфейс», а UI — «пользовательский интерфейс», явно нелогично противопоставлять их друг другу, поскольку пользовательский интерфейс является частью общего пользовательского опыта.

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

Это не ты, это плохой дизайн

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

А плохому UX-дизайну есть название — Norman Doors. Мы все сталкивались с одним. Эта сбивающая с толку дверь, которую вы всегда, кажется, ошибаетесь, потому что нет способа сказать, толкать вас или тянуть.«Нормандская дверь» означает, что дизайн говорит вам делать противоположное тому, что вы должны делать. Он дает неправильный сигнал пользователю, и для его исправления требуется знак.

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

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

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

Влияние хорошего веб-дизайна на бизнес

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

Хороший UX-дизайн означает:

Довольных пользователей

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

Экономия времени и денег

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

Посетите pixetic.com, чтобы вдохновиться чистым и простым дизайном.

Роксолана Ковалон 30 июн

Поделиться статьей Поделиться

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

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

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

Должности, такие как UX Developer или UI дизайнер, стали будущим фронтом дизайнерских ролей.Его значение незнакомо даже дизайнерам из других отраслей.

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

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

UX — это пользовательский опыт

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

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

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

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

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

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

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

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

• Каркас
• Прототипирование
• Тестирование / итерация
• Планирование разработки

Выполнение и аналитика

• Координация с UI UX Designer (ами)
• Координация с разработчиками
• и интеграция
• Анализ и итерация

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

UI — это пользовательский интерфейс

Пользовательский интерфейс похож на шутку. Если вам нужно это объяснять, это не так уж и хорошо.

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

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

Когда в ходе исследования спросили, нравятся ли людям телефоны Samsung или Apple, большинство людей ответили, что им нравится Apple. Несмотря на то, что оба бренда одинаково воспринимают телефон как продукт, люди в основном предпочитают один другому, почему?

На вопрос, почему им больше нравятся телефоны Apple, ответ последовал незамедлительно: « Я считаю, что телефон Apple гораздо более интуитивно понятен. »

Ответ интервьюера:« Интересно — не могли бы вы привести мне несколько конкретных примеров того, как это более интуитивно понятно? »

При этом вопросе их ликование превращается в шок и ужас, как если бы они говорили:« Конечно, Apple более интуитивна — как вы смеете сомневаться в этом! »

С этого момента им было бы сложно придумать какой-то ответ, начиная от« это просто »до« просто работает »до« проще »до« приложения Apple имеют более последовательный внешний вид. ”

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

Работа дизайнера пользовательского интерфейса включает в себя следующее:

Внешний вид:

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

Отзывчивость и интерактивность:

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

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

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

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

Напишите нам по электронной почте или просто посетите tripin.co.in, чтобы узнать о своих требованиях к пользовательскому интерфейсу и пользовательскому интерфейсу.

Похожие истории

Теги

Присоединяйтесь к хакеру Полдень

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

Взгляд в мир UI / UX (с примерами)

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

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

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

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

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

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

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

Источник изображения — Dribbble

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

Как CMS, такая как Drupal 8, может помочь улучшить UX веб-сайта?

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

• Скорость страницы — Быстрая загрузка веб-сайтов не только повышает производительность, но и повышает удобство работы пользователей. Drupal 8 предоставляет функции повышения производительности, такие как расширенные параметры кэширования, оптимизация изображений, оптимизация кода, оптимизация базы данных и многое другое.
• Отзывчивый — В Drupal 8 отзывчивость уходит в кровь. Это означает, что все веб-сайты на Drupal 8 быстро реагируют на запросы! А без отзывчивости UX веб-сайта будет неполным.
• Персонализация — Доказано, что веб-сайты, предлагающие персонализированный интерфейс, получают больше конверсий, чем веб-сайты без него. Drupal 8 предлагает различные модули, которые позволяют персонализировать ваш контент на основе демографических данных пользователя, информации об устройстве, даты и времени входа в систему и т. Д.
• Многоязычный — Знаете ли вы, что только 20% населения мира могут говорить / понимать по-английски? Чтобы иметь возможность обеспечить индивидуальный подход через UX веб-сайта, важно разговаривать с пользователем на том языке, который ему удобен. Drupal 8 предлагает многоязычную поддержку прямо из коробки с более чем 100 языками на выбор.
• Headless Drupal — Разделение Drupal дает дизайнерам UI / UX гораздо больше контроля над элементами дизайна веб-сайта.Когда интерфейсные фреймворки, такие как ReactJS и Angular JS, используются с Drupal 8, пользовательский интерфейс может быть улучшен.
• Темы — Сообщество Drupal создало сотни тем, которые можно адаптировать к любым требованиям бизнеса. Вы можете найти основные темы Drupal, которые поставляются из коробки с Drupal 8, а также сторонние темы Drupal 8. Если ни один из них не соответствует вашим потребностям, вы также можете настроить тему, чтобы они подходили индивидуально.

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

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

Источник изображения — Dribbble

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

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

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

Хорошие и плохие примеры UI / UX

Давайте поговорим о нескольких плохих примерах UI / UX

Отвлекающие факторы создают плохое первое впечатление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Несмотря на философское сходство, практическое применение на рынке сильно отличается.Три основных различия между дизайнерами 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 и юзабилити, вы можете пройти онлайн-курс по пользовательскому опыту (или другой теме дизайна).Удачи в вашем познавательном путешествии!

(Изображение: Depositphotos — партнерская ссылка)

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

Научитесь разрабатывать с учетом потребностей и ожиданий пользователей, применяя «Десять рекомендаций по пользовательскому интерфейсу» Якоба Нильсена и Рольфа Молиха. Эта эвристика нашла отражение во многих продуктах, разработанных некоторыми из самых успешных компаний в мире, такими как Apple, Google и Adobe. Дополнительное свидетельство того, как их проектные группы включают эти правила в свой процесс проектирования, отражено в руководствах по пользовательскому интерфейсу, опубликованных и распространенных этими компаниями.Эта статья научит вас следовать десяти практическим правилам в работе над дизайном, чтобы вы могли еще больше повысить удобство использования, полезность и желательность своих дизайнов.

10 рекомендаций по дизайну пользовательского интерфейса Нильсена и Молиха

Якоб Нильсен, известный консультант по веб-юзабилити и партнер Nielsen Norman Group, и Рольф Молич, другой известный эксперт по юзабилити, составили список из десяти руководств по дизайну пользовательского интерфейса в 1990-х годах. Обратите внимание, что эвристика Нильсена и Молиха во многом пересекается с «восемью золотыми правилами» Бена Шнейдермана.Эти 10 практических правил являются продолжением восьми золотых правил Шнейдермана через 4 года после первой публикации Шнейдермана.

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

Google Inc., технологическая компания с многомиллиардным оборотом, безусловно, производит проекты, которые отражают вышеперечисленные эвристики. Джон Уайли, главный дизайнер Google Search в 2012 году, однажды сказал:

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

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

Узнайте, как Adobe объединяет десять рекомендаций по дизайну пользовательского интерфейса Nielsen и Molich .Один из их самых популярных продуктов, Adobe Photoshop, редактор растровой графики, демонстрирует характеристики хорошо продуманного пользовательского интерфейса, который отражает эти рекомендации.

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

1. Видимость состояния системы

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

2. Соответствие системы реальному миру

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Dodge Tool и Burn Tool в Photoshop имитируют традиционную технику фотолаборатории для фотографий

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

3. Пользовательский контроль и свобода

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователи сами управляют, поскольку они могут сделать шаг назад или шаг вперед в меню «Правка» или, в качестве альтернативы, они могут использовать сочетания клавиш Photoshop, например, Alt + Ctrl + Z.

4. Согласованность и стандарты

Photoshop поддерживает стандартный макет и внешний вид, когда дело доходит до строки меню. Они также используют общеизвестные термины, такие как «Новый…», «Открыть…», «Сохранить как…» и т. Д.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Меню «Файл» в Photoshop отображает множество хорошо знакомых параметров.

5.Предотвращение ошибок

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователь наводит курсор на значок ластика, и Photoshop отображает ярлык «Инструмент ластика».

6.Распознавание, а не повторение

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

7. Гибкость и эффективность использования

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

8. Эстетичный и минималистичный дизайн

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

Автор / правообладатель: Adobe Systems Incorporated.Условия авторских прав и лицензия: Добросовестное использование

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

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

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

10. Справка и документация

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

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

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

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

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

Скачать PDF можно здесь .

Выводы

Если вы будете следовать 10 рекомендациям Нильсена и Молиха по пользовательскому интерфейсу, вы будете проектировать с учетом удобства использования, полезности и желательности.Так же, как дизайнеры таких успешных компаний, как Apple, Google и Adobe, вы сможете поддерживать свои дизайнерские решения с помощью хорошо изученных эвристических методов и быть уверенными в создании дизайна, который будет одновременно удобен и красив. Чтобы попрактиковаться в распознавании этих 10 практических правил, продолжайте выполнять упражнение, описанное в прилагаемом файле из приведенного выше раздела.

Где узнать больше

Чтобы найти дополнительную информацию о книге Якоба Нильсена «Повышение объяснительной силы эвристики юзабилити», перейдите по ссылке:

https: // static.aminer.org/pdf/PDF/000/089/679/enha …

Ссылки и где узнать больше

Изображение героя: Автор / Правообладатель: Барри Шварц. Flickr. Условия авторских прав и лицензия: CC BY-NC 2.0

Курс: Шаблоны проектирования пользовательского интерфейса для успешного программного обеспечения:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

.

No related posts.