SlideShare a Scribd company logo
5	
  
день	
  	
  




                  Web-­‐design:	
  	
  
               курс	
  для	
  новичков	
  
                  Александр	
  Лисовский	
  
                  UX,	
  UI,	
  графический	
  дизайнер	
  
Персонажи	
  




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

А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
Персонажи	
  –	
  не	
  реальные	
  люди,	
  но	
  они	
  представляют	
  
                          реальных	
  людей	
  в	
  процессе	
  проектирования.	
  Это	
  
                          гипотетические	
  архетипы	
  реальных	
  пользователей.	
  
                          Будучи	
  воображаемыми,	
  они,	
  тем	
  не	
  менее,	
  
                          определяются	
  достаточно	
  жестко	
  и	
  точно.	
  	
  
                          	
  
                          На	
  практике	
  мы	
  не	
  столько	
  «выдумываем»	
  персонажи,	
  
                          сколько	
  обнаруживаем	
  их	
  в	
  качестве	
  побочного	
  
                          продукта	
  процесса	
  расследования.	
  Но	
  мы	
  
                          действительно	
  выдумываем	
  их	
  имена	
  и	
  личные	
  
                          сведения.	
  




А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
Персонажи	
  –	
  не	
  реальные	
  люди,	
  но	
  они	
  представляют	
  
                          реальных	
  людей	
  в	
  процессе	
  проектирования.	
  Это	
  
                          гипотетические	
  архетипы	
  реальных	
  пользователей.	
  
                          Будучи	
  воображаемыми,	
  они,	
  тем	
  не	
  менее,	
  
                          определяются	
  достаточно	
  жестко	
  и	
  точно.	
  	
  
                          	
  
                          На	
  практике	
  мы	
  не	
  столько	
  «выдумываем»	
  персонажи,	
  
                          сколько	
  обнаруживаем	
  их	
  в	
  качестве	
  побочного	
  
                          продукта	
  процесса	
  расследования.	
  Но	
  мы	
  
                          действительно	
  выдумываем	
  их	
  имена	
  и	
  личные	
  
                          сведения.	
  




А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
Проектируем	
  для	
  одного	
  




А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
Создаем	
  персонажи	
  для	
  сужения	
  диапазона	
  	
  
              конечных	
  пользователей.	
  
              	
  
              Представьте,	
  что	
  проектируете	
  автомобиль,	
  	
  
              удовлетворяющий	
  вкусам	
  широких	
  масс.	
  	
  
              	
  
              Мамочке	
  -­‐	
  безопасная,	
  надежная	
  машина,	
  просторная,	
  с	
  
              большими	
  дверями,	
  для	
  перевозки	
  детей,	
  собак,	
  пакетов	
  с	
  
              покупками	
  и	
  т.	
  д.	
  	
  
              	
  
              Плотнику	
  -­‐	
  крепкий	
  полноприводный	
  пикап,	
  чтобы	
  в	
  него	
  
              поместились	
  лестницы,	
  материалы.	
  	
  
              	
  
              Младший	
  руководящий	
  работник	
  видит	
  себя	
  в	
  машине	
  
              спортивного	
  типа	
  с	
  мощным	
  двигателем,	
  жесткой	
  подвеской,	
  
              откидным	
  верхом	
  и	
  –	
  места	
  в	
  машине	
  должно	
  хватать	
  только	
  на	
  
              двоих.	
  

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




А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
80%	
  участников	
  фокус-­‐группы	
  возненавидели	
  новый	
  пикап	
  Dodge	
  Ram.	
  	
  
          Но	
  после	
  выхода	
  на	
  рынок	
  машина	
  стала	
  бестселлером,	
  потому	
  что	
  остальные	
  
          20%	
  в	
  нее	
  влюбились.	
  Любовь	
  людей	
  к	
  продукту,	
  пусть	
  даже	
  этих	
  людей	
  не	
  
          очень	
  много,	
  –	
  вот	
  ключ	
  к	
  успеху.	
  
