This talk was designed and aimed at summer of code students - computer science interns for summer. But would still love to hear your thoughts in communicating designs to developers and businesses.

1. Design Specifications
An Introduction by Lulu Pachuau
14th January 2008, Summer of Code
1

2. Who am I?
2

3. problem solver
ent
r
f fe &
information architect
di s
hat s
e
rol strategist
evaluator
facilitator
communicator
critic
sales person
teacher
mentor
implementer
interaction designer
business person
3

4. ple d
peo rke
wo
i’ve with
Logos I could find...
4

5. ?
Why Design
Why Specify
5

6. Context
6

7. Lots of people have & use computers
7

8. So many choices!!
8

9. Everyone wants things right now!!
9

10. so...
?
How do you know what
to build?
10

11. er
sw is
n
A th
in
es
li
ANSWER:
When do you design?
11

12. s
ces
pro
ent
m
p
velo
e
ed
war Analysis Build & deliver
t
sof
Technical
Requirement “Gathering” Build Test
Design
Who will use it?
What’s the
GAP
What should it DB code
do? and structure
tive s
fec ent
f
ine rem
ui tion
req fini Gap
in Delivery
de the
proc
ess
Adapted from Cooper, Interaction Design Practicum course material.
12

13. ess
c
pro
ent
m
lop
e
dev
are Analysis Design Build & deliver
tw
sof
Technical
Requirements
Design Build Test
Design
Definition
What
Who will interaction
use it? meets
requirements? What’s the
What DB code
Common practise
should it What does it and structure
do? look like?
How does it
r
tte nd
Be n a behave?
o ser
niti
efi r to u
d e Gap
los eeds Delivery
c filled
n
by
Des
ign
Adapted from Cooper, Interaction Design Practicum course material.
13

14. Lost in translation – different picture
14

15. Got it
Got it
Got it
Got it
Got it
Same picture
15

16. so...
?
How do you know what
to build?
16

17. “
You’ll know what to build
when you know what the
Design looks like...
17

18. ?
What is a
Design Specification?
18

19. Documents that communicate...
• What the THING is pictures
conversation
• What the THING Looks like
see what
• How the THING works you’re
discussions
getting
• Why the THING is needed
• Who will use the THING
see what you
• How the THING will behave will be building
19

20. blue print of your product
20

21. Design specifications...
• Communicate:
• Front end - user interface elements
• User experience of your web site or application
• Technical implications on the end-user’s experience
21

22. Different types
• Site maps
• Navigation pathways
• Activities overview
• Task flows
• Page layouts - structural
• Interactions specifications for tasks within an Activity
22

23. f
so n Concrete Completion
ent at
s software interface io Web as hypertext system
pon plic
m
Co ite/ap Visual Design: visual treatment of text,
Visual Design
ebs in quot;look-and-feelquot;)
esign: graphic treatment of interface
graphic page elements and navigational
ts (thew
quot;lookquot;
components
e Design: as in traditional HCI: Navigation Design: design of interface
of interface elements to facilitate elements to facilitate the user's movement
Interface Design Navigation Design
eraction with functionality through the information architecture
Information Design
tion Design: in the Tuftean sense: Information Design: in the Tuftean sense:
ng the presentation of information designing the presentation of information
tate understanding to facilitate understanding
Interaction Information
ion Design: development of
Information Architecture: structural design
time
Design Architecture
tion flows to facilitate user tasks,
Typ
of the information space to facilitate
how the user interacts with
ical
intuitive access to content
com
ctionality
ly
mun
for
Functional Content content elements required inica
nal Specifications: quot;feature setquot;: Content Requirements: definition of
elem the site te
descriptions of functionality the site
Specifications Requirements
ents
clude in order to meet user needs in order to meet user needs
o
UX
User Needs: externally derived goalsf
eds: externally derived goals
User Needs
site; identified through user research, for the site; identified through user research,
chno/psychographics, etc. ethno/techno/psychographics, etc.
Site Objectives
jectives: business, creative, or other Site Objectives: business, creative, or other
ly derived goals for the site internally derived goals for the site
riented information-oriented
Abstract Conception
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)
that may influence decisions during user experience development.of User experience - Jesse describe a development process, nor does it define roles within a
Elements Also, this model does not James Garret
user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. 23

