Upload
alexander-lisovsky
View
607
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Web-‐design: курс для новичков
Александр Лисовский UX, UI, графический дизайнер
день 5
Персонажи
А. Купер «Психбольница в руках пациентов»
Самый эффективный инструмент проектирования взаимодействия исключительно прост: это точное описание пользователя продукта и его целей
А. Купер «Психбольница в руках пациентов»
Персонажи – не реальные люди, но они представляют реальных людей в процессе проектирования. Это гипотетические архетипы реальных пользователей. Будучи воображаемыми, они, тем не менее, определяются достаточно жестко и точно. На практике мы не столько «выдумываем» персонажи, сколько обнаруживаем их в качестве побочного продукта процесса расследования. Но мы действительно выдумываем их имена и личные сведения.
А. Купер «Психбольница в руках пациентов»
Персонажи – не реальные люди, но они представляют реальных людей в процессе проектирования. Это гипотетические архетипы реальных пользователей. Будучи воображаемыми, они, тем не менее, определяются достаточно жестко и точно. На практике мы не столько «выдумываем» персонажи, сколько обнаруживаем их в качестве побочного продукта процесса расследования. Но мы действительно выдумываем их имена и личные сведения.
А. Купер «Психбольница в руках пациентов»
Проектируем для одного
А. Купер «Психбольница в руках пациентов»
Создаем персонажи для сужения диапазона конечных пользователей. Представьте, что проектируете автомобиль, удовлетворяющий вкусам широких масс. Мамочке -‐ безопасная, надежная машина, просторная, с большими дверями, для перевозки детей, собак, пакетов с покупками и т. д. Плотнику -‐ крепкий полноприводный пикап, чтобы в него поместились лестницы, материалы. Младший руководящий работник видит себя в машине спортивного типа с мощным двигателем, жесткой подвеской, откидным верхом и – места в машине должно хватать только на двоих.
А. Купер «Психбольница в руках пациентов»
Всякий раз, расширяя функциональность, чтобы охватить еще одного пользователя, вы ставите искусственные ограничители в виде лишних возможностей и органов управления программой на пути всех прочих пользователей. Попытка угодить слишком многим может убить продукт, хороший в других отношениях. Однако если спроектировать интерфейс с учетом одного персонажа, ничто не сможет встать между этим персонажем и абсолютным счастьем.
А. Купер «Психбольница в руках пациентов»
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 [email protected] facebook.com/alexlisovsky