А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
Изначально	
  чемодан	
  на	
  колесиках	
  задумывался	
  только	
  для	
  экипажей	
  
          самолетов.	
  Чистота	
  дизайна	
  продукта	
  принесла	
  этой	
  группе	
  пользователей	
  
          полное	
  удовлетворение.	
  Остальные	
  путешественники	
  вскоре	
  осознали,	
  что	
  
          такой	
  чемодан	
  решает	
  и	
  их	
  проблемы	
  тоже.	
  

А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
Гуттаперчевый	
  пользователь	
  




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

А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
Персонаж	
  должен	
  быть	
  конкретным	
  
              по	
  мере	
  конкретизации	
  персонажи	
  теряют	
  эластичность.	
  По	
  
              мере	
  обрастания	
  Эмили	
  конкретными	
  отличительными	
  чертами	
  
              происходит	
  замечательная	
  вещь:	
  она	
  становится	
  в	
  
              представлении	
  разработчиков	
  реальным	
  человеком.	
  
              	
  
              Персонаж	
  должен	
  быть	
  воображаемым	
  
              Реальные	
  люди	
  представляют	
  огромный	
  интерес,	
  как	
  база	
  для	
  
              исследований,	
  однако	
  для	
  самого	
  процесса	
  проектирования	
  
              они	
  обычно	
  бесполезны,	
  а	
  часто	
  и	
  пагубны.	
  Особенности	
  
              отдельного	
  индивидуума	
  не	
  характерны	
  для	
  группы.	
  
              	
  
              Описание	
  должно	
  быть	
  подробным,	
  а	
  не	
  идеальным	
  
              Важнее	
  детальность	
  персонажа,	
  а	
  не	
  идеальность	
  ее	
  описания	
  
              	
  
              Реалистичный	
  взгляд	
  на	
  уровень	
  подготовленности	
  
              Продвинутые	
  /	
  Образованные	
  /	
  Когнитивное	
  сопротивление	
  

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


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




А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
Следующий	
  раз	
  поговорим	
  о	
  том,	
  почему	
  
              задачи	
  пользователя	
  не	
  являются	
  целями	
  
А.	
  Купер	
  «Психбольница	
  в	
  руках	
  пациентов»	
  
hkp://www.youtube.com/watch?v=flJtdkR1P9I	
  
Зачем?	
  



                  Думать	
                Документировать	
               Экспериментировать	
  




                Объяснять	
                    Быстрее	
  потерпеть	
         Найти	
  верное	
  	
  
                и	
  общаться	
                     неудачу	
                   решение	
  




hkp://konigi.com/book/sketch-­‐book/	
  	
  
Я	
  не	
  умею	
  рисовать	
  




hkp://www.youtube.com/watch?v=flJtdkR1P9I	
  
hkp://www.youtube.com/watch?v=flJtdkR1P9I	
  
Чем	
  быстрее,	
  тем	
             Не	
  критикуйте!	
  
          продуктивнее!	
  	
  
                                               Не	
  стремитесь	
  	
  
          Чем	
  «страшнее»,	
  	
             к	
  совершенству!	
  
          тем	
  лучше!	
  	
  
                                               Не	
  фокусируйтесь	
  	
  
          Чем	
  больше	
  скетчей,	
         на	
  деталях!	
  	
  
          тем	
  больше	
  идей!	
  	
         	
  




hkp://www.youtube.com/watch?v=flJtdkR1P9I	
  
Че?	
  




hkp://www.youtube.com/watch?v=flJtdkR1P9I	
  
Disney	
  Concert	
  Hall	
  (Carol	
  Highsmith)	
  




hkp://www.youtube.com/watch?v=flJtdkR1P9I	
  
