SlideShare une entreprise Scribd logo
1  sur  32
Télécharger pour lire hors ligne
U X & U I . П Р О Д У К Т О В Ы Й Д И З А Й Н Д Е Н Ь
Дмитрий Осадчук
UXD ПРОЦЕСС
LEAN UX,
УРОВНИ UX
01
iOSSmartTV Android Watch UI Oculus VR
SAP UI5MetroUI SiteCore Sharepoint
HybrisHTML5 WebSphere Bootstrap …
ОБИЛИЕ ТЕХНОЛОГИЙ
И ПЛАТФОРМ
Артемий Лебедев
В любую секунду любой проект готов на 100%, хотя проработанность может быть и
на 4%.
В зависимости от имеющегося времени проект можно прорабатывать до пикселя, а
можно оставить на стадии концептуальной зарисовки.
Раньше автор прорабатывал проекты на 97%. Оптимизировал картинки, подгонял
микроны и шлифовал поверхности. Теперь автор получает удовольствие от того, что
почти любую дизайнерскую задачу умеет решать за время формулирования задачи.
То есть, когда клиент закончил рассказывать, что ему нужно, у нас уже есть решение.
Получается, что время тратится только на нужную степень прожарки, а общий вид
стейка всегда ясен.
§ 167. МЕТОД
ПРОГРЕССИВНОГО
ДЖИПЕГА
26 ноября 2010
«5 уровней опыта
взаимодействия»
Джесс Гарретт
Джесси Джеймс Гаррет
Один из основателей компании Adaptive Path (UX-
консультации), Сан-Франциско.
«Авария на дороге. Она произошла из-за того, что водитель на
секунду отвлёкся, чтобы убавить громкость радиоприемника.
Ему пришлось отвести взгляд от дороги, так как на ощупь
отличить ручку громкости от других невозможно.».
ОПЫТ
ВЗАИМОДЕЙСТВИЯ
Контекст использования это ситуация в которой пользователь
взаимодействует с сайтом/объектом/системой. И 
действительно, в машине за рулём контекст использования
даже простого телефона совершенно другой нежели дома на 
диване. Это очень важный момент над которым стоит думать
при проектировании чего-либо.
КОНТЕКСТ
ИСПОЛЬЗОВАНИЯ
User experience (пользовательский опыт) определяется
использованием и поведением продукта в реальном мире. UX
имеет решающее значение для успеха сайта. Если ваши
пользователи не имеют положительного опыта взаимодействия
с вашим сайтом, вероятность того, что они вернутся,
значительно снижается.
Признавая этот важный факт, автор пишет: «Весь опыт
взаимодействия должен быть результатом сознательного
решения с вашей стороны». Это означает, что: «Нужно
принимать во внимание все возможности, каждое действие,
которое может совершить пользователь и понимать ожидания
пользователей на каждом шагу, на протяжении всего
процесса.»
ПОЛЬЗОВАТЕЛЬСКИЙ
ОПЫТ
5Уровней опыта
взаимодействия
1. Поверхность
Уровень поверхности представляет собой
внешний вид продукта с точки зрения конечного
пользователя, то есть набор текста, картинок,
ссылок, форм, вкладок, кнопок и прочего. Проще
говоря графический дизайн сайта.
2. Компоновка
Под поверхностью находится уровень компоновки,
представляющей конкретную реализацию
абстрактной структуры продукта. На этом уровне
решаются вопросы наиболее эффективного
расположения различных элементов UI.
Компановка это прототипирование. Расположение
кнопок, вкладок, фотографий и текстовых блоков.
Компоновка проектируется так, чтобы организация
этих элементов была максимально эффектной
и эффективной, то есть чтобы вы запомнили
логотип и смогли найти кнопку с корзиной, когда
она понадобится.
3. Структура
Структура определяет, как пользователи попадают
на страницу и куда они могут направиться дальше.
Описывается взаимное расположение страниц
веб-сайта, программных форм, окон и др. То есть
он отвечает на вопросы “откуда”, “куда” и “как”
сможет перемещаться пользователь. Эффективная
структура облегчает навигацию и делает её
интуитивно понятной для пользователей.
4. Набор возможностей
Уровень набора возможностей представляет из
себя простое перечисление набора
функциональных возможностей, которые будут
доступны для пользователей. Способ реализации и
взаимной организации этих возможностей будет
описан детальнее уже на уровне структуры.
Перечисление функциональных возможностей
образует уровень набора возможностей сайта.
Некоторые сайты, торгующие книгами, позволяют
пользователям сохранять адрес, чтобы не
пришлось указывать его повторно. Вопрос,
включена ли эта (или любая другая) функция в
список функций сайта, как раз относится к
возможностям сайта.
5. Стратегия
Стратегия включает в себя не только то, что хотят
получить от сайта его владельцы, но и то, что хотят
получить пользователи (цели и потребности
пользователя).
Самый глубокий и наиболее абстрактный уровень
представленной модели. На этом уровне
необходимо получить ответы на вопросы,
касающиеся желаний и ожиданий относительно
будущего программного продукта, как со стороны
потенциальных пользователей, так и заказчика.
Ответы на эти вопросы будут сформированы и
представлены в виде конкретного списка на
уровне набора возможностей.
Диапазон решений
Выбранное решение
Решения на следующем уровне только после предыдущего
Взаимосвязь уровней
Эти уровни являются взаимосвязанными и
взаимозависимыми. Каждый следующий выбор
ограничивает наш следующий уровень. Начиная с
более абстрактных понятий (стратегия и
планирование) мы постепенно приходим к более
конкретным понятиям (визуальное оформление).
Гаррет определяет проблемы, влияющие на опыт
взаимодействия на каждом этапе.
Решения принятые на нижних уровнях нельзя
считать железобетонными и их можно подвергать
переоценке если того требуют верхние уровни. И
так же переходить к верхним уровням желательно
когда у вас есть база в виде нижних уровней.
Гибкость методологии, все дела.
Этапы
Общие результаты окажутся
неудовлетворительными, если
начинать следующий этап только
когда закончится предыдущий.
Общий прогресс получается
быстрее и правильнее если
работка на каждом уровне
заканчивается до того, как
заканчивается на следующем.
MVP (от англ. minimum viable product — минимально жизнеспособный продукт) —
простейший работающий прототип продукта, которым тестируют спрос до
полномасштабной разработки. Такой подход страхует предпринимателя от
невостребованности конечного продукта и потери потраченных на разработку
ресурсов. MVP позволяет минимальными усилиями собрать информацию, чтобы
доработать продукт под запросы целевой аудитории или вовсе от него отказаться.
Самое сложное в разработке MVP — найти оптимальное соотношение затрат и
качества.
MVP
— MINIMAL VIABLE PRODUCT
Сложность MVP зависит от продукта — в некоторых случаях, достаточно провести
кампанию в AdWords или Директ, а в некоторых обязательна разработка рабочего
прототипа. Для тестирования гипотез путем получения информации от
пользователей могут быть использованы следующие инструменты и техники:
Интервью.
Beta landing page.
Сплит-тесты.
Рекламные кампании.
Краудфандинг.
Демонстрационные видео.
Блог.
Цифровой прототип.
Бумажный прототип.
Однофункциональный продукт.
Страница предзаказа.
ТЕСТИРОВАНИЕ MVP
- Интервью с любыми людьми. Вы сразу поймете, есть ли рынок для вашего продукта.
Если ваш продукт для специфической аудитории — расспросите ее.
- Создайте блог или страничку в Facebook, посмотрите, как реагирует аудитория,
много ли у вас читателей, сколько людей ставят лайки и т.д.
- Воспользуйтесь сервисом Quora — задайте там вопрос.
- Сделайте презентацию, покажите ее знакомым, доработайте. Вы можете отправить
ее нескольким инвесторам и собрать от них фидбек.
- Сделайте простую Landing Page c формой регистрации, посмотрите, сколько
наберется регистраций, привлекает ли ваша идея много людей?
- Поговорите с потенциальными клиентами на предмет «За что вы готовы были бы
платить». Можно сделать небольшую демонстрацию продукта перед аудиторией или
даже начать кампанию на Kickstarter (или на русском аналоге).
ПРИМЕРЫ MPV
Закон Парето
Drew Manning
Принципы бережливого UX-дизайна
Когда мы следуем методу тощего UX-дизайна, есть несколько
моментов, на которые стоит обратить внимание:
Мы понимаем целевую аудиторию и ее проблемы.
Мы создаем MVP (Minimum Viable Product — минимально
жизнеспособный продукт).
Мы работаем короткими итерациями.
Мы постоянно тестируем нововведения на пользователях и,
если что-то не так, быстро откатываемся.
Мы работаем командой: UX-проектировщики, дизайнеры,
разработчики и тестировщики работают вместе и постоянно
обмениваются мнениями и задачами.
ОТ MVP К LEAN UX
Как происходит работа с минимально жизнеспособным продуктом, с
MVP? Мы берминимально жизнеспособный продукт и постепенно на него
наращиваем мясо, мышцы, жир — новые функции и свойства.
Если мы работаем по бережливому принципу с минимально
жизнеспособным продуктом, мы должны:
Сформулировать видение продукта.
Сформулировать бизнес-задачи.
Сформулировать роли пользователей, понять их задачи и цели.
Соорудить прототип продукта.
Протестировать его.
Начать всё заново.
КАК РАБОТАТЬ С MVP
Спасибо за внимание
и понимание.

