Design Specifications An Introduction by Lulu Pachuau 14 th January 2008, Summer of Code 1
Introduction to design specifications to Summer of Code NZ students
Jan 28, 2015
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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Design SpecificationsAnIntroductionbyLuluPachuau
14thJanuary2008,SummerofCode
1
Who am I?
2
facilitator
critic
problem solver
information architect
teacher
interaction designer
sales person
communicator
implementer
evaluator
business person
strategist
mentor
different
hats &
roles
3
people
i’ve worked
with
Logos I could find...
4
Why Design Why Specify?
5
Context
6
Lots of people have & use computers
7
So many choices!!
8
Everyone wants things right now!!
9
so...How do you know what
to build? ?10
ANSWER:When do you design?
Answer
lies in this
11
Delivery
What’s theDB codeand structure
TechnicalDesign
Who will use it?
What should it do?
Requirement “Gathering” Build Test
GA
P
ineffective
requirements
definition Gap in the process
Analysis Build & deliversoftware development process
Adapted from Cooper, Interaction Design Practicum course material.
12
What’s theDB codeand structure
TechnicalDesign
Requirements Definition Build Test
Delivery
Better
definition and
closer to user
needs Gap filled by Design
Design
What interaction meets requirements?
What does it look like?
How does it behave?
Who will use it?
What should it do?
Analysis Build & deliverDesignsoftware development process
Common practise
Adapted from Cooper, Interaction Design Practicum course material.
13
Lost in translation – different picture14
Gotit
Gotit
Gotit
Same picture
Gotit
Gotit
15
so...How do you know what
to build? ?16
You’ll know what to build when you know what the Design looks like...“
17
What is aDesign Specification? ?
18
• What the THING is
• What the THING Looks like
• How the THING works
• Why the THING is needed
• Who will use the THING
• How the THING will behave
Documents that communicate...
pictures conversation
see what you’re getting discussions
see what you will be building
19
blue print of your product
20
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
Different types
• Site maps
• Navigation pathways
• Activities overview
• Task flows
• Page layouts - structural
• Interactions specifications for tasks within an Activity
22
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
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. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
Elements of User experience - Jesse James Garret
Components of
website/applicat
ion
Typically communicate for elements of UX
23
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
!!!"#$%&'"()"*+,-.-/01203)4%*%)*056%/7%*8209:0;%(')<%=0>'<--'
?@05)A0110::B20C-//%*8')*20D-!0E-=/=*7
?F0GHI0I0IJJ0:KLK000MF0GHI0I0IJJ0:K9L,-.-/0B20D='%)*=/0NO6%'P0Q)6#-209L0R6--*0>'<--'
?@05)A01KH0S1120T6(U/=*720D-!0E-=/=*7
?F0GHI0J0B9901SBL000MF0GHI0J0B9901SJB
,-.-/0B20D='%)*=/0NO6%'P0Q)6#-209L0R6--*0>'<--'
?@05)A01KH0S1120T6(U/=*720D-!0E-=/=*7
?F0GHI0J0B9901SBL000MF0GHI0J0B9901SJB
!"#$%&'()%*+,()-(./(%0)12(34)5
6-7(.12( !"#$%&*%0)12(34)5%89:;:8'< ,1=(%.12(
0>%?-@(21,
?=8-0H0)&01B
ABC0"
0>%?-@(21,
Q)4-0K"K
T##%#'0V0=7.%#-
S"K
T('%.%'%-#0V0
W<)X-('#
B"K
M6*7%*80YD,Z?[
I"K
?<)80)6'()4-#
1"K
>%'-0$-/W
9"K
\-&-<-*(-0V0
Z))/#
L"K
@6'()4-#0
).-<.%-!
1"1
!""#"$#%&'()*%*+#)'
,(-(.*/+(%$1"S
!""#"$#%&'"01($2'0%,'/(3"*%0.'
"()43#$21"B
5+/3*-#%&'0))(""'0%,'
+*6#.#$21"I
5-#'0W<=('%#-0
86%7-/%*-#
S"1
]/)##=<P
S"H
^=*=8%*80P)6<0
=##-'#
S"S
Z<=*#W)<'0
4)7-#
S"I
N76(='%*80
W-)W/-
S"L
M%*=*(%*80P)6<0
W<)X-('#
S"B
_)*'=('%*80
,ZDE
S"9
T`)6'0T('%.%'P0
_/=##-#
B"1
7#%,'0)$#-#$#("'B"S
T`)6'0D,Z?
I"1
!..*)0$#*%'/3*)(""'
*-(3-#(8I"S
9(-(.*/#%&'
2*43':;<I"B
=46+#$$#%&'
2*43':;<I"I
>0?#%&')@0%&('
3(A4("$"I"L
B.0#+#%&'74%,"'I"H
>*%#$*3#%&'/(31*3+0%)('
I"9
!4,#$#%&'/3*&30++("
I":
M%*70=0
<-&-<-*(-
L"1
C("(03)@L"1"1
>0%40."L"1"S
=$0%,03,"'D'
E4#,(.#%("L"1"B
:(&#".0$#*%L"1"I
C(/*3$"L"1"L
B#3)4.03"L"1"L
M%*70=0'))/
H"1
>%'-0#'<6('6<-
9"1
=#$('1((,60)?9"S
;(3+"'*1'4"(9"B
!))(""#6#.#$2
9"I
?)/%(%-#0V0
>'<='-8%-#
1"9
<3*$()$#%&'0%,'
/3*+*$#%&'/46.#)'@(0.$@
1"L
F%"43#%&'F%-#3*%G.
"4"$0#%06#.#$21"H
A('/)-,@-4.D
Z$%#0#%'-a4=W0#$)!#0'$-0*64`-<0)&04=%*0#-('%)*#0'$-0#%'-0$=#"0Z$-0#6`a
#-('%)*#04=P0()*'=%*04)<-0#6`a/-.-/#"0M)<0&6//0/%#'0)&0#-('%)*#0=*70W=8-#0
<-&-<0')0'$-0bT0M<=4-!)<U07)(64-*'"
>%'-0#-('%)*09"K0!%//0*)'0`-0W=<'0)&0'$-08/)`=/0%*&)<4='%)*0=((-##"0Z$%#0
#%4W/P0#$)!#0!$-<-0'PW-#0)&0()*'-*'0#%'#0!%'$%*0'$-0#%'-"0
Z)06*7-<#'=*70'$-0*=.%8='%)*=/0W='$!=P20$)!0%*&)<4='%)*0%#0/%*U-70')0
-=($0)'$-<20#--0'$-0()*'-*'04)7-/#0%*0'$-0&)//)!%*80W=8-#"
Z$-0#-('%)*#04=<U-70!%'$0(%<(/-#0%*7%(='-0*)'-#0=8=%*#'0'$-4"0Z$-0<-#'0
=<-0*)<4=/0W=8-#0)<0()*'-*'0=<-=#"
0E./@-4.17%F%G4.@(.@%1..4@1@-4.'
! Z$-0$)4-W=8-0%#0'$-0/)8%(=/0#'=<'%*80W)%*'0=*70'$-<-&)<-0=('#0=#0
'$-07))<!=P0')0'$-0#%'-"0D)'-0'$='0'$-0#-('%)*#0(=*0`-0=((-##-70
&<)40'$-08/)`=/0*=.%8='%)*0=#0!-//"
" M%*70=('%.%'%-#0!%//0$=.-F
1"05<)!#-0`P0%*7-A0/%#'0)&0=('%.%'%-#
S"0>-=<($0`P0U-P!)<7
B"05<)!#-0`P0T('%.%'P0_/=##-#
# M%*70=0<-&-<-*(-0!%//0$=.-F
1"05<)!#-0`P0<-&-<-*(-0'PW-
S"0>-=<($0`P0U-P!)<720#)6<(-207='-20#)0)*
B"05<)!#-0`P0%*7-A
!
#
$
%
"
$ M%*70=0'))/0!%//0$=.-F
1"05<)!#-0`P0'))/0'PW-
S"0>-=<($0`P0U-P!)<7
B"05<)!#-0`P0%*7-A
% >%'-0&--7`=(U0!%//0$=.-0=0&)<40'$='006#-<#0(=*0#-*70&--7`=(U0
=`)6'0'$-0#%'-"
25
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
Task flows• User’s experience – Flow
• Objective look at “Flow”(as opposed to Form)
• Identifies gaps
• Scenario based
28
CLIENT / PROJECT MORST & UoW / ScienceLearn Hub Information Architecture Framework
ID / PROCESS TITLE
DATE 29 March 2007
VERSION 1.1F5 / Registration
DISCLAIMER: The layouts displayed in this diagram represent information structure only and should not be construed as final screen designs
Page 6 of 28
Alternate path
Page content
Page Function
Page
selects
sign up/
register/
1 is email address correct format? is it unique? (i.e. not in database)
Any Page
Some content
Some contentTools
Name
Password
MySci1 2
2 is user in the middle of adding an item to kete?
yes
noyes
no (try again)
Register
Register Any Page
Some content
Some content
Tools
NameEmail
Password
My Sci
Some content
Some content
Logout
Any Page
Some content
Some contentTools
my kete
Logout
2
YES
NO
Detailed
functionality
to be further
analysed
My Sci
29
Page layouts• Aka Template Specifications
• High-level structure
• Global navigation
• Major components
• Content placement
• Content hierarchy
• Metadata
30
!"#$%&'#()"*+$,(-"*.*/012*3*4)5%"$6*78&""$%
!"#$%&'"(
7&-$*9*):*;<
!"#$%&'()*+*,--.*/01(2&*/&3&)456*7"*%4#%"508)&"9*:&)("0)*#4%3&11&"96*
+$,(-"*=>$'(:('&#()"
!"#$%
?$6,@
!"#$%&"'%()*+,)-.%/-0#0*1%+203%()*+,)-%-$4+%+)%,012+%50--%4"#$%+2$%&"'%6"(71,)8*#%)8+%"%60+%+)%,$9$"-%+2$%,)8+$3%:),$%',):0*$*+-;.%<*0($%+)%2"9$=
0&6,*#)*:("A*B*:(8#$%*%)5#$,*B*A(%$'#()",C
DE$$AF&'G*&"A*(",#%5'#()",H
/+,8(+8,"-%"*#%>*+$,4"($%!,":$5),7
I4)5%"$6*78&""$%*8)-)J*I/012*F%&"A$A*K$&A$%*3*L&6*F$*A(::$%$"#*:)%*A(::$%$"#*')5"'(8,*F&,$A*)"*5,$%M,*,$8$'#()"*):*%$-()"J
)*#++%" .*N$%L, .*O$8> .*2)"#&'#*)%*-(P$*:$$AF&'G*
Q)-)5# R
D"5LF$%*):*8(,#$A*(#$L,*B*>&-("&#()"H
DS&>H
!
"
#
$
$
Q(,#*):*%)5#$,*&#*#K(,*8$P$8C
DQ(,#*(#$L,H*T*;U
DV>A&#$,*WK$"*S&>*(,*5,$A*3*X))L$A*("Y*>&""$AY*$#'CH
D"5LF$%*):*8(,#$A*(#$L,*B*>&-("&#()"H
%
&
7%("#*S&> .*ZL&(8*S&>78&"*&*4)5%"$6 S6*4)5%"$6,0$88("-#)"*1$-()"
S&>!!
?203%50,$%4,":$%32)53%+2$%)9$,"--%37$-$+"-%3+,8(+8,$%"*#%+2$%2012%-$9$-%),%()::)*%$-$:$*+3%)4%+2$%@)8,*$;%A-"**$,B3%83$,%0*+$,4"($.
A,0:",;%"(+090+0$3%)4%+2$%+))-CD.%E,)530*1%#$301*"+$#%F"-70*1%"*#%G;(-0*1%'"+25";3HI.%J$++0*1%#0,$(+0)*3HK.%A-"**0*1%"%@)8,*$;HL.%M0$50*1%"+%@)8,*$;3%>B9$%3"9$#%"*#%83$#.%
'
?2$%N$"#$,%6"**$,%+2"+%50--O("*%6$%(83+):03$#%4),%$"(2%()8*(0-."
P0*73%+)%"#:0*03+,"+09$%0*4),:"+0)*%"*#%5";3%+)%()*+"(+%+2$%G)8*(0-.%A$)'-$%("*%-)1Q0*R%,$103+$,%"*#%-)1%)8+%4,):%2$,$.
!
A,0:",;%*"901"+0)*%)4%+2$%+))-CD.%E,)530*1%#$301*"+$#%F"-70*1%"*#%G;(-0*1%'"+25";3I.%A-"*%"%@)8,*$;K.%&;%@)8,*$;3%S%#0,$(+0)*3%"*#%'-"*3%>B9$%3"9$#%"*#%83$#.%
#
T+0-0+0$3%+2"+%38''),+%+2$%A,0:",;%"(+090+0$3.%
/2)5ON0#$%50#1$+.%/$-$(+0*1%+203%0()*O50#1$+%32)53%),%20#$3%+2$%-$4+%'"*$-.$
U$;3%:$*8.%VW'"*#0*1%+203%()*+,)-%#03'-";3%+2$%,$-$9"*+%7$;3%+)%+2$%:"'%"*#%X)):%-$9$-.%
&
?$6,@ ?$6,@
,#*(-+. 26'8("-
V#(8(#($,*B*E&'(8(#($, 7)("#,*):*("#$%$,#
=$$*&88*?$6, R
/!'"01%*%23%405'63%0'"0)*#+7
836990'+03:%0&#;<I[##%(F5#$,J
;28&<&)&41*=*>)&<&)&41 ?<4@2)&"9
(
Y++,068+$3%#$+"0-%'"*$-%4),%3$-$(+$#%Z)8+$%),%A-"**$#%@)8,*$;.
D.%Y11,$1"+$3%+2$%4"(8-+0$3%[%T+0-0+0$3%)*%+203%,)8+$HI.%Y11,$1"+$3%+2$%A\>B3%)4%+203%,)8+$HK.%/2)53%+2$%V-$9"+0)*%4),%+2$%Z)8+$H
(
A"&9)1*"B*C9)4%41)
E&A$*S&>
)
)
E&A$*S&>
E&A$*S&>
Screen/ Wireframe/Prototype Annotations/Notes
31
Interaction specifications• Detailed descriptions
• Form
• Behaviour
• Task-oriented or Flow
• One spec per task
32
examples...
33
Annotations - overview• General description of the screen/
wireframe
• What users can do from this screen
• Default display
34
!"#$%&'#()"*+$,(-"*.*/012*3*4)5%"$6*78&""$%
!"#$%&'
7&-$*9*):*;<
!"#$%&'()*+*,--.*/01(2&*/&3&)456*7"*%4#%"508)&"9*:&)("0)*#4%3&11&"96*
+$,(-"*=>$'(:('&#()"
!"#$%
!"#$%&#'()*(+#$"#,&)-$./&$"010&1"$,2'$(/2"4
5#*$'(&#)*(/2"$6$"##$'#*,(7$/2$%,3#$84$9&/+('#"$,1(7(*:$*/$#2*#&$"*,&*$,2'$'#"*(2,*(/2$%/(2*"4
;(7*#&$1:$</'#"
=?)@*%)5#$,*("AAA
()'*)(+ ):*,-).$&/012)3)454&012)6*%'"7*("*8"&&012'*1)6"20*1
9&&):07'$14"7).*B"#$%*C(,#&"'$
;*'<).*0&8D("- .*26'8("-*%)5#$,
E4)5%"$6*78&""$%*8)-)F*E/012*G%&"C$C*?$&C$%*3*H&6*G$*C(::$%$"#*:)%*C(::$%$"#*')5"'(8,*G&,$C*)"*5,$%I,*,$8$'#()"*):*%$-()"F
=&$11"6 .*J$%H, .*K$8> .*2)"#&'#*)%*-(L$*:$$CG&'D*
M)-)5# N
7%("#*O&> .*BH&(8*O&>78&"*&*4)5%"$6 O6*4)5%"$6,0$88("-#)"*1$-()"
/$#*C(%$'#()", N
7-*(P*<P*QAAA*):*R N
!"#$%&%'((")*%+,%-(%
.)//+,0-(,%1)0+(,%#2)#3
>?
!
@
A
;
B
C
D
> E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
; E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
9 E%)5#$*"&H$F*ESH,F*E?%,F
E&L-*$8$L&#()"F
EH)C$F
E&##%(G5#$,F
E%&#("-F*E>?)#),F*E')HH$"#,F
T*UCC*#)*O6*4)5%"$6
T*78&"*&*V)5%"$6*)"*#?(,*%)5#$
/$#*C(%$'#()",*#)*#?(,*1)5#$ N
! E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
@ E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
A E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
C E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
? E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
D E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
B E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
!"#$%&'%()*"+,-%.#/0,"1%&*%-2)%3&+'$)1%4,"$$)'5
!"#&$("$%&#"#2*#'$=(*-$,$7("*$/.$,77$'#"(32,*#'$=,7>(23$,2'$):)7(23$%,*-"$=(*-(2$*-#$,&#,$*-,*$*-("$?#3(/2,7$@/02)(7$)/+#&"4$A*$("$B//C#'$(2$,*$*-#$-(3-#"*$7#+#7$/.$*-("$)/02)(7$)/+#&,3#4$D77$%,*-"$,*$*-("$7#+#7$7//>$*-#$",C#4
!"#&"$),2EF4$@-,23#$*-#$C,(2$7#+#7$/.$./)0"$1#*=##2$*-#$8$)/02)(7"$/.$5G?@HI4$J#7#)*$*/$+(#=$*-#$'#*,(7$/.$,$%,*-=,:HK4$L//C$(2$*/$"##$*-#$'(..#)#$1#*=##2$G,7>(23$,2'$@:)7(23$%,*-"HM4$?#.(2#$*-#$7("*$1:$(/2$/&$"010&1HN4$5#*$'(&#)*(/2"$.&/C$,2'$*/$)#&*,(2$%/(2*"HO4$P(#=$1/*-$G,7>(23$,2'$@:)7(23$%,*-"$/&$.(7*#&$*-#$7("*$1:$#(*-#&$C/'#H84$P(#=$,77$'("*,2)#"$/&$#2*#&$*-#$'("*,2)#$,2'$.(7*#&$*-#$7("*$1:$*-,*$'("*,2)#4Q4$R*-#&$<,%$.02)*(/2"$&#C,(2$*-#$",C#$,"$/2$L//C(2$/&$5//37#$C,%"4
S("%7,:EF4$A2"*&0)*(/2"$,2'$7,1#7"$,"$"-/=2HI4$;##'1,)>$/2$-/=$C,2:$(*#C"$0"#&$("$+(#=(234
!
9 E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
;4<<&9')"9*%4'&"9
B"#$%*,5G5%G*)%*%$-()"A*BA-A*K&#&(#&(
!
;*'<).*0&8D("- .*26'8("-*%)5#$,
W)#? .*8$&/012 .*26'8("-*%)5#$,
"
"
#
#
;(7*#&$1:$S("*,2)#$
$
9&&):07'$14"7).*B"#$%*C(,#&"'$
%
+(,#&"'$*("*SH, .* ?67=
+(,#&"'$*("* EF7).*K%,,-
&
;##'1,)>$/2$*-#$7("*$/.$(*#C"4$&
'
T("*$&/0*#"$U(*#C"V$6$"-/=$0%$*/$FW$,*$,$*(C#4'
!! O&>S$6,XY&C$*O&>
Name of the screen/activity
Description & intention
What users can do
Default elements on the page
35
Annotations - Detail• Detailed descriptions of elements and
behaviours
• For each annotation provide:
• UI Rules: Element > Action > Result
• Default display
• Any notes
• Reference to other technical document (e.g. Business rules or SOW or Requirements) if relevant.
36
!"#$%&'#()"*+$,(-"*.*/012*3*4)5%"$6*78&""$%
!"#$%&'
7&-$*9*):*;<
!"#$%&'()*+*,--.*/01(2&*/&3&)456*7"*%4#%"508)&"9*:&)("0)*#4%3&11&"96*
+$,(-"*=>$'(:('&#()"
!"#$%
!"#$%&#'()*(+#$"#,&)-$./&$"010&1"$,2'$(/2"4
5#*$'(&#)*(/2"$6$"##$'#*,(7$/2$%,3#$84$9&/+('#"$,1(7(*:$*/$#2*#&$"*,&*$,2'$'#"*(2,*(/2$%/(2*"4
;(7*#&$1:$</'#"
=?)@*%)5#$,*("AAA
()'*)(+ ):*,-).$&/012)3)454&012)6*%'"7*("*8"&&012'*1)6"20*1
9&&):07'$14"7).*B"#$%*C(,#&"'$
;*'<).*0&8D("- .*26'8("-*%)5#$,
E4)5%"$6*78&""$%*8)-)F*E/012*G%&"C$C*?$&C$%*3*H&6*G$*C(::$%$"#*:)%*C(::$%$"#*')5"'(8,*G&,$C*)"*5,$%I,*,$8$'#()"*):*%$-()"F
=&$11"6 .*J$%H, .*K$8> .*2)"#&'#*)%*-(L$*:$$CG&'D*
M)-)5# N
7%("#*O&> .*BH&(8*O&>78&"*&*4)5%"$6 O6*4)5%"$6,0$88("-#)"*1$-()"
/$#*C(%$'#()", N
7-*(P*<P*QAAA*):*R N
!"#$%&%'((")*%+,%-(%
.)//+,0-(,%1)0+(,%#2)#3
>?
!
@
A
;
B
C
D
> E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
; E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
9 E%)5#$*"&H$F*ESH,F*E?%,F
E&L-*$8$L&#()"F
EH)C$F
E&##%(G5#$,F
E%&#("-F*E>?)#),F*E')HH$"#,F
T*UCC*#)*O6*4)5%"$6
T*78&"*&*V)5%"$6*)"*#?(,*%)5#$
/$#*C(%$'#()",*#)*#?(,*1)5#$ N
! E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
@ E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
A E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
C E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
? E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
D E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
B E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
!"#$%&'%()*"+,-%.#/0,"1%&*%-2)%3&+'$)1%4,"$$)'5
!"#&$("$%&#"#2*#'$=(*-$,$7("*$/.$,77$'#"(32,*#'$=,7>(23$,2'$):)7(23$%,*-"$=(*-(2$*-#$,&#,$*-,*$*-("$?#3(/2,7$@/02)(7$)/+#&"4$A*$("$B//C#'$(2$,*$*-#$-(3-#"*$7#+#7$/.$*-("$)/02)(7$)/+#&,3#4$D77$%,*-"$,*$*-("$7#+#7$7//>$*-#$",C#4
!"#&"$),2EF4$@-,23#$*-#$C,(2$7#+#7$/.$./)0"$1#*=##2$*-#$8$)/02)(7"$/.$5G?@HI4$J#7#)*$*/$+(#=$*-#$'#*,(7$/.$,$%,*-=,:HK4$L//C$(2$*/$"##$*-#$'(..#)#$1#*=##2$G,7>(23$,2'$@:)7(23$%,*-"HM4$?#.(2#$*-#$7("*$1:$(/2$/&$"010&1HN4$5#*$'(&#)*(/2"$.&/C$,2'$*/$)#&*,(2$%/(2*"HO4$P(#=$1/*-$G,7>(23$,2'$@:)7(23$%,*-"$/&$.(7*#&$*-#$7("*$1:$#(*-#&$C/'#H84$P(#=$,77$'("*,2)#"$/&$#2*#&$*-#$'("*,2)#$,2'$.(7*#&$*-#$7("*$1:$*-,*$'("*,2)#4Q4$R*-#&$<,%$.02)*(/2"$&#C,(2$*-#$",C#$,"$/2$L//C(2$/&$5//37#$C,%"4
S("%7,:EF4$A2"*&0)*(/2"$,2'$7,1#7"$,"$"-/=2HI4$;##'1,)>$/2$-/=$C,2:$(*#C"$0"#&$("$+(#=(234
!
9 E%)5#$*"&H$F*ESH,F*E?%,F
E@&8DF*E'6'8$F
;4<<&9')"9*%4'&"9
B"#$%*,5G5%G*)%*%$-()"A*BA-A*K&#&(#&(
!
;*'<).*0&8D("- .*26'8("-*%)5#$,
W)#? .*8$&/012 .*26'8("-*%)5#$,
"
"
#
#
;(7*#&$1:$S("*,2)#$
$
9&&):07'$14"7).*B"#$%*C(,#&"'$
%
+(,#&"'$*("*SH, .* ?67=
+(,#&"'$*("* EF7).*K%,,-
&
;##'1,)>$/2$*-#$7("*$/.$(*#C"4$&
'
T("*$&/0*#"$U(*#C"V$6$"-/=$0%$*/$FW$,*$,$*(C#4'
!! O&>S$6,XY&C$*O&>
UI Rules: Element > Action > Result
Name of the panel or block on the screen
UI Rules: Element > Action > Result
37
Components
CoverAboutthedoc
Taskfloworcontextscenario
Flowofinteractions–stepbystepinteractionandexperience
38
Design specs are used by...
• 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
everyone involved!!
39
You’ll know what to build when you know what the Design looks like...“
40
More about Summer of Codehttp://www.summerofcode.co.nzPhotos found on Flickr and Google images
41
Related Documents