Исследовательский	
  скетч	
                   «Изящный»	
  скетч	
  
        +	
  	
  	
  	
  Много	
  разновидностей	
     +	
  Более	
  реалистичный	
  
        -­‐  Никому	
  не	
  понятно	
                 +	
  Показываем	
  другим	
  
        -­‐  Низкая	
  детализация	
                   -­‐	
  Долго	
  делать	
  


hkp://www.youtube.com/watch?v=flJtdkR1P9I	
  
hkps://docs.google.com/fileview?id=0B916EDb6727eMGJlNjdhOTEtMmYxNS00OTQ4LTkxMTUtZmZjMjIzYmI4NTMw&hl=en	
  
hkp://hotdesignfor.us/news/2010/04/01/shablony-­‐dlya-­‐eskiza-­‐stranic-­‐sajta-­‐na-­‐bumage/	
  
Примитивы	
  



Формы	
  



Линии	
  
hkp://www.blokkfont.com	
  
hkp://konigi.com/book/sketch-­‐book/why-­‐we-­‐sketch	
  
hkp://konigi.com/book/sketch-­‐book/why-­‐we-­‐sketch	
  
hkp://konigi.com/book/sketch-­‐book/why-­‐we-­‐sketch	
  
Зачем	
  использовать	
  скетчи?	
  

                 •    Скетчи	
  дают	
  возможность	
  делать	
  
                      ошибки	
  и	
  мыслить	
  открыто	
  
                 •    Скетчи	
  могут	
  создаваться	
  на	
  лету:	
  много	
  
                      идей	
  за	
  минимальный	
  промежуток	
  
                      времени	
  
                 •    Скетчи	
  позволяют	
  фиксировать	
  идеи,	
  не	
  
                      погружаясь	
  в	
  детали	
  
                 •    Их	
  легко	
  обсуждать,	
  ими	
  легко	
  делиться,	
  
                      их	
  легко	
  критиковать!	
  
                 •    Это	
  весело!	
  


hkp://www.youtube.com/watch?v=flJtdkR1P9I	
  
Книги:	
  
 1.Bill	
  Buxton	
  “Sketching	
  User	
  Experiences:	
  Ge•ng	
  the	
  Design	
  Right	
  and	
  the	
  Right	
  
 Design	
  ”.	
  –	
  Morgan	
  Kaufmann;	
  1	
  edi on,	
  2007	
  
 2.	
  Dan	
  Roam	
  “The	
  back	
  of	
  the	
  napkin”.	
  -­‐	
  Por¡olio	
  Hardcover;	
  Expanded	
  edi on,	
  
 2009	
  	
  
 	
  
 Статьи	
  и	
  презентации:	
  	
  
 hkp://uxdesign.smashingmagazine.com/2011/12/13/messy-­‐art-­‐ux-­‐sketching/	
  -­‐	
  
 создание	
  скетчей	
  при	
  помощи	
  слоев	
  	
  
 hkp://www.slideshare.net/pboersma/good-­‐design-­‐faster-­‐at-­‐ux-­‐sofia	
  -­‐	
  
 презентация	
  Peter	
  Boersma	
  	
  
 hkp://www.uxbooth.com/ar cles/tools-­‐for-­‐sketching-­‐user-­‐experiences/	
  	
  
 hkp://www.uxmakers.com/mt/archives/2010/05/sketches-­‐and-­‐wireframes-­‐and-­‐
 prototypes-­‐oh-­‐my-­‐	
  crea ng-­‐your-­‐own-­‐magical-­‐wizard-­‐experience.php	
  	
  
 hkp://www.slideshare.net/pubsmith/sketching-­‐interfaces-­‐workshop-­‐
 interac ons12-­‐dublin	
  	
  
 	
  
 Создание	
  интерактивных	
  скетчей:	
  ссылка	
  на	
  описание	
  программы	
  	
  
 hkp://www.infragis cs.com/products/indigo-­‐studio/?
 gclid=CID29LeD27QCFeR4cAodZ0kA2A	
  	
  