Contenu connexe

Tendances

UX_Academy_16th_Market_Kurly_UXUI
UX_Academy_16th_Market_Kurly_UXUIUX_Academy_16th_Market_Kurly_UXUI
UX_Academy_16th_Market_Kurly_UXUI
RightBrain inc.
 
UX Discovery_Metaverse_RightBrain_Seminar
UX Discovery_Metaverse_RightBrain_SeminarUX Discovery_Metaverse_RightBrain_Seminar
UX Discovery_Metaverse_RightBrain_Seminar
RightBrain inc.
 
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
RightBrain inc.
 
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
RightBrain inc.
 
자동차 업계를 중심으로 한 Omni Channel 트렌드
자동차 업계를 중심으로 한 Omni Channel 트렌드자동차 업계를 중심으로 한 Omni Channel 트렌드
자동차 업계를 중심으로 한 Omni Channel 트렌드
RightBrain inc.
 

Tendances (20)

UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
 
This is ux design summary
This is ux design summaryThis is ux design summary
This is ux design summary
 
UX_Academy_16th_Market_Kurly_UXUI
UX_Academy_16th_Market_Kurly_UXUIUX_Academy_16th_Market_Kurly_UXUI
UX_Academy_16th_Market_Kurly_UXUI
 
PrograMetrix Report: Cannabis & CBD Digital Advertising Trends
PrograMetrix Report: Cannabis & CBD Digital Advertising TrendsPrograMetrix Report: Cannabis & CBD Digital Advertising Trends
PrograMetrix Report: Cannabis & CBD Digital Advertising Trends
 
