SlideShare a Scribd company logo
ПРОЕКТИРОВАНИЕ	
  	
  
ИНТЕРФЕЙСОВ	
  
	
  
занятие	
  №1	
  
Alexander	
  Lisovsky	
  
Co-­‐Founder	
  at	
  ZZ	
  Photo,	
  UX/UI	
  designer	
  
	
  
a.lisovsky@zzphoto.me	
  
facebook.com/alexlisovsky,	
  pinterest.com/alexlisovsky,	
  	
  
twiOer.com/lisovsky	
  
	
  
Course User interface - Lesson 1
hOp://zzphoto.me	
  
Что	
  такое	
  UX	
  
Любой	
  сервис/приложение	
  
подразумевает	
  наличие	
  
опыта	
  взаимодействия	
  (user	
  
experience).	
  Наша	
  задача	
  не	
  в	
  
том,	
  чтобы	
  создавать	
  опыт	
  
взаимодействия.	
  Наша	
  задача 
— сделать	
  его	
  хорошим	
  
hOps://medium.com/ux-­‐crash-­‐course	
  
Является	
  ли	
  главной	
  целью	
  
хорошего	
  пользовательского	
  
опыта	
  сделать	
  человека	
  
счастливым?	
  
hOps://medium.com/ux-­‐crash-­‐course	
  
Да,	
  но	
  нет.	
  Если	
  бы	
  нашей	
  
целью	
  было	
  осчастливить	
  
пользователей,	
  мы	
  бы	
  просто	
  
добавили	
  побольше	
  
смешных	
  котиков	
  и	
  
комплиментов.	
  
hOps://medium.com/ux-­‐crash-­‐course	
  
Цель	
  UX-­‐дизайнера,	
  чтобы	
  
пользователи	
  были	
  
эффективными.	
  
hOps://medium.com/ux-­‐crash-­‐course	
  
“In	
  early	
  stages	
  of	
  design,	
  
pretend	
  the	
  interface	
  is	
  magic.”	
  
Why?	
  
	
  
Course User interface - Lesson 1
A	
  user	
  interface	
  is	
  
like	
  a	
  joke.	
  If	
  you	
  
have	
  to	
  explain	
  it,	
  
