Wk11-WebAppDesign
!”#$%”&'()$*$+,,$%”&'()
COMP3511/9511 Human Computer Interaction
© 2021 UNSW
By Alex Mednis
!”##$%&’#(“‘)#*&”
– .’)(/”$011/&
– 23/0’456’50″$011/&
!750$’&$816″$’8,1605)09$+$&’)(/”$011/$0750$:1″&$1)”$07′)($
6″5//;$<"//9$=6$5$83/0'456'50"$011/$0750$:1"&$5$/10$1>$07′)(&$
5:”?350″/;9
+’)$%&,”‘#–,
.”)$&%'”,”/”%#)’$%’)$%&,”‘0)”‘#12″34$#”4
.”)$&%'”,”/”%#) 5″*#04″)670%8#$-%*,$#1
@/56’0; A)03’0’4″$#3001)&
@1)&’&0″)B; C3001)&$5/<5;&$5B0$')$07"$&58"$<5;
.'8,/'B'0; =)/;$5$>“<$:">‘)”:$1,0’1)&
D&”6$B1)061/ @1)061/$4’5$#3001)&
@53&”$*$”>>”B0 E;,”$F”;&G$/”00″6&$5,,”56$1)$,5(”
H16(‘4″)”&& !7’0″$130$I#5BFJ$#3001)
+”&07″0’B& K”;&$85:”$5$B/’BFG$”)0″6$85F”&$5$:’)(
!$%&,”‘0)”‘#–,)
– +)5/1($011/&
L M507″&G$,5’)0$#63&7″&G$<7'&F&
- +)5/1($1#&"6450'1)$011/&
L 2"6B36;$07"6818"0"6&G$<6'&0<50B7"&G$
:',&0'BF&
- %'('05/$B6"50'1)$011/&
L N%$,6')0"6&
L @1>>””$85B7′)”&
– %'(’05/$85)’,3/50’1)$011/&
L O6″&”)050’1)$PB/’BF”6Q
+’/0,#$9*4$*#”‘#–,
!$%&,”‘9)’/0,#$9*4$*#”
– R)0″6$07″$P>/”S’#’/’0;T3&5#’/’0;Q$065:”1>>
– +&$>/”S’#’/’0;$’)B6″5&”&G$3&5#’/’0;$:”B6″5&”&
– 23/0’456’50″$1>0″)$P&,’)$1>>Q$&’)(/”$3&”$011/&$5&$
3&”6$(15/&$#”B18″$816″$:”>’)”:$
!$%&,”‘9)’/0,#$9*4$*#”
– E7’&$’&$5$B75//”)(“$<7")$:"&'()')($5,,&$5):$<"#&'0"&$
5&$07";$56"$,6":18')50"/;$83/0'456'50"U
- .1G$<"$754"$&18"$,6')B',/"&$01$>1//1<$V
:9"49$"3
- O6')B',/"&
L .B6"")$&'W"$*$6"5/$"&050"
L H1)0X/5;130
L @1/136&
L Y54'(50'1)
L 21#'/"
L Z"&,1)&'4"$%"&'()
- @1)B",0&
L @5&B5:')($.0;/"$.7""0&
L %"&'()$O500"6)&
L %"&'()')($>16$A=.
L @5&”$.03:'”&
;(“‘3”<
E7"$&3BB"&&$1>$07″&”$,/50>168&$I,560/;J$75&$01$:1$<'07$
(11:$3&5#'/'0;
+6B7'4"$1>$06″):&[
700,&[XX<"#\56B7'4"\16(X<"#X]^_`_]__]N^`a]X700,[XX7B'
\'&"\#(3\5B\'/X06"):&X
+22)
b56'"0;$1>$1,0’1)&[
– H3//;$)50’4″$I”\(\$’=.J
– cE2M`
– !65,,”6&$5613):$cE2M$B1)0″)0
– @1881)$/’#656′”&$I”\(\$O71)”(5,J
Y10$#”‘)($6″&06’B0″:$01$)50’4″$(‘4″&$;13$5$/10$1>$1,0’1)&$
6″(56:’)($:”&'()$V$#30$’0$’&$5$065:”1>> 01$07″$Dd$1>$0750$
,/50>168
=4$%8$2,”)>’!84″”%’)$?”‘@’4″*,'”)#*#”
– .B6″”)$&’W”$’&$’)B6″5&’)($<'07$:"&F01,&$5):$ 7,08#0*#$%& <'07$81#'/"& - 21#'/"[ L _')$)1F'5 #*< &B6"")$Te$N]$8'//'1)$B1/136$ f\`')$g,75#/"0h L E5#/"0&$(")"65//; - M5,01,&X81)'016& L _]\`h$&B6"")&$Te$]aX]ih$&B6"")& =4$%8$2,")>‘!84″”%’)$?”‘@’4″*,'”)#*#”
– 216″$&B6″”)$&,5B”$Uj$816″$B1)0″)0
– gM”&&$’&$816″h
– D&”$07″$6″5/$”&050″$”>>”B0’4″/;
L E7’)F$5#130$/5;130$L <750$'&$'8,1605)0$01$
&71<9
- C"$6307/"&&
L @71,$130$3))"B"&&56;$0"S0G$'B1)&G$656"/;$3&":$
>3)B0’1)G$”0B
=4$%8$2,”)>’!84″”%’)$?”‘@’4″*,'”)#*#”
=4$%8$2,”)>’!84″”%’)$?”‘@’4″*,'”)#*#”
=4$%8$2,”)>’5-%#6A*1-0#
– B-%)$)#”%81 ‘)$5:C; !”# layout ‘&$$
important #”B53&”$$’>$;13$:1)Q0$/5;
07′)(&$130$’)$5)$orderly fashion 07″;$
#”B18″$4″6;\$
.$77$80,#\
E1\
Read
– wtf
=4$%8$2,”)>’5-%#6A*1-0#
O6′)B’,/”&[
– =)”$>1)0$07613(7130
– D&”$5$<"#&5>” >1)0$L ‘\”\$/15:$>618$k11(/”$
>1)0&X”0B
– =)”$&”0$1>$&0;/”&
– DE+.FCG
– $%&'()*+,-
– C1:;$0″S0
=4$%8$2,”)>’5-%#6A*1-0#
O6′)B’,/”&[
– @1)&’&0″)B;
– c”5:’)(&$1)$1)”$,5(“$&713/:$#”$6″B1()’&5#/”$
5&$7″5:’)(&$1)$5)107″6
– M5;130$75&$5$,560$01$,/5;$7″6″$L F””,$07′)(&$’)$
07″$&58″$,/5B”$1)$”4″6;$,5(“U
=4$%8$2,”)>’B-,-04)
– 25S’838$1>$a$B1/136&
L O6’856;$B1/136$>16$/’)F&X7′(7/'(70&
L .”B1):56;$B1/136$5/0″6)50″$07′)(&
L C5BF(613):X”0B
– D&”$;136$B1/136$,5/”00″$<'&"/; L 700,&[XXB11/16&\B1 - !"#&5>” B1/136&
=4$%8$2,”)>’B-,-04)
=4$%8$2,”)>’C*9$&*#$-%
– M”4″/&
L =)”$50$81&0
oE7’&$’&$(“00′)($&’//;
!c1<$85);$/"4"/&$:1$A$754"$01$)54'(50"9
- 21#'/"&$&063((/"$<'07$/"4"/&$5):$:61,:1<)&$5):$
>5B’/’050’1)$1>$&3B7$&B7″8″&$L :1)Q0$:1$’0U
– =6:”6$#;$81&0$3&”:
– %1)Q0$16:”6$5/,75#”0’B5//;
=4$%8$2,”)>’C*9$&*#$-%
=4$%8$2,”)>’+22’C*9$&*#$-%
– RS58,/”&[
L ./’:”$#56&
L @1:61,&
L H/”S$)54
– R\(\
– 700,[XX<"#\56B7'4"\16(X<"#X]^_f^l_m_aaaaaX700
,[XX"S'&<"#\)"0[m^X')B6":'#/;T3&">3/T/’&0T1>T
6″&,1)&’4″T)54′(50’1)T5):T8″)3T,500″6)&
=4$%8$2,”)>’C*9$&*#$-%
– 21#’/”&
L k”&036″&
L .<',"$3,X:1<)X#5BFX>16<56:
L E');$#3001)&$X$&B6"")$:")&'0;$'&&3"&
L E13B7$4& 6'(70$B/'BFX"0B
- @1:')($'8,/'B50'1)&$>16$013B7
=4$%8$2,”)>’H-<$," - @1)&':"650'1)&[ L C5):<':07 L A85("&$4&\$E"S0 L +BB"&&'#'/'0; L .B61// L .'W"$1>$&B6″”)
700,[XX<<<\&)1<65B"6\B18\53 =4$%8$2,")>‘I”)2-%)$9″‘J”)$&%
=4$%8$2,”)>’I”)2-%)$9″‘J”)$&%
=4$%8$2,”)>’I”)2-%)$9″‘.”)$&%
– Z”&,1)&’4″$’&)Q0$5/<5;&$07"$5)&<"6 - !750$56"$;13$06;')($01$:'&,/5;9 L .'8,/"$B1)0")0[$&36" L @18,/"S$B1)0")0[$:":'B50":$:'&,/5; - !750$/'#656;9$c1<$:1"&$'0$6"&,1):9$"0B B-%8"2#)>‘B!!
– %”&'()”:$01$&”,5650″$4’&35/$:”&'()$>618$07″$
‘)>16850’1)
– g@5&B5:’)($&0;/”$&7″”0h
– =#n”B0$16′”)0″:
– 700,[XX<<<\B&&W")(56:")\B18X
B-%8"2#)>‘K–#)#4*2
– 700,[XX(“0#110&065,\B18X
B-%8″2#)>’K–#)#4*2
B-%8″2#)>’F8-%-&4*2(1
– .F”31816,7’&8
– H1)0$+<"&18"
- 250"6'5/$'B1)&
B-%8"2#)>‘.”)$&%’=*##”4%)
– DA$,500″6)&$”S’&0$>16$4’6035//;$”4″6;07’)(
L 700,[XX3’T,500″6)&\B18X
– %”5/&$<'07[ L Y54'(50'1) L %505$B1//"B0'1)$5):$'),30 L H"":#5BF$ L .1B'5/ B-%8"2#)>‘$:! DBF
– %”&'()’)($>16$’=.
L 700,&[XX:”4″/1,”6\5,,/”\B18X/’#656;X’1&X:1B38
“)050’1)XD&”6RS,”6′”)B”X@1)B”,035/X21#’/”c
AkX
– +,,/”Q&$1<)$c@A$(3':"/')"&$>16$07″‘6$,/50>168&
– A)$:”,07
B-%8″2#)>’$:! DBF
– @14″6&$07’)(&$/’F”[
L M5;130
L A)0″65B0’4’0;X>””:#5BF
L Y54′(50’1)
L 21:5/$<'):1<&
L C65):')(X5)'850'1)
L E;,1(65,7;XB1/136X>1)0&
L !16:’)(
B-%8″2#)>’$:! DBF
– +”&07″0’B$’)0″(6’0;
L g+”&07″0’B$’)0″(6’0;$:1″&)Q0$8″5&36″$07″$
#”530;$1>$5)$5,,Q&$560<16F$16$B7565B0"6'W"$'0&$
&0;/"o$6507"6G$'0$6",6"&")0&$71<$<"//$5)$5,,Q&$
5,,"565)B"$5):$#"754'136$')0"(650"&$<'07$'0&$
>3)B0’1)$01$&”):$5$B17″6″)0$8″&&5(“\h
B-%8″2#)>’K,*8LK”441’DBF
– 700,&[XX:”4″/1,”6\#/5BF#”66;\B18X:”&'()X##_^X
– .’8’/56
L H/3′:$”)4’61)8″)0
L @1883)’B50’1)$50$’0&$B16″
L @1)0″)0$’&$F’)(
L @’)”850’B$”S,”6′”)B”
– .58″$,6′)B’,/”&$#30$:’>>”6″)0$5,,615B7
– 700,[XX”)\<'F',":'5\16(X<'F'XC11\B18
B*)"')#0J1>‘<--M8-/
B*)"')#0J1
.""$700,[XX")\<'F',":'5\16(X<'F'XC11\B18
:9"49$"3
- O6')B',/"&
L .B6"")$&'W"$*$6"5/$"&050"
L H1)0X/5;130
L @1/136&
L Y54'(50'1)
L 21#'/"
L Z"&,1)&'4"$%"&'()
- @1)B",0&
L @5&B5:')($.0;/"$.7""0&
L %"&'()$O500"6)&
L %"&'()')($>16$A=.
L @5&”$.03:'”&