UX 101: User Research methods to kickstart your project
UX 101: User Research methods to kickstart your projectUX 101: User Research methods to kickstart your project
UX 101: User Research methods to kickstart your project
 
UX 아카데미 오픈프로젝트 [쿠팡 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡 - UX/UI 개선] UX 아카데미 오픈프로젝트 [쿠팡 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡 - UX/UI 개선]
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
 
UX디자인_기획서.pdf
UX디자인_기획서.pdfUX디자인_기획서.pdf
UX디자인_기획서.pdf
 
What is UX?
What is UX?What is UX?
What is UX?
 
UX Design Deliverables: Expert's Choice
UX Design Deliverables: Expert's ChoiceUX Design Deliverables: Expert's Choice
UX Design Deliverables: Expert's Choice
 
UX Discovery_Metaverse_RightBrain_Seminar
UX Discovery_Metaverse_RightBrain_SeminarUX Discovery_Metaverse_RightBrain_Seminar
UX Discovery_Metaverse_RightBrain_Seminar
 
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
 
UX lesson 3: Usability First
UX lesson 3: Usability FirstUX lesson 3: Usability First
UX lesson 3: Usability First
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
 
Conducting User Research
Conducting User ResearchConducting User Research
Conducting User Research
 
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
 
자동차 업계를 중심으로 한 Omni Channel 트렌드
자동차 업계를 중심으로 한 Omni Channel 트렌드자동차 업계를 중심으로 한 Omni Channel 트렌드
자동차 업계를 중심으로 한 Omni Channel 트렌드
 