hkp://www.youtube.com/watch?v=flJtdkR1P9I	
  
hkp://dl.dropbox.com/u/13813006/hdfu/web-­‐design_evolu on_hotdesignfor_us.png	
  
Сделай	
  сам	
  




hkp://365psd.com/day/3-­‐257/	
  
1.	
  Правой	
  кнопкой	
  на	
  слое	
     2.	
  Закладка	
  Drop	
  Shadow	
  
Правой	
  кнопкой	
  	
  
на	
  слое	
  
Выбираем	
  слой,	
  который	
  ниже	
  
Ctr+Т	
  -­‐	
  трансформируем	
  
Shiª	
  -­‐	
  пропорционально	
  
Ctr+U	
  -­‐	
  обесцвечиваем	
  
1.	
  Правой	
  кнопкой	
  	
  
на	
  слое	
  
	
  
	
  
	
  
	
  
	
  
	
  
2.	
  Левой	
  кнопкой	
  мыши	
  
Кликаем	
  по	
  цветному	
  
квадратику,	
  чтобы	
  
поменять	
  цвет	
  
Смещаем	
  чуть	
  ниже	
  
Копируем	
  еще	
  раз	
  голубой	
  прямоугольник	
  	
  
и	
  перемещаем	
  над	
  фиолетовым	
  слоем	
  
Создаем	
  еще	
  одну	
  	
  
копию	
  голубого	
  слоя	
  
и	
  делаем	
  поле	
  fill=0	
  
Копируем	
  слой	
  с	
  зайцем	
  
Правая	
  кнопка	
  на	
  новом	
  слое	
  
и	
  выбор	
  Clear	
  Layer	
  Style	
  
Разбор	
  полетов	
  
hkp://hotdesignfor.us/news/pages/dolzhen-­‐li-­‐ya-­‐rabotat-­‐besplatno/	
  
Александр	
  Лисовский	
  
product	
  manager	
  ZZWolf	
  
UX,	
  UI,	
  графический	
  дизайнер	
  
	
  
(063)	
  304-­‐54-­‐85	
  
alexander.lisovsky@gmail.com	
  
facebook.com/alexlisovsky	
  

More Related Content

More from Oleksandr Lisovskyi

Course User interface - Lesson 5
Course User interface - Lesson 5Course User interface - Lesson 5
Course User interface - Lesson 5
Oleksandr Lisovskyi
 
Web-design: курс для новичков. День третий.
Web-design: курс для новичков. День третий.Web-design: курс для новичков. День третий.
Web-design: курс для новичков. День третий.
Oleksandr Lisovskyi
 

More from Oleksandr Lisovskyi (20)

Робота дизайнера у технологічному стартапі
Робота дизайнера у технологічному стартапіРобота дизайнера у технологічному стартапі
Робота дизайнера у технологічному стартапі
 
Design process
Design processDesign process
Design process
 
Fake lego
Fake legoFake lego
Fake lego
 
Pencil
PencilPencil
Pencil
 
Course User interface — Lesson 11
Course User interface — Lesson 11Course User interface — Lesson 11
Course User interface — Lesson 11
 
Best Day of my life
Best Day of my lifeBest Day of my life
Best Day of my life
 
Course User interface — Lesson 9
Course User interface — Lesson 9Course User interface — Lesson 9
Course User interface — Lesson 9
 
Course User interface — Lesson 8
Course User interface — Lesson 8Course User interface — Lesson 8
Course User interface — Lesson 8
 
Course User interface — Lesson 7
Course User interface — Lesson 7Course User interface — Lesson 7
Course User interface — Lesson 7
 
Course User interface - Lesson 5
Course User interface - Lesson 5Course User interface - Lesson 5
Course User interface - Lesson 5
 
Course User interface - Lesson 3
Course User interface - Lesson 3Course User interface - Lesson 3
Course User interface - Lesson 3
 
