SlideShare a Scribd company logo
1 of 11
UI/UX дизайн:
отличия
PREPARED BY KVADRON UI/UX DESIGN STUDIO
Разница между UX и UI
ВЫ МОЖЕТЕ ИМЕТЬ ОТЛИЧНЫЙ UI, НО УЖАСНЫЙ UX, И НАОБОРОТ.
UX дизайн
• Отрасль UX изучают в основном
бизнес-аналитики, которые
анализируют аудиторию, ее
потребности, и придумывают
воркфлоу. Результат их работы –
мокапы (макет) интерфейсов
UI дизайн
• UI является частью UX. Цель обоих — улучшить, упростить,
сделать удобнее процесс взаимодействия с продуктом. Но, хоть
данные термины и тесно связаны, они отнюдь не синонимы.
UI – это воплощение
правил UX
UI + UX
=
приятно смотреть и удобно использовать
Подробнее о UI
• пользовательский интерфейс (UI)
— это все то, что позволяет
рядовому пользователю управлять
неким устройством или системой.
Мышь, клавиатура, пульт от
телевизора, экран айфона или руль
автомобиля — все это
пользовательские интерфейсы, UI.
А на экранах мы видим GUI —
graphic user inteface
Подробнее о UX
• Координация того, что можно
скоординировать (выбор
ингредиентов для блюда, обучение
официантов, разработка и
программирование кнопок);
• Принятие во внимание того, что существуют моменты, которые
изменить невозможно (неудобные стулья в старых театрах, отсутствие
свежих овощей зимой);
• Редуцирование негативных взаимодействий (можно предусмотреть
тенты на случай дождя)
Для чего разрабатывается UI/UX
• веб-интерфейсы (сайты: веб-сервисы, промо-сайты, посадочные
страницы, корпоративные сайты, интернет-магазины);
• программные интерфейсы;
• интерфейсы для мобильных приложений;
• интерфейсы управления устройствами (электронные аппараты –
дисплей в машине, камере, в умном доме, на чайнике,
микроволновке);
• интерфейсы для устройства ввода (клавиатура, мышь, джойстик,
тачпад)
Разница между UX-дизайнером и UI-дизайнером

More Related Content

Similar to The difference between UI and UX

Тех. Документация - UX beyond UI
Тех. Документация - UX beyond UI Тех. Документация - UX beyond UI
Тех. Документация - UX beyond UI Yury Solonitsyn
 
User experience, как замена юзабилити
User experience, как замена юзабилитиUser experience, как замена юзабилити
User experience, как замена юзабилитиSQALab
 
Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).
Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).
Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).Yuri Vedenin
 
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...Nikita Filippov
 
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...Andrew Shapiro
 
О дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUBО дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUBOleksandr Lisovskyi
 
Сервис-дизайн. Целостный подход к внедрению инноваций и роста бизнеса
Сервис-дизайн. Целостный подход к внедрению инноваций и роста бизнесаСервис-дизайн. Целостный подход к внедрению инноваций и роста бизнеса
Сервис-дизайн. Целостный подход к внедрению инноваций и роста бизнесаStfalcon Meetups
 
опыт проектирования интерфейса Smart nut
опыт проектирования интерфейса Smart nutопыт проектирования интерфейса Smart nut
опыт проектирования интерфейса Smart nutИлья Котельников
 
«Место юзабилити в процессе разработки» - Артем Костенко
«Место юзабилити в процессе разработки» - Артем Костенко«Место юзабилити в процессе разработки» - Артем Костенко
«Место юзабилити в процессе разработки» - Артем КостенкоWebChallenge
 
Модуль 15. Лекция 59-60.
Модуль 15. Лекция 59-60. Модуль 15. Лекция 59-60.
Модуль 15. Лекция 59-60. Yana Brodetski
 
UX-дизайн и психология пользователей
UX-дизайн и психология пользователейUX-дизайн и психология пользователей
UX-дизайн и психология пользователейAnait Badalyan
 
Объединяющая сила UX
Объединяющая сила UXОбъединяющая сила UX
Объединяющая сила UXDmitry Satin
 
Курсы по User Experience от ITMINE
Курсы по User Experience от ITMINEКурсы по User Experience от ITMINE
Курсы по User Experience от ITMINEAnastasia Schebrova
 
UX-дизайн. Обзор профессии
UX-дизайн. Обзор профессииUX-дизайн. Обзор профессии
UX-дизайн. Обзор профессииAndrew Shapiro
 
Проектирование и UX
Проектирование и UXПроектирование и UX
Проектирование и UXUplab_University
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаYury Vetrov
 
Влияние анимации на UX в моб. приложениях
Влияние анимации на UX в моб. приложенияхВлияние анимации на UX в моб. приложениях
Влияние анимации на UX в моб. приложенияхКирилл Романовский
 

