<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Проектирование взаимодействия, дизайн и юзабилити &#187; процесс</title>
	<atom:link href="http://usemenot.com.ua/tag/%d0%bf%d1%80%d0%be%d1%86%d0%b5%d1%81%d1%81/feed/" rel="self" type="application/rss+xml" />
	<link>http://usemenot.com.ua</link>
	<description></description>
	<lastBuildDate>Wed, 01 Sep 2010 07:33:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Дизайн: Как это делают в Facebook</title>
		<link>http://usemenot.com.ua/2010/03/19/design-process-in-facebook/</link>
		<comments>http://usemenot.com.ua/2010/03/19/design-process-in-facebook/#comments</comments>
		<pubDate>Fri, 19 Mar 2010 11:26:40 +0000</pubDate>
		<dc:creator>Андрей Онофрийчук</dc:creator>
				<category><![CDATA[Теория и практика]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[Перевод]]></category>
		<category><![CDATA[процесс]]></category>

		<guid isPermaLink="false">http://usemenot.com.ua/?p=769</guid>
		<description><![CDATA[Летом 2009 года в своей штаб-квартире в Palo Alto, дизайн команда Facebook рассказывала о своей философии и подходе к дизайну. Они придают особое значение написанию кода, частому и раннему показу дизайна, вовлеченности в проект от начала до конца. Возможность дизайнеров писать код всплывало очень часто. Дизайн команда Facebook вовлечена в дизайн продукта, маркетинг, UI шаблоны, [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://usemenot.com.ua/wp-content/uploads/2010/03/facebook-design-process.png"><img class="alignnone size-full wp-image-770" title="facebook design process" src="http://usemenot.com.ua/wp-content/uploads/2010/03/facebook-design-process.png" alt="" width="530" height="137" /></a></p>
<p>Летом 2009 года в своей штаб-квартире в Palo Alto, дизайн команда Facebook рассказывала о своей философии и подходе к дизайну. Они придают особое значение написанию кода, частому и раннему показу дизайна, вовлеченности в проект от начала до конца. Возможность дизайнеров писать код  всплывало очень часто.</p>
<ul>
<li>Дизайн команда Facebook вовлечена в дизайн продукта, маркетинг, UI шаблоны, брендинг и front-end код. Команда состоит из 15 дизайнеров (product designer), 5 дизайнеров интерфейса и 1 &#8220;стратега&#8221; по контенту.  Всего 25 дизайнеров на компанию из 1000 человек.</li>
<li>Как команде удается создавать дизайн для четверти миллиарда человек? Четыре мысли: нужно быть вовлеченным от начала до конца, делиться наработками рано и часто, пачкать руки и не влюбляться.</li>
</ul>
<p>Дизайнеры должны быть вовлечены от начала до конца: от создания общей стратегии до запуска. Этим Facebook отличается от остальных компаний.<br />
<span id="more-769"></span></p>
<ul>
<li>Facebook уделяет много внимания тому, чтобы их дизайнеры были вовлечены в процесс с начала до конца.</li>
<li>Создание дизайна сразу с кодом позволяет увидеть, как реальная информация ведет себя в новой разметке.</li>
<li>Дизайнер, пишущий код, быстрее и внимательнее внедряет мелкие детали дизайна.</li>
</ul>
<p>Показывайте дизайн на ранних этапах и показывайте часто. Раннее обсуждение командой и пользователями помогает добиваться лучших результатов.</p>
<ul>
<li>В Facebook нет креативного или арт директора, вместо этого используется процесс &#8220;снизу-вверх&#8221;. Для команды критично, что бы всем было известно, чем они занимаются.</li>
</ul>
<p>Не бойтесь пачкать руки. Очень важно, чтобы вы понимали, как работает Веб. Все дизайнеры немного используют HTML/CSS, а иногда даже PHP.</p>
<ul>
<li>Это упрощает взаимодействие между дизайнерами и разработчиками. Дизайнеры могут заниматься багами и строить быстрые прототипы сами.</li>
<li>Очень важно быстро двигаться вперед. У Facebook’а много соперников во многих сферах и то, как люди используют Веб, постоянно меняется. Быстрая итеративность – ключевой, критический момент.</li>
<li>В Facebook верят, что важно выпускать продукт как можно раньше, чтобы посмотреть, как его используют.</li>
<li>Мокапы врут. Им не хватает контента и контекста. Нужно использовать реальный контент и реальные страницы, чтобы понять, как работает новый дизайн.</li>
<li>Что бы продвигаться быстро, нужно прототипировать заранее. Например:  интерфейс комментариев был протестирован и переделан несколько раз еще до того, как попал к конечным пользователям.</li>
<li>Дизайнеры в компании «коммитяться» около 40 раз за неделю.</li>
</ul>
<p><a href="http://usemenot.com.ua/wp-content/uploads/2010/03/facebook-office.png"><img class="alignnone size-full wp-image-847" title="facebook office" src="http://usemenot.com.ua/wp-content/uploads/2010/03/facebook-office.png" alt="" width="530" height="316" /></a></p>
<p>Не влюбляйтесь. Софт не постоянен, он все время меняется и вам нужно принять это.</p>
<ul>
<li>Цель – постоянные изменения принимать за должное.</li>
<li>Не останавливайтесь на достигнутом сегодня.  Уже завтра вы будете отставать.  Как дизайнеру, вам нужно делать прогнозы и думать как будут обстоять дела через год.</li>
<li>Самый долгоживущий дизайн Facebook’a был дизайн главной страницы в 2004 году, он продержался 18 месяцев.</li>
<li>Как никогда раньше, наша работа бесконечна.</li>
<li>Делайте А/Б тесты для большинства функциональностей. Используйте четко определенные метрики, но не позволяйте им определять дизайн.</li>
</ul>
<blockquote><p><a href="http://www.lukew.com/ff/entry.asp?879" target="_blank">Полный текст статьи</a> Luke Wroblewski о том, как построен дизайн процесс у одного из самый посещаемых ресурсов в мире.</p></blockquote>
<p><strong>Еще о дизайне в разных компаниях на Usemenot:</strong></p>
<ul style="line-height: 17px;">
<li><a href="http://usemenot.com.ua/2009/11/24/pairdesign-process-in-cooper/" target="_blank">Дизайн процесс в Cooper Design.</a></li>
<li><a href="http://usemenot.com.ua/2009/11/24/pairdesign-process-in-cooper/" target="_blank"></a><a href="http://usemenot.com.ua/2009/07/07/apple-design-process/" target="_blank">Дизайн процесс в Apple.<br />
</a></li>
<li><a href="http://usemenot.com.ua/2009/09/10/invisible-google-serach-page-redesign/" target="_blank">Несколько слов о дизайне в Google.</a></li>
</ul>
<script type="text/javascript" src="http://odnaknopka.ru/wp/ok2.utf8.js"></script><script type="text/javascript">okbm("http://usemenot.com.ua/2010/03/19/design-process-in-facebook/","Дизайн: Как это делают в Facebook")</script>]]></content:encoded>
			<wfw:commentRss>http://usemenot.com.ua/2010/03/19/design-process-in-facebook/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Парный дизайн</title>
		<link>http://usemenot.com.ua/2009/11/24/pairdesign-process-in-cooper/</link>
		<comments>http://usemenot.com.ua/2009/11/24/pairdesign-process-in-cooper/#comments</comments>
		<pubDate>Tue, 24 Nov 2009 14:51:30 +0000</pubDate>
		<dc:creator>Андрей Онофрийчук</dc:creator>
				<category><![CDATA[Теория и практика]]></category>
		<category><![CDATA[Cooper]]></category>
		<category><![CDATA[процесс]]></category>

		<guid isPermaLink="false">http://usemenot.com.ua/?p=312</guid>
		<description><![CDATA[Cooper рассказали немного о своем дизайн процессе. В компании практикуют &#8220;парный дизайн&#8221;. Над одним проектом работает сразу два дизайнера (здесь и далее имеется ввиду interaction designer). Такой подход дает прирост как в скорости работ так и в эффективности.  В то время как один отвечает за генерацию идей, второй дизайнер берет на себя их синтез. Грубо говоря [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://usemenot.com.ua/2009/11/24/pairdesign-process-in-cooper/"><img class="alignnone size-full wp-image-315" title="pair design at cooper" src="http://usemenot.com.ua/wp-content/uploads/2009/11/pair-design-at-cooper.png" alt="pair design at cooper" width="530" height="149" /></a><br />
Cooper <a href="http://www.cooper.com/journal/2009/11/design_loneliness.html" target="_blank">рассказали</a> немного о своем дизайн процессе. В компании практикуют &#8220;парный дизайн&#8221;. Над одним проектом работает сразу два дизайнера (здесь и далее имеется ввиду interaction designer).<br />
Такой подход дает прирост как в скорости работ так и в эффективности.  В то время как один отвечает за генерацию идей, второй дизайнер берет на себя их синтез. Грубо говоря кто-то делает визуальные решения а кто-то занимается обоснованием и сверяет идеи с задачами и целями пользователей.<span id="more-312"></span><br />
<strong>Эффективность<br />
</strong></p>
<ul>
<li>То что дизайнеры работают в паре дает возможность кому-то одному сосредотачиваться  на стратегии а второму на тактике. Идеи которые сами по себе крутые но могут не подходить к текущим задачам/требованиям могут быть отметены заранее.</li>
<li>Если кто-то один болеет или отсутствует, работа все равно продолжается.</li>
<li>Когда дело доходит до написания документации, парный дизайн дает возможность делать это в два раза быстрее.</li>
<li>Два дизайнера в одной комнате занятые одной проблемой помогает не отвлекаться на переписку, и быть в тонусе.</li>
</ul>
<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px;"><strong>Производительность<br />
</strong></p>
<ul>
<li>Два мозга работающих над одной проблемой удваивает количество уникальных идей, перспектив и &#8220;впечатлений&#8221; (experiences, тежело найти рускоязычную аналогию).</li>
<li>Необходимость вербально формировать идею для напарника, часто помогает &#8220;кристаллизовать&#8221; проблему, что очень помогает в поиске решений.</li>
<li>Cooper  время от времени перемешивает дизайн команды для обмена опытом.<span style="font-family: Helvetica, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: normal; font-size: 12px;"> </span></li>
</ul>
<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica;">Если кому-тот интересно, то можно найти более детально описание обязанностей дизайнеров Copper у них на <a href="http://www.cooper.com/careers/interaction_designer.html#synthesis" target="_blank">сайте</a>, а еще более детально в книгах Алана Купера.</p>
<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px;">
<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px;">
<script type="text/javascript" src="http://odnaknopka.ru/wp/ok2.utf8.js"></script><script type="text/javascript">okbm("http://usemenot.com.ua/2009/11/24/pairdesign-process-in-cooper/","Парный дизайн")</script>]]></content:encoded>
			<wfw:commentRss>http://usemenot.com.ua/2009/11/24/pairdesign-process-in-cooper/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Важность деталей в проектировании и дизайне</title>
		<link>http://usemenot.com.ua/2009/09/28/importance-of-details-in-interaction-and-visual-design/</link>
		<comments>http://usemenot.com.ua/2009/09/28/importance-of-details-in-interaction-and-visual-design/#comments</comments>
		<pubDate>Mon, 28 Sep 2009 14:24:19 +0000</pubDate>
		<dc:creator>Андрей Онофрийчук</dc:creator>
				<category><![CDATA[Теория и практика]]></category>
		<category><![CDATA[amazon]]></category>
		<category><![CDATA[проектирование]]></category>
		<category><![CDATA[процесс]]></category>

		<guid isPermaLink="false">http://usemenot.com.ua/?p=192</guid>
		<description><![CDATA[Зачем это. Как важно уделять много внимания деталям? Иногда мне кажется, что все, что меня окружает это набор типографских ошибок, неправильных отступов, неправильно подобранных цветовых схем, странных, не логичных и сбивающих с толку решений. На мои замечания друзья обычно отвечают: «никто кроме тебя никогда не замечает этого». «Кто ж если не мы», &#8211; звучит в [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://usemenot.com.ua/2009/09/28/importance-of-details-in-interaction-and-visual-design/"><img class="alignnone size-full wp-image-202" title="details in interaction design" src="http://usemenot.com.ua/wp-content/uploads/2009/09/details-in-interaction-design.jpg" alt="details in interaction design" width="530" height="158" /></a></p>
<p><strong>Зачем это.<br />
<span style="font-weight: normal;">Как важно уделять много внимания деталям? Иногда мне кажется, что все, что меня окружает это набор типографских ошибок, неправильных отступов, неправильно подобранных цветовых схем, странных, не логичных и сбивающих с толку решений. На мои замечания друзья обычно отвечают: «никто кроме тебя никогда не замечает этого». «Кто ж если не мы», &#8211; звучит в голове. Если люди других профессий (врачи, инженеры, финансисты (хотя они уже облажались недавно) и т.д.) не будут обращать внимания на детали, то их «промахи» быстро заметят, так как часто они будут критичны.</span></strong></p>
<p>Представьте, что врач при обследовании не обращает внимание на возможные проблемы с работой сердца пациента, потому что никто явно не заметит этой «детали». «И так все нормально сейчас работает».</p>
<p>Одной из причиной этого есть то, что часто дизайном (в более «инженерном» смысле , а не в плане дизайна сайта/айдентики) занимаются люди по совместительству. Разработчики программного обеспечения сами рисуют иконки и интерфейсы, руководители проектов пишут тексты,  рабочие решают где и как установить информационную табличку или знак итд.<span id="more-192"></span></p>
<p><strong>Действуйте локально, думайте глобально.</strong><br />
Какой бы не была глобальной задумка без высочайшего внимания к деталям даже самые крутые хитрые и продуманные продукты могут легко проиграть более «детальным» конкурентам. Одним из примеров тому есть уже <a href="http://usemenot.com.ua/2009/09/11/pizza-usability/" target="_blank">упомянутый мною ранее случай</a>, когда интернет-магазину удавалось иметь выше продажи конкурентов всего лишь из-за  того, что у них был на один ракурс больше в фотографиях товаров. Не то, что б в одном случае не было совсем фотографий, или были в плохом качестве, просто не было в одном важном для покупателя ракурсе.</p>
<p><strong>Пренебрежение деталями приведет к провалу.</strong><br />
Консультант-гуру по безопасности <a href="http://www.schneier.com/blog/archives/2009/07/information_lea_1.html" target="_blank">приводит пример</a>, как усилия ограничить доступ в помещение оказываются напрасными из-за мелкой и непродуманной детали. Кодовый замок сам выдает код.</p>
<div id="attachment_194" class="wp-caption alignnone" style="width: 540px"><img class="size-full wp-image-194" title="security failure" src="http://usemenot.com.ua/wp-content/uploads/2009/09/security-failure.jpg" alt="security failure" width="530" height="265" /><p class="wp-caption-text">Угадайте, какой код к дверям на фото</p></div>
<p>Еще несколько примеров вдогонку. Они достаточно известны, только ленивые юзабилисты не писали хоть пару слов об этом. Оба случая касаются Амазона. Это «<a href="http://www.uie.com/articles/three_hund_million_button/" target="_blank">кнопка на $300 000 000</a>» (ага много нолей всегда круто выглядит) и «<a href="http://www.uie.com/articles/magicbehindamazon" target="_blank">вопрос на 2.7 миллиарда</a>».</p>
<p><img class="alignnone size-full wp-image-200" title="amazon usability question on 2.7 billion" src="http://usemenot.com.ua/wp-content/uploads/2009/09/amazon-usability-question-on-2.7-billion.jpg" alt="amazon usability question on 2.7 billion" width="530" height="100" /></p>
<p>Не буду детально писать о них, в первом случае заменили кнопку «регистрация» на «продолжить» и количество покупок выросло на 45% и дополнительные покупки принесли больше 15 миллионов за первый месяц. За первый год сайт заработал дополнительные 300 миллионов. Во втором случае добавление функционала «Был ли этот отзыв полезным для вас?» тоже принесло внушительное увеличения прибили.</p>
<p>Последним примером будет внимание к группировке цифр или символов в длинных кодах или номерах. Всегда когда спрашивают чей-то номер телефона,  я удивляюсь, почему  больше десяти цифр в номере не разделено пробелом для удобства чтения (сейчас на моем телефоне уже все как должно быть). Даже некоторые наши мобильные операторы <a href="http://blog.golubovsky.com/2009/04/10/mts-vs-kyivstar-confrontation-useful-for-people/" target="_blank">только недавно догадались</a>, что нужно группировать длинные коды в припейд карточках.</p>
<div id="attachment_196" class="wp-caption alignnone" style="width: 540px"><img class="size-full wp-image-196" title="pre-paid card digit grouping" src="http://usemenot.com.ua/wp-content/uploads/2009/09/pre-paid-card-digit-grouping.jpg" alt="pre-paid card digit grouping" width="530" height="173" /><p class="wp-caption-text">Еще недавно пополнять Киевстар было менее удобно. Фото Романа Голубовського</p></div>
<p><strong>Не спешите.<br />
</strong>За время работы я выработал привычку в определенный момент по ходу работы над проектом останавливаться и как будто делать zoom-in, пройтись по задачам в другом, приближенном масштабе, концентрируясь на деталях. Обычно разработка ведется в быстро-срочном темпе и времени для этого нету, но я заметил, что даже минимум уделенного времени достаточно, что бы продукт в итоге оказался более жизнеспособным и готовым соперничать с конкурентами.</p>
<script type="text/javascript" src="http://odnaknopka.ru/wp/ok2.utf8.js"></script><script type="text/javascript">okbm("http://usemenot.com.ua/2009/09/28/importance-of-details-in-interaction-and-visual-design/","Важность деталей в проектировании и дизайне")</script>]]></content:encoded>
			<wfw:commentRss>http://usemenot.com.ua/2009/09/28/importance-of-details-in-interaction-and-visual-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Проектирование интерфейсов: как это делают другие</title>
		<link>http://usemenot.com.ua/2009/07/07/apple-design-process/</link>
		<comments>http://usemenot.com.ua/2009/07/07/apple-design-process/#comments</comments>
		<pubDate>Tue, 07 Jul 2009 13:28:25 +0000</pubDate>
		<dc:creator>Андрей Онофрийчук</dc:creator>
				<category><![CDATA[Новости юзабилити]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[design process]]></category>
		<category><![CDATA[процесс]]></category>

		<guid isPermaLink="false">http://usemenot.com.ua/?p=127</guid>
		<description><![CDATA[Всегда интересно узнавать, как построен рабочий процесс у других, и вдвойне интересно узнать о процессе известных и успешных команд, чтобы потом сравнить со своими принципами работы или попробовать что-то новое. На конференции SXSW в 2008м году Майкл Лопп (senior engineering manager) рассказал, как Apple добивается успеха в дизайне и разработке. Майкл рассказал о принципе «ряда [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://usemenot.com.ua/2009/07/07/apple-design-process/"><img class="alignnone size-full wp-image-126" title="apple-design-process" src="http://usemenot.com.ua/wp-content/uploads/2009/07/apple-design-process.jpg" alt="apple-design-process" width="530" height="200" /></a></p>
<p>Всегда интересно узнавать, как построен рабочий процесс у других, и вдвойне интересно узнать о процессе известных и успешных команд, чтобы потом сравнить со своими принципами работы или попробовать что-то новое. На конференции <a rel="nofollow" href="http://sxsw.com/interactive" target="_blank">SXSW </a>в 2008м году <a rel="nofollow" href="http://www.randsinrepose.com/" target="_blank">Майкл Лопп</a> (senior engineering manager) рассказал, как Apple добивается успеха в дизайне и разработке.</p>
<p>Майкл рассказал о принципе «ряда подарков» (очень хорошие идеи «запакованные» в другие хорошие идеи — другими словами, отличное программное обеспечение в отличном железе и в красивой упаковке). Конечно же, всем интересно, как бл* они это делают (формат конференции «South by Southwest» позволяет вольное выражение =) ). Майкл раскрыл некоторые детали:</p>
<p><span id="more-127"></span></p>
<p><strong>Безупречные до пикселя наброски</strong><br />
Это забирает огромное количество сил и времени но убирает все неопределенности и любую двусмысленность которые могут быть в упрощенных мокапах или прототипах. Нужно потратить больше сил, но на последующих этапах это поможет избежать многих ошибок.</p>
<p><img class="alignnone size-full wp-image-128" title="michael-lopp" src="http://usemenot.com.ua/wp-content/uploads/2009/07/michael-lopp.jpg" alt="michael-lopp" width="530" height="398" /></p>
<p><strong>С 10 до 3 до 1</strong><br />
Дизайнеры готовят 10 абсолютно разных набросков нового продукта или сервиса. Никаких ограничений в требованиях к дизайну, все, что захочется дизайнерам. Позже число сужается к 3, и после месяцев работы над ними получится один финальный вариант.</p>
<p><strong>Парные дизайн митинги</strong><br />
Эта часть действительно интересная. Каждую неделю команды проводят два митинга. На первом обсуждаются любые идеи, мозговой штурм без каких либо ограничений. Потом проводится второй (production meeting), где идеи с первого митинга пытаются «завалить». На нем дизайнеры вместе с инженерами думают, как бы все сумасшедшие идеи воплотить в жизнь. Такие встречи проходят на протяжении всего процесса разработки продукта.</p>
<p><img class="alignnone size-full wp-image-132" title="apple-design-process-2" src="http://usemenot.com.ua/wp-content/uploads/2009/07/apple-design-process-2.jpg" alt="apple-design-process-2" width="530" height="200" /></p>
<p><strong>Пони митинги</strong><br />
Эта история связана с рассказом Майкла о том как топ-менеджмент ставит задачи: «Я хочу WYSIWYG (what I see what I get)…что бы все новые браузеры это поддерживали…что бы отражалась философия компании», Это как детское «Я хочу пони!», а кто ж не хочет пони, они ведь классные. Проблема в том, что люди описывают то, что им только кажется они хотят. Тут помогают результаты парных митингов и процесс выделения 1 из 10 «прототипов» продукта.</p>
<p>Я буду стараться находить истории и других компаний, так скоро будет пост о процессах в Майкрософт и нескольких других известных компаниях.</p>
<p>via <a rel="nofollow" href="http://www.businessweek.com/" target="_blank">businessweek</a></p>
<script type="text/javascript" src="http://odnaknopka.ru/wp/ok2.utf8.js"></script><script type="text/javascript">okbm("http://usemenot.com.ua/2009/07/07/apple-design-process/","Проектирование интерфейсов: как это делают другие")</script>]]></content:encoded>
			<wfw:commentRss>http://usemenot.com.ua/2009/07/07/apple-design-process/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