Course User interface - Lesson 1
Course User interface - Lesson 1Course User interface - Lesson 1
Course User interface - Lesson 1
 
Course User interface - Lesson 2
Course User interface - Lesson 2Course User interface - Lesson 2
Course User interface - Lesson 2
 
About 3D printing
About 3D printingAbout 3D printing
About 3D printing
 
3D-печать. Тенденции развития отрасли.
3D-печать. Тенденции развития отрасли.3D-печать. Тенденции развития отрасли.
3D-печать. Тенденции развития отрасли.
 
UX. How to start?
UX. How to start?UX. How to start?
UX. How to start?
 
О дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUBО дизайне интерфейсов для HR-IT CLUB
О дизайне интерфейсов для HR-IT CLUB
 
ZZ Photo presentation IDCEE2014
ZZ Photo presentation IDCEE2014ZZ Photo presentation IDCEE2014
ZZ Photo presentation IDCEE2014
 
Holy Stories
Holy StoriesHoly Stories
Holy Stories
 
Web-design: курс для новичков. День третий.
Web-design: курс для новичков. День третий.Web-design: курс для новичков. День третий.
Web-design: курс для новичков. День третий.
 

Web-design: курс для новичков. День пятый.

  • 1. 5   день     Web-­‐design:     курс  для  новичков   Александр  Лисовский   UX,  UI,  графический  дизайнер  
  • 2. Персонажи   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 3. Самый  эффективный   инструмент  проектирования   взаимодействия   исключительно  прост:     это  точное  описание   пользователя  продукта     и  его  целей   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 4. Персонажи  –  не  реальные  люди,  но  они  представляют   реальных  людей  в  процессе  проектирования.  Это   гипотетические  архетипы  реальных  пользователей.   Будучи  воображаемыми,  они,  тем  не  менее,   определяются  достаточно  жестко  и  точно.       На  практике  мы  не  столько  «выдумываем»  персонажи,   сколько  обнаруживаем  их  в  качестве  побочного   продукта  процесса  расследования.  Но  мы   действительно  выдумываем  их  имена  и  личные   сведения.   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 5. Персонажи  –  не  реальные  люди,  но  они  представляют   реальных  людей  в  процессе  проектирования.  Это   гипотетические  архетипы  реальных  пользователей.   Будучи  воображаемыми,  они,  тем  не  менее,   определяются  достаточно  жестко  и  точно.       На  практике  мы  не  столько  «выдумываем»  персонажи,   сколько  обнаруживаем  их  в  качестве  побочного   продукта  процесса  расследования.  Но  мы   действительно  выдумываем  их  имена  и  личные   сведения.   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 6. Проектируем  для  одного   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 7. Создаем  персонажи  для  сужения  диапазона     конечных  пользователей.     Представьте,  что  проектируете  автомобиль,     удовлетворяющий  вкусам  широких  масс.       Мамочке  -­‐  безопасная,  надежная  машина,  просторная,  с   большими  дверями,  для  перевозки  детей,  собак,  пакетов  с   покупками  и  т.  д.       Плотнику  -­‐  крепкий  полноприводный  пикап,  чтобы  в  него   поместились  лестницы,  материалы.       Младший  руководящий  работник  видит  себя  в  машине   спортивного  типа  с  мощным  двигателем,  жесткой  подвеской,   откидным  верхом  и  –  места  в  машине  должно  хватать  только  на   двоих.   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 8. Всякий  раз,  расширяя  функциональность,  чтобы  охватить  еще   одного  пользователя,  вы  ставите  искусственные  ограничители  в   виде  лишних  возможностей  и  органов  управления  программой   на  пути  всех  прочих  пользователей.     Попытка  угодить  слишком  многим  может  убить  продукт,   хороший  в  других  отношениях.       Однако  если  спроектировать  интерфейс  с  учетом  одного   персонажа,  ничто  не  сможет  встать  между  этим  персонажем  и   абсолютным  счастьем.   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 9. 80%  участников  фокус-­‐группы  возненавидели  новый  пикап  Dodge  Ram.     Но  после  выхода  на  рынок  машина  стала  бестселлером,  потому  что  остальные   20%  в  нее  влюбились.  Любовь  людей  к  продукту,  пусть  даже  этих  людей  не   очень  много,  –  вот  ключ  к  успеху.   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 10. Изначально  чемодан  на  колесиках  задумывался  только  для  экипажей   самолетов.  Чистота  дизайна  продукта  принесла  этой  группе  пользователей   полное  удовлетворение.  Остальные  путешественники  вскоре  осознали,  что   такой  чемодан  решает  и  их  проблемы  тоже.   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 11. Гуттаперчевый  пользователь   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 12. Программисты  писали  и  пишут  бессчетные  множества   программ  для  этого  мифологического  гуттаперчевого   потребителя.     Когда  программист  находит  удобным  познакомить   пользователя  с  файловой  системой  Windows  для  поиска  нужной   информации,  то  определяет  гуттаперчевого  пользователя  как   пользователя,  способного  адаптироваться,  продвинутого,   образованного  в  области  компьютеров;  в  других  случаях,  когда   программист  находит  удобным  провести  пользователя  через   сложный  процесс  посредством  бестолкового  мастера,  то   определяет  гуттаперчевого  пользователя,  как  покладистого   наивного  новичка.  Проектирование  для  гуттаперчевых   пользователей  дает  разработчику  разрешение  писать  код  как   угодно,  лицемерно  презирая  «юзера».       Реальные  пользователи  не  эластичны.   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 13. Персонаж  должен  быть  конкретным   по  мере  конкретизации  персонажи  теряют  эластичность.  По   мере  обрастания  Эмили  конкретными  отличительными  чертами   происходит  замечательная  вещь:  она  становится  в   представлении  разработчиков  реальным  человеком.     Персонаж  должен  быть  воображаемым   Реальные  люди  представляют  огромный  интерес,  как  база  для   исследований,  однако  для  самого  процесса  проектирования   они  обычно  бесполезны,  а  часто  и  пагубны.  Особенности   отдельного  индивидуума  не  характерны  для  группы.     Описание  должно  быть  подробным,  а  не  идеальным   Важнее  детальность  персонажа,  а  не  идеальность  ее  описания     Реалистичный  взгляд  на  уровень  подготовленности   Продвинутые  /  Образованные  /  Когнитивное  сопротивление   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 14. Персонажи  закрывают  споры  о  функциях   Набор  персонажей  становится  системой,  обладающей   мощным  свойством  объяснять  наши  решения  в  области   проектирования.  Более  того,  это  как  прожектор,   высвечивающий  для  разработчиков,  маркетологов,   руководителей  очевидную  правильность  наших   решений  по  проектированию.     Персонаж  пользователя,  а  не  покупателя   Если  конечный  пользователь  доволен  и  имеет   возможность  работать  продуктивно,  это  успех.   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 15. Ключевые  персонажи     В  каждом  наборе  персонажей  есть  хотя  бы  один  ключевой   персонаж.  Эта  личность  находится  в  фокусе  процесса   проектирования.  Ключевой  персонаж  отличает  потребность  в   удовлетворении,  недостижимом  при  помощи  интерфейсов,   спроектированных  для  любого  другого  персонажа.  Для   ключевого  персонажа  всегда  существует  отдельный  интерфейс.   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 16. Следующий  раз  поговорим  о  том,  почему   задачи  пользователя  не  являются  целями   А.  Купер  «Психбольница  в  руках  пациентов»  
  • 18. Зачем?   Думать   Документировать   Экспериментировать   Объяснять   Быстрее  потерпеть   Найти  верное     и  общаться   неудачу   решение   hkp://konigi.com/book/sketch-­‐book/    
  • 19. Я  не  умею  рисовать   hkp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 21. Чем  быстрее,  тем   Не  критикуйте!   продуктивнее!     Не  стремитесь     Чем  «страшнее»,     к  совершенству!   тем  лучше!     Не  фокусируйтесь     Чем  больше  скетчей,   на  деталях!     тем  больше  идей!       hkp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 23. Disney  Concert  Hall  (Carol  Highsmith)   hkp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 24. Исследовательский  скетч   «Изящный»  скетч   +        Много  разновидностей   +  Более  реалистичный   -­‐  Никому  не  понятно   +  Показываем  другим   -­‐  Низкая  детализация   -­‐  Долго  делать   hkp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 28.
  • 29.
  • 34. Зачем  использовать  скетчи?   •  Скетчи  дают  возможность  делать   ошибки  и  мыслить  открыто   •  Скетчи  могут  создаваться  на  лету:  много   идей  за  минимальный  промежуток   времени   •  Скетчи  позволяют  фиксировать  идеи,  не   погружаясь  в  детали   •  Их  легко  обсуждать,  ими  легко  делиться,   их  легко  критиковать!   •  Это  весело!   hkp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 35. Книги:   1.Bill  Buxton  “Sketching  User  Experiences:  Ge•ng  the  Design  Right  and  the  Right   Design  ”.  –  Morgan  Kaufmann;  1  edi on,  2007   2.  Dan  Roam  “The  back  of  the  napkin”.  -­‐  Por¡olio  Hardcover;  Expanded  edi on,   2009       Статьи  и  презентации:     hkp://uxdesign.smashingmagazine.com/2011/12/13/messy-­‐art-­‐ux-­‐sketching/  -­‐   создание  скетчей  при  помощи  слоев     hkp://www.slideshare.net/pboersma/good-­‐design-­‐faster-­‐at-­‐ux-­‐sofia  -­‐   презентация  Peter  Boersma     hkp://www.uxbooth.com/ar cles/tools-­‐for-­‐sketching-­‐user-­‐experiences/     hkp://www.uxmakers.com/mt/archives/2010/05/sketches-­‐and-­‐wireframes-­‐and-­‐ prototypes-­‐oh-­‐my-­‐  crea ng-­‐your-­‐own-­‐magical-­‐wizard-­‐experience.php     hkp://www.slideshare.net/pubsmith/sketching-­‐interfaces-­‐workshop-­‐ interac ons12-­‐dublin       Создание  интерактивных  скетчей:  ссылка  на  описание  программы     hkp://www.infragis cs.com/products/indigo-­‐studio/? gclid=CID29LeD27QCFeR4cAodZ0kA2A     hkp://www.youtube.com/watch?v=flJtdkR1P9I  
  • 38.
  • 39.
  • 40. 1.  Правой  кнопкой  на  слое   2.  Закладка  Drop  Shadow  
  • 41.
  • 42. Правой  кнопкой     на  слое  
  • 44.
  • 45.
  • 46.
  • 47.
  • 50.
  • 52.
  • 53.
  • 54. 1.  Правой  кнопкой     на  слое               2.  Левой  кнопкой  мыши   Кликаем  по  цветному   квадратику,  чтобы   поменять  цвет  
  • 55.
  • 57. Копируем  еще  раз  голубой  прямоугольник     и  перемещаем  над  фиолетовым  слоем  
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64. Создаем  еще  одну     копию  голубого  слоя   и  делаем  поле  fill=0  
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74. Копируем  слой  с  зайцем  
  • 75. Правая  кнопка  на  новом  слое   и  выбор  Clear  Layer  Style  
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 92. Александр  Лисовский   product  manager  ZZWolf   UX,  UI,  графический  дизайнер     (063)  304-­‐54-­‐85   alexander.lisovsky@gmail.com   facebook.com/alexlisovsky