Similar to The difference between UI and UX (20)

Тех. Документация - UX beyond UI
Тех. Документация - UX beyond UI Тех. Документация - UX beyond UI
Тех. Документация - UX beyond UI
 
User experience, как замена юзабилити
User experience, как замена юзабилитиUser experience, как замена юзабилити
User experience, как замена юзабилити
 
Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).
Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).
Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).
 
UX Design Рrocess
UX Design РrocessUX Design Рrocess
UX Design Рrocess
 
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
 
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
 
О дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUBО дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUB
 
Сервис-дизайн. Целостный подход к внедрению инноваций и роста бизнеса
Сервис-дизайн. Целостный подход к внедрению инноваций и роста бизнесаСервис-дизайн. Целостный подход к внедрению инноваций и роста бизнеса
Сервис-дизайн. Целостный подход к внедрению инноваций и роста бизнеса
 
опыт проектирования интерфейса Smart nut
опыт проектирования интерфейса Smart nutопыт проектирования интерфейса Smart nut
опыт проектирования интерфейса Smart nut
 
«Место юзабилити в процессе разработки» - Артем Костенко
«Место юзабилити в процессе разработки» - Артем Костенко«Место юзабилити в процессе разработки» - Артем Костенко
«Место юзабилити в процессе разработки» - Артем Костенко
 
Модуль 15. Лекция 59-60.
Модуль 15. Лекция 59-60. Модуль 15. Лекция 59-60.
Модуль 15. Лекция 59-60.
 
UX-дизайн и психология пользователей
UX-дизайн и психология пользователейUX-дизайн и психология пользователей
UX-дизайн и психология пользователей
 
Объединяющая сила UX
Объединяющая сила UXОбъединяющая сила UX
Объединяющая сила UX
 
Пакет услуг "Стратег с UX-экспертизой"
Пакет услуг "Стратег с UX-экспертизой"Пакет услуг "Стратег с UX-экспертизой"
Пакет услуг "Стратег с UX-экспертизой"
 
Курсы по User Experience от ITMINE
Курсы по User Experience от ITMINEКурсы по User Experience от ITMINE
Курсы по User Experience от ITMINE
 
UX-дизайн. Обзор профессии
UX-дизайн. Обзор профессииUX-дизайн. Обзор профессии
UX-дизайн. Обзор профессии
 
Проектирование и UX
Проектирование и UXПроектирование и UX
Проектирование и UX
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
 
Влияние анимации на UX в моб. приложениях
Влияние анимации на UX в моб. приложенияхВлияние анимации на UX в моб. приложениях
Влияние анимации на UX в моб. приложениях
 
Uix presentation
Uix presentationUix presentation
Uix presentation
 

The difference between UI and UX

  • 3. ВЫ МОЖЕТЕ ИМЕТЬ ОТЛИЧНЫЙ UI, НО УЖАСНЫЙ UX, И НАОБОРОТ.
  • 4. UX дизайн • Отрасль UX изучают в основном бизнес-аналитики, которые анализируют аудиторию, ее потребности, и придумывают воркфлоу. Результат их работы – мокапы (макет) интерфейсов
  • 5. UI дизайн • UI является частью UX. Цель обоих — улучшить, упростить, сделать удобнее процесс взаимодействия с продуктом. Но, хоть данные термины и тесно связаны, они отнюдь не синонимы.
  • 6. UI – это воплощение правил UX
  • 7. UI + UX = приятно смотреть и удобно использовать
  • 8. Подробнее о UI • пользовательский интерфейс (UI) — это все то, что позволяет рядовому пользователю управлять неким устройством или системой. Мышь, клавиатура, пульт от телевизора, экран айфона или руль автомобиля — все это пользовательские интерфейсы, UI. А на экранах мы видим GUI — graphic user inteface
  • 9. Подробнее о UX • Координация того, что можно скоординировать (выбор ингредиентов для блюда, обучение официантов, разработка и программирование кнопок); • Принятие во внимание того, что существуют моменты, которые изменить невозможно (неудобные стулья в старых театрах, отсутствие свежих овощей зимой); • Редуцирование негативных взаимодействий (можно предусмотреть тенты на случай дождя)
  • 10. Для чего разрабатывается UI/UX • веб-интерфейсы (сайты: веб-сервисы, промо-сайты, посадочные страницы, корпоративные сайты, интернет-магазины); • программные интерфейсы; • интерфейсы для мобильных приложений; • интерфейсы управления устройствами (электронные аппараты – дисплей в машине, камере, в умном доме, на чайнике, микроволновке); • интерфейсы для устройства ввода (клавиатура, мышь, джойстик, тачпад)