Ux research guide
Ux research guideUx research guide
Ux research guide
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 

En vedette

UX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа ДизайнаUX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа Дизайна
Ksenia Sternina
 

En vedette (20)

Сайдпроекты БВШД 2016
Сайдпроекты БВШД 2016Сайдпроекты БВШД 2016
Сайдпроекты БВШД 2016
 
Ожидания от продукта
Ожидания от продуктаОжидания от продукта
Ожидания от продукта
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
 
UX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа ДизайнаUX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа Дизайна
 
BHSD - Systematic design process
BHSD - Systematic design processBHSD - Systematic design process
BHSD - Systematic design process
 
Основы быстрого прототипирования
Основы быстрого прототипированияОсновы быстрого прототипирования
Основы быстрого прототипирования
 
Design. Mobile.
Design. Mobile.Design. Mobile.
Design. Mobile.
 
Дизайн в хаосе
Дизайн в хаосеДизайн в хаосе
Дизайн в хаосе
 
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
 
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
 
Sketch
SketchSketch
Sketch
 
Выбор метрики
Выбор метрикиВыбор метрики
Выбор метрики
 
Ponomarenko_BHSAD_Intensive_calligraphy
Ponomarenko_BHSAD_Intensive_calligraphyPonomarenko_BHSAD_Intensive_calligraphy
Ponomarenko_BHSAD_Intensive_calligraphy
 
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуреCodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
 
BHSD MAIL.RU UI/UX 2016 Single interface
BHSD MAIL.RU UI/UX 2016 Single interfaceBHSD MAIL.RU UI/UX 2016 Single interface
BHSD MAIL.RU UI/UX 2016 Single interface
 
Анимация БВШД 2016
Анимация БВШД 2016Анимация БВШД 2016
Анимация БВШД 2016
 
BHSD - Design systems: from UI kit's to living guidelines
BHSD - Design systems: from UI kit's to living guidelinesBHSD - Design systems: from UI kit's to living guidelines
BHSD - Design systems: from UI kit's to living guidelines
 
BHSD MAIL.RU UI/UX 2016 Restrictions
BHSD MAIL.RU UI/UX 2016 RestrictionsBHSD MAIL.RU UI/UX 2016 Restrictions
BHSD MAIL.RU UI/UX 2016 Restrictions
 
Юзабилити-тестирование
Юзабилити-тестирование Юзабилити-тестирование
Юзабилити-тестирование
 
Styleguides for mobile
Styleguides for mobileStyleguides for mobile
Styleguides for mobile
 

Similaire à Lean UX, Уровни UX, UXD процесс

Как работает UX-студия. Саша Куценко, Креативный директор Aidem.
Как работает UX-студия. Саша Куценко, Креативный директор Aidem.Как работает UX-студия. Саша Куценко, Креативный директор Aidem.
Как работает UX-студия. Саша Куценко, Креативный директор Aidem.
SPECIA
 
Юзабилити сайта
Юзабилити сайтаЮзабилити сайта
Юзабилити сайта
Dmitry Satin
 
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
Andrew Shapiro
 
Andrey Petrov P D P
Andrey Petrov P D PAndrey Petrov P D P
Andrey Petrov P D P
rit2010
 
User eXperience design - как построить сайт для пользователей, а не для себя
User eXperience design - как построить сайт для пользователей, а не для себяUser eXperience design - как построить сайт для пользователей, а не для себя
User eXperience design - как построить сайт для пользователей, а не для себя
Andrew Yaroshenko
 

Similaire à Lean UX, Уровни UX, UXD процесс (20)

UX Design Рrocess
UX Design РrocessUX Design Рrocess
UX Design Рrocess
 
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
 
Как работает UX-студия. Саша Куценко, Креативный директор Aidem.
Как работает UX-студия. Саша Куценко, Креативный директор Aidem.Как работает UX-студия. Саша Куценко, Креативный директор Aidem.
Как работает UX-студия. Саша Куценко, Креативный директор Aidem.
 