it`s	
  not	
  that	
  good.	
  
UX	
  (User	
  Experience),	
  is	
  an	
  approach	
  to	
  product	
  
development	
  that	
  incorporates	
  direct	
  user	
  feedback	
  
throughout	
  the	
  development	
  cycle	
  (human-­‐centered	
  
design)	
  in	
  order	
  to	
  reduce	
  costs	
  and	
  create	
  products	
  
and	
  tools	
  that	
  meet	
  user	
  needs	
  and	
  have	
  a	
  high	
  level	
  
of	
  usability	
  (are	
  easy	
  to	
  use).	
  
	
  
UX	
  -­‐	
  является	
  подход	
  к	
  разработке	
  продуктов,	
  которые	
  включает	
  в	
  себя	
  прямую	
  
обратную	
  связь	
  с	
  пользователем	
  на	
  протяжении	
  всего	
  цикла	
  разработки	
  
(человеко	
  ориентированного	
  дизайна)	
  в	
  целях	
  сокращения	
  расходов	
  и	
  
создания	
  продуктов	
  и	
  инструментов,	
  которые	
  удовлетворяют	
  потребности	
  
пользователей	
  и	
  имеют	
  высокий	
  уровень	
  удобства.	
  
UXPA	
  -­‐	
  User	
  Experience	
  Professionals	
  Associa{on	
  
hOps://uxpa.org/	
  
The	
  business	
  benefits	
  of	
  adding	
  UX	
  to	
  a	
  product	
  
development	
  process	
  include:	
  
	
  
•  Increased	
  produc{vity	
  
•  Increased	
  sales	
  and	
  revenues	
  
•  Decreased	
  training	
  and	
  support	
  costs	
  
•  Reduced	
  development	
  {me	
  and	
  costs	
  
•  Reduced	
  maintenance	
  costs	
  
•  Increased	
  customer	
  sa{sfac{on	
  
hOps://uxpa.org/	
  
Stages	
  of	
  UX	
  
Analysis	
  Phase	
  
	
  
•  Meet	
  with	
  key	
  stakeholders	
  to	
  set	
  vision	
  
•  Include	
  usability	
  tasks	
  in	
  the	
  project	
  plan	
  
•  Assemble	
  a	
  mul{disciplinary	
  team	
  	
  
to	
  ensure	
  complete	
  exper{se	
  
•  Develop	
  usability	
  goals	
  and	
  objec{ves	
  
•  Conduct	
  field	
  studies	
  
•  Look	
  at	
  compe{{ve	
  products	
  
•  Create	
  user	
  profiles	
  
•  Develop	
  a	
  task	
  analysis	
  
•  Document	
  user	
  scenarios	
  
•  Document	
  user	
  performance	
  requirements	
  
hOps://uxpa.org/	
  
Design	
  Phase	
  
	
  
•  Begin	
  to	
  brainstorm	
  design	
  concepts	
  and	
  metaphors	
  
•  Develop	
  screen	
  flow	
  and	
  naviga{on	
  model	
  
•  Do	
  walkthroughs	
  of	
  design	
  concepts	
  
•  Begin	
  design	
  with	
  paper	
  and	
  pencil	
  
•  Create	
  low-­‐fidelity	
  prototypes	
  
•  Conduct	
  usability	
  tes{ng	
  on	
  low-­‐fidelity	
  prototypes	
  
•  Create	
  high-­‐fidelity	
  detailed	
  design	
  
•  Do	
  usability	
  tes{ng	
  again	
  
•  Document	
  standards	
  and	
  guidelines	
  
•  Create	
  a	
  design	
  specifica{on	
  
hOps://uxpa.org/	
  
Implementacon	
  Phase	
  
	
  
•  Do	
  ongoing	
  heuris{c	
  evalua{ons	
  
•  Work	
  closely	
  with	
  delivery	
  team	
  	
  
as	
  design	
  is	
  implemented	
  
•  Conduct	
  usability	
  tes{ng	
  as	
  soon	
  as	
  possible	
  
	
  
Deployment	
  Phase	
  
	
  
•  Use	
  surveys	
  to	
  get	
  user	
  feedback	
  
•  Conduct	
  field	
  studies	
  to	
  get	
  info	
  about	
  actual	
  use	
  
•  Check	
  objec{ves	
  using	
  usability	
  tes{ng	
  
hOps://uxpa.org/	
  
That's	
  incredible	
  
Interac{on	
  design	
  
vs.	
  Interface	
  design	
  
	
  
Interaccon	
  design	
  
—	
  from	
  generic	
  to	
  specific	
  
—	
  user’s	
  goals	
  
—	
  do	
  not	
  forget	
  about	
  constraints	
  (technology,	
  
	
  	
  	
  	
  	
  	
  business	
  processes)	
  
Brief:	
  create	
  a	
  more	
  convenient	
  tool	
  
for	
  working	
  with	
  tables.	
  
1.	
  Interface	
  design:	
  done	
  
2.	
  Interaccon	
  design:	
  	
  
	
  
Tests	
  revealed	
  that	
  the	
  study	
  of	
  data	
  tables	
  is	
  a	
  
minor	
  task,	
  and	
  the	
  real	
  user’s	
  goal	
  is	
  to	
  track	
  
trends.	
  
	
  
Therefore	
  it	
  is	
  necessary	
  to	
  create	
  not	
  a	
  report	
  
generator,	
  but...	
  
Not	
  Report	
  generator,	
  but	
  the	
  Trends	
  analyzer	
  
MindMap	
  
Персонажи	
  
The	
  most	
  effec{ve	
  tool	
  of	
  
interac{on	
  design	
  is	
  extremely	
  
simple:	
  it	
  is	
  an	
  accurate	
  
descrip-on	
  of	
  the	
  product	
  user	
  
and	
  his	
  goals	
  
	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Юзабилити	
  —	
  это	
  степень	
  эффективности,	
  
продуктивности	
  и	
  удовлетворенности,	
  с	
  
которыми	
  продукт	
  может	
  быть	
  использован	
  
определенными	
  пользователями	
  в	
  
определенном	
  контексте	
  использования	
  для	
  
достижения	
  определенных	
  целей:	
  
	
  
1.	
  Определёнными	
  пользователями	
  (кто?)	
  
2.	
  В	
  определённом	
  контексте	
  (где	
  и	
  как?)	
  
3.	
  Для	
  достижения	
  определённых	
  целей	
  
(зачем?)	
  
	
  
	
  hOp://www.usabilitylab.ua/ux-­‐insight/know_user/	
  
Characters	
  are	
  not	
  real	
  people,	
  but	
  they	
  
represent	
  real	
  people	
  during	
  the	
  design	
  
process.	
  They	
  are	
  hypothe0cal	
  
archetypes	
  of	
  actual	
  users.	
  They	
  are	
  
imagined,	
  but	
  nevertheless,	
  are	
  quite	
  
strictly	
  and	
  accurately	
  defined.	
  
	
  
On	
  prac{ce,	
  we	
  are	
  not	
  really	
  "making	
  
up"	
  characters	
  but	
  discover	
  them	
  as	
  a	
  by-­‐
product	
  of	
  the	
  inves{ga{on	
  process.	
  But	
  
we	
  actually	
  make	
  up	
  their	
  names	
  and	
  
personal	
  informa{on.	
  
	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Sample:	
  	
  
Car	
  design	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
 
Target	
  audience:	
  
Age:	
  18-­‐60	
  
Income:	
  middle	
  +	
  
	
  
right?	
  
	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Junior	
  manager	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Carpenter	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Mom	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Car	
  «for	
  everybody»	
  
Зачем	
  нужны	
  персонажи?	
  
	
  
1.  Коммуникация	
  в	
  команде	
  
2.  Фокусировка	
  на	
  всех	
  
этапах	
  проекта	
  
3.  Фиксация	
  данных	
  
исследований	
  
4.  Эмпатия	
  (осознанное	
  
сопереживание)	
  
hOp://www.usabilitylab.ua/ux-­‐insight/know_user/	
  
Dodge	
  Ram	
  
80%	
  of	
  the	
  par{cipants	
  in	
  focus	
  
groups	
  hated	
  the	
  new	
  pickup	
  Dodge	
  
Ram.	
  But	
  a›er	
  the	
  car	
  was	
  released	
  
to	
  the	
  market	
  it	
  became	
  a	
  bestseller	
  
because	
  the	
  remaining	
  20%	
  of	
  people	
  
fell	
  in	
  love	
  with	
  it.	
  
	
  
If	
  even	
  a	
  small	
  number	
  of	
  people	
  
loves	
  the	
  product	
  it's	
  the	
  key	
  to	
  
success.	
  
	
  The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Что	
  нужно	
  знать	
  о	
  персонаже?	
  
	
  
Основные	
  характеристики:	
  
•  Имя	
  
•  Фотография	
  
•  Черты	
  характера	
  
•  Роль	
  
•  Важность	
  персонажа	
  (ключевой	
  или	
  
второстепенный)	
  
•  Образование	
  
•  Работа	
  (место	
  работы,	
  должность,	
  з/п).	
  
hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/	
  
Что	
  нужно	
  знать	
  о	
  персонаже?	
  
	
  
Личная	
  жизнь	
  
•  Семья	
  
•  Семейный	
  доход	
  
•  Цели.	
  Глобальные:	
  определяют	
  систему	
  
ценностей.	
  Локальные:	
  определяют	
  
задачи,	
  которые	
  решает	
  с	
  помощью	
  
продукта	
  
•  Социальная	
  жизнь	
  
•  Увлечения.	
  
hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/	
  
Что	
  нужно	
  знать	
  о	
  персонаже?	
  
	
  
Технологии,	
  знания,	
  опыт	
  
•  Использование	
  социальных	
  сетей	
  
•  Техника.	
  Персональный	
  компьютер	
  /	
  
ноутбук:	
  ежедневные	
  задачи,	
  модель(и).	
  
Мобильный	
  телефон:	
  модель,	
  как	
  
использует.	
  Гаджеты	
  
•  Опыт	
  работы	
  в	
  среде,	
  под	
  которую	
  
проектируем	
  интерфейс.	
  
hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/	
  
Что	
  нужно	
  знать	
  о	
  персонаже?	
  
	
  
Характеристики,	
  относящиеся	
  к	
  нашему	
  
продукту/услуге	
  
•  Страхи	
  и	
  раздражители	
  
•  Ожидания	
  и	
  требования	
  
•  Как	
  узнал	
  и	
  что	
  знает	
  о	
  продукте	
  
•  Мотивированность	
  в	
  использовании	
  нашего	
  
продукта	
  
•  Опыт	
  работы	
  с	
  нашим	
  продуктом	
  или	
  схожими	
  
продуктами	
  
•  Как	
  сейчас	
  решает	
  задачи,	
  которые	
  будет	
  
решать	
  наш	
  продукт.	
  
hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/	
  
Wheeled	
  carry	
  on	
  suitcase	
  	
  
Wheeled	
  carry	
  on	
  suitcase	
  is	
  a	
  good	
  
example	
  of	
  the	
  effec{veness	
  of	
  the	
  
design	
  for	
  one	
  person.	
  Originally	
  this	
  
suitcase	
  was	
  designed	
  for	
  air	
  crews,	
  
which	
  is	
  a	
  very	
  small	
  audience.	
  
	
  
The	
  rest	
  of	
  the	
  travelers	
  soon	
  realized	
  
that	
  this	
  type	
  of	
  a	
  suitcase	
  solves	
  their	
  
problems	
  too.	
  
	
  	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Где	
  брать	
  данные	
  о	
  персонаже?	
  
	
  
•  Стейкхолдеры*	
  и	
  эксперты	
  предметной	
  области	
  
•  Системы	
  веб-­‐аналитики	
  
•  Общение	
  с	
  реальными	
  людьми	
  (представителями	
  как	
  
существующей,	
  так	
  и	
  потенциальной	
  ЦА)	
  
•  Социальные	
  сети	
  
•  Сотрудники,	
  которые	
  постоянно	
  общаются	
  с	
  
существующими	
  клиентами	
  
•  Открытые	
  результаты	
  маркетинговых	
  исследований	
  
•  Отзывы	
  (о	
  продукции,	
  о	
  вас,	
  как	
  о	
  компании,	
  о	
  
конкурентах)	
  
•  Специализированные	
  форумы	
  и	
  сообщества.	
  
Стейкхолдер	
  –	
  заинтересованная	
  сторона	
  
hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/	
  
Пример	
  
	
  
Персонаж	
  А — это	
  опытный	
  менеджер,	
  чьи	
  интересы,	
  как	
  
правило,	
  ограничиваются	
  одной-­‐двумя	
  сферами	
  знаний.	
  
Он	
  часто	
  заходит	
  на	
  сайт,	
  но,	
  поскольку	
  у	
  него	
  немного	
  
свободного	
  времени,	
  он	
  скорее	
  “копит”	
  статьи,	
  чтобы	
  
прочитать	
  их	
  в	
  выходной.	
  Такие	
  люди	
  часто	
  делятся	
  
статьями	
  через	
  соц.	
  сети,	
  особенно	
  TwiOer	
  и	
  LinkedIn.	
  Они	
  
считают	
  свое	
  мнение	
  очень	
  авторитетным,	
  поэтому	
  
дорожат	
  своей	
  репутацией.	
  
hOps://medium.com/ux-­‐crash-­‐course	
  
Полезный	
  пример?	
  
	
  
Почему	
  полезный?	
  Посмотрите,	
  сколько	
  у	
  нас	
  нужной	
  
информации!	
  Вы	
  знаете,	
  что	
  статьи,	
  напичканные	
  
перекрестными	
  ссылками	
  на	
  массу	
  других	
  статей,	
  не	
  
будут	
  пользоваться	
  спросом.	
  А	
  вот	
  возможность	
  создания	
  
закладок	
  очень	
  важна.	
  И	
  статьи	
  лучше	
  рассортировать	
  по	
  
категориям.	
  И	
  нужно,	
  чтобы	
  кнопки	
  для	
  публикации	
  в	
  
соц.сети	
  (причем	
  конкретно	
  в	
  TwiOer	
  и	
  LinkedIn)	
  были	
  на	
  
виду.	
  
hOps://medium.com/ux-­‐crash-­‐course	
  
Практическое	
  задание:	
  
Делимся	
  на	
  группы	
  по	
  5	
  человек.	
  	
  
Времени:	
  10	
  минут.	
  
Описываем	
  главный	
  и	
  второстепенный	
  
персонаж	
  для	
  выбранного	
  сервиса.	
  
	
  	
  
–	
  Программный	
  комплекс	
  «Умный	
  дом»	
  
–	
  Служба	
  доставки	
  продуктов	
  из	
  Novus	
  
–	
  Программа	
  удаления	
  дубликатов	
  
–	
  Услуга	
  подключения	
  корпоративного	
  	
  
	
  	
  	
  доступа	
  в	
  интернет	
  
Flexible	
  user	
  	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
«This	
  applica{on	
  will	
  work	
  well	
  
on	
  a	
  PC».	
  	
  
	
  
Which	
  type	
  of	
  a	
  computer?	
  	
  
What	
  model?	
  	
  
Under	
  what	
  OS?	
  	
  
	
  
Conclusion:	
  The	
  character	
  must	
  
be	
  specific	
  
	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Does	
  a	
  user	
  need	
  the	
  funccon	
  for	
  
princng	
  in	
  ZZ	
  Photo?	
  
	
  
For	
  Mercury	
  (ac{ve	
  traveler)	
  it	
  is	
  
not	
  needed.	
  
	
  
For	
  Hes{a	
  (young	
  mom)	
  it	
  is	
  
required.	
  
	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
The	
  character	
  must	
  be	
  
imaginary.	
  
	
  
Albert	
  Einstein	
  once	
  said	
  that	
  
no	
  problem	
  can	
  be	
  solved	
  
from	
  the	
  same	
  level	
  of	
  
consciousness	
  that	
  created	
  it.	
  	
  
	
  
The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Characters	
  allow	
  us	
  to	
  see	
  the	
  
scope	
  and	
  nature	
  of	
  the	
  design	
  
problem.	
  They	
  help	
  us	
  
understand	
  and	
  define	
  the	
  exact	
  
user's	
  goals	
  and	
  in	
  such	
  way	
  they	
  
determine	
  how	
  the	
  product	
  is	
  
supposed	
  to	
  work	
  and	
  what	
  
features	
  can	
  be	
  ignored.	
  
	
  	
  
	
  The	
  inmates	
  are	
  running	
  the	
  asylum.	
  By	
  Alan	
  Cooper	
  
Цели	
  пользователя	
  	
  
&	
  цели	
  бизнеса	
  
KPI	
  –	
  Key	
  performance	
  indicator	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Цель	
  пользователя:	
  	
  
-­‐  Купить	
  билеты	
  
-­‐  Познакомиться	
  с	
  девушкой	
  
-­‐  Посмотреть	
  смешное	
  видео…	
  
Цель	
  бизнеса	
  (метрики	
  или	
  KPI*):	
  
-­‐  Показ	
  рекламы	
  
-­‐  Продажа	
  товара	
  
-­‐  Увеличение	
  пользовательской	
  базы	
  
Course User interface - Lesson 1
hOps://medium.com/ux-­‐crash-­‐course/	
  
Цель	
  пользователя:	
  посмотреть	
  	
  
интересные	
  видео	
  
Цель	
  бизнеса:	
  показ	
  больше	
  рекламы	
  
	
  
Вариант	
  1:	
  увеличить	
  кол-­‐во	
  экранов	
  	
  
для	
  достижения	
  цели	
  L	
  
	
  
Вариант	
  2:	
  вовлекать	
  пользователя	
  	
  
смотреть	
  больше	
  (тем	
  самым	
  показывая	
  	
  
больше	
  рекламы)	
  J	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
YouTube	
  зарабатывает	
  	
  
на	
  рекламе,	
  а	
  пользователи	
  хотят	
  	
  
смотреть	
  хорошие	
  видео-­‐ролики.	
  	
  
	
  
Поэтому	
  логично	
  размещать	
  рекламу	
  	
  
прямо	
  в	
  видео	
  (или	
  на	
  той	
  же	
  странице).	
  
Но	
  еще	
  логичнее	
  сделать	
  поиск	
  видео	
  	
  
простым	
  и	
  приятным,	
  а	
  после	
  просмотра	
  	
  
предлагать	
  похожие	
  видео.	
  Тогда	
  люди	
  	
  
будут	
  смотреть	
  больше	
  видео,	
  и,	
  	
  
следовательно,	
  больше	
  рекламы.	
  	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Если	
  цели	
  определены	
  не	
  правильно:	
  	
  
	
  
1.  Пользователи	
  получают	
  то,	
  что	
  им	
  нужно,	
  
не	
  принося	
  пользы	
  бизнесу	
  
	
  =	
  много	
  пользователей,	
  никакого	
  успеха	
  
для	
  бизнеса	
  
	
  
2.  Пользователи	
  не	
  получают	
  желаемого	
  	
  
=	
  нет	
  пользователей,	
  никакого	
  успеха	
  	
  
для	
  бизнеса.	
  
Пользовательские	
  	
  
исследования	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
На	
  каком	
  этапе	
  надо	
  проводить	
  	
  
пользовательские	
  исследования?	
  
	
  
1.  На	
  этапе	
  идеи?	
  
2.  На	
  этапе	
  бумажного	
  прототипа?	
  
3.  На	
  этапе	
  програмного	
  прототипа?	
  
4.  На	
  этапе	
  бета-­‐версии	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Субъективное	
  исследование:	
  
	
  
Слово	
  “субъективный”	
  подразумевает	
  	
  
наличие	
  мнения,	
  воспоминания,	
  впечатления	
  	
  
от	
  чего-­‐то.	
  Чувства,	
  которое	
  у	
  вас	
  возникает.	
  	
  
Ожидания,	
  вызванного	
  чем-­‐либо.	
  	
  
	
  
“Какой	
  ваш	
  любимый	
  цвет?”	
  
“Вы	
  доверяете	
  этой	
  компании?”	
  
	
  
То	
  есть	
  правильного	
  ответа	
  не	
  существует.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Объективное	
  исследование:	
  
	
  
Под	
  словом	
  “объективный”	
  понимается	
  факт.	
  	
  
Иногда	
  правдивый.	
  Иногда	
  доказуемый.	
  	
  
И	
  как	
  бы	
  вам	
  ни	
  хотелось,	
  ваше	
  мнение	
  никак	
  	
  
не	
  повлияет	
  на	
  этот	
  факт.	
  
	
  
“Как	
  долго	
  вы	
  пользовались	
  нашим	
  приложением?”	
  
“Где	
  вы	
  нашли	
  ссылку	
  на	
  наш	
  сайт?”	
  
“Для	
  входа	
  вы	
  использовали	
  аккаунт	
  в	
  facebook	
  или	
  
почту?”	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Три	
  основных	
  типа	
  
вопросов	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Открытые	
  вопросы:	
  
	
  
“Как	
  бы	
  вы	
  охарактеризовали	
  сервис?” 	
  
	
  
— Можно	
  составить	
  очень	
  много	
  вопросов	
  этого	
  типа.	
  
Открытые	
  вопросы	
  стоит	
  задавать,	
  если	
  ваша	
  цель — 
получить	
  как	
  можно	
  больше	
  информации	
  от	
  
пользователей.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Наводящие	
  вопросы:	
  
	
  
“Какие	
  мои	
  самые	
  нужные	
  функции	
  сервиса?” 	
  
	
  
— Такой	
  тип	
  вопроса	
  сужает	
  варианты	
  ответа	
  до	
  
определенной	
  темы.	
  Будьте	
  осторожны:	
  “наводя”	
  
пользователя	
  на	
  определенные	
  ответы,	
  вы	
  можете	
  так	
  
и	
  не	
  узнать	
  другие	
  возможные	
  ответы,	
  которые	
  могли	
  
бы	
  оказаться	
  вам	
  интересны.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Закрытый/прямой	
  вопрос:	
  
	
  
“Что	
  удобнее:	
  просмотр	
  в	
  режиме	
  коллекций	
  или	
  
таймлайн?” 	
  
	
  
— Этот	
  тип	
  вопроса	
  предлагает	
  выбор.	
  Да	
  или	
  нет.	
  Это	
  
или	
  то.	
  Но	
  помните:	
  если	
  варианты	
  ответа	
  глупые,	
  то	
  и	
  
результаты	
  окажутся	
  глупыми.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Типы	
  исследований	
  
	
  
Интервью — собираем	
  людей	
  и	
  задаем	
  по	
  очереди	
  
определенный	
  набор	
  вопросов.	
  
	
  
Наблюдение — даем	
  людям	
  задания	
  или	
  инструкции	
  и	
  
наблюдаем,	
  как	
  они	
  пользуются	
  вашим	
  дизайном	
  без	
  чьей-­‐
либо	
  помощи.	
  После	
  этого	
  вы	
  можете	
  задать	
  им	
  пару	
  
вопросов.	
  
	
  
Фокус-­‐группа — собираем	
  группу	
  людей	
  в	
  одной	
  комнате	
  и	
  
просим	
  их	
  обсудить	
  интересующий	
  вас	
  вопрос.	
  На	
  заметку:	
  
уверенные	
  в	
  себе	
  люди	
  зачастую	
  влияют	
  на	
  мнения	
  других	
  
членов	
  группы.	
  	
  
	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Типы	
  исследований	
  
	
  
Опрос — это	
  форма,	
  которую	
  люди	
  заполняют	
  на	
  бумаге	
  или	
  
онлайн.	
  Самое	
  полезное	
  то,	
  что	
  анкеты	
  кажутся	
  анонимными.	
  
	
  
Сортировка	
  карточек — каждый	
  человек	
  получает	
  набор	
  идей	
  
или	
  категорий	
  (на	
  карточках	
  или	
  стикерах),	
  которые	
  нужно	
  
рассортировать	
  по	
  логическим	
  группам.	
  Посмотрите,	
  какой	
  
логикой	
  руководствуются	
  люди,	
  и	
  поймете,	
  каким	
  должно	
  
быть	
  меню.	
  Профессиональный	
  совет:	
  не	
  просите	
  коллег	
  
делать	
  это.	
  Пусть	
  это	
  делают	
  обычные	
  пользователи.	
  
	
  
Google — удивительно,	
  сколько	
  полезного	
  можно	
  найти	
  
онлайн.	
  Прямо	
  сейчас	
  и	
  совершенно	
  бесплатно.	
  
Дизайн	
  для	
  устройств	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
С	
  какого	
  устройства	
  начнем	
  
проектирование?	
  
	
  
1.  Смартфон	
  
2.  Планшет	
  
3.  Десктоп	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
С	
  какого	
  устройства	
  начнем	
  
проектирование?	
  
	
  
1.  Смартфон	
  
2.  Планшет	
  
3.  Десктоп	
  
	
  
Почему?	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Когда	
  вы	
  начинаете	
  проектировать	
  
приложение	
  в	
  расчете	
  на	
  небольшой,	
  
маломощный	
  девайс,	
  вы	
  больше	
  
концентрируетесь	
  на	
  содержании	
  и	
  
ключевых	
  функциях.	
  	
  
	
  
Так	
  получаются	
  простые	
  и	
  красивые	
  
приложения.	
  
	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Особенности	
  использования	
  устройств:	
  
смартфон	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Мобильные	
  устройства	
  всегда	
  с	
  нами,	
  
поэтому — сюрприз! — мы	
  пользуемся	
  ими	
  
чаще	
  и	
  в	
  самых	
  неожиданных	
  местах.	
  	
  
	
  
Поскольку	
  мобильные	
  устройства	
  
небольшие	
  по	
  размеру,	
  сама	
  возможность	
  
взять	
  их	
  в	
  руку	
  и	
  переместить	
  в	
  
пространстве	
  уже	
  может	
  быть	
  функцией.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Кейс	
  ZZ	
  Photo:	
  
	
  
1.	
  30%	
  трафика	
  на	
  сайт	
  –	
  смартфоны	
  
	
  
2.	
  Отказались	
  от	
  поддержки	
  Windows	
  Vista,	
  
XP	
  из-­‐за	
  функциональной	
  несовместимости.	
  
	
  
3.	
  Пришлось	
  перерисовать	
  некоторые	
  
экраны	
  из-­‐за	
  поддержки	
  мониторов	
  с	
  
небольшим	
  разрешением.	
  	
  	
  	
  
Design	
  Pa•erns	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Кнопка	
  меню	
  на	
  Facebook	
  (hamburger	
  buOon — 
кнопка-­‐гамбургер) — которая	
  служит	
  для	
  вызова	
  
скрытого	
  меню	
  в	
  мобильных	
  приложениях — стала	
  
появляться	
  и	
  на	
  полноразмерных	
  сайтах,	
  где	
  
достаточно	
  места	
  для	
  нормального,	
  не	
  скрытого	
  
меню.	
  Конечно,	
  ведь	
  спрятать	
  меню	
  гораздо	
  
проще,	
  чем	
  спроектировать	
  хорошее.	
  
	
  
Mногие	
  пользователи	
  даже	
  не	
  заметят	
  скрытое	
  
меню	
  и	
  покинут	
  сайт	
  или	
  запутаются.	
  
hOp://siliconrus.com/2014/04/sidemenu/	
  
hOp://www.goodui.org/	
  
Try	
  a	
  one	
  column	
  layout	
  
hOp://www.goodui.org/	
  
Try	
  giving	
  a	
  Gi›	
  instead	
  	
  of	
  closing	
  a	
  sale	
  right	
  
away	
  	
  
hOp://www.goodui.org/	
  
Try	
  merging	
  similar	
  func{ons	
  	
  
hOp://www.goodui.org/	
  
Try	
  Social	
  proof	
  instead	
  of	
  talking	
  about	
  
yourself	
  
hOp://www.goodui.org/	
  
Repea{ng	
  your	
  primary	
  ac{on	
  
I	
  can	
  not	
  believe…	
  
Информационная	
  архитектура	
  
Информационная	
  архитектура	
  сайта	
  	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Карта	
  вашего	
  сайта	
  
может	
  быть	
  либо	
  
“плоской”	
  (flat) — тогда	
  
будет	
  больше	
  секций	
  в	
  
меню,	
  зато	
  понадобится	
  
меньше	
  кликов — либо	
  
“глубокой”	
  (deep),	
  что	
  
означает	
  более	
  простое	
  
меню,	
  но	
  требует	
  
больше	
  кликов	
  на	
  пути	
  к	
  
цели.	
  
	
  
p.s.	
  В	
  примерах	
  кол-­‐во	
  
страниц	
  одинаково.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Сайтам,	
  на	
  которых	
  много	
  продуктов,	
  например	
  
Walmart,	
  чаще	
  всего	
  подходит	
  “глубокая”	
  
архитектура,	
  иначе	
  размеры	
  меню	
  будут	
  выходить	
  
за	
  все	
  рамки.	
  Сайты	
  вроде	
  YouTube,	
  где	
  все	
  
строится	
  вокруг	
  пользователей	
  и	
  видео-­‐роликов,	
  
обычно	
  “плоские”.	
  
	
  
Если	
  ваш	
  сайт	
  и	
  глубокий,	
  и	
  плоский	
  
одновременно,	
  это	
  плохо.	
  Либо	
  у	
  вас	
  очень	
  
хорошая	
  механика	
  поиска.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Возможно	
  вы	
  слышали,	
  что	
  до	
  любого	
  
интересующего	
  объекта	
  “всегда	
  должно	
  быть	
  три	
  
клика”.	
  	
  
	
  
Вам	
  нужно	
  концентрироваться	
  на	
  пользователе,	
  а	
  
не	
  на	
  “правилах”	
  из	
  учебника.	
  Главное,	
  чтобы	
  
люди	
  всегда	
  понимали,	
  где	
  они	
  находятся	
  и	
  что	
  
могут	
  сделать.	
  Если	
  ваша	
  навигация	
  простая	
  и	
  
четкая,	
  то	
  количество	
  кликов	
  значения	
  не	
  имеет.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Пользовательская	
  история — это	
  полное,	
  
законченное	
  описание	
  одного	
  из	
  возможных	
  
путей	
  взаимодействия	
  между	
  пользователем	
  и	
  
вашим	
  сайтом/приложением.	
  Для	
  того,	
  чтобы	
  
описать	
  весь	
  дизайн,	
  понадобится	
  много	
  
пользовательских	
  историй.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Пример	
  пользовательской	
  истории	
  для	
  Google.com:	
  
	
  
1.  Пользователь	
  оказывается	
  на	
  главной	
  странице	
  
поиска.	
  
2.  Пользователь	
  может	
  ввести	
  любой	
  поисковый	
  запрос	
  
и	
  нажать	
  “найти”	
  при	
  помощи	
  мыши	
  или	
  клавиатуры.	
  
3.  На	
  следующей	
  странице	
  отображается	
  список	
  
результатов	
  поиска,	
  отсортированный	
  по	
  убыванию	
  
релевантности.	
  
4.  Пользователь	
  может	
  нажать	
  на	
  одну	
  из	
  ссылок	
  для	
  
перехода	
  на	
  нужный	
  сайт	
  или	
  просматривать	
  
результаты	
  поиска	
  до	
  тех	
  пор,	
  пока	
  не	
  найдет	
  
интересующую	
  его	
  информацию.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Типы	
  информационный	
  
архитектуры:	
  
	
  
1.  Категории	
  
2.  Задачи	
  
3.  Поиск	
  
4.  Время	
  
5.  Люди	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Категории:	
  
	
  
Розничный	
  магазин	
  Zara.	
  	
  
Меню	
  категорий:	
  мужчины,	
  
женщины,	
  дети,	
  скидки	
  и	
  т.д.	
  
	
  
Сложнее	
  с	
  банковскими	
  
продуктами,	
  химическими	
  
реагентами	
  и	
  т.д.	
  	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Задачи:	
  
	
  
В	
  основе	
  лежат	
  задачи	
  
пользователя,	
  которые	
  нужно	
  
решить.	
  	
  
	
  
Хорошо	
  работает	
  для	
  банков:	
  
Депозиты,	
  Кредиты,	
  Помощь,	
  
Открытие	
  счета/карточки.	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Поиск:	
  
	
  
Если	
  сайт	
  состоит	
  из	
  контента	
  
создаваемого	
  самими	
  
пользователями,	
  то	
  вероятнее	
  
необходимо	
  строить	
  IА	
  на	
  
поиске,	
  как	
  YouTube.	
  	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Время:	
  
	
  
Пример	
  –	
  почтовый	
  ящик,	
  где	
  
сообщения	
  меняются	
  по	
  мере	
  
доставки.	
  
	
  
Для	
  сайта:	
  «Актуально	
  сейчас»,	
  
«в	
  архиве»,	
  «почитать	
  позже».	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Getpocket.com	
  
Люди:	
  
	
  
Пример:	
  facebook	
  
Все	
  построено	
  вокруг	
  
пользователя	
  и	
  его	
  отношений	
  
с	
  другими	
  людьми	
  
(фотография,	
  друзья,	
  места).	
  	
  
hOps://medium.com/ux-­‐crash-­‐course/	
  
Sketch	
  &	
  Wireframes	
  
1.  Think	
  
2.  Document	
  
3.  Experiment	
  
4.  Explain	
  and	
  communicate	
  
5.  Fail	
  faster	
  	
  
6.  Find	
  the	
  perfect	
  solu{on	
  
Sketch.	
  For	
  what?	
  
I	
  can’t	
  draw	
  
hOp://www.youtube.com/watch?v=flJtdkR1P9I	
  
hOp://www.youtube.com/watch?v=flJtdkR1P9I	
  
The	
  faster	
  the	
  more	
  
produc{ve!	
  
The	
  uglier	
  the	
  beOer!	
  
The	
  more	
  sketches	
  the	
  
more	
  ideas!	
  	
  
Don’t	
  cri{cize!	
  
Don’t	
  seek	
  perfec{on!	
  
Don’t	
  focus	
  on	
  details!	
  	
  
	
  
hOp://www.youtube.com/watch?v=flJtdkR1P9I	
  
What?	
  
hOp://www.youtube.com/watch?v=flJtdkR1P9I	
  
Disney	
  Concert	
  Hall	
  (Carol	
  Highsmith)	
  
hOp://www.youtube.com/watch?v=flJtdkR1P9I	
  
Research	
  sketch	
  
+	
  	
  	
  	
  Many	
  types	
  
-­‐  No	
  one	
  understands	
  
-­‐  Almost	
  no	
  details	
  
«Elegant»	
  sketch	
  
+	
  More	
  realis{c	
  
+	
  Can	
  be	
  shown	
  to	
  others	
  
-­‐	
  Timeconsuming	
  
hOp://www.youtube.com/watch?v=flJtdkR1P9I	
  
hOps://docs.google.com/fileview?id=0B916EDb6727eMGJlNjdhOTEtMmYxNS00OTQ4LTkxMTUtZmZjMjIzYmI4NTMw&hl=en	
  
hOp://hotdesignfor.us/news/2010/04/01/shablony-­‐dlya-­‐eskiza-­‐stranic-­‐sajta-­‐na-­‐bumage/	
  
Concept	
  	
  
selec{on	
  Idea	
  	
  
genera{on	
  
L	
  
L	
  
L	
   L	
  
L	
   J	
  J	
   J	
  
L	
  L	
   L	
  
L	
  
L	
  
…	
  itera{on…	
  
hOp://konigi.com/book/sketch-­‐book/why-­‐we-­‐sketch	
  
…amazing	
  
Практическое	
  задание:	
  
Делимся	
  на	
  группы	
  по	
  5	
  человек.	
  	
  
Времени:	
  10	
  минут.	
  
	
  	
  
Проектируем	
  окно	
  регистрации	
  
для	
  мобильного	
  приложения.	
  
	
  
-­‐  Вход	
  с	
  помощью	
  соц	
  аккаунта	
  
-­‐  Новый	
  акк.	
  через	
  емейл	
  	
  
-­‐  Уже	
  есть	
  аккаунт?	
  
-­‐  Иконка	
  приложения	
  +	
  описание	
  
Course User interface - Lesson 1
Wireframes	
  
Чем	
  wireframe	
  не	
  является.	
  
	
  
1.  Wireframe — это	
  не	
  просто	
  скетч	
  в	
  
общих	
  чертах	
  
2.  Хороший	
  wireframe	
  требует	
  времени	
  
3.  У	
  wireframe	
  не	
  бывает	
  
промежуточного	
  состояния	
  
4.  Wireframe-­‐ы	
  нужно	
  воспринимать	
  
всерьез	
  
5.  Wireframe-­‐ы	
  не	
  предназначены	
  для	
  
презентации	
  
	
  
	
  
hOps://medium.com/ux-­‐ux-­‐pro{ps/8-­‐wireframe-­‐593136561b98	
  
Что	
  такое	
  wireframе?	
  
	
  
Wireframe — это	
  технический	
  
документ.	
  Линии,	
  блоки,	
  подписи.	
  
Возможно,	
  пара	
  цветовых	
  акцентов.	
  
И	
  все!	
  
	
  	
  
hOps://medium.com/ux-­‐ux-­‐pro{ps/8-­‐wireframe-­‐593136561b98	
  
 
	
  
Иногда	
  рисование	
  wireframe-­‐а	
  
занимает	
  лишь	
  час,	
  а	
  вот	
  его	
  
планирование	
  происходит	
  
неделями.	
  Важно,	
  чтобы	
  ваши	
  
коллеги	
  и	
  клиенты	
  это	
  понимали.	
  	
  
hOps://medium.com/ux-­‐ux-­‐pro{ps/8-­‐wireframe-­‐593136561b98	
  
Если	
  UI-­‐разработчик	
  или	
  	
  
UI-­‐дизайнер	
  не	
  может	
  
использовать	
  ваш	
  “wireframe”,	
  	
  
то	
  это	
  просто	
  скетч,	
  а	
  не	
  wireframe.	
  	
  
	
  
Продолжайте	
  работу.	
  
hOps://medium.com/ux-­‐ux-­‐pro{ps/8-­‐wireframe-­‐593136561b98	
  
Course User interface - Lesson 1
I	
  want	
  breaking	
  into	
  the	
  field	
  of	
  
User	
  Experience	
  
Arccles:	
  
	
  
1.  UX	
  Ma•ers	
  Complete	
  Guide	
  to	
  Ge”ng	
  Started	
  in	
  UX	
  
2.  Patrick	
  Neeman	
  suggests	
  Four	
  Ways	
  To	
  Break	
  Into	
  User	
  
Experience	
  	
  
3.  Undercover	
  User	
  Experience	
  Design	
  by	
  Cennydd	
  Bowles	
  
and	
  James	
  Box	
  
4.  Ge”ng	
  Experience	
  with	
  User	
  Experience	
  from	
  UX	
  Booth	
  	
  
5.  UX	
  Mastery	
  also	
  has	
  a	
  book	
  on	
  Ge”ng	
  Started	
  
hOp://www.measuringusability.com/blog/ge»ng-­‐started.php	
  
Books:	
  
	
  
1.  Design	
  of	
  Everyday	
  things:	
  To	
  get	
  you	
  inspired.	
  
2.  The	
  Inmates	
  are	
  Running	
  the	
  Asylum:	
  To	
  understand	
  the	
  
importance	
  of	
  user	
  centered	
  design.	
  
3.  Measuring	
  the	
  User	
  Experience:	
  Get	
  to	
  know	
  metrics	
  and	
  
measuring	
  fuzzy	
  things.	
  
4.  A	
  Pracccal	
  Guide	
  to	
  Measuring	
  Usability:	
  A	
  crash	
  course	
  in	
  
usability	
  tescng	
  and	
  metrics	
  
5.  Just	
  about	
  any	
  book	
  from	
  the	
  Rosenfeld	
  library	
  
6.  The	
  classic	
  paper,	
  Designing	
  for	
  Usability	
  and	
  What	
  Designers	
  
Think	
  [pdf]	
  and	
  a	
  corresponding	
  blog	
  about	
  it	
  
7.  A	
  Pracccal	
  Guide	
  to	
  Usability	
  Tescng	
  :	
  Now	
  in	
  its	
  second	
  
edicon,	
  this	
  classic	
  text	
  from	
  Joe	
  Dumas	
  and	
  Ginny	
  Redish	
  is	
  
scll	
  the	
  best	
  resource	
  for	
  the	
  mechanics	
  of	
  usability	
  tescng.	
  
hOp://www.measuringusability.com/blog/ge»ng-­‐started.php	
  
Courses:	
  
	
  
1.  David	
  Travis	
  Udemy	
  Course	
  User	
  Experience:	
  
The	
  Ulcmate	
  Guide	
  to	
  Usability	
  	
  	
  
2.  All	
  you	
  can	
  learn	
  seminars	
  from	
  UX	
  Experts	
  	
  
3.  Human-­‐Computer	
  Interaccon	
  course	
  on	
  
coursera.org	
  	
  
hOp://www.measuringusability.com/blog/ge»ng-­‐started.php	
  
Conferences	
  and	
  events:	
  
	
  
1.  UX	
  Book	
  clubs:	
  Most	
  cices	
  have	
  their	
  own	
  UX	
  book	
  club,	
  
like	
  our	
  popular	
  one	
  in	
  Denver	
  that	
  meets	
  monthly	
  and	
  
even	
  a	
  UX	
  Happy	
  Hour	
  	
  
2.  UX	
  Boot	
  Camp:	
  Our	
  annual	
  boot	
  camp	
  focuses	
  on	
  
measurement,	
  metrics	
  and	
  method	
  
3.  UxPA:	
  	
  The	
  User	
  Experience	
  Professionals	
  Associacon	
  has	
  
an	
  annual	
  meecng	
  with	
  content	
  suited	
  well	
  to	
  those	
  new	
  
to	
  user	
  experience	
  and	
  especially	
  usability.	
  
4.  IxDA	
  :	
  The	
  Interaccon	
  Design	
  Associacon	
  has	
  resources	
  
and	
  an	
  annual	
  conference	
  geared	
  toward	
  design.	
  	
  
5.  The	
  new	
  GIANT	
  Conference	
  
6.  UX	
  Week	
  Design	
  Conference	
  
hOp://www.measuringusability.com/blog/ge»ng-­‐started.php	
  
University	
  programs:	
  
	
  
1.  Bentley	
  University	
  Masters	
  in	
  Human	
  Factors	
  in	
  
Informacon	
  Design	
  and	
  has	
  some	
  great	
  faculty	
  including	
  
our	
  friend	
  Bill	
  Albert.	
  	
  
2.  Stanford	
  University	
  offers	
  a	
  number	
  of	
  undergraduate	
  
and	
  graduate	
  degrees	
  in	
  human	
  computer	
  interaccon.	
  	
  
3.  Masters	
  of	
  Human	
  Computer	
  Interaccon	
  at	
  Carnegie	
  
Mellon	
  	
  
4.  Clemson	
  University	
  offers	
  a	
  Masters	
  in	
  Professional	
  
Communicacon	
  where	
  our	
  friend	
  Tharon	
  Howard	
  
teaches.	
  	
  
5.  Virginia	
  Tech	
  offers	
  a	
  Masters	
  in	
  Computer	
  Science	
  with	
  a	
  
cercficate	
  in	
  Human	
  Computer	
  Interaccon	
  	
  
hOp://www.measuringusability.com/blog/ge»ng-­‐started.php	
  
 
by	
  Yury	
  Vetrov	
  
Ok,	
  I	
  almost	
  got	
  it!..	
  
Alexander	
  Lisovsky	
  
Co-­‐Founder	
  at	
  ZZ	
  Photo	
  
UX/UI	
  designer	
  
	
  
a.lisovsky@zzphoto.me	
  
facebook.com/alexlisovsky,	
  pinterest.com/alexlisovsky,	
  	
  
twiOer.com/lisovsky	
  
	
  

More Related Content

PDF
Course User interface — Lesson 11
PPTX
Course User interface - Lesson 3
PPTX
Course User interface — Lesson 9
PDF
Course User interface — Lesson 7
PPTX
Course User interface — Lesson 8
PPTX
UX Research для интенсива UX&UI Британская Школа Дизайна
PDF
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
PDF
UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1
Course User interface — Lesson 11
Course User interface - Lesson 3
Course User interface — Lesson 9
Course User interface — Lesson 7
Course User interface — Lesson 8
UX Research для интенсива UX&UI Британская Школа Дизайна
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1

What's hot (20)

PDF
Юзабилити-тестирование
PDF
Как интернет вещей «убьет» известные нам методики проектирования интерфейсов
PDF
Lean UX, Уровни UX, UXD процесс
PDF
Основы быстрого прототипирования
PDF
Юрий Ветров — Алгоритмический дизайн
PDF
Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014
PDF
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
PPTX
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
PPTX
Дизайн успешных продуктов
PDF
UXPeople 2015: Юрий Ветров — Платформенное мышление
PDF
Микромоменты: руководство по успешному мобильному маркетингу
 
PDF
Design Management
PPTX
Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...
PDF
UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...
PDF
UX-Марафон 2016: Ю.Ветров — Дайджест продуктового дизайна, выпуск 2
PDF
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
PDF
Юрий Ветров — Внедрение UX-стратегии
PDF
UX Strategy 101
PPTX
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
PDF
Как продавать исследования
Юзабилити-тестирование
Как интернет вещей «убьет» известные нам методики проектирования интерфейсов
Lean UX, Уровни UX, UXD процесс
Основы быстрого прототипирования
Юрий Ветров — Алгоритмический дизайн
Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
Дизайн успешных продуктов
UXPeople 2015: Юрий Ветров — Платформенное мышление
Микромоменты: руководство по успешному мобильному маркетингу
 
Design Management
Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...
UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...
UX-Марафон 2016: Ю.Ветров — Дайджест продуктового дизайна, выпуск 2
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
Юрий Ветров — Внедрение UX-стратегии
UX Strategy 101
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
Как продавать исследования
Ad

Viewers also liked (8)

PPTX
Робота дизайнера у технологічному стартапі
PDF
Course User interface - Lesson 5
PPTX
Art-Fresh и "1С-Битрикс" Marketplace: разработка тиражных модулей интеграции ...
PDF
презентация 2
PDF
Course User interface - Lesson 2
PPTX
Usability. Пользовательский интерфейс и представление информации
PPTX
принципы проектирования интерфейса (37)
PDF
UX. How to start?
Робота дизайнера у технологічному стартапі
Course User interface - Lesson 5
Art-Fresh и "1С-Битрикс" Marketplace: разработка тиражных модулей интеграции ...
презентация 2
Course User interface - Lesson 2
Usability. Пользовательский интерфейс и представление информации
принципы проектирования интерфейса (37)
UX. How to start?
Ad

Similar to Course User interface - Lesson 1 (20)

PPTX
User experience, как замена юзабилити
PPTX
IT-Nonstop. Продукт и пользователь: дружба начинается с UX
PPTX
Николай Грачев (AllBiz) "Продукт и пользователь: дружба начинается с UX"
PPTX
IDealMachine October 2014
PDF
Human Centered Design
PPT
User Centered Design: обзор процесса
PPT
UCD: основы процесса
PPTX
Введение в UX|UI дизайн. Что такое дизайн?
ODP
Мастер-класс "Экспериментальный дизайн взаимодействия"
PDF
Дизайн пользовательских интерфейсов для разработчиков
PPTX
Эллина Азадова "Что за зверь Usability... и как его протестировать"
PDF
Лекция для БШД про UX Research
PPT
О профессии юзабилити-специалиста для студентов-психологов
PDF
Usabilitylab
PPTX
Проводник по джунглям user experience
PDF
Interaction Design
PPT
Объединяющая сила UX
PPT
Юзабилити - есть такая профессия
PPTX
Хитрости UX-дизайна: ключевые лайфхаки, которые должен знать разработчик
User experience, как замена юзабилити
IT-Nonstop. Продукт и пользователь: дружба начинается с UX
Николай Грачев (AllBiz) "Продукт и пользователь: дружба начинается с UX"
IDealMachine October 2014
Human Centered Design
User Centered Design: обзор процесса
UCD: основы процесса
Введение в UX|UI дизайн. Что такое дизайн?
Мастер-класс "Экспериментальный дизайн взаимодействия"
Дизайн пользовательских интерфейсов для разработчиков
Эллина Азадова "Что за зверь Usability... и как его протестировать"
Лекция для БШД про UX Research
О профессии юзабилити-специалиста для студентов-психологов
Usabilitylab
Проводник по джунглям user experience
Interaction Design
Объединяющая сила UX
Юзабилити - есть такая профессия
Хитрости UX-дизайна: ключевые лайфхаки, которые должен знать разработчик

More from Oleksandr Lisovskyi (19)

PDF
Design process
PDF
PDF
Best Day of my life
PPTX
About 3D printing
PPTX
3D-печать. Тенденции развития отрасли.
PDF
О дизайне интерфейсов для HR-IT CLUB
PDF
ZZ Photo presentation IDCEE2014
PDF
Holy Stories
PDF
Web-design: курс для новичков. День третий.
PDF
web-design: курс для новичков. День второй.
PDF
Web-design: курс для новичков. День 1.
PDF
web-design: курс для новичков. День седьмой.
PDF
Web-design: курс для новичков. День шестой.
PDF
Web-design: курс для новичков. День пятый.
PDF
Web-design: курс для новичков. День четвертый.
PDF
Web-design: курс для новичков. День третий.
PDF
Web-design: курс для новичков. День второй.
PDF
Web-design: курс для новичков
Design process
Best Day of my life
About 3D printing
3D-печать. Тенденции развития отрасли.
О дизайне интерфейсов для HR-IT CLUB
ZZ Photo presentation IDCEE2014
Holy Stories
Web-design: курс для новичков. День третий.
web-design: курс для новичков. День второй.
Web-design: курс для новичков. День 1.
web-design: курс для новичков. День седьмой.
Web-design: курс для новичков. День шестой.
Web-design: курс для новичков. День пятый.
Web-design: курс для новичков. День четвертый.
Web-design: курс для новичков. День третий.
Web-design: курс для новичков. День второй.
Web-design: курс для новичков

Course User interface - Lesson 1

  • 2. Alexander  Lisovsky   Co-­‐Founder  at  ZZ  Photo,  UX/UI  designer     a.lisovsky@zzphoto.me   facebook.com/alexlisovsky,  pinterest.com/alexlisovsky,     twiOer.com/lisovsky    
  • 6. Любой  сервис/приложение   подразумевает  наличие   опыта  взаимодействия  (user   experience).  Наша  задача  не  в   том,  чтобы  создавать  опыт   взаимодействия.  Наша  задача  — сделать  его  хорошим   hOps://medium.com/ux-­‐crash-­‐course  
  • 7. Является  ли  главной  целью   хорошего  пользовательского   опыта  сделать  человека   счастливым?   hOps://medium.com/ux-­‐crash-­‐course  
  • 8. Да,  но  нет.  Если  бы  нашей   целью  было  осчастливить   пользователей,  мы  бы  просто   добавили  побольше   смешных  котиков  и   комплиментов.   hOps://medium.com/ux-­‐crash-­‐course  
  • 9. Цель  UX-­‐дизайнера,  чтобы   пользователи  были   эффективными.   hOps://medium.com/ux-­‐crash-­‐course  
  • 10. “In  early  stages  of  design,   pretend  the  interface  is  magic.”   Why?    
  • 12. A  user  interface  is   like  a  joke.  If  you   have  to  explain  it,   it`s  not  that  good.  
  • 13. UX  (User  Experience),  is  an  approach  to  product   development  that  incorporates  direct  user  feedback   throughout  the  development  cycle  (human-­‐centered   design)  in  order  to  reduce  costs  and  create  products   and  tools  that  meet  user  needs  and  have  a  high  level   of  usability  (are  easy  to  use).     UX  -­‐  является  подход  к  разработке  продуктов,  которые  включает  в  себя  прямую   обратную  связь  с  пользователем  на  протяжении  всего  цикла  разработки   (человеко  ориентированного  дизайна)  в  целях  сокращения  расходов  и   создания  продуктов  и  инструментов,  которые  удовлетворяют  потребности   пользователей  и  имеют  высокий  уровень  удобства.   UXPA  -­‐  User  Experience  Professionals  Associa{on   hOps://uxpa.org/  
  • 14. The  business  benefits  of  adding  UX  to  a  product   development  process  include:     •  Increased  produc{vity   •  Increased  sales  and  revenues   •  Decreased  training  and  support  costs   •  Reduced  development  {me  and  costs   •  Reduced  maintenance  costs   •  Increased  customer  sa{sfac{on   hOps://uxpa.org/  
  • 16. Analysis  Phase     •  Meet  with  key  stakeholders  to  set  vision   •  Include  usability  tasks  in  the  project  plan   •  Assemble  a  mul{disciplinary  team     to  ensure  complete  exper{se   •  Develop  usability  goals  and  objec{ves   •  Conduct  field  studies   •  Look  at  compe{{ve  products   •  Create  user  profiles   •  Develop  a  task  analysis   •  Document  user  scenarios   •  Document  user  performance  requirements   hOps://uxpa.org/  
  • 17. Design  Phase     •  Begin  to  brainstorm  design  concepts  and  metaphors   •  Develop  screen  flow  and  naviga{on  model   •  Do  walkthroughs  of  design  concepts   •  Begin  design  with  paper  and  pencil   •  Create  low-­‐fidelity  prototypes   •  Conduct  usability  tes{ng  on  low-­‐fidelity  prototypes   •  Create  high-­‐fidelity  detailed  design   •  Do  usability  tes{ng  again   •  Document  standards  and  guidelines   •  Create  a  design  specifica{on   hOps://uxpa.org/  
  • 18. Implementacon  Phase     •  Do  ongoing  heuris{c  evalua{ons   •  Work  closely  with  delivery  team     as  design  is  implemented   •  Conduct  usability  tes{ng  as  soon  as  possible     Deployment  Phase     •  Use  surveys  to  get  user  feedback   •  Conduct  field  studies  to  get  info  about  actual  use   •  Check  objec{ves  using  usability  tes{ng   hOps://uxpa.org/  
  • 20. Interac{on  design   vs.  Interface  design     Interaccon  design   —  from  generic  to  specific   —  user’s  goals   —  do  not  forget  about  constraints  (technology,              business  processes)  
  • 21. Brief:  create  a  more  convenient  tool   for  working  with  tables.  
  • 23. 2.  Interaccon  design:       Tests  revealed  that  the  study  of  data  tables  is  a   minor  task,  and  the  real  user’s  goal  is  to  track   trends.     Therefore  it  is  necessary  to  create  not  a  report   generator,  but...  
  • 24. Not  Report  generator,  but  the  Trends  analyzer  
  • 27. The  most  effec{ve  tool  of   interac{on  design  is  extremely   simple:  it  is  an  accurate   descrip-on  of  the  product  user   and  his  goals     The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 28. Юзабилити  —  это  степень  эффективности,   продуктивности  и  удовлетворенности,  с   которыми  продукт  может  быть  использован   определенными  пользователями  в   определенном  контексте  использования  для   достижения  определенных  целей:     1.  Определёнными  пользователями  (кто?)   2.  В  определённом  контексте  (где  и  как?)   3.  Для  достижения  определённых  целей   (зачем?)      hOp://www.usabilitylab.ua/ux-­‐insight/know_user/  
  • 29. Characters  are  not  real  people,  but  they   represent  real  people  during  the  design   process.  They  are  hypothe0cal   archetypes  of  actual  users.  They  are   imagined,  but  nevertheless,  are  quite   strictly  and  accurately  defined.     On  prac{ce,  we  are  not  really  "making   up"  characters  but  discover  them  as  a  by-­‐ product  of  the  inves{ga{on  process.  But   we  actually  make  up  their  names  and   personal  informa{on.     The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 30. Sample:     Car  design   The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 31.   Target  audience:   Age:  18-­‐60   Income:  middle  +     right?     The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 32. The  inmates  are  running  the  asylum.  By  Alan  Cooper   Junior  manager  
  • 33. The  inmates  are  running  the  asylum.  By  Alan  Cooper   Carpenter  
  • 34. The  inmates  are  running  the  asylum.  By  Alan  Cooper   Mom  
  • 35. The  inmates  are  running  the  asylum.  By  Alan  Cooper   Car  «for  everybody»  
  • 36. Зачем  нужны  персонажи?     1.  Коммуникация  в  команде   2.  Фокусировка  на  всех   этапах  проекта   3.  Фиксация  данных   исследований   4.  Эмпатия  (осознанное   сопереживание)   hOp://www.usabilitylab.ua/ux-­‐insight/know_user/  
  • 38. 80%  of  the  par{cipants  in  focus   groups  hated  the  new  pickup  Dodge   Ram.  But  a›er  the  car  was  released   to  the  market  it  became  a  bestseller   because  the  remaining  20%  of  people   fell  in  love  with  it.     If  even  a  small  number  of  people   loves  the  product  it's  the  key  to   success.    The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 39. Что  нужно  знать  о  персонаже?     Основные  характеристики:   •  Имя   •  Фотография   •  Черты  характера   •  Роль   •  Важность  персонажа  (ключевой  или   второстепенный)   •  Образование   •  Работа  (место  работы,  должность,  з/п).   hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/  
  • 40. Что  нужно  знать  о  персонаже?     Личная  жизнь   •  Семья   •  Семейный  доход   •  Цели.  Глобальные:  определяют  систему   ценностей.  Локальные:  определяют   задачи,  которые  решает  с  помощью   продукта   •  Социальная  жизнь   •  Увлечения.   hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/  
  • 41. Что  нужно  знать  о  персонаже?     Технологии,  знания,  опыт   •  Использование  социальных  сетей   •  Техника.  Персональный  компьютер  /   ноутбук:  ежедневные  задачи,  модель(и).   Мобильный  телефон:  модель,  как   использует.  Гаджеты   •  Опыт  работы  в  среде,  под  которую   проектируем  интерфейс.   hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/  
  • 42. Что  нужно  знать  о  персонаже?     Характеристики,  относящиеся  к  нашему   продукту/услуге   •  Страхи  и  раздражители   •  Ожидания  и  требования   •  Как  узнал  и  что  знает  о  продукте   •  Мотивированность  в  использовании  нашего   продукта   •  Опыт  работы  с  нашим  продуктом  или  схожими   продуктами   •  Как  сейчас  решает  задачи,  которые  будет   решать  наш  продукт.   hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/  
  • 43. Wheeled  carry  on  suitcase    
  • 44. Wheeled  carry  on  suitcase  is  a  good   example  of  the  effec{veness  of  the   design  for  one  person.  Originally  this   suitcase  was  designed  for  air  crews,   which  is  a  very  small  audience.     The  rest  of  the  travelers  soon  realized   that  this  type  of  a  suitcase  solves  their   problems  too.       The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 45. Где  брать  данные  о  персонаже?     •  Стейкхолдеры*  и  эксперты  предметной  области   •  Системы  веб-­‐аналитики   •  Общение  с  реальными  людьми  (представителями  как   существующей,  так  и  потенциальной  ЦА)   •  Социальные  сети   •  Сотрудники,  которые  постоянно  общаются  с   существующими  клиентами   •  Открытые  результаты  маркетинговых  исследований   •  Отзывы  (о  продукции,  о  вас,  как  о  компании,  о   конкурентах)   •  Специализированные  форумы  и  сообщества.   Стейкхолдер  –  заинтересованная  сторона   hOp://www.usabilitylab.ua/ux-­‐insight/know_user-­‐2/  
  • 46. Пример     Персонаж  А — это  опытный  менеджер,  чьи  интересы,  как   правило,  ограничиваются  одной-­‐двумя  сферами  знаний.   Он  часто  заходит  на  сайт,  но,  поскольку  у  него  немного   свободного  времени,  он  скорее  “копит”  статьи,  чтобы   прочитать  их  в  выходной.  Такие  люди  часто  делятся   статьями  через  соц.  сети,  особенно  TwiOer  и  LinkedIn.  Они   считают  свое  мнение  очень  авторитетным,  поэтому   дорожат  своей  репутацией.   hOps://medium.com/ux-­‐crash-­‐course  
  • 47. Полезный  пример?     Почему  полезный?  Посмотрите,  сколько  у  нас  нужной   информации!  Вы  знаете,  что  статьи,  напичканные   перекрестными  ссылками  на  массу  других  статей,  не   будут  пользоваться  спросом.  А  вот  возможность  создания   закладок  очень  важна.  И  статьи  лучше  рассортировать  по   категориям.  И  нужно,  чтобы  кнопки  для  публикации  в   соц.сети  (причем  конкретно  в  TwiOer  и  LinkedIn)  были  на   виду.   hOps://medium.com/ux-­‐crash-­‐course  
  • 48. Практическое  задание:   Делимся  на  группы  по  5  человек.     Времени:  10  минут.   Описываем  главный  и  второстепенный   персонаж  для  выбранного  сервиса.       –  Программный  комплекс  «Умный  дом»   –  Служба  доставки  продуктов  из  Novus   –  Программа  удаления  дубликатов   –  Услуга  подключения  корпоративного          доступа  в  интернет  
  • 49. Flexible  user     The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 50. «This  applica{on  will  work  well   on  a  PC».       Which  type  of  a  computer?     What  model?     Under  what  OS?       Conclusion:  The  character  must   be  specific     The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 51. Does  a  user  need  the  funccon  for   princng  in  ZZ  Photo?     For  Mercury  (ac{ve  traveler)  it  is   not  needed.     For  Hes{a  (young  mom)  it  is   required.     The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 52. The  character  must  be   imaginary.     Albert  Einstein  once  said  that   no  problem  can  be  solved   from  the  same  level  of   consciousness  that  created  it.       The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 53. Characters  allow  us  to  see  the   scope  and  nature  of  the  design   problem.  They  help  us   understand  and  define  the  exact   user's  goals  and  in  such  way  they   determine  how  the  product  is   supposed  to  work  and  what   features  can  be  ignored.        The  inmates  are  running  the  asylum.  By  Alan  Cooper  
  • 54. Цели  пользователя     &  цели  бизнеса  
  • 55. KPI  –  Key  performance  indicator   hOps://medium.com/ux-­‐crash-­‐course/   Цель  пользователя:     -­‐  Купить  билеты   -­‐  Познакомиться  с  девушкой   -­‐  Посмотреть  смешное  видео…   Цель  бизнеса  (метрики  или  KPI*):   -­‐  Показ  рекламы   -­‐  Продажа  товара   -­‐  Увеличение  пользовательской  базы  
  • 57. hOps://medium.com/ux-­‐crash-­‐course/   Цель  пользователя:  посмотреть     интересные  видео   Цель  бизнеса:  показ  больше  рекламы     Вариант  1:  увеличить  кол-­‐во  экранов     для  достижения  цели  L     Вариант  2:  вовлекать  пользователя     смотреть  больше  (тем  самым  показывая     больше  рекламы)  J  
  • 58. hOps://medium.com/ux-­‐crash-­‐course/   YouTube  зарабатывает     на  рекламе,  а  пользователи  хотят     смотреть  хорошие  видео-­‐ролики.       Поэтому  логично  размещать  рекламу     прямо  в  видео  (или  на  той  же  странице).   Но  еще  логичнее  сделать  поиск  видео     простым  и  приятным,  а  после  просмотра     предлагать  похожие  видео.  Тогда  люди     будут  смотреть  больше  видео,  и,     следовательно,  больше  рекламы.    
  • 59. hOps://medium.com/ux-­‐crash-­‐course/   Если  цели  определены  не  правильно:       1.  Пользователи  получают  то,  что  им  нужно,   не  принося  пользы  бизнесу    =  много  пользователей,  никакого  успеха   для  бизнеса     2.  Пользователи  не  получают  желаемого     =  нет  пользователей,  никакого  успеха     для  бизнеса.  
  • 61. hOps://medium.com/ux-­‐crash-­‐course/   На  каком  этапе  надо  проводить     пользовательские  исследования?     1.  На  этапе  идеи?   2.  На  этапе  бумажного  прототипа?   3.  На  этапе  програмного  прототипа?   4.  На  этапе  бета-­‐версии  
  • 62. hOps://medium.com/ux-­‐crash-­‐course/   Субъективное  исследование:     Слово  “субъективный”  подразумевает     наличие  мнения,  воспоминания,  впечатления     от  чего-­‐то.  Чувства,  которое  у  вас  возникает.     Ожидания,  вызванного  чем-­‐либо.       “Какой  ваш  любимый  цвет?”   “Вы  доверяете  этой  компании?”     То  есть  правильного  ответа  не  существует.  
  • 63. hOps://medium.com/ux-­‐crash-­‐course/   Объективное  исследование:     Под  словом  “объективный”  понимается  факт.     Иногда  правдивый.  Иногда  доказуемый.     И  как  бы  вам  ни  хотелось,  ваше  мнение  никак     не  повлияет  на  этот  факт.     “Как  долго  вы  пользовались  нашим  приложением?”   “Где  вы  нашли  ссылку  на  наш  сайт?”   “Для  входа  вы  использовали  аккаунт  в  facebook  или   почту?”  
  • 65. hOps://medium.com/ux-­‐crash-­‐course/   Открытые  вопросы:     “Как  бы  вы  охарактеризовали  сервис?”      — Можно  составить  очень  много  вопросов  этого  типа.   Открытые  вопросы  стоит  задавать,  если  ваша  цель —  получить  как  можно  больше  информации  от   пользователей.  
  • 66. hOps://medium.com/ux-­‐crash-­‐course/   Наводящие  вопросы:     “Какие  мои  самые  нужные  функции  сервиса?”      — Такой  тип  вопроса  сужает  варианты  ответа  до   определенной  темы.  Будьте  осторожны:  “наводя”   пользователя  на  определенные  ответы,  вы  можете  так   и  не  узнать  другие  возможные  ответы,  которые  могли   бы  оказаться  вам  интересны.  
  • 67. hOps://medium.com/ux-­‐crash-­‐course/   Закрытый/прямой  вопрос:     “Что  удобнее:  просмотр  в  режиме  коллекций  или   таймлайн?”      — Этот  тип  вопроса  предлагает  выбор.  Да  или  нет.  Это   или  то.  Но  помните:  если  варианты  ответа  глупые,  то  и   результаты  окажутся  глупыми.  
  • 68. hOps://medium.com/ux-­‐crash-­‐course/   Типы  исследований     Интервью — собираем  людей  и  задаем  по  очереди   определенный  набор  вопросов.     Наблюдение — даем  людям  задания  или  инструкции  и   наблюдаем,  как  они  пользуются  вашим  дизайном  без  чьей-­‐ либо  помощи.  После  этого  вы  можете  задать  им  пару   вопросов.     Фокус-­‐группа — собираем  группу  людей  в  одной  комнате  и   просим  их  обсудить  интересующий  вас  вопрос.  На  заметку:   уверенные  в  себе  люди  зачастую  влияют  на  мнения  других   членов  группы.      
  • 69. hOps://medium.com/ux-­‐crash-­‐course/   Типы  исследований     Опрос — это  форма,  которую  люди  заполняют  на  бумаге  или   онлайн.  Самое  полезное  то,  что  анкеты  кажутся  анонимными.     Сортировка  карточек — каждый  человек  получает  набор  идей   или  категорий  (на  карточках  или  стикерах),  которые  нужно   рассортировать  по  логическим  группам.  Посмотрите,  какой   логикой  руководствуются  люди,  и  поймете,  каким  должно   быть  меню.  Профессиональный  совет:  не  просите  коллег   делать  это.  Пусть  это  делают  обычные  пользователи.     Google — удивительно,  сколько  полезного  можно  найти   онлайн.  Прямо  сейчас  и  совершенно  бесплатно.  
  • 71. hOps://medium.com/ux-­‐crash-­‐course/   С  какого  устройства  начнем   проектирование?     1.  Смартфон   2.  Планшет   3.  Десктоп  
  • 72. hOps://medium.com/ux-­‐crash-­‐course/   С  какого  устройства  начнем   проектирование?     1.  Смартфон   2.  Планшет   3.  Десктоп     Почему?  
  • 73. hOps://medium.com/ux-­‐crash-­‐course/   Когда  вы  начинаете  проектировать   приложение  в  расчете  на  небольшой,   маломощный  девайс,  вы  больше   концентрируетесь  на  содержании  и   ключевых  функциях.       Так  получаются  простые  и  красивые   приложения.    
  • 75. hOps://medium.com/ux-­‐crash-­‐course/   Мобильные  устройства  всегда  с  нами,   поэтому — сюрприз! — мы  пользуемся  ими   чаще  и  в  самых  неожиданных  местах.       Поскольку  мобильные  устройства   небольшие  по  размеру,  сама  возможность   взять  их  в  руку  и  переместить  в   пространстве  уже  может  быть  функцией.  
  • 76. hOps://medium.com/ux-­‐crash-­‐course/   Кейс  ZZ  Photo:     1.  30%  трафика  на  сайт  –  смартфоны     2.  Отказались  от  поддержки  Windows  Vista,   XP  из-­‐за  функциональной  несовместимости.     3.  Пришлось  перерисовать  некоторые   экраны  из-­‐за  поддержки  мониторов  с   небольшим  разрешением.        
  • 78. hOps://medium.com/ux-­‐crash-­‐course/   Кнопка  меню  на  Facebook  (hamburger  buOon —  кнопка-­‐гамбургер) — которая  служит  для  вызова   скрытого  меню  в  мобильных  приложениях — стала   появляться  и  на  полноразмерных  сайтах,  где   достаточно  места  для  нормального,  не  скрытого   меню.  Конечно,  ведь  спрятать  меню  гораздо   проще,  чем  спроектировать  хорошее.     Mногие  пользователи  даже  не  заметят  скрытое   меню  и  покинут  сайт  или  запутаются.  
  • 80. hOp://www.goodui.org/   Try  a  one  column  layout  
  • 81. hOp://www.goodui.org/   Try  giving  a  Gi›  instead    of  closing  a  sale  right   away    
  • 82. hOp://www.goodui.org/   Try  merging  similar  func{ons    
  • 83. hOp://www.goodui.org/   Try  Social  proof  instead  of  talking  about   yourself  
  • 85. I  can  not  believe…  
  • 87. Информационная  архитектура  сайта     hOps://medium.com/ux-­‐crash-­‐course/  
  • 88. Карта  вашего  сайта   может  быть  либо   “плоской”  (flat) — тогда   будет  больше  секций  в   меню,  зато  понадобится   меньше  кликов — либо   “глубокой”  (deep),  что   означает  более  простое   меню,  но  требует   больше  кликов  на  пути  к   цели.     p.s.  В  примерах  кол-­‐во   страниц  одинаково.   hOps://medium.com/ux-­‐crash-­‐course/  
  • 89. Сайтам,  на  которых  много  продуктов,  например   Walmart,  чаще  всего  подходит  “глубокая”   архитектура,  иначе  размеры  меню  будут  выходить   за  все  рамки.  Сайты  вроде  YouTube,  где  все   строится  вокруг  пользователей  и  видео-­‐роликов,   обычно  “плоские”.     Если  ваш  сайт  и  глубокий,  и  плоский   одновременно,  это  плохо.  Либо  у  вас  очень   хорошая  механика  поиска.   hOps://medium.com/ux-­‐crash-­‐course/  
  • 90. Возможно  вы  слышали,  что  до  любого   интересующего  объекта  “всегда  должно  быть  три   клика”.       Вам  нужно  концентрироваться  на  пользователе,  а   не  на  “правилах”  из  учебника.  Главное,  чтобы   люди  всегда  понимали,  где  они  находятся  и  что   могут  сделать.  Если  ваша  навигация  простая  и   четкая,  то  количество  кликов  значения  не  имеет.   hOps://medium.com/ux-­‐crash-­‐course/  
  • 91. Пользовательская  история — это  полное,   законченное  описание  одного  из  возможных   путей  взаимодействия  между  пользователем  и   вашим  сайтом/приложением.  Для  того,  чтобы   описать  весь  дизайн,  понадобится  много   пользовательских  историй.   hOps://medium.com/ux-­‐crash-­‐course/  
  • 92. Пример  пользовательской  истории  для  Google.com:     1.  Пользователь  оказывается  на  главной  странице   поиска.   2.  Пользователь  может  ввести  любой  поисковый  запрос   и  нажать  “найти”  при  помощи  мыши  или  клавиатуры.   3.  На  следующей  странице  отображается  список   результатов  поиска,  отсортированный  по  убыванию   релевантности.   4.  Пользователь  может  нажать  на  одну  из  ссылок  для   перехода  на  нужный  сайт  или  просматривать   результаты  поиска  до  тех  пор,  пока  не  найдет   интересующую  его  информацию.   hOps://medium.com/ux-­‐crash-­‐course/  
  • 93. Типы  информационный   архитектуры:     1.  Категории   2.  Задачи   3.  Поиск   4.  Время   5.  Люди   hOps://medium.com/ux-­‐crash-­‐course/  
  • 94. Категории:     Розничный  магазин  Zara.     Меню  категорий:  мужчины,   женщины,  дети,  скидки  и  т.д.     Сложнее  с  банковскими   продуктами,  химическими   реагентами  и  т.д.     hOps://medium.com/ux-­‐crash-­‐course/  
  • 95. Задачи:     В  основе  лежат  задачи   пользователя,  которые  нужно   решить.       Хорошо  работает  для  банков:   Депозиты,  Кредиты,  Помощь,   Открытие  счета/карточки.   hOps://medium.com/ux-­‐crash-­‐course/  
  • 96. Поиск:     Если  сайт  состоит  из  контента   создаваемого  самими   пользователями,  то  вероятнее   необходимо  строить  IА  на   поиске,  как  YouTube.     hOps://medium.com/ux-­‐crash-­‐course/  
  • 97. Время:     Пример  –  почтовый  ящик,  где   сообщения  меняются  по  мере   доставки.     Для  сайта:  «Актуально  сейчас»,   «в  архиве»,  «почитать  позже».   hOps://medium.com/ux-­‐crash-­‐course/  
  • 99. Люди:     Пример:  facebook   Все  построено  вокруг   пользователя  и  его  отношений   с  другими  людьми   (фотография,  друзья,  места).     hOps://medium.com/ux-­‐crash-­‐course/  
  • 101. 1.  Think   2.  Document   3.  Experiment   4.  Explain  and  communicate   5.  Fail  faster     6.  Find  the  perfect  solu{on   Sketch.  For  what?  
  • 102. I  can’t  draw   hOp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 104. The  faster  the  more   produc{ve!   The  uglier  the  beOer!   The  more  sketches  the   more  ideas!     Don’t  cri{cize!   Don’t  seek  perfec{on!   Don’t  focus  on  details!       hOp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 106. Disney  Concert  Hall  (Carol  Highsmith)   hOp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 107. Research  sketch   +        Many  types   -­‐  No  one  understands   -­‐  Almost  no  details   «Elegant»  sketch   +  More  realis{c   +  Can  be  shown  to  others   -­‐  Timeconsuming   hOp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 110. Concept     selec{on  Idea     genera{on   L   L   L   L   L   J  J   J   L  L   L   L   L   …  itera{on…   hOp://konigi.com/book/sketch-­‐book/why-­‐we-­‐sketch  
  • 112. Практическое  задание:   Делимся  на  группы  по  5  человек.     Времени:  10  минут.       Проектируем  окно  регистрации   для  мобильного  приложения.     -­‐  Вход  с  помощью  соц  аккаунта   -­‐  Новый  акк.  через  емейл     -­‐  Уже  есть  аккаунт?   -­‐  Иконка  приложения  +  описание  
  • 115. Чем  wireframe  не  является.     1.  Wireframe — это  не  просто  скетч  в   общих  чертах   2.  Хороший  wireframe  требует  времени   3.  У  wireframe  не  бывает   промежуточного  состояния   4.  Wireframe-­‐ы  нужно  воспринимать   всерьез   5.  Wireframe-­‐ы  не  предназначены  для   презентации       hOps://medium.com/ux-­‐ux-­‐pro{ps/8-­‐wireframe-­‐593136561b98  
  • 116. Что  такое  wireframе?     Wireframe — это  технический   документ.  Линии,  блоки,  подписи.   Возможно,  пара  цветовых  акцентов.   И  все!       hOps://medium.com/ux-­‐ux-­‐pro{ps/8-­‐wireframe-­‐593136561b98  
  • 117.     Иногда  рисование  wireframe-­‐а   занимает  лишь  час,  а  вот  его   планирование  происходит   неделями.  Важно,  чтобы  ваши   коллеги  и  клиенты  это  понимали.     hOps://medium.com/ux-­‐ux-­‐pro{ps/8-­‐wireframe-­‐593136561b98  
  • 118. Если  UI-­‐разработчик  или     UI-­‐дизайнер  не  может   использовать  ваш  “wireframe”,     то  это  просто  скетч,  а  не  wireframe.       Продолжайте  работу.   hOps://medium.com/ux-­‐ux-­‐pro{ps/8-­‐wireframe-­‐593136561b98  
  • 120. I  want  breaking  into  the  field  of   User  Experience  
  • 121. Arccles:     1.  UX  Ma•ers  Complete  Guide  to  Ge”ng  Started  in  UX   2.  Patrick  Neeman  suggests  Four  Ways  To  Break  Into  User   Experience     3.  Undercover  User  Experience  Design  by  Cennydd  Bowles   and  James  Box   4.  Ge”ng  Experience  with  User  Experience  from  UX  Booth     5.  UX  Mastery  also  has  a  book  on  Ge”ng  Started   hOp://www.measuringusability.com/blog/ge»ng-­‐started.php  
  • 122. Books:     1.  Design  of  Everyday  things:  To  get  you  inspired.   2.  The  Inmates  are  Running  the  Asylum:  To  understand  the   importance  of  user  centered  design.   3.  Measuring  the  User  Experience:  Get  to  know  metrics  and   measuring  fuzzy  things.   4.  A  Pracccal  Guide  to  Measuring  Usability:  A  crash  course  in   usability  tescng  and  metrics   5.  Just  about  any  book  from  the  Rosenfeld  library   6.  The  classic  paper,  Designing  for  Usability  and  What  Designers   Think  [pdf]  and  a  corresponding  blog  about  it   7.  A  Pracccal  Guide  to  Usability  Tescng  :  Now  in  its  second   edicon,  this  classic  text  from  Joe  Dumas  and  Ginny  Redish  is   scll  the  best  resource  for  the  mechanics  of  usability  tescng.   hOp://www.measuringusability.com/blog/ge»ng-­‐started.php  
  • 123. Courses:     1.  David  Travis  Udemy  Course  User  Experience:   The  Ulcmate  Guide  to  Usability       2.  All  you  can  learn  seminars  from  UX  Experts     3.  Human-­‐Computer  Interaccon  course  on   coursera.org     hOp://www.measuringusability.com/blog/ge»ng-­‐started.php  
  • 124. Conferences  and  events:     1.  UX  Book  clubs:  Most  cices  have  their  own  UX  book  club,   like  our  popular  one  in  Denver  that  meets  monthly  and   even  a  UX  Happy  Hour     2.  UX  Boot  Camp:  Our  annual  boot  camp  focuses  on   measurement,  metrics  and  method   3.  UxPA:    The  User  Experience  Professionals  Associacon  has   an  annual  meecng  with  content  suited  well  to  those  new   to  user  experience  and  especially  usability.   4.  IxDA  :  The  Interaccon  Design  Associacon  has  resources   and  an  annual  conference  geared  toward  design.     5.  The  new  GIANT  Conference   6.  UX  Week  Design  Conference   hOp://www.measuringusability.com/blog/ge»ng-­‐started.php  
  • 125. University  programs:     1.  Bentley  University  Masters  in  Human  Factors  in   Informacon  Design  and  has  some  great  faculty  including   our  friend  Bill  Albert.     2.  Stanford  University  offers  a  number  of  undergraduate   and  graduate  degrees  in  human  computer  interaccon.     3.  Masters  of  Human  Computer  Interaccon  at  Carnegie   Mellon     4.  Clemson  University  offers  a  Masters  in  Professional   Communicacon  where  our  friend  Tharon  Howard   teaches.     5.  Virginia  Tech  offers  a  Masters  in  Computer  Science  with  a   cercficate  in  Human  Computer  Interaccon     hOp://www.measuringusability.com/blog/ge»ng-­‐started.php  
  • 127. Ok,  I  almost  got  it!..  
  • 128. Alexander  Lisovsky   Co-­‐Founder  at  ZZ  Photo   UX/UI  designer     a.lisovsky@zzphoto.me   facebook.com/alexlisovsky,  pinterest.com/alexlisovsky,     twiOer.com/lisovsky