Embed Size (px)
Citation preview
Документ, который читают
Тарас Бризицкий Сергей Кудряшов
12 онлайн-семинар UXRussia
19 февраля 2009 г.
Вступление
Для кого этот доклад
В первую очередь для молодых специалистов, сталкивающихся с проблемами представления результатов своей работы
Чего в данном докладе нет…
Описания «правильного» процесса (читайте Communicating Design)
Готового рецепта «на все случаи жизни»
Проблемы
Процесс документирования не налажен
Изначально документация была не нужна, потом привыкли обходиться без нее
Никто не хочет тратить время на написание документов
Никто не хочет брать на себя ответственность
Существующие документы никто не читает
Проектировщики пишут документы, но их никто не читает
«А что, у нас есть документация?»
Быстрая итеративная разработка
Объем документации быстро растет
Документация сразу же устаревает
Решение?
Оставить все «как есть»
или…
Решение
Успокоиться и начать анализировать ситуацию
Кто будет читать документ
Зачем этим людям ваш документ
Оценка трудозатрат
Кто
Кто будет читать документ
Руководство, менеджеры
Маркетинг
Исполнители
Тестеры
Кто-то еще?
Зачем
Зачем этим людям ваш документ
Руководство хочет быть уверено, что продукт соответствует бизнес-требованиям
Маркетингу нужно знать, что именно они будут продавать
Программистам нужна информация о расположении контролов и их поведении
Тестерам нужны основные сценарии использования
Трудозатраты
Оценка трудозатрат
…на подготовку документа
…на поддержание документа в актуальном состоянии
Формат
One doc to rule them all
Wireframe (неинтерактивный прототип, макет)
Прототип
Design Description document
возможны другие варианты :)
!"#$ 1
!%#$&#'( "$)*$#(#+',-.$/$&$"!"#$%&'()*"+ "*,-.,/*-01 *2# $3-,, 4)' *(%4,/,. 5, 6)"*) 3-$#32 #)/)3%78)-2+ *(%4,/, /,"#$%,9,)6 3-$#3( " 2-:$/6,;2)1 $ 4)*,-"*,*("). 5,<,*2) -, 3-$#3( ',#("3,)* 6)=,-2'6 #$2"3, $4-$>%)-21.
0(#+1-/2#-3 $4/-%+2?)-*/,%&-,+ $4%,"*& "$.)/<2* "#2"$3 >")= "6$-*2/$>,--0= > .,--01 6$6)-* > "2"*)6) *$6$>, , *,3<) 2-:$/6,;27 $ 3,<.$6 *$6). @-2'( "#2"3, /,"#$%,9,)*"+ 3-$#3, [Scan Folder…], $*3/0>,7A,+ "*,-.,/*-01 .2,%$9 >04$/, #,#32.
B#2"$3 2"*$8-23$> >0>$.2*"+ «')4/$1» .%+ $4%)98)-2+ >$"#/2+*2+.C%+ 3,<.$9$ 2"*$8-23, $*$4/,<,)*"+:
• 23$-3, *$6, (32x32 px, 2"#$%&'()*"+ ,3*(,%&-$) 2'$4/,<)-2))
• 26+
• 4%$3 Capacity/Used/Free
• 2-.23,*$/ ',#$%-)-2+
• 3-$#3, [Scan], ',#("3,7A,+ #/$;)"" "3,-2/$>,-2+ $#/).)%)--$9$ 2"*$8-23,
!-.23,*$/ ',#$%-)-2+ $*$4/,<,)* "*)#)-& ',#$%-)-2+ *$6,, .$#$%-2*)%&-$ 3$.2/(+ D*( 2-:$/6,;27 #/2 #$6$A2 ;>)*$>0= $**)-3$> (hue), #%,>-$ 2'6)-+7A2="+ " ')%)-$9$ (6-$9$ 6)"*,) .$ 3/,"-$9$ (*$6 ',#$%-)-). !'6)-)-2) $**)-3, #/$2"=$.2*, -,82-,+"& " 50% ',#$%-)-2+.
56+(1@ $3-) 1 :(-)/ -) "$.)/<2* -23,32= 3$-*/$%$>.
«Большой doc файл»
«Много букв», никто не будет его читать
Написание требует больших ресурсов
Поддержание в актуальном состоянии — еще больших
Сложно поддерживать версионность: никто не станет перечитывать большие куски текста в поисках изменений
Можно подробить документ на части: вместо одной большой проблемы получим кучу маленьких
!"#$ 1
!%#$&#'( "$)*$#(#+',-.$/$&$"!"#$%&'()*"+ "*,-.,/*-01 *2# $3-,, 4)' *(%4,/,. 5, 6)"*) 3-$#32 #)/)3%78)-2+ *(%4,/, /,"#$%,9,)6 3-$#3( " 2-:$/6,;2)1 $ 4)*,-"*,*("). 5,<,*2) -, 3-$#3( ',#("3,)* 6)=,-2'6 #$2"3, $4-$>%)-21.
0(#+1-/2#-3 $4/-%+2?)-*/,%&-,+ $4%,"*& "$.)/<2* "#2"$3 >")= "6$-*2/$>,--0= > .,--01 6$6)-* > "2"*)6) *$6$>, , *,3<) 2-:$/6,;27 $ 3,<.$6 *$6). @-2'( "#2"3, /,"#$%,9,)*"+ 3-$#3, [Scan Folder…], $*3/0>,7A,+ "*,-.,/*-01 .2,%$9 >04$/, #,#32.
B#2"$3 2"*$8-23$> >0>$.2*"+ «')4/$1» .%+ $4%)98)-2+ >$"#/2+*2+.C%+ 3,<.$9$ 2"*$8-23, $*$4/,<,)*"+:
• 23$-3, *$6, (32x32 px, 2"#$%&'()*"+ ,3*(,%&-$) 2'$4/,<)-2))
• 26+
• 4%$3 Capacity/Used/Free
• 2-.23,*$/ ',#$%-)-2+
• 3-$#3, [Scan], ',#("3,7A,+ #/$;)"" "3,-2/$>,-2+ $#/).)%)--$9$ 2"*$8-23,
!-.23,*$/ ',#$%-)-2+ $*$4/,<,)* "*)#)-& ',#$%-)-2+ *$6,, .$#$%-2*)%&-$ 3$.2/(+ D*( 2-:$/6,;27 #/2 #$6$A2 ;>)*$>0= $**)-3$> (hue), #%,>-$ 2'6)-+7A2="+ " ')%)-$9$ (6-$9$ 6)"*,) .$ 3/,"-$9$ (*$6 ',#$%-)-). !'6)-)-2) $**)-3, #/$2"=$.2*, -,82-,+"& " 50% ',#$%-)-2+.
56+(1@ $3-) 1 :(-)/ -) "$.)/<2* -23,32= 3$-*/$%$>.
«Большой doc файл»
My Main Mac Drive
Some FireWire stu!
Airport shared disk
115 Gb25 Gb90 Gb
Capacity:Used:Free:
500 Gb450 Gb
50 Gb
Capacity:Used:Free:
500 Gb475 Gb
25 Gb
Capacity:Used:Free:
Scan Folder…
Scan
Scan
Scan
Wireframe
Может быть самого разного уровня детализации: от карандашного наброска до "fake shot"
Быстро создается
Быстро изменяется
Могут быть самодостаточными
В любом случае от вас будут ждать «красивой картинки»
My Main Mac Drive
Some FireWire stu!
Airport shared disk
115 Gb25 Gb90 Gb
Capacity:Used:Free:
500 Gb450 Gb
50 Gb
Capacity:Used:Free:
500 Gb475 Gb
25 Gb
Capacity:Used:Free:
Scan Folder…
Scan
Scan
Scan
Wireframe
Прототип
Псевдоинтерактивный/интерактивный
Видео/анимация, демонстрирующие работу компонента
Интерактивность на уровне от «меняются картинки» до «почти так все и будет»
Множество достоинств и недостатков, которые надо учитывать
Иногда удобно использовать для демонстрации своего видения продукта или юзабилити-тестирования
В некоторых случаях способен заменить документацию
На создание качественного прототипа требуется масса ресурсов
Иллюзия интерактивности не всегда идет на пользу
!"#$% 1
!"#$%&'(#)
— & '()"* Capacity/Used/
Free +%$,*%-. /*%0#1203. )0%)3-0*(4%) 0),"-
— %*5#)+#$,%)304 6)%$ —
95%, +%$,*%-. 5#)+#$,%)30-
7(. «+*'#8» '*#103. -+ BWToolkit
— )"%) #$30*0 &*#0-"$(4%)
7) "#$. 9"#$%$, 7$(4:* )0)'#$;$*< HUD 3"#)((
(Blueprint)
— 5#):()* 5)();*%-* )"%$ %* +$5)<-%$*<, 5#- +$513"* "$;78= #$+ /*%0#1*< )"%)
— -+<*#*%-. 30*5*%-
+$5)(%*%-. 7-3")& 5#)-3>)7-0 & #*$(4%)<
&#*<*%-, 0$" ;* )03(*;-&$*< <)%0-#)&$%-* - 17$(*%-* 7-3")& -+ 3-30*<8
!"# $%&$'()*+( ,(-*"%.%$#
$/-*"0,1.2 '*&$+*3(%$. hue 3 &$(-(,*%. *) ,.".%*4* &* '+(/%*4*.
Hue %(5$%(.) $,2.%#.)/#, %(5$%(# / 1+*3%# ,(-*"%.%$# 50%.
6.'17$8 /)()1/ 9.):. ;+$ '"$'.
3:,:3(.)/# &$("*4 -*$/'(
*9%*3".%$8.
<)(%&(+)%:8 &$("*4 &"# 3:9*+( -(-'$. ;*/". 3:9*+( /+(,1 -+*$/=*&$) -.+.=*& %( 2 >'+(%.
?%*-'$ %(5("( /'(%$+*3(%$#.
@%$A$$+1B) -+*A.// /'(%$+*3(%$# /**)3.)/)31B7.4*
$/)*5%$'(, -+*$/=*&$) -.+.=*&
%( 3)*+*8 >'+(%.
13 !"#$%&' 2009().
Design description document
Один документ для всех
Разбиение на страницы-карточки позволяет разделять информацию, предназначенную для разных групп
Вайрфрейм — основа документа
Нельзя ответить на все вопросы, но можно предугадать основные
!"#$% 1
!"#$%&'(#)
— & '()"* Capacity/Used/
Free +%$,*%-. /*%0#1203. )0%)3-0*(4%) 0),"-
— %*5#)+#$,%)304 6)%$ —
95%, +%$,*%-. 5#)+#$,%)30-
7(. «+*'#8» '*#103. -+ BWToolkit
— )"%) #$30*0 &*#0-"$(4%)
7) "#$. 9"#$%$, 7$(4:* )0)'#$;$*< HUD 3"#)((
(Blueprint)
— 5#):()* 5)();*%-* )"%$ %* +$5)<-%$*<, 5#- +$513"* "$;78= #$+ /*%0#1*< )"%)
— -+<*#*%-. 30*5*%-
+$5)(%*%-. 7-3")& 5#)-3>)7-0 & #*$(4%)<
&#*<*%-, 0$" ;* )03(*;-&$*< <)%0-#)&$%-* - 17$(*%-* 7-3")& -+ 3-30*<8
!"# $%&$'()*+( ,(-*"%.%$#
$/-*"0,1.2 '*&$+*3(%$. hue 3 &$(-(,*%. *) ,.".%*4* &* '+(/%*4*.
Hue %(5$%(.) $,2.%#.)/#, %(5$%(# / 1+*3%# ,(-*"%.%$# 50%.
6.'17$8 /)()1/ 9.):. ;+$ '"$'.
3:,:3(.)/# &$("*4 -*$/'(
*9%*3".%$8.
<)(%&(+)%:8 &$("*4 &"# 3:9*+( -(-'$. ;*/". 3:9*+( /+(,1 -+*$/=*&$) -.+.=*& %( 2 >'+(%.
?%*-'$ %(5("( /'(%$+*3(%$#.
@%$A$$+1B) -+*A.// /'(%$+*3(%$# /**)3.)/)31B7.4*
$/)*5%$'(, -+*$/=*&$) -.+.=*&
%( 3)*+*8 >'+(%.
13 !"#$%&' 2009().
Design description document
Спасибо за внимание
Есть вопросы? Задавайте!