Как работает UX-студия
Как работает UX-студияКак работает UX-студия
Как работает UX-студия
 
Юзабилити Сайта
Юзабилити СайтаЮзабилити Сайта
Юзабилити Сайта
 
Юзабилити сайта
Юзабилити сайтаЮзабилити сайта
Юзабилити сайта
 
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
 
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
 
User eXperience design
User eXperience designUser eXperience design
User eXperience design
 
12 простых шагов создать свое мобильное приложение
12 простых шагов создать свое мобильное приложение12 простых шагов создать свое мобильное приложение
12 простых шагов создать свое мобильное приложение
 
Andrey Petrov P D P
Andrey Petrov P D PAndrey Petrov P D P
Andrey Petrov P D P
 
iCamp 2015. Леонід Слов’янов “Що насправді бачить на вашому сайті відвідувач?”
iCamp 2015. Леонід Слов’янов “Що насправді бачить на вашому сайті відвідувач?”iCamp 2015. Леонід Слов’янов “Що насправді бачить на вашому сайті відвідувач?”
iCamp 2015. Леонід Слов’янов “Що насправді бачить на вашому сайті відвідувач?”
 
Как работает UХ студия
Как работает UХ студияКак работает UХ студия
Как работает UХ студия
 
User eXperience design - как построить сайт для пользователей, а не для себя
User eXperience design - как построить сайт для пользователей, а не для себяUser eXperience design - как построить сайт для пользователей, а не для себя
User eXperience design - как построить сайт для пользователей, а не для себя
 
Odoo 9 новый дизайн методология юзабилити
Odoo 9 новый дизайн методология юзабилитиOdoo 9 новый дизайн методология юзабилити
Odoo 9 новый дизайн методология юзабилити
 
КАК УПРАВЛЯТЬ ДИЗАЙН-ПРОЕКТОМ (для заказчиков и исполнителей)
КАК УПРАВЛЯТЬ ДИЗАЙН-ПРОЕКТОМ (для заказчиков и исполнителей)КАК УПРАВЛЯТЬ ДИЗАЙН-ПРОЕКТОМ (для заказчиков и исполнителей)
КАК УПРАВЛЯТЬ ДИЗАЙН-ПРОЕКТОМ (для заказчиков и исполнителей)
 
«Место юзабилити в процессе разработки» - Артем Костенко
«Место юзабилити в процессе разработки» - Артем Костенко«Место юзабилити в процессе разработки» - Артем Костенко
«Место юзабилити в процессе разработки» - Артем Костенко
 
Андрей Солоной "Как людям бизнеса работать с программистами"
Андрей Солоной "Как людям бизнеса работать с программистами"Андрей Солоной "Как людям бизнеса работать с программистами"
Андрей Солоной "Как людям бизнеса работать с программистами"
 
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопомСтачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
 
ИКТ 03 Проектирование интерфейсов
ИКТ 03 Проектирование интерфейсовИКТ 03 Проектирование интерфейсов
ИКТ 03 Проектирование интерфейсов
 

