Проектирование  для  людей,    а  не  для  устройств  Проектирование  интерфейсов  на  уровне  эскизов     Александр  Лисовский  

Утренние  чтения  Что  успел  …  

Hope.ua  Coming  soon  i`m  hope…  

Что  успел  …  

Шаблон  сайта  общины  Что  успел  …  

Давайте  сделаем    сайт  /  мобильное  приложение!  

С  чего  начать?  

h@p://www.slideshare.net/fling/designing-­‐mobile-­‐experiences?from_search=3  

Идея  

h@p://www.slideshare.net/fling/designing-­‐mobile-­‐experiences?from_search=3  

Идея  

Цель  

h@p://www.slideshare.net/fling/designing-­‐mobile-­‐experiences?from_search=3  

Идея  

Цель  

Стратегия  

h@p://www.slideshare.net/fling/designing-­‐mobile-­‐experiences?from_search=3  

Идея  

Цель  

Стратегия  

Выбор  платформ  

h@p://www.slideshare.net/fling/designing-­‐mobile-­‐experiences?from_search=3  

Идея  

Цель  

Стратегия  

Выбор  платформ  

UX  дизайн  

h@p://www.slideshare.net/fling/designing-­‐mobile-­‐experiences?from_search=3  

Идея  

Цель  

Стратегия  

Выбор  платформ  

UX  дизайн  

Прототип  

h@p://www.slideshare.net/fling/designing-­‐mobile-­‐experiences?from_search=3  

Идея  

Цель  

Стратегия  

Выбор  платформ  

UX  дизайн  

Прототип  

Разработка  

h@p://www.slideshare.net/fling/designing-­‐mobile-­‐experiences?from_search=3  

Идея  

Цель  

Стратегия  

Выбор  платформ  

UX  дизайн  

Прототип  

Разработка  

Тестирование  

h@p://www.slideshare.net/fling/designing-­‐mobile-­‐experiences?from_search=3  

Идея  

Цель  

Стратегия  

Выбор  платформ  

UX  дизайн  

Прототип  

Разработка  

Тестирование  

Усовершенствование  

…а  в  жизни:    «Начнем  работу  с  дизайна!»  

 

Когда  дизайн  важнее  …  

Когда  дизайн  важнее  …  

Когда  дизайн  важнее  …  

Когда  дизайн  важнее  …  

Когда  дизайн  важнее  …  

Когда  дизайн  важнее  …  

Персонажи  

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

Самый  эффективный  инструмент  проектирования  взаимодействия  исключительно  прост:    это  точное  описание  пользователя  продукта    и  его  целей  

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

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

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

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

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

Проектируем  для  одного  

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

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

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

Разминка  для  ума:    

Кто  является  персонажами    сайта  церковной  общины?  

1.  Человек  не  из  вашей  церкви,    который  ищет  ответы  на  сокровенные  вопросы.  Источник:  bible.com.ua,  hope.ua    

2.  Член  церкви,  который  интересуется  жизнью  общины,  событиями  в  мировой  церкви  и  мероприятиями  в  своем  городе.    

Разминка  для  ума:    

Какие  у  наших    персонажей  цели?  

1.  Ознакомиться  с  учением,  основами  веры,  найти  контакты  ближайшей  общины,  возможность  задать  вопрос/получить  ответ    

2.  Мероприятия  в  моем  городе/общине,  фотоотчеты,  планы,  анонсы,  как  живет  церковь  в  мире,  что  нового?  

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

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

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

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

Гуттаперчевый  пользователь  

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

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

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

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

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

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

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

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

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

Алексей    22  года  Семейное  положение:  встречается  уже  второй  год    с  девушкой  Катей.  Профессия:  копирайтер  Активно  использует:  Instagramm,  Pinterest,  Twi@er,  Foursquere,  Facebook    Пользуется:  ноутбуком  с  Windows,  iPhone  4s,  Canon  D600.    Много  путешествует,  часто  фотографирует  в  поездках  (чаще  на  iPhone4s).  Нет  времени  наводить  порядок.  Хватает  только  времени  слить  на  внешний  винчестер  и  в  лучшем  случае  обозначить  в  названии  дату  и  тезисно  место  или  событие.  Никогда  не  печатает  фотографии.      Хранит  на  внешнем  диске.  Использует  только  online.  

Мы  про  эскизы    сегодня  поговорим?  

h@p://www.youtube.com/watch?v=flJtdkR1P9I  

Скетчи  

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

Объяснять  и  общаться  

Быстрее  потерпеть  неудачу  

Найти  верное    решение  

Зачем?  

h@p://konigi.com/book/sketch-­‐book/    

Я  не  умею  рисовать  

h@p://www.youtube.com/watch?v=flJtdkR1P9I  

h@p://www.youtube.com/watch?v=flJtdkR1P9I  

Чем  быстрее,  тем  продуктивнее!     Чем  «страшнее»,    тем  лучше!     Чем  больше  скетчеи,  тем  больше  идей!    

Не  критикуйте!   Не  стремитесь    к  совершенству!   Не  фокусируйтесь    на  деталях!      

h@p://www.youtube.com/watch?v=flJtdkR1P9I  

Че?  

h@p://www.youtube.com/watch?v=flJtdkR1P9I  

Disney  Concert  Hall  (Carol  Highsmith)  

h@p://www.youtube.com/watch?v=flJtdkR1P9I  

Исследовательский  скетч  +        Много  разновидностей  -­‐  Никому  не  понятно  -­‐  Низкая  детализация  

«Изящный»  скетч  +  Более  реалистичный  +  Показываем  другим  -­‐  Долго  делать  

h@p://www.youtube.com/watch?v=flJtdkR1P9I  

h@ps://docs.google.com/fileview?id=0B916EDb6727eMGJlNjdhOTEtMmYxNS00OTQ4LTkxMTUtZmZjMjIzYmI4NTMw&hl=en  

h@p://ge.@/93SyTAO/v/0  

h@p://hotdesignfor.us/news/2010/04/01/shablony-­‐dlya-­‐eskiza-­‐stranic-­‐sajta-­‐na-­‐bumage/  

Примитивы  

Формы  

Линии  

Рыба  /  Lorem  ipsum  /  ____  __  

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

Lorem  ipsum  dolor  sit  amet,  consectetur  adipiscing  elit.  Maecenas  adipiscing  metus  semper  libero  adipiscing  quis  suscipit  diam  mollis.  E§am  sit  amet  justo  quis  mauris  viverra  condimentum  at  sit  amet  diam.  Fusce  arcu  est,  fermentum  id  ultrices  non,  moles§e  ut  odio.  Ves§bulum  auctor  scelerisque  elit  non  vulputate.  Quisque  suscipit  ullamcorper  tellus.  Proin  id  ornare  tellus.  Morbi  suscipit  sapien  et  ante  eleifend  dignissim  

Lorem  ipsum  

Lorem  ipsum  представляет  собой  искажённый  отрывок  из  философского  трактата  Цицерона  «О  пределах  добра  и  зла»,  написанного  в  45  году  до  нашей  эры  на  латинском  языке.  Впервые  этот  текст  был  применен  для  набора  шрифтовых  образцов  неизвестным  печатником  в  XVI  веке.    h@p://ru.wikipedia.org/wiki/Lorem_ipsum  

Lorem  ipsum  dolor  sit  amet,  consectetur  adipiscing  elit.  Maecenas  adipiscing  metus  semper  libero  adipiscing  quis  suscipit  diam  mollis.  E§am  sit  amet  justo  quis  mauris  viverra  condimentum  at  sit  amet  diam.  Fusce  arcu  est,  fermentum  id  ultrices  non,  moles§e  ut  odio.  Ves§bulum  auctor  scelerisque  elit  non  vulputate.  Quisque  suscipit  ullamcorper  tellus.  Proin  id  ornare  tellus.  Morbi  suscipit  sapien  et  ante  eleifend  dignissim  

h@p://www.blokkfont.com  

h@p://konigi.com/book/sketch-­‐book/why-­‐we-­‐sketch  

h@p://konigi.com/book/sketch-­‐book/why-­‐we-­‐sketch  

h@p://konigi.com/book/sketch-­‐book/why-­‐we-­‐sketch  

если  не  использовать  персонажи..  

Зачем  использовать  скетчи?  

•  Скетчи  дают  возможность  делать  ошибки  и  мыслить  открыто  

•  Скетчи  могут  создаваться  на  лету:  много  идей  за  минимальныи  промежуток  времени  

•  Скетчи  позволяют  фиксировать  идеи,  не  погружаясь  в  детали  

•  Их  легко  обсуждать,  ими  легко  делиться,  их  легко  критиковать!  

•  Это  весело!  

h@p://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      Статьи  и  презентации:    h@p://uxdesign.smashingmagazine.com/2011/12/13/messy-­‐art-­‐ux-­‐sketching/  -­‐  создание  скетчеи  при  помощи  слоев    h@p://www.slideshare.net/pboersma/good-­‐design-­‐faster-­‐at-­‐ux-­‐sofia  -­‐  презентация  Peter  Boersma    h@p://www.uxbooth.com/ar§cles/tools-­‐for-­‐sketching-­‐user-­‐experiences/    h@p://www.uxma@ers.com/mt/archives/2010/05/sketches-­‐and-­‐wireframes-­‐and-­‐prototypes-­‐oh-­‐my-­‐  crea§ng-­‐your-­‐own-­‐magical-­‐wizard-­‐experience.php    h@p://www.slideshare.net/pubsmith/sketching-­‐interfaces-­‐workshop-­‐interac§ons12-­‐dublin      Создание  интерактивных  скетчеи:  ссылка  на  описание  программы    h@p://www.infragis§cs.com/products/indigo-­‐studio/?gclid=CID29LeD27QCFeR4cAodZ0kA2A    

h@p://www.youtube.com/watch?v=flJtdkR1P9I  

Давайте  что-­‐то  сделаем?  

Утренние  чтения  

..а  еще  примеры?  

Coming  soon…  

Если  нет  денег/времени  на  приложение?  (адаптивная  верстка)  

RESPONSIVE  WEB  DESIGN  by  ETHAN  MARCOTTE  

Можно  повторить?  Сначала…  

Завтра  поговорим    про  образовательные  курсы  

..и  наш  новый  проект  библейских  историй  для  детей  

Александр  Лисовский  Менеджер  продукта  в  ZZWolf  UX,  UI  дизайнер    (063)  304-­‐54-­‐85  alexander.lisovsky@gmail.com  facebook.com/alexlisovsky  pinterest.com/alexlisovsky