24. Site Maps
• AKA Site overviews - BIG PICTURE view of the site or application
• Main areas of the website/application
• Information hierarchy
• Identify where people will potentially start from or end up at
• Identify types of pages or templates
• Identify main navigation pathways
24

25. !quot;#$%&'()%*+,()-(./(%0)12(34)5
0>%?-@(21,
0>%?-@(21,
!quot;#$%&*%0)12(34)5%89:;:8'<
6-7(.12( ,1=(%.12(
! A('/)-,@-4.D
Q)4-0Kquot;K Z$%#0#%'-a4=W0#$)!#0'$-0*64`-<0)&04=%*0#-('%)*#0'$-0#%'-0$=#quot;0Z$-0#6`a
#-('%)*#04=P0()*'=%*04)<-0#6`a/-.-/#quot;0M)<0&6//0/%#'0)&0#-('%)*#0=*70W=8-#0
<-&-<0')0'$-0bT0M<=4-!)<U07)(64-*'quot;
>%'-0#-('%)*09quot;K0!%//0*)'0`-0W=<'0)&0'$-08/)`=/0%*&)<4='%)*0=((-##quot;0Z$%#0
#%4W/P0#$)!#0!$-<-0'PW-#0)&0()*'-*'0#%'#0!%'$%*0'$-0#%'-quot;0
T('%.%'%-#0V0 -&-<-*(-0V0 Z)06*7-<#'=*70'$-0*=.%8='%)*=/0W='$!=P20$)!0%*&)<4='%)*0%#0/%*U-70')0
?<)80)6'()4-# T##%#'0V0=7.%#- M6*7%*80YD,Z?[ >%'-0$-/W
W<)X-('# Z))/# -=($0)'$-<20#--0'$-0()*'-*'04)7-/#0%*0'$-0&)//)!%*80W=8-#quot;
1quot;K Squot;K Iquot;K 9quot;K
Bquot;K Lquot;K
Z$-0#-('%)*#04=<U-70!%'$0(%<(/-#0%*7%(='-0*)'-#0=8=%*#'0'$-4quot;0Z$-0<-#'0
=<-0*)<4=/0W=8-#0)<0()*'-*'0=<-=#quot;
#
@6'()4-#0 5-#'0W<=('%#-0 T`)6'0T('%.%'P0 M%*70=0 0E./@-4.17%F%G4.@(.@%1..4@1@-4.'
T`)6'0D,Z? >%'-0#'<6('6<-
).-<.%-! 86%7-/%*-# _/=##-# <-&-<-*(-
Iquot;1 9quot;1
1quot;1 Squot;1 Bquot;1 Lquot;1
! Z$-0$)4-W=8-0%#0'$-0/)8%(=/0#'=<'%*80W)%*'0=*70'$-<-&)<-0=('#0=#0
'$-07))<!=P0')0'$-0#%'-quot;0D)'-0'$='0'$-0#-('%)*#0(=*0`-0=((-##-70
quot; &<)40'$-08/)`=/0*=.%8='%)*0=#0!-//quot;
$
!quot;quot;#quot;$#%&' !..*)0$#*%'
^=*=8%*80P)6<0
quot;
()*%*+#)' /3*)(quot;quot;'
7#%,'0)$#-#$#(quot;' =#$('1((,60)?
M%*70=0'))/ M%*70=('%.%'%-#0!%//0$=.-F
=##-'#
,(-(.*/+(%$ *-(3-#(8
Bquot;S 9quot;S
Hquot;1 1quot;05<)!#-0`P0%*7-A0/%#'0)&0=('%.%'%-#
Squot;S
1quot;S Iquot;S % Squot;0>-=<($0`P0U-P!)<7
Bquot;05<)!#-0`P0T('%.%'P0_/=##-#
#
!quot;quot;#quot;$#%&' M%*70=0<-&-<-*(-0!%//0$=.-F
quot;01($2'0%,' 9(-(.*/#%&'
M%*=*(%*80P)6<0 1quot;05<)!#-0`P0<-&-<-*(-0'PW-
;(3+quot;'*1'4quot;(
/(3quot;*%0.' 2*43':;<
W<)X-('# Squot;0>-=<($0`P0U-P!)<720#)6<(-207='-20#)0)*
C(quot;(03)@ 9quot;B
quot;()43#$2 Squot;B Iquot;B Bquot;05<)!#-0`P0%*7-A
Lquot;1quot;1
1quot;B
$ M%*70=0'))/0!%//0$=.-F
1quot;05<)!#-0`P0'))/0'PW-
5+/3*-#%&'
=46+#$$#%&'
Z<=*#W)<'0 Squot;0>-=<($0`P0U-P!)<7
0))(quot;quot;'0%,' !))(quot;quot;#6#.#$2
2*43':;<
4)7-# Bquot;05<)!#-0`P0%*7-A
>0%40.quot;
+*6#.#$2 9quot;I
Squot;I Iquot;I Lquot;1quot;S
1quot;I
% >%'-0&--7`=(U0!%//0$=.-0=0&)<40'$='006#-<#0(=*0#-*70&--7`=(U0
=`)6'0'$-0#%'-quot;
<3*$()$#%&'
>0?#%&'
0%,' N76(='%*80
)@0%&(' =$0%,03,quot;'D'
/3*+*$#%&' W-)W/-
3(A4(quot;$quot; E4#,(.#%(quot;
/46.#)'@(0.$@ Squot;L
Iquot;L Lquot;1quot;B
1quot;L
F%quot;43#%&'
F%-#3*%G. B.0#+#%&'
]/)##=<P
:(&#quot;.0$#*%
quot;4quot;$0#%06#.#$2 74%,quot;'Iquot;H
Squot;H
Lquot;1quot;I
1quot;H
>*%#$*3#%&'
?)/%(%-#0V0 _)*'=('%*80
/(31*3+0%)('
>'<='-8%-# ,ZDE C(/*3$quot;
1quot;9 Squot;9 Iquot;9 Lquot;1quot;L
AB
C0
!4,#$#%&'
quot;
/3*&30++(quot; B#3)4.03quot;
Iquot;: Lquot;1quot;L
!!!quot;#$%&'quot;()quot;*+,-.-/01203)4%*%)*056%/7%*8209:0;%(')<%=0>'<--'
,-.-/0B20D='%)*=/0NO6%'P0Q)6#-209L0R6--*0>'<--'
?@05)A0110::B20C-//%*8')*20D-!0E-=/=*7
?@05)A01KH0S1120T6(U/=*720D-!0E-=/=*7
?F0GHI0I0IJJ0:KLK000MF0GHI0I0IJJ0:K9L,-.-/0B20D='%)*=/0NO6%'P0Q)6#-209L0R6--*0>'<--'
?F0GHI0J0B9901SBL000MF0GHI0J0B9901SJB
?@05)A01KH0S1120T6(U/=*720D-!0E-=/=*7
?F0GHI0J0B9901SBL000MF0GHI0J0B9901SJB
25
?=8-0H0)&01B

26. Navigational Pathways
• Aka navigational patterns
• Main ways to navigate around the site or application
• Identify where to strategically place information
• How pages link to each other
• Validates templates and scalability of these pages
• Clearly shows which template to use when
26

27. 27

28. Task flows
• User’s experience – Flow
• Objective look at “Flow”
(as opposed to Form)
• Identifies gaps
• Scenario based
28

29. yes
selects Name
1 2 no
yes My Sci
Page sign up/ Email MySci
register/ Password
no (try again)
Any Page Logout
Some content my kete
Tools
Some content
Any Page Any Page
Register
Name
Email
Some content Register
S
YE
Password
2
Tools
Some content Some content
NO
Tools
My Sci Logout
Some content
Some content
Some content
Alternate path
Detailed
functionality
Page content
to be further
analysed
1 is email address correct format? is it unique? (i.e. not in database)
Page Function
2 is user in the middle of adding an item to kete?
DISCLAIMER: The layouts displayed in this diagram represent information structure only and should not be construed as final screen designs
MORST & UoW / ScienceLearn Hub Information Architecture Framework 29 March 2007
CLIENT / PROJECT DATE
29
F5 / Registration 1.1 Page 6 of 28
ID / PROCESS TITLE VERSION

30. Page layouts
• Aka Template Specifications
• High-level structure
• Global navigation
• Major components
• Content placement
• Content hierarchy
• Metadata
30

31. +$,(-quot;*=>$'(:('&#()quot; 7&-$*9*):*;<
/+,8(+8,quot;-%quot;*#%>*+$,4quot;($%!,quot;:$5),7
)*#++%quot; .*N$%L, .*O$8> .*2)quot;#&'#*)%*-(P$*:$$AF&'G*
! ' ?203%50,$%4,quot;:$%32)53%+2$%)9$,quot;--%37$-$+quot;-%3+,8(+8,$%quot;*#%+2$%2012%-$9$-%),%()::)*%
Q)-)5# R $-$:$*+3%)4%+2$%@)8,*$;%A-quot;**$,B3%83$,%0*+$,4quot;($.
I4)5%quot;$6*78&quot;quot;$%*8)-)J*I/012*F%&quot;A$A*K$&A$%*3*L&6*F$*A(::$%$quot;#*:)%*A(::$%$quot;#*')5quot;'(8,*F&,$A*)quot;*5,$%M,*,$8$'#()quot;*):*%$-()quot;J
quot;
A,0:quot;,;%quot;(+090+0$3%)4%+2$%+))-C
D.%E,)530*1%#$301*quot;+$#%Fquot;-70*1%quot;*#%G;(-0*1%'quot;+25quot;;3H
I.%J$++0*1%#0,$(+0)*3H
K.%A-quot;**0*1%quot;%@)8,*$;H
L.%M0$50*1%quot;+%@)8,*$;3%>B9$%3quot;9$#%quot;*#%83$#.%
% 7%(quot;#*S&> .*ZL&(8*S&>
0$88(quot;-#)quot;*1$-()quot; 78&quot;*&*4)5%quot;$6 S6*4)5%quot;$6, #
quot; ?2$%N$quot;#$,%6quot;**$,%+2quot;+%50--O(quot;*%6$%(83+):03$#%4),%$quot;(2%()8*(0-.
!! $ S&>
E&A$*S&> ?$6,@
) &
0&6,*#)*:(quot;A*B*:(8#$%*%)5#$,*B*A(%$'#()quot;,C ! P0*73%+)%quot;#:0*03+,quot;+09$%0*4),:quot;+0)*%quot;*#%5quot;;3%+)%()*+quot;(+%+2$%G)8*(0-.%
A$)'-$%(quot;*%-)1Q0*R%,$103+$,%quot;*#%-)1%)8+%4,):%2$,$.
# A,0:quot;,;%*quot;901quot;+0)*%)4%+2$%+))-C
D.%E,)530*1%#$301*quot;+$#%Fquot;-70*1%quot;*#%G;(-0*1%'quot;+25quot;;3
DE$$AF&'G*&quot;A*(quot;,#%5'#()quot;,H I.%A-quot;*%quot;%@)8,*$;
K.%&;%@)8,*$;3%S%#0,$(+0)*3%quot;*#%'-quot;*3%>B9$%3quot;9$#%quot;*#%83$#.%
Dquot;5LF$%*):*8(,#$A*(#$L,*B*>&-(quot;&#()quot;H
% T+0-0+0$3%+2quot;+%38''),+%+2$%A,0:quot;,;%quot;(+090+0$3.
$ /2)5ON0#$%50#1$+.%/$-$(+0*1%+203%0()*O50#1$+%32)53%),%20#$3%+2$%-$4+%'quot;*$-.
Screen/ Wireframe/Prototype Annotations/Notes
& U$;3%:$*8.%VW'quot;*#0*1%+203%()*+,)-%#03'-quot;;3%+2$%,$-$9quot;*+%7$;3%+)%+2$%:quot;'%quot;*#%X)):%
-$9$-.%
?$6,@
?$6,@
26'8(quot;-
,#*(-+.
DS&>H
Q(,#*):*%)5#$,*&#*#K(,*8$P$8C
DQ(,#*(#$L,H*T*;U V#(8(#($,*B*E&'(8(#($, 7)(quot;#,*):*(quot;#$%$,#
$
DV>A&#$,*WK$quot;*S&>*(,*5,$A*3*X))L$A*(quot;Y*
>&quot;quot;$AY*$#'CH
=$$*&88*?$6, R
( ) !quot;#$%&quot;'%()*+,)-.%/-0#0*1%+203%()*+,)-%-$4+%+)%,012+%50--%4quot;#$%+2$%&quot;'%6quot;(71,)8*#%
/!'quot;01%*%23%405'63%0'quot;0)*#+7
)8+%quot;%60+%+)%,$9$quot;-%+2$%,)8+$3%:),$%',):0*$*+-;.%<*0($%+)%2quot;9$=
;28&<&)&41*=*>)&<&)&41 Aquot;&9)1*quot;B*C9)4%41) ?<4@2)&quot;9
E&A$*S&>
836990'+03:%0&#;<
I[##%(F5#$,J
E&A$*S&>
Dquot;5LF$%*):*8(,#$A*(#$L,*B*>&-(quot;&#()quot;H
( Y++,068+$3%#$+quot;0-%'quot;*$-%4),%3$-$(+$#%Z)8+$%),%A-quot;**$#%@)8,*$;.
D.%Y11,$1quot;+$3%+2$%4quot;(8-+0$3%[%T+0-0+0$3%)*%+203%,)8+$H
%
#$
I.%Y11,$1quot;+$3%+2$%A>B3%)4%+203%,)8+$H
!quot;#$%&'#()quot;*+$,(-quot;*.*/012*3*4)5%quot;$6*78&quot;quot;$%
quot;
!quot;#$%&'()*+*,--.*/01(2&*/&3&)456*7quot;*%4#%quot;508)&quot;9*:&)(quot;0)*#4%3&11&quot;96* K.%/2)53%+2$%V-$9quot;+0)*%4),%+2$%Z)8+$H
!
!quot;#$%&'quot;(
31

32. Interaction specifications
• Detailed descriptions
• Form
• Behaviour
• Task-oriented or Flow
• One spec per task
32

33. examples...
33

34. Annotations - overview
• General description of the screen/
wireframe
• What users can do from this screen
• Default display
34

35. +$,(-quot;*=>$'(:('&#()quot; 7&-$*9*):*;<
!quot;#$%&'%()*quot;+,-%.#/0,quot;1%&*%-2)%3&+'$)1%4,quot;$$)'5
Name of the screen/activity
$%H, .*K$8> .*2)quot;#&'#*)%*-(L$*:$$CG&'D* % !quot;#&$(quot;$%&#quot;#2*#'$=(*-$,$7(quot;*$/.$,77$'#quot;(32,*#'$=,7>(23$,2'$):)7(23$%,*-quot;$=(*-(2$*-#$
M)-)5# N ,&#,$*-,*$*-(quot;$?#3(/2,7$@/02)(7$)/+#&quot;4$A*$(quot;$B//C#'$(2$,*$*-#$-(3-#quot;*$7#+#7$/.$*-(quot;$
Description & intention )/02)(7$)/+#&,3#4$D77$%,*-quot;$,*$*-(quot;$7#+#7$7//>$*-#$quot;,C#4
8$'#()quot;*):*%$-()quot;F
!quot;#&quot;$),2E
What users can do F4$@-,23#$*-#$C,(2$7#+#7$/.$./)0quot;$1#*=##2$*-#$8$)/02)(7quot;$/.$5G?@H
I4$J#7#)*$*/$+(#=$*-#$'#*,(7$/.$,$%,*-=,:H
K4$L//C$(2$*/$quot;##$*-#$'(..#&#2)#$1#*=##2$G,7>(23$,2'$@:)7(23$%,*-quot;H
7%(quot;#*O&> .*BH&(8*O&> M4$?#.(2#$*-#$7(quot;*$1:$&#3(/2$/&$quot;010&1H
N4$5#*$'(&#)*(/2quot;$.&/C$,2'$*/$)#&*,(2$%/(2*quot;H
O4$P(#=$1/*-$G,7>(23$,2'$@:)7(23$%,*-quot;$/&$.(7*#&$*-#$7(quot;*$1:$#(*-#&$C/'#H
O&>
,X 84$P(#=$,77$'(quot;*,2)#quot;$/&$#2*#&$*-#$'(quot;*,2)#$,2'$.(7*#&$*-#$7(quot;*$1:$*-,*$'(quot;*,2)#4
Q4$R*-#&$<,%$.02)*(/2quot;$&#C,(2$*-#$quot;,C#$,quot;$/2$L//C(2$/&$5//37#$C,%quot;4
S(quot;%7,:E
F4$A2quot;*&0)*(/2quot;$,2'$7,1#7quot;$,quot;$quot;-/=2H
Default elements on the page
I4$;##'1,)>$/2$-/=$C,2:$(*#Cquot;$0quot;#&$(quot;$+(#=(234
! !quot;#$%&#'()*(+#$quot;#,&)-$./&$quot;010&1quot;$,2'$&#3(/2quot;4
quot; 5#*$'(&#)*(/2quot;$6$quot;##$'#*,(7$/2$%,3#$84$9&/+('#quot;$,1(7(*:$*/$#2*#&$quot;*,&*$,2'$'#quot;*(2,*(/2$
%/(2*quot;4
# 35

36. Annotations - Detail
• •
Detailed descriptions of elements and Reference to other technical document
behaviours (e.g. Business rules or SOW or
Requirements) if relevant.
• For each annotation provide:
• UI Rules: Element > Action > Result
• Default display
• Any notes
36

37. +$,(-quot;*=>$'(:('&#()quot; 7&-$*9*):*;<
!quot;#$%&'%()*quot;+,-%.#/0,quot;1%&*%-2)%3&+'$)1%4,quot;$$)'5
=&$11quot;6 .*J$%H, .*K$8> .*2)quot;#&'#*)%*-(L$*:$$CG&'D* % !quot;#&$(quot;$%&#quot;#2*#'$=(*-$,$7(quot;*$/.$,77$'#quot;(32,*#'$=,7>(23$,2'$):)7(23$%,*-quot;$=(*-(2$*-#$
M)-)5# N ,&#,$*-,*$*-(quot;$?#3(/2,7$@/02)(7$)/+#&quot;4$A*$(quot;$B//C#'$(2$,*$*-#$-(3-#quot;*$7#+#7$/.$*-(quot;$
)/02)(7$)/+#&,3#4$D77$%,*-quot;$,*$*-(quot;$7#+#7$7//>$*-#$quot;,C#4
$%*3*H&6*G$*C(::$%$quot;#*:)%*C(::$%$quot;#*')5quot;'(8,*G&,$C*)quot;*5,$%I,*,$8$'#()quot;*):*%$-()quot;F
Name of the panel or block on the screen !quot;#&quot;$),2E
F4$@-,23#$*-#$C,(2$7#+#7$/.$./)0quot;$1#*=##2$*-#$8$)/02)(7quot;$/.$5G?@H
I4$J#7#)*$*/$+(#=$*-#$'#*,(7$/.$,$%,*-=,:H
K4$L//C$(2$*/$quot;##$*-#$'(..#&#2)#$1#*=##2$G,7>(23$,2'$@:)7(23$%,*-quot;H
7%(quot;#*O&> .*BH&(8*O&> M4$?#.(2#$*-#$7(quot;*$1:$&#3(/2$/&$quot;010&1H
UI Rules: Element > Action > Result N4$5#*$'(&#)*(/2quot;$.&/C$,2'$*/$)#&*,(2$%/(2*quot;H
O4$P(#=$1/*-$G,7>(23$,2'$@:)7(23$%,*-quot;$/&$.(7*#&$*-#$7(quot;*$1:$#(*-#&$C/'#H
O&>
Y&C$*O&> S$6,X 84$P(#=$,77$'(quot;*,2)#quot;$/&$#2*#&$*-#$'(quot;*,2)#$,2'$.(7*#&$*-#$7(quot;*$1:$*-,*$'(quot;*,2)#4
Q4$R*-#&$<,%$.02)*(/2quot;$&#C,(2$*-#$quot;,C#$,quot;$/2$L//C(2$/&$5//37#$C,%quot;4
S(quot;%7,:E
F4$A2quot;*&0)*(/2quot;$,2'$7,1#7quot;$,quot;$quot;-/=2H
I4$;##'1,)>$/2$-/=$C,2:$(*#Cquot;$0quot;#&$(quot;$+(#=(234
>
?
! !quot;#$%&#'()*(+#$quot;#,&)-$./&$quot;010&1quot;$,2'$&#3(/2quot;4
9 E%)5#$*quot;&H$F*ESH,F*E?%,F
E&L-*$8$L&#()quot;F
EH)C$F
quot; 5#*$'(&#)*(/2quot;$6$quot;##$'#*,(7$/2$%,3#$84$9&/+('#quot;$,1(7(*:$*/$#2*#&$quot;*,&*$,2'$'#quot;*(2,*(/2$
E&##%(G5#$,F
%/(2*quot;4
E%&#(quot;-F*E>?)#),F*E')HH$quot;#,F
T*UCC*#)*O6*4)5%quot;$6
; # ;(7*#&$1:$</'#quot;
C
T*78&quot;*&*V)5%quot;$6*)quot;*#?(,*%)5#$
/$#*C(%$'#()quot;,*#)*#?(,*1)5#$ N
;*'<).*0&8D(quot;- .*26'8(quot;-*%)5#$,
UI Rules: Element > Action > Result
D
W)#? .*8$&/012 .*26'8(quot;-*%)5#$,
! $ ;(7*#&$1:$S(quot;*,2)#
!quot;#$%&%'((quot;)*%+,%-(%
9&&):07'$14quot;7).*Bquot;#$%*C(,#&quot;'$
.)//+,0-(,%1)0+(,%#2)#3
+(,#&quot;'$*(quot;* ,- EF7).*K%,
A
+(,#&quot;'$*(quot;*SH, .* = ?67
@
& ;##'1,)>$/2$*-#$7(quot;*$/.$(*#Cquot;4$
B
' T(quot;*$&/0*#quot;$U(*#Cquot;V$6$quot;-/=$0%$*/$FW$,*$,$*(C#4
37

38. Components
Task flow or context
About the doc scenario
Cover
Flow of interactions – step by step
interaction and experience
38

39. Design specs are used by...
eve
r yo
ne
invo
lved
• !!
Visual designers
• Integrators or user interface developers (HTML/CSS people)
• Developers or programmers
• Testers to know what to test for
• Business people to understand the evolution of the software and plan
future enhancements
39

40. “
You’ll know what to build
when you know what the
Design looks like...
40

41. Thanks!!
lulu@lushai.com
More about Summer of Code
http://www.summerofcode.co.nz
Photos found on Flickr and Google images
41