Lean UX, Уровни UX, UXD процесс

  • 1. U X & U I . П Р О Д У К Т О В Ы Й Д И З А Й Н Д Е Н Ь Дмитрий Осадчук UXD ПРОЦЕСС LEAN UX, УРОВНИ UX 01
  • 2.
  • 3. iOSSmartTV Android Watch UI Oculus VR SAP UI5MetroUI SiteCore Sharepoint HybrisHTML5 WebSphere Bootstrap … ОБИЛИЕ ТЕХНОЛОГИЙ И ПЛАТФОРМ
  • 4. Артемий Лебедев В любую секунду любой проект готов на 100%, хотя проработанность может быть и на 4%. В зависимости от имеющегося времени проект можно прорабатывать до пикселя, а можно оставить на стадии концептуальной зарисовки. Раньше автор прорабатывал проекты на 97%. Оптимизировал картинки, подгонял микроны и шлифовал поверхности. Теперь автор получает удовольствие от того, что почти любую дизайнерскую задачу умеет решать за время формулирования задачи. То есть, когда клиент закончил рассказывать, что ему нужно, у нас уже есть решение. Получается, что время тратится только на нужную степень прожарки, а общий вид стейка всегда ясен. § 167. МЕТОД ПРОГРЕССИВНОГО ДЖИПЕГА 26 ноября 2010
  • 5.
  • 7. Джесси Джеймс Гаррет Один из основателей компании Adaptive Path (UX- консультации), Сан-Франциско.
  • 8. «Авария на дороге. Она произошла из-за того, что водитель на секунду отвлёкся, чтобы убавить громкость радиоприемника. Ему пришлось отвести взгляд от дороги, так как на ощупь отличить ручку громкости от других невозможно.». ОПЫТ ВЗАИМОДЕЙСТВИЯ
  • 9. Контекст использования это ситуация в которой пользователь взаимодействует с сайтом/объектом/системой. И  действительно, в машине за рулём контекст использования даже простого телефона совершенно другой нежели дома на  диване. Это очень важный момент над которым стоит думать при проектировании чего-либо. КОНТЕКСТ ИСПОЛЬЗОВАНИЯ
  • 10. User experience (пользовательский опыт) определяется использованием и поведением продукта в реальном мире. UX имеет решающее значение для успеха сайта. Если ваши пользователи не имеют положительного опыта взаимодействия с вашим сайтом, вероятность того, что они вернутся, значительно снижается. Признавая этот важный факт, автор пишет: «Весь опыт взаимодействия должен быть результатом сознательного решения с вашей стороны». Это означает, что: «Нужно принимать во внимание все возможности, каждое действие, которое может совершить пользователь и понимать ожидания пользователей на каждом шагу, на протяжении всего процесса.» ПОЛЬЗОВАТЕЛЬСКИЙ ОПЫТ
  • 12. 1. Поверхность Уровень поверхности представляет собой внешний вид продукта с точки зрения конечного пользователя, то есть набор текста, картинок, ссылок, форм, вкладок, кнопок и прочего. Проще говоря графический дизайн сайта.
  • 13. 2. Компоновка Под поверхностью находится уровень компоновки, представляющей конкретную реализацию абстрактной структуры продукта. На этом уровне решаются вопросы наиболее эффективного расположения различных элементов UI. Компановка это прототипирование. Расположение кнопок, вкладок, фотографий и текстовых блоков. Компоновка проектируется так, чтобы организация этих элементов была максимально эффектной и эффективной, то есть чтобы вы запомнили логотип и смогли найти кнопку с корзиной, когда она понадобится.
  • 14. 3. Структура Структура определяет, как пользователи попадают на страницу и куда они могут направиться дальше. Описывается взаимное расположение страниц веб-сайта, программных форм, окон и др. То есть он отвечает на вопросы “откуда”, “куда” и “как” сможет перемещаться пользователь. Эффективная структура облегчает навигацию и делает её интуитивно понятной для пользователей.
  • 15. 4. Набор возможностей Уровень набора возможностей представляет из себя простое перечисление набора функциональных возможностей, которые будут доступны для пользователей. Способ реализации и взаимной организации этих возможностей будет описан детальнее уже на уровне структуры. Перечисление функциональных возможностей образует уровень набора возможностей сайта. Некоторые сайты, торгующие книгами, позволяют пользователям сохранять адрес, чтобы не пришлось указывать его повторно. Вопрос, включена ли эта (или любая другая) функция в список функций сайта, как раз относится к возможностям сайта.
  • 16. 5. Стратегия Стратегия включает в себя не только то, что хотят получить от сайта его владельцы, но и то, что хотят получить пользователи (цели и потребности пользователя). Самый глубокий и наиболее абстрактный уровень представленной модели. На этом уровне необходимо получить ответы на вопросы, касающиеся желаний и ожиданий относительно будущего программного продукта, как со стороны потенциальных пользователей, так и заказчика. Ответы на эти вопросы будут сформированы и представлены в виде конкретного списка на уровне набора возможностей.
  • 17. Диапазон решений Выбранное решение Решения на следующем уровне только после предыдущего
  • 18. Взаимосвязь уровней Эти уровни являются взаимосвязанными и взаимозависимыми. Каждый следующий выбор ограничивает наш следующий уровень. Начиная с более абстрактных понятий (стратегия и планирование) мы постепенно приходим к более конкретным понятиям (визуальное оформление). Гаррет определяет проблемы, влияющие на опыт взаимодействия на каждом этапе. Решения принятые на нижних уровнях нельзя считать железобетонными и их можно подвергать переоценке если того требуют верхние уровни. И так же переходить к верхним уровням желательно когда у вас есть база в виде нижних уровней. Гибкость методологии, все дела.
  • 19. Этапы Общие результаты окажутся неудовлетворительными, если начинать следующий этап только когда закончится предыдущий. Общий прогресс получается быстрее и правильнее если работка на каждом уровне заканчивается до того, как заканчивается на следующем.
  • 20.
  • 21. MVP (от англ. minimum viable product — минимально жизнеспособный продукт) — простейший работающий прототип продукта, которым тестируют спрос до полномасштабной разработки. Такой подход страхует предпринимателя от невостребованности конечного продукта и потери потраченных на разработку ресурсов. MVP позволяет минимальными усилиями собрать информацию, чтобы доработать продукт под запросы целевой аудитории или вовсе от него отказаться. Самое сложное в разработке MVP — найти оптимальное соотношение затрат и качества. MVP — MINIMAL VIABLE PRODUCT
  • 22. Сложность MVP зависит от продукта — в некоторых случаях, достаточно провести кампанию в AdWords или Директ, а в некоторых обязательна разработка рабочего прототипа. Для тестирования гипотез путем получения информации от пользователей могут быть использованы следующие инструменты и техники: Интервью. Beta landing page. Сплит-тесты. Рекламные кампании. Краудфандинг. Демонстрационные видео. Блог. Цифровой прототип. Бумажный прототип. Однофункциональный продукт. Страница предзаказа. ТЕСТИРОВАНИЕ MVP
  • 23.
  • 24.
  • 25.
  • 26. - Интервью с любыми людьми. Вы сразу поймете, есть ли рынок для вашего продукта. Если ваш продукт для специфической аудитории — расспросите ее. - Создайте блог или страничку в Facebook, посмотрите, как реагирует аудитория, много ли у вас читателей, сколько людей ставят лайки и т.д. - Воспользуйтесь сервисом Quora — задайте там вопрос. - Сделайте презентацию, покажите ее знакомым, доработайте. Вы можете отправить ее нескольким инвесторам и собрать от них фидбек. - Сделайте простую Landing Page c формой регистрации, посмотрите, сколько наберется регистраций, привлекает ли ваша идея много людей? - Поговорите с потенциальными клиентами на предмет «За что вы готовы были бы платить». Можно сделать небольшую демонстрацию продукта перед аудиторией или даже начать кампанию на Kickstarter (или на русском аналоге). ПРИМЕРЫ MPV
  • 27.
  • 30. Принципы бережливого UX-дизайна Когда мы следуем методу тощего UX-дизайна, есть несколько моментов, на которые стоит обратить внимание: Мы понимаем целевую аудиторию и ее проблемы. Мы создаем MVP (Minimum Viable Product — минимально жизнеспособный продукт). Мы работаем короткими итерациями. Мы постоянно тестируем нововведения на пользователях и, если что-то не так, быстро откатываемся. Мы работаем командой: UX-проектировщики, дизайнеры, разработчики и тестировщики работают вместе и постоянно обмениваются мнениями и задачами. ОТ MVP К LEAN UX
  • 31. Как происходит работа с минимально жизнеспособным продуктом, с MVP? Мы берминимально жизнеспособный продукт и постепенно на него наращиваем мясо, мышцы, жир — новые функции и свойства. Если мы работаем по бережливому принципу с минимально жизнеспособным продуктом, мы должны: Сформулировать видение продукта. Сформулировать бизнес-задачи. Сформулировать роли пользователей, понять их задачи и цели. Соорудить прототип продукта. Протестировать его. Начать всё заново. КАК РАБОТАТЬ С MVP