ࡱ> `!*Ķ(+ , hxڵY]lU>;ܙzۂZnPnvSE*PܖКAc4"*T &1֗HT@aLM BޙYӟ 9ܿ3=sx@u,,CY`M=+y `g8Ʌ?WŽᮽ}fV'%jajԬ5ĺePnDsW>Z'6`!GzBυn<[Ik!-R=iɇ z|G;#lGX[z7ʤ,}Ge%3gUgX;:C)~ 3tӁ6`xJ fzΛ ~KVu˶P0V-;KeznW;dun>ڨY?VBF&s*.m2NY}NXM.mJ=SV"w.e ʷ(VaRHJ~7ѰFCh7Gq(q9/+4!SXd# K\qߪ@Q$aDF&$i%Q7 E ~&?ך_z7C<p?uYTk R1.KyX*eP|$>C/3}`Zk$ g?`!hFi6P0n5 Dz0bh6xmlEgvmZ8i-`KPlkK+"RlV O`/*HM|! "1~@`) bc6 &MDX#fgo^;>3gmw)Q!:!42 yť%GbR,,';N.99B.K'mQ(7FMW%WHPK0ke)gu% EDC^bZ8k4[xJ^ J?w呤4~GPz'WlNNnt_dO$4SUh"\S0{l;Iv;ZK1_4馷Z|-*QC CW}rh)tzÆCUݡo0p!APT }`6,T΁$G>Aj9}8 >_ 8.?k:UiG0 X3Ap L k-c`nk=z\YtjdClY1ِb=lQ&%{}6;z-Y- l`iϲ=NFawij/@}E7X,B]ޡ5fgK &b5'xN~b|̮ybߤRyb,4nYm)#e!ϥ*T:w:Bq4nv(ԲejVYHn崙mm-{6GX8e&s[CBi1lvha{YM9} `{IM18Zv |1WvYm~a.(<;{nT?gATP#}Vt~ 4e@FH_'`<=]~묳 dV:?@ξ"Bi[ %&7~ޙc[iK&M ]t Z4 vġ?3EX]hdBâ!HHdAH!n\+6HhQ#5s޼_ə{sՠLy k lez`?SԭQ3|bNǕd0h hlyR dۯf,: mQZ1A4h IIP7 sQ'uڿb&1m3ra\/aۂhXT;WJWh[) mqKkK:?g^@|3A"^\m;24(|2ik~Q|}j͒ҥM|n-Q4&mwҸCQ K쁒"#:8529C[AJ}rܶĚ-F+yV>,~!Q'`Ǿ\&5 2Zʱ7 W-j]BZ1]ȉ)27 'l(ݔBwN2P̴Vt ݠWvwG{ Ix 7T»V;AaQQ$O}BkBXpAy̾>̌g yȳ#š۝<&]7<͎s+,1?>{c+5J.}`#8xwd:ѺcGk7 * ?՟ΥS# s)Xto]az褝艀iJMJuOxQkPZ@Ƣcu&[/j%=xQg-Y{<*/xY!/j#t2PF*v(^,2fјw18f JYszyZ]RRCt7/7і?C%A<1%qR#JU)ȑwqԓxZ#B.ȑql3xJ#Le*ȑ8$ rH{y3A|i(ȑ7[qld r LbJP7پ6OmZ/}-XM c [-mfƨ4g[)7iohE3hf;S[-[AkVK+O]k'-/`u-UIѸ<-\kߣe#DD_#jK-V817K47 w뻏i1BsZmwXD_%ONg D͡;'?F}S|?)]%n;wR_3ItPNG  IHDRUgAMA pHYs+IDATx ENHx,J` JFt\a0$* 3 8V({F~Y>%(̣T)SJj=)%"RutPI3RupήjO֩CB4ޥ HTD]0b)F,5uE1FpΕTIts[b}32!ho$[v¹ub=IENDB`nlJzTo<.PNG  IHDR,EgAMA pHYsodIDATx;8@9u6u6H21e1iAs >ďHBQMH k8o߾,hI^|}}-( ܓ{p^7#!A`6Kx~Yr\G?OYX;-PhJEׄ J >׫I..)#z}~~3X-fT0u=جk+!ɑ~ޯ f az>s@`gq ܺ<9 #w*}w_ ڲۡ(%ڞmYoKp nBR&0@*0QАh,"!oh]/63j{͏ƌ@%0}q9l;oq!sB]I9(ܙpP4vH sB2@?*85t] o??L#B/ֆD0cgaJV+N4Y8$Uk~7WUjV*#ݛr(m^PF(kt-@규[r^`0N?MG_WYFºB O ;Rt-cbN(,QMR3cNKˢE6ۮ0B=JGq턧б_XU:%.(F?~-XuuHMGo8 6ޟ5D@=SNB[(Ze]"#ɘձ^Gj&5:*YᔰfFxB9AHY yV{TAeEWrq#9ar ZP%G9oyxX#Bs)0:V ZP%6L5|]Qϯ^2U@q.! )J%:aVͻ.v*]έߺu`NYp?߮x*RsI.R-&f]$#oZn2^)h,:6$64TimTR\Lpj)?A E,|[~+5 E6Yz۽(1; ~ vRR>lU撕!n?˕(1,/L0es662|:S5'څ"+w7D*&FQu 'zۨ0t ڣ}&$4x4 Ƒ7Q*C炎Ŷ=[TSu> 8t ~V5JQL}v@SX4u?ߙEZH&l)-(َ|||x#!_-T5c缎Vn̝V_ED(+ձ{2fUwds{_zW[^"aʽkGZytaTQ5Yτmg'x VR~]B%m#,- <ˢp}f62tUcrӗwSG^XߩMou0Ŝ\Tp׮NFzrNH;~ѽ) goz^RnHeQBT̕ma[}%PwxF=)cC)d+ef Yx<Ž6tB>J1ˁR-k|Z>ndooˇ 8u]+o+5vѮL93uwb؇5nFء:?GɴRL%@M7Re$u&4޿ՉjOVh^):=ld=U3# w7o1ovU  DaHb"be6\ԙrSE!ޅCxqs J )$.(U{{ G}b{vJϣ#O{x*)G*@O|K2(mrHxd5.Iy'H&Ya pNmOGLGKv a5Vܣ˔zFY0pۅ pL-(l~Cr(P۹ Ȅ^# pUṃkS%I+p^lk0C Џޙf>pDSQ>5B9@#nF8gcU0B0 qpӫ(20B j(b0B a|ZR1 00B0  #0TXY|~~jih\*G/ |||-X*C___)c,❌u-/|(ا‑FHwVnZ:4z(vW?E4i/0#*LkC6Ep^%15.܍vꟿ< I5rܜ)خx}G~"vS/D wa+QW4w˴KGgŋz$BbvZ0#v'WV&e ʈjFY'\mw+E#9fRh{Y4a;^#!(Mj0Tvn`{15$:'pEq8yz+ќ;n@;G"O3kj8r …WjD2:NCoWlhH]tA!8W'7L *?)9ښh,} E${.ABMkrc{xVt `ת_~}||l¾?~~2 X|~~FûIm y q@o0BLd#[3P"=ca,6nѲD%3+~x꼿rO}\auJzx,ff 3"OW?bM S}6,Q'Tc+qJ lQ9|36,ZvRh3yӽ R&„TpqHxEr*pKҕg`h]YznD/poqz2OᕲcX I+KqgڡP-Z Of Ag:1EG`C$YtCPrC,bMZkx0BNC]]Xېkѵn-(J|SETrAre8qV>EjDaOxꝊ5/?V=Ek];(䞊( Ɣ2M=Ta-8KCbu <} ڧho4/9+&a(5҆گJu}2}YL]XR246BY^]q{F9h``ǦFc)3'd ~4#ǰ7t<#dV ²N4Sv$1IFȬ ne==Sv$FȬ nz;hG)0B MtS ٴ~< z]mVqBQH@*`nˈFi5WSa:/tކ%l${玫n.ܐ;fU:c2D-Y j=nLcJ#&*o!"*=770A00Ӭ?tG2Ȁ+s0 ^_}ra9B ўF,]n gڍjtCTlǾΚ)Xו mgaʑ9D kѩ~qaOuBx-TBW)a{-5ODR3p32No.0S=G!TܔGQp0id! k7=E5/ph?9 /Oȿi:&6B!r*}Jx89J/G/J@ZyjZ+ju:y>>nW 1GR\R1jLf;^ZƮ=]6_(ify%&X 4gKԤfAd{{WLg6RJZ=H#ɚ\)вGzʖUV^:$55 w+;,h\]=*Cj5:u%X2hg'ZWޜS<"~hd X\i[Bj[NcpEӇ`Ul_kDj M`p`Ng*YVXÉƲvю$9UbVmHb3Y%6+ vю$Saziy۬x-T< #T6L%^Ӎ7FkXoTuv_ KH&W#p%N ?\0!w2:/tƆeZDU]9!0LʔF(܈lYKv&5h7yh"QPe-CYfpUr.Q̾&CRoU 8mc Vrpx- e]W(%fňr$tn~9+SDwԖ`(*IYNQ 9'aÒzXb8)L7Op)@ =np 1-ݖkw8K 2H({OksR Ɇd J륐J-u ʱ}-W'6!Cū;z/Yg7Z1 a+2in„QD݆ʂՋbD[F@#e5KnEqˆDQ0w`Vw ~C'3Bfج`p+,DR;hGd*YVXÉSv$FȬ nz;hG)0BMtS ٴ~< z]mVqBQH@*`nˈFi5WSa:/tކ%l${玫n.ܐ;fU:c2D-Y Uْ ݭʻrB`)Phg4>Yom7o +VySPB*Pу9@FV`Sڂ̽maR:gf ӁLĔ#!d³@?OdX[ᦠ##Ap 4 05YsN]*K*ּLlsMUG'{)D=)k-%C~X!iPo .򽻁SZ\%B}Y5N[tgb#ҵ1:4hYιX់z"2ZO 6 49RZ:szc{ܰ\@f5Bg΢ʎOhc?;ވ$j'm`9HY  ~T[Rdljr#Tߣ)X1dO8C9*J|[DQC5;3@xo1pX2 a4B+:E4dʻj9 P[492cu@jAM f5BTEA9[Po67<:;c:q2f[aY')F;$#dV ²NtXb#}0Bfج`p+&)F;LA*^n}ǧ nȦi뺾omP:X:F2Ps3]Fx O7"O9pbM S}6,a#ٛV?эik6Lm><0wCj`$*r#U}:0?xNjhޠrR^:5禸#!ItON.6i m&Vh :RA@^tWQT^шf)8nRQy69mN-ZCA]otuΛ oS) ,gϢ qN7{UǂIRoU8{) e\eB֪͂We.P}X3.IՄiiqю,=U@OYo;H(B _jN(aʹ+j;#BoA5&*Xak0B#|ͩuTRB ڬO\: euJ_by ṕuh F``8Ng*YVXÉvю$9UbVmHb3Y%6+ vю$Sa[~0B׫pCX 00B0  #00B0  #00B0  #0;&S![1B O}\>>>4 v!8~Hq0  #`N<*Nh MZ0Bku*-Ђ\6So-!FayB0aZEku'tV00B0  #0q?"ܐ?PB0B| gœ / ߣe_|,IENDB`nADd1Hcn:9PNG  IHDReKgAMA pHYs+bIDATxM* o݆êf &MqaPj4_Qt-"eW5G\ (^o?M!v19o (ʸ1~4oVʻZ`o:ES F9sna(k<4QjmCG3l7__m(ha+ǭ5)~<ۀL6hǜsιt»$fEt?rGSQݘj4T=-:{C׊ti[ؐjɯs\B TqmQ9j4Gct u6H3Tэ`F؍NZ[j 5Ho>OKYpKBZ^2Gb&̿A)|"~\vVfN՞~U#f`Im+@yvαbcrCxgLczd3-` hMx-Ht1νU47VZa< Ulލ~ lҺ)t`~ժ'k+@V5F% J@ 4(^)|AIm7Hz.(Li>+4Τ{DXj QV I#Usz]N.8"Lujid&aSBۉ=H#f=Nm)dY;pk˪۩Fܛ~.7kApiUz-jK `iq FW @H@ H#F% JhH#W!ojI f{)ݍ7-Yiy i$kǢ[ڽ p[zvu"UC\dl 7kH# VĖ+L^M4a7]eO-sMTrJ$,[@i$Kx#S`eeVz[ڎFV)gBChiRe[t*zd˽-^\qJ#MfS%% 뱪J/4(i$PH@ H#F% JTȫk>l糧 =KʧDGN*4*|e u]l CH#>ilFo®tgHPO_K$,[녮_i?HS`e\E'Wjo8463v}I#ө~;'F}\|(~z4rK6r\~r J@ 4(i$PH@ H#H##^L/yyuT?B{H#٫# v@Q,BrKNNUFߟ4Rh6n;rC͛y"7JrMG%vT]za4 QּhIENDB`n W.T#T΁PNG  IHDRUgAMA pHYs+IDATx͔ EOH1#㸉PJ1'i/bƸq+֚Rk8YǙ(i:"2wKn f@׮"Ac]x!%Yo^\ /(NRB(nElfZy ]xytUUGJ d I%L 2{Hkեmikײʶ- "(Ny C<==Ww>{߽DpH96Y18'6i)?3Kn # YθU"U#+b!Ck7TLE"gP@ΎtF9SFNul3\k7wNZ@T0@5i/{8BJeɼO&G̙ftiʈN2% rЍXQ"7_SRA܃}=d.69D3~H&*Je>Qk(J/i:ZIuUY\ɔrt[طcHE6j)/y4[|8rs@2v5:R+[[wsn6{r \rX&(3lwdǵ^Vf^YW֛r64ZN![6,wʝVfڱu7tنV˷`؏~jNG{ >=V.Ý >6hjZkm :R?sŗr?adqLifCO]hލ] ]ѫzu=jžY'G9LA88}Sި1k48fS/Nzz!/dgX #e5xYY/57t|/΋~jvܷOz}Em|b'(_άMNoK#5^MrӭM4\i7oJ>:9l|2Y-|]rWj=h5rZA#Nhf3j ,jУ|a{Bɥq ._!l_s˷zgP|i)ƷZ=˗/?ek\ݙZhtl2ݖth LTY~Zк+{,F%8mhE=^U:,TKK▾[ ɺ9UEDS Pz7ɮh~+;Gd{4xEEF`;j9Lq8Zxy; :գ[Ro_uC^:{Fc'Z;܎6jlVjn6ȫ' sD:u;@x`j"-f<#= ^kuj{O0jvmFz98wQg񇮍o5?6oblz?&<^zxnc\w3g; QtkI݃twu'tV7f|w>oo"=SKM᳁tjSȉ3U3vG;[z3wus}AYn+#*+:덮ڸQ{SUV q_DUhv1hҭ&$!npa7tծ΍p\uݤH"]v9:IulYЅ<uOQ7P._DZ;jrE(|Vx>ZBP"3<gW_K%_/W>Ag=XuD3 ,I!/x8@ﴇm-xa˜06':7 hg %,x4_y:63id^af>ƺUcQ7 bL>Q֍-*>J= T7t3/ o%>uó4q؝b@W] *|˺<D} b#cy_t,}±WB UOzzp]L'}kWk!zì"O\AMw@ x X4^ a N^d xZLi'V~kv`:ωg^*0?>\DBC2^Ohfxs%3\:6 容pJ?Y>ߑ+]駻F@{&3ўtgYij7jP?C :Wyzp yK>/ĺʽ>~z_{|i?Wz.m{Vm;C禳i9t@'G<}C`A+݉WdHc,ics@0ƚFzZOҨ_ ~}Kֻ4z!b=-w9ZJ9(}1We)d=fzU)+&d瀮o6dv]2nMSG((G1wù??cmA>?A'MS=L+^;Rcpk],#]bJ+F$FW^)qrկ{d3M,dzBP,*9m{6Zjo5'nw'ܞb{cysӟ|×"ٛTO*2l8 eV3;N?_?G~ߟ@I}_ܭ04>uKŕ@ľ/C7Hx}QwTܙO${4׃ut}!|o==-hϘ׃ukՕ`VX_Z`W3rPښh14ΐ%XCbiRC:t ~kW-Io :I6ay)Ǒo%\3xoI3~}ñ 8oWЂ^~I~#o)o>Tơg }#FNMj|> ^f~֠.$C1[ߡo X[N~\ƪ/};( ~;&i~'W.׷ri^CM⺲Sr|vm+ZڷFy;3 Db=l.8*i=dN?[;E:*SF9cT%hc 5Wa)z )Ǔzڛzzw野17z8ǺPNGOpR$Bk?DwZX#G !84 s:c'q;s=ΚJt~&3Z&,C5g)~:Kh:Kvm4gryn~X/'}a.}z>8Cwa{8\__K ~|wbWrtqW/|7L8ݺU]])rIlԖ4F1:{EorWn_8Oe^ͽAU}%:sVV">91eEڰ}v;A;zFmנsNkeCiWp6sh=t#]HYPjבNSCEŚi bum GF{csOKЉ: "P_`n5tͷx3-ܢ?~eSe_ %ѾڒmTqTݙlߊ`NJu"O/_4"Q,%>w:p얓GqW6!Q&yemei_Mۅіl= kݗ{L+(-N5"YH8CWZl>ls67fa%ʼn̕esib 崭Z4[[մ#f=}ƗR;nC>I'Б{;}|@}fmts8 &Z>^A{݋O?h6r\OBY kf.ѯ[uWZ8nj?l=JM.tk߾kР}IV87!mZ \+IзvmfxT,Eʷ]M~\frL[ê|IƵ/mv\2RV%s-2Aɵ:QZ,T\-stǥo7sfV п#8&9 l@#<oԷz7ǰaY]cZ _җ}_ddB8z(E5 ;ѻ ;qRnƞ됻V-hlYB-%?+z깙nj:\0UNng qtnvKء. ?߃we6Ĺ1g-ѯxzeZ_8P# ߓ>&D} v<=bط;u{<%ws^ͳK] Y1x7y}=uZ2?߭]w7 -B1 Mp?Ak#una06Ƕq-`]UJֲw㽬iG QD"ʋ̥_mK[B-~ɭPU>1L90;-^=v`2ޗ=Ug[O0Ñ+W9n[)o"66o&|[*Wl|+2o k:oU/b_qyE_b}W:B`Z>IJdl[y .&]A7B靭;;4mz:]sJ32ݬg!{[l>_9}sľ rG.UX|n.Ť-'Z"Zlwc5rr@/f\[3 ,-O.9Ec $?#̭9.Lħ8l=^CSɭNjXŞT˧%hGk`g*+kݹ-vnL(/uCiWв]v>n|>6割؄xE5\׏w_+Mo k_ZaJVUg\ 8hF`^Oч?ffTtt:P|č<7¿ԫ7^kv LT'O-Ǘ%%{(Jmjn/j\3vDɴؠ$f4 `o\&15x}V++JˊZp6 :kww?o*9u:KNQC.ZlTN4mE5e3LxxtuqVN?}KN-][l^ `)Q/lQN/նJO:{>q]XbEJj>덬?=+YsM?n%WɮAoYw#r}9GhpnCKG}gGv?z,]j<#yywNDБ#sCg;/R7G~lԫj>VGgCgkeKD0cU,]?Ľ5$#w9o gk#fK'.*\1]6dIGЮܠ E^VHvd$["!rP/X,({[,z&u]עa㵲A݆fD-ې7܂:ϲeKGoo%Wutzt_' .2KNٗIY.:"sϖ2WfbRTqrLdA~\ܝ7-5ΖcV4 [Iw)+zl̕>6p:6M>I9RN`\p zpvHNt9Eo)7̤Y|c>0S T`,Ƕ%fd=0K^CzB@|]ϋd=N&hCBrPFޱ u|%_̢/W2*K2Kvճimhk|%OY[weW%Ȳcm@[, [8E#H΂9BM7^6 rpl&.ΉwX.I"!vJ'㘂*6,ߥ-uu|)ӛ؞O_ZaGMm#q.V3tsf:vLw3Sbf; bݴ`gDK@ Y? ACkҭ U v1sT26fO?SOe 8#f2e|LoJfY V9XV9(;_epyz.=cd{fy9fďe(֞ʣ xr9+tc2|bv@ mHq p.|.)c?Vce`Ww~n _rru}E^5}.Skmho,@kCer^D+%o_&{+]],mcX0E3vIwDk:>we|TԹ='y]g ^UgDyGЁyͦw+5j4vľ t }HT=CurfX>H^ 0"8 IEMCu謃oa;̖uyg,cedlt("m.$=L#?=TO.-֎:\`p:y`DىL/dM>w̢>EA?h?`|&p,;t|#~ܬoSG:魔m'#2Afe"cO xw5{.(vO]u}:Q#˥Gۥ)\Vnk}8 ĕ#ptmL?yGק}0vXĂ.:w~8 ƃ`ShQ}mӟ8%X$~DtLc`N0kw}0ABk;Q"{G_E7&TY+w&?O8cmQC}~O]-]ο{N2/7^kl[L~ x(hsK6^r `(I.~ d SY`,N^eΗj6K_~E<cGm3{_QܣGq4Fw89 o}7>jFt~F1M}Fx:ldO7`ymz=SJ>=y<"G?L~rY'NR?6={"~r`L?H2WjF.q{Ց?" ""(Xb,`$DTvc@,alL1moli7 Ę5YK{wM6 Dq]sw=0!9_K8s;gΔ=_wk:.rhV;a|Ym0aj¼S[uG8"lmUxbSӗ椹'=c~k%z;U b*L^ˢ+Nk:a8pBؒ~Iܖ ҷ;`mB=3wSG{Eiھttߡ0jO4(Ń'='13qk@xgrW3[Sl\18o!~Qy9.pc.xN3G/~F#}xwz¼݁'ZChm6 qi ;MgyW[ye`1 ˩ w[g3r%[(̓< [,;d]rʅ]r!@qwӖ|?qe 0.Y< u[5 w<[ - w-m 9o(S~xwm !~ ?g ;pŝkC(a>@! ],רEv^X }^CAvŝ9@,t3yn6xn^ ]1=SԅyFC.q@<]$}ḡmg@d`:tfB7y`M">߅>''rKb` .x61Oy xȍ x<+'Ɇ\68V(PܙN2x&An"8Ǟo'<ɐKGŝyl='&yEO Ol;볞y6<!(̓<O2@qg\_m\_!U}q}> {@{]SEF{AmU@qg}~<; +Pܙ?f11>@qz>/Ƚ < bG1b<λ0}..GC}CxN2Gi5V퀱jI5fpG6\7iJv=_T6H7CyښAZS6(]Dm1A*?}eԮ[_֭W?{g元7UF??e?W?P{!ckknS}p-@h|u @| e 2%VqPRj_mY¾5~2N'&oڨ_}^Z)r}N"~~w8*hzBk.Slâj\FA;Xԏhh߰ڃ]UZh|h/rBBg6Wn:JWsZw;̩M.ĵw{_.3f~z/ܨrţP .wQLi}yu}z\\c7UO{= 4b{~l^F{)Rh? U6W>3?{Uic(>uӡ\,֫J VAm9T^/'TQ+qy>3xzL!D]{\tb'Fٖ i݅׫1O8zί BWϷYgUkgѢb$#sO&Nzާ|t[ʶ&2|pxLRYPf;yH|H~WeڲߝA8DSU9OjshI B pUV ʌE:sK.M \ O--dR#UVh  yH7BVQ86 m!٫d]#~.D~vZwt:!NN3 AAӇۛpЇІ}'Lg7x[ (B[>Oo6-]<{nj0wew&~c2Ddwl`,sϔU%@"'{<ǁ{'(4NDZ%!'8٧zYn.u/IMgWRS~wQO8dJ\m<9].ir*D%'%X,X`xJ'GA8w)A(S#b|%<v=LѺB,3dt $B)2:f*EJXc1t,%1;)!q tLS" z&CdIL; HB=鋙:e(o?} =C]1+K_&l.WMSU̔TO>iil ,qSH5' 0JVwaԿoW:>C1+Qr숳e;)uhuVW)QePy>mGvǑodj'£Kghx^O@:.YaъT9ُ. UdH@# 8"N%1Q^r Nygє◁ T9ُD%nao5RAm؆!N8} @+Դ|؉8u]Ƌ\g~ρVc'T9I煾.=.{h=IW-"os"#S^'eD!HAiNMZ3 羿JN("]1OJ0pZP/ύR!cuՋнRnhBwB#c/Cv@qxDiqJ 5_oݧҲEz;_+"1W]cw"iM)Foj>ER,Lv#)@pߕP{ E'K&f`(Ð,Sl] A|-Ҟvc6v![x?Sk=Ԟ5]Dt:p{}kzb+ZtVKYSϲlRfÐhE5CI'<jSs ޗ0_ Ro/7bPnCZC Ur=DFT [GlʼnYwzY`_CNm5m1XNR+wH򯁯=$Ӹ :>fh7)@+w,+>柋0+"D DD䍁L/G̍ = =4R؉kӗy@ * Ǐ-j|ڬ|n CfAr>&є5LYUs0@#ANj80F}(~3yd/?gTT}[579tc#o3C MժymHIծ XDקM73GMc)A5}Og~G\բW&#Ŧ~qD6Pd~%yLm?9>L^OT!U]Xh 5N\~Aϴq`#>6o٩ RWDL˺-1TiY5 __}0 gژڷmזqk[sEWy {ZN_2xg"~xBޗ"]lȮKnq/rAAW. %uZ'6[ Vsʻ/^5l;ۿI_iFm%CWUOwC~7z>&Ͳ8@?f6AG]A xoW>~+w |x O3r^k}P>؅=}^^@crxNym |w,EHQPُc<K˟#_>p2(s tx n@ǧ#[a!Z>q%w?F|?( Ys[p|/ q~!)$ "iK2BSqpOA;k[q$ܬ1+~5l,@:б$9)O<9_:!؉gE3 ѳ>kz 'w3MY̳ *?L"NNI5RU3AB%:/kd3ݾ5oms͓TXeSa+sӏ, ?}b+o+V7 Jr Ts~Л^曪fbV1Y+.Z*O|hfo)=P, D+{Vaep+((yJ=P=2}ge%Ħ?P?ȎJ,'|F җU 9ނz,-ܴd)"}q}n__n_#݋<fshFb-gDmی5F{7貪븙uTH}\]G:Alh5\)"LijG[F gHAy K*fpۂv aM}5'VΗVN?_ئpcBBb&Uvqe[aVi95RV·bK/m=|Λ@W'ej1H2Di\f,Gec-܅xcHٞWjt_Zh}_Yт +h+%Wu?ij἖{/ o7#Ê|$A+>H夐 :u0R3-["e~綄.o)6}Y?hTXKSϢ|\?$CW~#VsM ?~k۾qGu=bK?,kZwu$) /)FtlɹW"jЗЋ+KLLbQ݃eAiyZr)u(-CwE rFy3շ&#:n:nn>~^9tgĺarN ti6D:J@M( JFWӥJ@g߈RA($pxoakkMKy̹R˳пݿٺU+@{%sf:vO KHV:W&LsyEBabN |dӂJ_!uOмY1g N O|6F (ė5T_5ׂ>q.n(%! r¨c៟Uh@s1ʣSl{dpB=#y=s.pA|>X4Ѻ]OGxpTn?%M){M r 6)0 KA0W!=DF/ֹVh7Ig͙M3O˦@Mdйo.\߭&fBO] fwO.=p}ǐ}V('^mT+Fy7e/-ʅ;=9Hӵ%H=aǣ8s#ճ D$tDlCos_Q5l jS9GMshݪ%,OP'g;UH1OOUϋTlgW4?RqޮT{mmsPWm3W#SMSm[M<φZϡߪ{qc6k~µ} Ih#I&w6@Ilp/A;∇:vݬ|]܎Z =TV{g*{q*0\ L Qx:n,w~G~'p?s~W~7/,8<~Q_]j'ϳY\9=fs؜C9laK8lakpa[#8la$99agpؕnaw{paMu5}Ӈi>ښ%{tq9(5IĝwZ_o_>Mt0iǜ {qG{i]͗w%%Oof}$ag 92(A z!Ayi W(~.|B*Ҝd\j7UЉQ;OG/&g \5I ,T6$[b<X+t n_9@\&hdbqz|;>'M6JZMǮl9f1znJ9JbHoG< iչ9UGpE9,Cr-24܋O=ԚtTN}z,a="Xl F(K0_ M mp>~ˡu1ې;|нr!81wRӁA*C3 mK|aHIWhҜR E[Bsf}p}%\Tuc[n櫸Zhm )kZ!JCߥ5xH&* jm.x~sWN!pUF*:Fշ0mn ۀOA=ÑF@U \(2ʡrkwYXŏӐA!9#=Jc|\ǹS~#&|JwۇѽCy%NJw0ʘI8? t?+9'ˣyxn/%Y)3Q[[6u0f9jFr,fcAۦ>j3wS+GdpU.$QyYqq͝Ʋ}lN'lbcjۻih7^@ &_3G.F86diYL VCJd]3.+T6Q0d PiN==z,^` I̹԰RRԛl2 Ӥt-d$mIK LukP G2s]c*ԫU'@n 7.#hݏ怡J Ԫ @ q8([3W]zu:Nfz Ytc"j$rL`ى/58)zڨaZ6?>cs} u05\SSݘuUyYG9琭ol)#Q#t\u1/p&|. \Ab:߆38G9S'w.po~ɡ6'wU07AI`K}<[r/oKo?puS+Roy,9r,uyOdQ.LdeCJˋG8tϨrE1)~JNqkR{ȟ}"g'5?;g._\E6>T^c%ϵ[!>k:;PfV7?Vis#*r]V Ue17ŌB[{ l+g;9CYH8opv(@ Fm7eqglVˮYddqfʴtqï< Gv]%vSaCrTi? 3K:qg+t\b3p%NZ~5G{X.(g[>ZboqVw΢$(kna^/gKkߓ%D| Y H2DB/ǫ^8 < NJ[igp5 \b,&JYnݡs@Pͱ}c~{c~1ֆ/EUk2#!/S"1 v~NH:@@D6$#$#$#$#$#$`荋%?Z~V0Q< ˺uc53RY&XڲP3@;,>΢ewXsfNG{u]( \0 W'}s`eLU=lCV})G:jU߻ӏ@Gj/Z: G&xmb;Y[, ҫ̊(MsF@?+S0~'&d2u !1 s6E٠A/H 0#$#$#$#$ Ql۶]kR51K]ɰuKf.|ey̪>.{S6G5?õXz휱]vv=/.RrhtK:K>QZV(7n%tGjRuөkӚ}r=(u5b]&:ŭdu3;?wf4bh6m1Jb BnWwK~7HVPB/J֟E>TXTU{3fwLv\̽wsν߽s g=^밼O Gd#d|:aL n,C?} 09P6(TVb*-ml 6H"$Xrpg˷#㡜`nPn+c[%V{;A\}7x/i/2CH{w3Τ߯~ >-C%z :E&}2Zosk8ͭkA,7 ҙT~,6X~*ƫ^~FJ|F<`DFw)Ϥߺɺ[ߢBXfG]&d1 z_z[1|O  M/(NoLEұu/شeo0dȴ8_˔SaX^H\SiˎHh{H}:Nc89mEQvhςmX8 &FeAV,;Uah]",zY-m_&Y-LtI1ş'.II?O^HO0EpùT^?b.vU=M|IC}ݤܯ^f弾?x-5d^ı=C`o[6%R*qв)n^ezNI;ҧ3flIW$͝^Ύ෗fSLk5y3)_(vsũ x8&Iv*΍]}Tù|1]z9|(9{lb6kN6_g8rI$ͨ\?*%Hk+ĻW3yFVrFn)SHo"ؽk.wͳEBBd>d.ˤJ 5q~LduC٬ep>6T/ ¬_tNv3eͣo]6_h%[6_i%[6_EjKD|.]""y%"F]V""ySxmrD*#F<@Rm^qh#<eR%61ڼ!\gr5~܌yQelA{vV,[-v-LeL{{6_omz|kLN/hqpJ!̎+ua.Tx9grf] kzj x{̓$'UN%o-& mr=MUn'Z=h,'o.AtX|%Ysxv.7nkЏm`!#sѝ{wx{z0bhhxXMLG~;e/1rT6RJUjD"qbS ڞ*U*ޞH&wBS-)jO.`06ٝ|fv *t z ^P/n{cШ`2>ՉfC\{`yto2+s miȰ쵩[x$D,*J uKml*Л]qalkd )cKegL]uxl-xa䌰D^O7D5;(r%0yGKʍTa9VR Ge2zŽ^}l溍zl3IWȢ~ Ka)?sڮcA>, noӕL2+6 T/"z$jH&|Ǚa OЃO –^?WWEu"3ѹfGaoqo嗗r(k":hju? &T_N}T779x |NO5CUispv5#x5@u‰t*`D_+ [S+ }z=E agW:*QWĻtig-e=',;J&{.NGq,xoWYkI_ZCDINMgөV_.Ə3NߑL8S^}j8X}]دc|RX5vg|I0~2l f0b&ľdZ3tB/ٌ_( [); J{L,1E y93>Q1n uUe]?Q!|@|;SIxC`Hw&pK}[hh"{Tߏ& jѨ!C' !l(H5Cڠx QP]}K0jlQ9!q?'[ ZPւ:ABQN$k xO7(.ϏB`0F-7ȤVPu:i y3ӊ |$]72"uGw?vN]/=Z'me__Y ;luțmJ/_oVI?twG/>X-tC8vq5[|u+E|kG._˫JvvȚg?GaQ| dQ<>L9)G]U+ʸӣJ~P|E3&/iyMW?rZlU\v&> PohH*`!m3."Fh[xڽ\}p_I̚G%$m:%,-I Sl 2Lal-B&@' hpQɄi&t)%[j$ݻmYߺ t޾۟aB6,s D#}|S4M 4 k~E@EUy(t 9lrG4mk!dFw,3mZjW򸖀dd+&+HY&?W ·/ְ򐉵 3})p9|~<&B.4Kďݙ@C2מf0B?BQ+Ǽ܄f4ϻ2I Y.rݵot^7oyat&u7Dޤf U@=<=| @w0y( #i2 >NYh1D5BofRv5vgBkOf?=,7qA}f LiQIdDOB8u7L {?`vBA[r:}3:lJWu0XEB2e4[BӓUTE=jgRہ0C[%yQƐg4,xqF{s_ ß]4c&[ϽB=׺]M՚:[@fY˨l^ *Vw5X_>3EA>0hQͻ|D<.a-Qcd,];%hQ5PqX~u`K=],Fbz8 ȮozPR-oc8llx\neX1\cQX^:44wʍʍU.?F{8l$~8+Y{6^Zٯ;ac5;g+ u,G_,g a&U Q&2{7=DUK'nϿbϰg "N{q-MgnAv\Hd]t)5'iNRK d?~<5fYLZy8˾[h=x^^L@b ҉[.^K'fs]gn O<вjvK!H/^MCCo.wϥ9>\ 94( r7n(W|.vi%i%t~\fڍi;^I:zb䳀 |H9_i_N¹4!EfZrLY{r٨9VhG! IV1/AW^<@R=GKlPdGV=z*;=>ffd kyqPV_GDFkc~-|80+|_Ċ䬼*OV"y` >UR'd)'@V MR%hi&;@HMئ"l,''me QkIݓ62iANd1I݉#[gYOYc-g?Ur'؏5dJG1|=Yˊfy~6RbT֋ +۪e #bjփ }5(yzwǾe6׳^V^apym^S5|Kj]e ,!h[R,]TpY5HZ ̕m˕m粌̕mqmlJJ3S{f/+K˜VI)O. jnv:6!pPe8FÙ>*ʑÀ*#eђʲƏVؑ*9RZ%cGJdHi*;RZ%m/2`&fhPlb.}KlbWb|&& LAwNמ>ω2s5)K}'%~j NoCbL4Z h,AǠ1` &#- J/Z#]TTb墶z@e95L4LB0!*VeUä0 pR\8N=e({JHYȄ4~FV2 dXgLtS`+D *+@ngdZ>5&b C,0(X"=zWc1XhK{IPFI!Y<)  3e o!k)h, ^Ai.AQ`(7>LF ?αb2LFP΁=&LWOB d` =I"5a"L@y\0=pAӏB7ƁU>Ȯe!:Kgc-2({)eX&k9:B] օ:EϜYizϜ1ϹeF?kNTsj8DMǡ[-K AHͳy:*rwloir0lG.%1>bQ؃wC==ۃcn~.g7aGnD(vB{r51y2QqFmu6jіmMhSg ͳg הO6ԐS3W/UO䱔h_}_%IaOLؽ߰YOlqI4,A V=*4R}ܶNVؽ<+<{Y`_~*EibF XŢ>h؄u,6Ѱl,ؽ߆߀OmkTGc1zfcPP9lo-l_ șQegb WW(^  p  , K L U \/ 00DTimes New Roman000Wo 0DDArialNew Roman000Wo 0D" DCommonBulletsn000Wo 0"0DArial Narrown000Wo 0D"c .  @n?" dd@  @@`` 8f/5 5"w#  4A E$ -% / \& G'     ) "( * ;+:,4(F-F.EJ/U0F.2&13: 45@!6 2$Ķ(+ 22$Fi6P0n5 Dp22$5QZ179r b$wR_3ItCb$JzTo<.tb$ADd1Hcn:9C4b$W.T#T΁;"$x!%Yo^\ /(NRBF]-<b$ )$('1s2$7nA5xz qX@s2$#sѝ{wx{2$m3. 22ж     A@  AԔ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| 333f3ff@3E4KdKd0$^Bp ppppPp@ p  <4BdBdP. 0<4!d!dP. 0ʚ;ʚ;<4ddddPЁ 0<r0___PPT10 pp2___PPT9/ 0? %O =      _(   ,)048?BFHN LQ![&]'S"T#/h   +-159ACGIMOR\!^"`#PTasksf ` ̙33` ` ff3333f` 333MMM` f` f` 3>?" dd@,|?" dd@   " @ ` n?" dd@   @@``PR    @ ` ` p>> 0( 8\ H  0޽h ? ̙33 Default Design 0 zr ( >   0c 98   P*    0lh q 8  R*  d  c $ ?>m    0|  9q  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S  6 &9^   P*    6 &q ^  R*  H  0og3 ? ̙3380___PPT10.x phd(   d d  `22ж Ԕ?9   @*  d  `ϙ22ж Ԕ?q   B*  d  f22ж Ԕ?9^   @*  d  f22ж Ԕ?q ^  B* H d 0og3 ? ̙3380___PPT10.pd 0 ` ( w `r `  fdX o?89 TUser interface design A software engineering perspective The Virtual Window method 2U$=2:X `  f^ o?A L Soren Lauesen, IT-University of Copenhagen, February 2009, slauesen@itu.dkMM :. ` Zc_ж_ж jJ?0^   This is a mini-course in systematic user interface design. Go through the course on your own. It is not intended for presentation to a large audience. Plan to spend 30 focused minutes. Use the spacebar, arrow keys or PgUp/PgDn to go through the course. In a few places you can take a detour by clicking on hyper-links. You may print out the slides for reference (change the file suffix from  pps to  ppt , open the file and print all slides). See teaching material, case studies, etc. on http://www.itu.dk/people/slauesen  ""'/  ` No_ж_ж jJ?A - The course is based on the book  User Interface Design by Soren Lauesen, Addison-Wesley, 2005. The book describes the design approach in much more detail, explaining also when things don t work exactly as this mini-course says. The mini-course often refers to chapters of the book. We have developed the design approach over several years. It combines software engineering principles, usability principles and psychology. It has been highly successful for Web-design, traditional applications, and mobile applications. 4.H ` 0޽h ? ̙33y___PPT10Y+D=' U= @B +0 ((.l'(  l@  l N_ж_жo0P >*. Good and bad user interfaces$    l Z@_ж_ж Ԕ?  !,$D  0 Q It is easy to make a user interface. Just allow the user to see, edit, create and delete all data in the database. Unfortunately, it is hard to make a good user interface. By the way, what is a good user interface?F'O@2d<T l Bo?`@ `C,$D 0 \Examples of usability problems: The system works correctly, but the user: P1. Cannot figure out how to start the search. Finally finds out to use F10. P2. Believes he has completed the task, but forgot to push Update. P3. Sees the discount code field, but cannot figure out which code to use. P4. Says it is crazy to use six screens to fill in ten fields. P5. Wants to print a list of discount codes, but the system cannot do it.TJ0 2 2 <hhXX l c     BCXDE@F" jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||Jc"/CLbL^N$XB * $J@     ` Y 4 l c     BCDEF jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| @`Z  l c     BCDEF jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||PxHP @`D X~ l      BCDE@F( jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||$=nnKf}~"r@7@    A  l c     BC^DEXF* jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||4s/0_jF#L^0S0~iW_4s@       `E g Q~ l  V    BCMDEF@ jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||((8a1-im_P\C FO\XsSj[uI5C{Y6ujUK$1eCj7iZM @             @  k l c     BCDEDF. jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||Z \OrRMK" @    `" Db &l  `22ж jJ?0PB 'l # l22жDo?@`00 (l  `"_ж_ж Ԕ?,$D  0 lsee, edit create, delete&  T )l Z|$_ж_ж Ԕ? ,$D  0 \Database&   TR *l  fZ22ж33Ԕ?`l   ~ -l  ~,$D 0 l Zx6_ж_ж Ԕ?  ~,$D 0 < One way of defining  good is that we want to avoid usability problems. Here are some typical usability problems.&srTR +l  fZ22ж33Ԕ?`5[l   g .l  g,$D 0A l Z@_ж_ж Ԕ?  g,$D 0 {  Our systematic design approach develops the user interface in several steps. For each step, we use various techniques to eliminate usability problems. Experience has shown that it is crucial to design the data presentation very early - which screens should the system have and how should they show data? These data presentations are the Virtual Windows. The necessary functions, such as menu points and buttons are added later. Chapter 1 of the book explains more about good user interfaces and how to measure the goodness.<@2vRTR ,l  fZ22ж33Ԕ?`FH l 0޽h ? ̙33C;___PPT10+۰D' U= @B D' = @BA?%,( < +O%,( < +D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*-l%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*l%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*.l%(+8+0+l0 + QI@ 0 Ͱ(   :  N̓_ж_жo0P 8*. Example: A hotel system$ F    $y Z   s *R|Z   s *P4    BCPDE4Ff P]6 Ye  P-PPP @    `&6$   BCDEF__"r @`$ (    BCDE0F: (~ rx.(@` "   BCDEF" @` "    BCdDE F* d @`@0   BCjDETF^ $jd& $**^,0@`:   BCDEF" @`Z   B(CDE F*(D> 8((@`6 ^   BlCDEFl< @`     BlCDE F*Hll THH@`     BCHDEF"H <HH@`<     BCDEF  @` < D   B4CDEF444 @`     B@C DE0F: @: :: :@@`     B CDEF"  @`     BCDE F* @` D    BBCHDE F*<*H66B<B*@`t  d(   BNCTDEPFZ<0H6<<6B<B 0 0HNNBHH<B6N0THB<*,@`n  j   B CBDEF"  BB @`n z XH   C  " ^   BBCDEF&BB @`t  "   BHCHDEF HH<H @`|   BTCTDE0F: HH<H  NTTBNHTNH@`v   B CBDEF"  BB @`v   BTCNDEFNT<T @`B   B`CZDE0F: NT<T Z``BZHZTN@`H   B CBDEF"  BB @` !  BHCHDEF HH<H @`f "  BTCTDE0F: HH<H  NTTBNHTNH@`` #  B CBDEF"  BB @``l $  BHCNDEF NH<H @`| n %  BTCZDE0F: NH<H  NTTBNHZTN@`vt &  B CHDEF"  HH @`v&n '  BTCTDEFTTBT @`BV (  B`C`DE0F: TTBT Z``HZN`ZT@`H\ )  B CHDEF"  HH @`V *  BHCHDEF HH<H @`f8 +  BTCTDE0F: HH<H  NTTBNHTNH@``> ,  B CBDEF"  BB @``l8 -  BHCNDEF NH<H @`| .  BTCZDE0F: NH<H  NTTBNHZTN@`v /  B CHDEF"  HH @`v 0  BTCHDEF HT6T @`nB 1  B`CTDE0F: HT6T  Z``<ZBTNH@`hH 2  B CBDEF"  BB @`t 3  BHCNDEFNH<H @`fP 4  BTCZDE0F: NH<H NTTBNHZTN@``J 5  B CBDEF"  BB @``\l 6  BBCTDEFHBTB @` f8  7  BNC`DE0F: HBTB HNNZH`TNH@` `>  8  B CNDEF"  NN @` `  9  B0CNDEF00NB0 @` N  :  B<CZDE0F: <T6ZNH66 B6N<T@` H  ;  B CBDEF"  BB@` Z  <  B*CTDEF* *TB* @`T 6~  =  B6C`DE0F: 6Z0`NH0 0 B0T6Z@`N 0  >  B CNDEF"  NN@`x <  ?  BBCTDEFBBTB @`\   @  BNC`DE0F: BBTB HNNZH`NHB@`V ~  A  B CHDEF"  HH @`V ~b  B  BBCTDEFBBTB @`  C  BNC`DE0F: BBTB HNNZH`NHB@`   D  B CHDEF"  HH @`   E  BBCNDEF<BNB @`\  8 F  BNCZDE0F: <BNB HNNTHZHB<@`V  > G  B CBDEF"  BB @`V b & H  BBCTDEF<BTB @` \ I  BNC`DE0F: <BTB HNNZH`HB<@`  b J  B CBDEF"  BB @`  D K  BBCNDEF<BNB @`\ P  L  BNCZDE0F: <BNB HNNTHZHB<@`V J  M  B CBDEF"  BB @`V Jb  N  B<CNDEF<<N< @` n O  BHCZDE0F: <<N< BHHTBZHB<@` h  P  B CBDEF"  BB @` h  Q  BCDE0F: xlx $~r~x@` D0  R  B CxDEF"  xx @` \ H S  C  V  T  B<CNDEF<<BN < @`F n  U  BHCZDE0F: HHBNZT BB  NBBHH@`@ h  V  B CHDEF"  HH@`| h  W  B<CNDEF<<<N < @`   X  BHCZDE0F: HBBHZT BB  NB<HB@` "  Y  B CBDEF"  BB@` "  Z  B6CNDEF N6B6 @`T 2  [  BBCZDE0F: N6B6  <BBH<NZTN@`N ,  \  B CHDEF"  HH @`N 8Z  ]  B0CNDEF N0<0 @`  n ^  B<CZDE0F: N0<0  6<<B6HZTN@`  t _  B CHDEF"  HH @` & n `  BCDE0F: zz    @`P a  BCDEF"   @`H b  C 2D>H c  C DH d  C bDnH e  C ~H f  C $0H g  C H h  C H i  C H j  C T`H k  C  l  B CDEF"   @`_ly m  BZCHDEFHHBZ @`>1 n  BfCTDE0F: HHBZ $$`fTHNNTNH@`88 o  B*CHDEF"* HH$*@`8f1 p  B0CfDEF0Hf @`1 q  B<CfDE,F6 0<*H ffTH00@`1 r  B*CDEF*  @` s  BNC*DEFNH$*N @`>+X t  BTC6DE0F: T*N060 TT  *N$T*@`8$_ u  BC*DEF"  ** @`$R v  BCfDE@FJT0 6BT0`BfTfxZTH "$@`1 w  vBCrDEF##Z6< HT6`HfZf~ZTN NZ`~fZrHr6l`ZH<06 ZZHL@`z8 x  B0CDEF0 00 @` y  # BNCTDE8FBB6*0<NT*N0HH*NNB @` z  BZCDE<FF HH*6<BTZ$ZN $@``Z {  BCDEF"   @``~N |  BBCVDE(F2 BBD<D<V VJ00B@`T }  BTCDE(F2 0Z0TT*Z@`6 ~  B<CDE(F2 <`0` <<@`TT   BCxDE F*6Tf`lTxH6@`&   BNCZDE@FJ?0 $6BHN0HBBN6T$Z NB0"$@`fR   pBZCfDEF##$  *<B NT$Z6THNTHZ<`*fZ TH6 6HN*Z<TBNHHN6H$B<* $$HL@``L   BCDEF  @``pr   YBxCxDE$F. $xZlxTlTZ$$0$@`pP   BCZDEF<6xZ< @`P l   BCrDE0F: <x`*BB*l~rN<<@`Jx   BHCHDEF"H H<<BH@`JNP   B CDEF99ZHBTx8h0BHZ rh8xTr rTx8hrZN<*h8 xT*NZZtx@`     BCDEF  @` < T   BCxDEF%% $*N~$<TZfr~xNr*fZ T< <N*ZNf~lfZN<*~ N** $LP@`     BCDEF   @`     BxC6DE4F> $Tfxr$f0T6$60$ @`,  p   @BCBDEtF~ *Zlr ~*r6l<ZB*B<6* *0*6Z6l0r*xlZ *  <@@`& |    BCDEF  @`& D    B~CZDE<FF H*NNNfBr~rHlNNZ*ZT N $@`&     BnCDEF11< 0*$<x8\*b0h<nNh`bl\r8x<$~r l`N N`l$r<~x8~Vl\`bN\<V08 x<$*6<<dh@`R     BCDEF  @`R Bd T   BZCDEF&Z$rT6Z@`     B`CDE@FJ*$$xZ6$<`` B$*Z0x $*"$@`     BHCDEF"BH <B@`     BxCDE0F: NNf6xf`NH6$<H@`D     B6CNDEF&N6*6$6 NN@`  *   B6CDE0F: 6$ $ *66@`     BCDEF" @`     BTCDE4F> TB$HH $$<H6$HTT @`>     B<CDEF"0< @`\ *    BC6DE F*0$0N$6T0@`     B CBDEHFR$0N$6$T$0 0T <BN0$<$&(@`     B0C$DEF0 $00 @`  N x>   C    BCDE F*N$ $~~~ N@`.2$    BCDELFV00 ~T T $$* 0(,@`(8*   B*CDEF*  ** @`(@   B6C`DE F*6*Z$``NN$6@`$   B*CfDE F**`$f`NT @`$   BZCDE F**ZZT`xHT*@`L>   B<CDEF&<*NN*<@`xL   BZCZDE@FJ?00BNTZ0TBNNBT0ZTNB0"$@`"   pBfCfDEF##$ $6HN Z`$f6`HZTTZH`6f$`ZTH6 6HN$T6ZHTNNTHZ6T$NH6 $$$HL@`(   BCDEF  @`   BC*DE8FB  $ ** @`   BCDEF" @`   BCDE$F.    @`   B*CDEF" ** @`   BC$DE0F:     $@`   B$CDE F*$ $@`   BCDEF"  @`   B$CDEF"$$@`   BCDE$F.     @`   BCDE F*@`   BC*DE<FF* *$ $@`   BBCDEF" BB0 @`lN   # BrCDEFjJ 2|DXrl@   N l      B`CDE<FF NN06<B Z$`*`T $@`T   BCDEF"   @`Tl   BHCDE(F2 HHtBtB z66H@`Hl   BZCDE(F2 0f6ZZ0$f@`~lH   C $<   BCDE0F: xx  ~ ~ x@`B   BC~DEF" ~~  @`*6   BBCDE(F2 Br0rBB@`H   BCDE F*TfHxBr @`~   BZCfDEDFN?0 *<NTZ0THNT<`*f` TH0$(@`f   BfCrDEF))$  0BHZZ`$f6`NZZZ`HlBl0rll ` ZN66NZZ0`HZHZNNT6N$HH0$$TX@``    BCDEF @``x   BHCDEF"HH0@``"s  Z_ж_ж Ԕ? ,$D  0 m We will show the design approach through an example: Design the user interface for a hotel reception system.nnT  # l22жGFԔ?n3 ,$D 0 STask list Book guest Check in Check out Change room Breakfast list & other services>T I TP  # l22жGjDԔ?P 1 ,$D 0  Data about Guests Rooms Services2!  TR   fZ22ж33Ԕ?Gt Xl  :   * ,$D 0>   Z'_ж_ж Ԕ? : ,$D 0 x The system must support several tasks in the reception. We write them down as a task list. (Tasks are similar to "use cases" but describe what user and computer must do together. One purpose of the design process is to specify exactly who does what.) $[TR    fZ22ж33Ԕ?t r l  $     ,$D 0    f2_ж_ж Ԕ?? $ ,$D 0  To support these tasks, the system has to store data about guests, rooms and services. We write it as some kind of data description.$TR    fZ22ж33Ԕ?t ^ {  C x=@GC Ԕ? pl$D 0K 0 0 _More on task descriptions*   C xB@GC Ԕ? `l$D 0L 0 0 cMore on data descriptions. l  O '   O ' ,$D 0   # lG_ж_ж Ԕ?? O ' ,$D 0  The task list and the data list are the basis for our design. Chapter 5 of the book shows ways to describe tasks and data in more detail. Chapters 15 and 16 explain about the analysis behind such descriptions.TR   # lZ22ж33Ԕ?t H  0޽h ? ̙33___PPT10+vD' U= @B Do' = @BA?%,( < +O%,( < +D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<* %(D' =%(D' =%(DT' =A@BBB B0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(D' =-6B'blinds(horizontal)*<3<* D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<* %(D' =%(D' =%(DT' =A@BBB B0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(D' =-6B'blinds(horizontal)*<3<* D' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<* %(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(++0+ 0 ++0+ 0 ++0+ 0 ++0+ 0 +?# 1,), -?pe+(  ~  N,_ж_жo0P r*. Virtual Window method - overview of the entire process::4     `T_ж_ж o?t|@3 T Data model       `_ж_ж o?t ^3 [Task descriptions   Z_ж_ж~ DA ?& v  N_ж_жݡA ?    Z_ж_ж jJ? 0 .Virtual windows = graphical data presentation// .B @ # l_ж_жDjJ?+CB  @ # l_ж_жDjJ?+ cz ,e 8 ;,,$D 0    f _ж_ж jJ? E e lOpen, Close Goto, Back D  3 r_ж_жGH jJ? ,3 23 Add navigation "buttons" needed on a real screen(332 2T 6 , d *#  d   `_ж_ж~ DA ?f 5  !"  # l_ж_жG jJ?6 , dB  3 r_ж_жDjJ? B B 3 r_ж_жDjJ?r r z x>  ; x ,$D 0   `22жA Ԕ? x>n,$D 0B  3 r_ж_жDjJ?     ``_ж_ж jJ?  5 Program and test the system*3 z A .  ? 1A  ,$D 0   f_ж_жjJ?A   sUsability testing - iterate    t_ж_ж    BCDEF @  jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||8@ X^. B  3 r_ж_жDjJ? Oz    6 x  A ,$D 0   f_ж_жjJ?   {#Understandability testing - iterate$$ #   t_ж_ж    BCPDEF @  jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||P\P @  =z   5 5 ,$D 0T v ms  +# y ps  !  `_ж_ж~ DA ?v ,o  " T_ж_жݡA ?]j ms  #  f"_ж_ж jJ?@ ?  y#Search, New booking Check in, Print$$ #R $ # l|'_ж_жG;HV jJ?O  F2 Use tasks again to add the "buttons" needed if we had a giant screen(G3F FB %B 3 r_ж_жDjJ?XX  &  t_ж_ж    BlCDEF @  jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||lT @ d * k '  f+_ж_жG+EH` jJ?k@ m1 Based on data and tasks, design the graphical data presentation. Reuse from task to task whenever possible.(n3m m:z a0  : a0,$D 0B ( 3 r_ж_жDjJ? aP  )  `P1_ж_ж jJ? 000 nSome of the test cases l  m  >%  ,$D 0   Z_ж_жJ-/A jJ ?. B -    `5_ж_ж jJ? `L  +4 Visualize the functions and make a mockup*,3+ +B   3 r_ж_жDjJ? m B = # l_ж_жDjJ?0  H  0޽h ??0$' ̙33&___PPT10+PzGFD' = @B D' = @BA?%,( < +O%,( < +D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*E%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*F%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*K%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*L%(Dn' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*I%(D' =+4 8?dCB0-#ppt_w/2BCB#ppt_xB*Y3>B ppt_x<*ID' =+4 8?\CB#ppt_yBCB#ppt_yB*Y3>B ppt_y<*IDn' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*J%(D' =+4 8?dCB1+#ppt_w/2BCB#ppt_xB*Y3>B ppt_x<*JD' =+4 8?\CB#ppt_yBCB#ppt_yB*Y3>B ppt_y<*J+5 :(2(P"3@p'(  @)l PP@ 3@PP@,$D 0  @  ` oo(R T A  @  `xwo2S| T At  PP@ *@ PP@,$D 0L  @ T0~_ж_ж? PP@,$D 0 F When many guests are booked, the user should imagine that there is a whole pile of Stay windows. The Rooms window doesn t belong to any particular Stay, so we would confuse the user if we combined Stay and Rooms into one window. A Stay and a Rooms window seem to be sufficient for booking.$@2$  %@  f Ԕ?2 P  O432 @ N䍋_ж_жo0 P 0*. Virtual windows, plan$ R @ T_ж_ж?;P@ b  n The first part of the design is a plan for the user interface screens: how many screens and which data do they show? At the beginning we don t care about buttons and other functions on the screens. Our first screen versions are what we call Virtual Windows. We make the plan by looking at the tasks one by one.28@27  @ <Ф  xVirtual windows:$  "@  f  Ԕ?< O13 & @# &,$ 0 @ B nTasks:$   @ Hf&,$D 0 lBook$ x[l PU ! .@UP !,$D 0] @ Z\ċo U ,$D 0 !Rooms prices, type status, date2"" xzT P @ ! (@# P @ !! @ Z\ŋ_ж_ж?P @ !,$D 0 [ Let us look at the booking task. What data would the user need to see to carry out this task? He has to see whether there are free rooms when the guest needs them, the prices of the rooms, etc. We plan to put this data into some kind of Rooms window.2@2   #@  fҋ Ԕ? -  O23l Pe@  2@eP@ ,$D 07  @  `݋oe )Stay name, address period booked rooms2*%* AT P@  )@# P@ v @ Tt_ж_ж?P@ ,$D 0 V The user also needs to record the name and address of the guest, the room he has booked, etc. We plan to put it into some kind of Stay window that shows the guest s stay.2@2%  $@  f Ԕ? O33l P  0@P ,$D 0 @ H$a,$D 0 dCheck-in   x@  0P  +@ 0P   @ T_ж_ж? 0P ,$D 0  Next we look at the check-in task. Which data does the user need here? If the guest hasn t booked in advance, the user needs the same as for booking: the Rooms window and a new Stay window. The functions he uses are a bit different, but the data are the same. If the guest has booked, the user needs to find the proper Stay from the pile. For the moment we will ignore the details of how he finds this Stay. So it seems that we don t need any new windows for check-in.2@2  &@  f0  Ԕ?2 0  O53~l P& 1@P&,$D 0' @ HL\,$D  0 s Change room$   x@  P& ,@ P& @ T_ж_ж? P&,$D  0  The next task is Change room. The guest wants to move to another room. Again, the user can handle it by means of the above two windows.@2  '@  f' Ԕ?2 =  O63H @ 0޽h ? ̙33v n ___PPT10N + D2 ' U= @B D ' = @BA?%,( < +O%,( < +D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*.@%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*2@%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*3@%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*0@%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*1@%(+< ((`"@D (( w DX  %D# ,$D 0 D  `<o(O @ D  `H oCK @ D  `=or h bednights, price servings, price!!! D BBP,$D 0 RCheckout  Nz  P 5D  P,$D 0 D  `22жԔ?  P,N P 4D  P (D  `Jo .P @ )D  `Mo Q @ *D  `Po  h bednights, price servings, price!!! +D H`U ,$D 0 RCheckout  2 D NS_ж_жo0 P 0*. Virtual windows, plan$  D <8f nTasks:$ U D Z@moU ,$ 0 !Rooms prices, type status, date2"" x D  `too(R T A  D  `no2S| T A/  D  `oe )Stay name, address period booked rooms2*%* A D Ha,$D 0 dCheck-in   x D H\,$D 0 s Change room$   x D H f& lBook$ x D T_ж_ж?P ,$D 0 2 This means that the user may see too much data during the booking task, but it doesn t matter right now. It is more important to have few windows to help the user form a good mental model of what goes on.*@23   /D B* ,$D 0 fRecord breakfast & Services.l  c  1D c ,$D 0 -D Zo  ,$D 0 T A .D ZȌo 9 ,$D 0 T An 0D ZьoI c ,$D  0 2Breakfast list date room#, type, servings . . .23$3 A 2D Tٌ_ж_ж?  ,$D 0 \3 The last task on our list is Record breakfast & Services. Do we need a new window for this? In principle no. The user can just find the right Stay window and with appropriate functions record the service there. However, in many hotels, the breakfast restaurant has a list with all the room numbers, and they write on it which rooms got which breakfast. Entering this long list by finding one room at a time is too cumbersome. We need a special window - a Breakfast list for each day.*@23  3D T_ж_ж? @ ,$D 0 4 This solution is very efficient to the user, but may also be confusing because the user now sees the service data in two places: in the Stay window and in the Breakfast list. Is it the same data - or must he do something to transfer it from one to the other? This is an example of the trade-off between efficiency and understandability that we sometimes have to make. Efficiency won in this case.:@23  6D <ߌ  xVirtual windows:$ l P  ?D P ,$D  0 D Z_ж_ж?P ,$D 0 T Check-out is a more interesting task. Again the user needs to find the guest s stay, but he needs more data than before: The services the guest has got, the tax calculation, etc. Should we make new virtual windows for this as the figure shows? No, a basic design rule says: don t make many windows, but reuse those you have. So instead we extend the  old Stay windows with the price stuff.@2  ;D  f(  Ԕ?   O13H D 0޽h ? ̙33___PPT10+ D' U= @B DE' = @BA?%,( < +O%,( < +D8' =%(%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*%D%(D' =%(D' =4@BBBB%( D' =1:Bvisible*o3>+B#style.visibility<*?D%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*5D%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*D%(D2' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*/D%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*2D%(D4' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*1D%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*3D%(++0+D0 ++0+/D0 ++0+2D0 ++0+3D0 +3 !!p4@!(  L P '# P ( Z )o.P @ ) Zx,oQ @ * Z.o h bednights, price servings, price!!! + BL2,$D 0 RCheckout  2  Np_ж_жo0 P 0*. Virtual windows, plan$    <@  Tasks: Virtual windows:$    `Lo  ,$D 0 T A   `LSo 9 ,$D 0 T A  H,Zf& lBook$ x   Hc* ,$D  0 fRecord breakfast & servicesl    `lgoI c ,$D  0 2Breakfast list date room#, type, servings . . .23$3 A[    `@soU ,$D 0 !Rooms prices, type status, date2"" xl  ,$D 0   `@to(R T A   `4o2S| T A7   `oe )Stay name, address period booked rooms2*%* A  H( A ,$D 0 V Price change  N  Z o m ,$D 0 Service prices type, price2  A[   `po ,$D 0 !Rooms prices, type status, date2"" xB  s _ж_жDjJ?H' ' ,$D 0    Ba,$D 0 dCheck-in   x ! B\,$D 0 s Change room$   x  , T4č_ж_ж? 2,$D 0 T1 By now we have virtual windows for handling all the tasks on our list. But how can we be sure that our list is complete? There are many checks we can make. One of them is to see whether the user can change all data in our system. A cursory check reveals that there is no way to change service prices. We can only see the service prices in the Stay windows. But changing the price there would be strange. We need a new task, Price change, and a new window with service prices.*@23   - Zҍ_ж_ж? R ,$D 0 L2 During the price change task, the user should also be able to change room prices. Can he do this? Yes, the Rooms window has the room prices, and we can just let the Price-change task access the Rooms window too.*@23  . Z܍_ж_ж?p D,$D 0 3 Chapter 6 of the book explains more about choosing the right virtual windows, checking that we got the right ones, etc. From an object-oriented perspective, the virtual windows are the objects the user should imagine - the user s static class model. Later in the design process, we add operations (methods) to these objects. :J@23GI H  0޽h ? ̙33___PPT10|+NDH' U= @B D' = @BA?%,( < +O%,( < +D2' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(D' =%(D' =%(DT' =A@BBB B0B%(D' =1:Bvisible*o3>+B#style.visibility<*-%(D' =-6B'blinds(horizontal)*<3<*-D' =%(D' =%(DT' =A@BBB B0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(D' =-6B'blinds(horizontal)*<3<*D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*%(D' =%(D' =%(DT' =A@BBB B0B%(D' =1:Bvisible*o3>+B#style.visibility<*.%(D' =-6B'blinds(horizontal)*<3<*.++0+0 ++0+0 ++0+0 ++0+-0 ++0+.0 +< .~.)v$0 .( ޽h $L $ N_ж_жo0 P J*. Virtual windows, graphical version$&%#  $ c     BC DE,F @  Ԕ 8c8c     ?A)BCD|E|| p8P p @   `G F $      BC DE,F  Ԕ 8c8c     ?A)BCD|E|| p8P p @   `[D F  $      BC DE,F  Ԕ 8c8c     ?A)BCD|E|| p8P p @   ` B  $ # lDo?G  $  f  o?  /Stay Stay#: 714 Guest: Address: Payment: L0  Dj $  f o? & Item #pers 7/8 Room 12 8/8 Breakf. @%@ %,Dj $ BjJ G_j $ BjJ_ Goj $ BjJo 3j $ BjJk1?j $ BjJXk1j $ BjJk1lj $ BjJk1 j $ BjJ4 k1 \ )$ T%_ж_ж? ,$D 0 1 The plan for the virtual windows may look convincing and logical, but is it realistic? Can the windows show realistic data and can the user understand the windows? The only way to find out is to make a detailed graphical design. Here is the Stay window in graphical form. Although it looks primitive it is close to what we could have on the real screen. We can to some extent test that users understand what it shows, and they may nod and say it looks alright. But if we fill in realistic data, we suddenly understand much more. D@23% b /$  `7 o? ,$D 0 6 John Simpson 456 Orange Grove Victoria 3745 Visa274 D l P  2$ ,$D 0B $ 3 rDo?P   0$  `x@ o?o ,$D 0 x , sgl 1 60 rest 1 4 8/8 Room 11, dbl 2 80 9/8 Breakf. room 2 12 9/8 Room 11, dbl 2 802c@ x,9#DG 3$ TM_ж_ж?  ,$D 0 2 We now see that the space for name and address is much too small. Further, the detailed items for the stay show a slightly unusual situation: A guest checks in to a single room and gets breakfast in the restaurant. The next day he moves to a double room and gets two breakfasts in the room. Below the dotted line we have shown that he has booked the room one more day. This is shown as one stay, but is it really two? It is important to review such issues with an expert user. Virtual windows with realistic data allow us to do this.*@23 #z ! F, <  F$ F < ,$D 0- N $ F, T G$ $ F, TN H$      BPCpDE,F  Ԕ 8c8c     ?A)BCD|E|| @PPPXP p @   ` F, N I$      BPCpDE,F  Ԕ 8c8c     ?A)BCD|E|| @PPPXP p @   `x p *N J$      BPCpDE,F  Ԕ 8c8c     ?A)BCD|E|| @PPPXP p @   `$  TM K$  `^ o?5   5Breakfast 9/8 In In R# rest room 11 2 12 1 13 1 1J @ ,hB L$  `Do?$  B M$  `Do?4 4 B N$  `Do?C C l O$ <jJP  +l P$ <jJ K +l Q$ <jJP O l R$ <jJ OK l S$ <jJP  gl T$ <jJ K g| U$  `hl Ԕ?!  <  4Service charges Breakf. rest. 4 Breakf. room 6 . . .J`2%, l V$ <jJ t l W$ <jJ  X$ T,n_ж_ж? },$D 0 3 Here is the graphical version of the virtual breakfast window and the service charge window. All of these virtual windows are fairly easy to make with typical development tools. Notice that there are no buttons, menus, etc. in the virtual windows. They are unimportant at this stage, and we add them later. The virtual windows deal with data presentation - not with the functions.,@23 H $ 0޽h ? ̙33___PPT10 +~"D+ ' U= @B D ' = @BA?%,( < +O%,( < +D' =%(D' =%(DT' =A@BBB B0B%(D' =1:Bvisible*o3>+B#style.visibility<*/$%(D' =-6B'blinds(horizontal)*<3<*/$D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*2$%(D' =-6B#blinds(vertical)*<3<*2$DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*3$%(D%' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*F$%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*X$%(++0+/$0 ++0+3$0 ++0+X$0 +: 55.DH@e5( w HL H Nl_ж_жo0 P J*. Virtual windows, graphical version$&%# !8 ! F, <  @HF < [ @ $ F, T ?H$ F, TN H      BPCpDE,F  Ԕ 8c8c     ?A)BCD|E|| @PPPXP p @   ` F, N H      BPCpDE,F  Ԕ 8c8c     ?A)BCD|E|| @PPPXP p @   `x p *N H      BPCpDE,F  Ԕ 8c8c     ?A)BCD|E|| @PPPXP p @   `$  TS H  fT o?5   5Breakfast 9/8 In In R# rest room 11 2 12 1 13 1 1J @ ,hB H  fDo?$  B H  fDo?4 4 B H  fDo?C C r H BjJP  +r H BjJ K +r H BjJP O r H BjJ OK r H BjJP  gr  H BjJ K g "H  f Ԕ?!  <  4Service charges Breakf. rest. 4 Breakf. room 6 . . .J`2%, r #H BjJ t r $H BjJ  %H T_ж_ж?  ,$D 0 N1 Finally we have a graphical version of the virtual rooms window. We use a matrix form (like a spreadsheet). There is a line for each room and a column for each date. Occupied rooms are shown by O and booked rooms by B. We may need to show a long list of rooms and dates, so on the final window we would need scroll bars. This window is hard to make with most development tools, particularly if we also want the user to mark cells in the matrix and book rooms this way.*@23  'H  f䳏 o? <  qRooms Prices 7/8 8/8 9/8 10/8 11 Double, bath 80 60 O B 12 Single, toil 60 O O B B 13 Double, toil 60 50 B B BLre.  l   (H c     B CDE8F" @  Ԕ 8c8c     ?A)BCD|E||b  D4{eXOb@    `  B )H  fDo? @B *H  fDo?N  N  +H  `22ж jJ?T X @ ,H  _ж_ж    BCDEF  g  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||` @`c H  -H c     BC DE,F @  Ԕ 8c8c     ?A)BCD|E|| p8P p @   `G F .H      BC DE,F  Ԕ 8c8c     ?A)BCD|E|| p8P p @   `[D F /H      BC DE,F  Ԕ 8c8c     ?A)BCD|E|| p8P p @   ` B 0H  fDo?A 1H  ``ُ o?  /Stay Stay#: 714 Guest: Address: Payment: L0  Dd 2H  `  o? & Item #pers 7/8 Room 12 8/8 Breakf. @%@ %,Dd 3H <jJ G_d 4H <jJ_ God 5H <jJo 3d 6H <jJk1?d 7H <jJXk1d 8H <jJk1ld 9H <jJk1 d :H <jJ4 k1 b ;H  `  o? ,$D 0 6 John Simpson 456 Orange Grove Victoria 3745 Visa274 Dz P  H  ` o?o ,$D 0 x , sgl 1 60 rest 1 4 8/8 Room 11, dbl 2 80 9/8 Breakf. room 2 12 9/8 Room 11, dbl 2 802c@ x,9#D AH Z _ж_ж? ,$D 0 2 How do we come up with good graphical designs? It is a creative art, but these principles help: 1 Look at standard ways to show data. 2 Use gestalt laws. 3 Try realistic and extreme data (e.g. typical work situations and extreme data volumes). 4 Know the development tools so that you don t come up with unrealistic designs. The book explains more on this in Chapters 3 and 6.d@2]@23`8Y~xH H 0޽h ? ̙33___PPT10+U{vDO' U= @B D ' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*AH%(+8+0+AH0 +. ,T@ (  T T NH)_ж_жo0@P v*. Show tasks with data for cheking. Design search windows$<;4  Vl P `  "T}P 0 ,$D 0j T TN@@@@Ԕ?P `   Task: 1.2 Checkin Start: A guest arrives. Sub-tasks: Virtual windows: 1. Find room. Rooms. Crit: type, period. 1a. No suitable room. Rooms. Crit: period. 1b. Guest booked. FindGuest, Stay. Crit: name, ... 2. Record guest Stay, Rooms. as checked in. . . .0* 2  #   %/  :b M0  A hB T # l_ж_жDԔ?P B T # l_ж_жDԔ?P? ?B T # l_ж_жDjJ?P B T # l_ж_жDjJ?P B  T # l_ж_жDjJ?P B  T # l_ж_жDjJ?P B  T  `22жDjJ?` 2 T NG_ж_ж? ,$D 0 1 When the user has to select data from a large data set, search criteria are usually needed. To identify these needs, we look closer at the tasks and check that the necessary data are available in the virtual windows. For Check-in it looks like this.8@23 e l P t E #T Pt E,$D 0 T Nc22ԔP t E BFind guest from Stay# (any) Name (any) Room# (any) Phone (any) Date 28-08-2002 Guest Arrival Room# Stay# John Simpson, 456 Orange 07-08-2001 12 714 Lise Hansen, Dyssegaards 08-08-2001 12 753 Yun Chen, Kirchgasse 6 08-08-2001 13, 14 749 ; 8 B T NLPFPFjJp <  q Search F3$   X`R T 0 [h  T  `_ж_ж jJ? D B T # l_ж_жDjJ?$ % B T # l_ж_жDjJ? B T # l_ж_жDjJ?  T  f_ж_ж jJ?E   T  f_ж_ж jJ?E w B T 3 r_ж_жDjJ?  B T 3 r_ж_жDjJ?EW W N  m  T   1 N  T  f_ж_ж jJ? m B T 3 r_ж_жDjJ? qm qY  T T0j_ж_ж? ,$D 0 2 Look at sub-task 1, Find room. The user may have to choose among hundreds of rooms and select dates a year ahead. The table shows that search criteria such as the room type and the period for the stay are needed. We can conveniently add these criteria as fields to the Rooms window.8@23% d $T Tx_ж_ж? @N ,$D 0  3 When we check in a guest who has booked already, the table shows that we need to see his Stay window. But first we must find him by name, phone number, arrival date, etc. We need a new virtual window for this, FindGuest. Here is a possible graphical design of it.D @23 -( - l !T T_ж_ж?P @ ,$D 0 $4 The designer couldn t resist putting a Search button on the screen, but in principle, buttons belong to a later stage in the systematic design.D@23)c H T 0޽h ? ̙33___PPT10+3+ D ' U= @B D ' = @BA?%,( < +O%,( < +D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*"T%(D' =-6B#blinds(vertical)*<3<*"TDA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* T%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*$T%(D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*#T%(D' =-6B#blinds(vertical)*<3<*#TDA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*!T%(++0+ T0 ++0+$T0 ++0+!T0 +rW 'NN/[pPsM(  p< p N<_ж_жo0 P :*. Checking the design so far$    p N<ʐ_ж_ж?  ,$D 0 Z1 Until now the design has been driven by the designer s understanding and logic. It is time to see whether users understand the virtual windows. Show a user the virtual windows one by one. Don t explain what they show, but ask what the user believes they show, whether something is missing, etc. We call this an understandability test.lR@23PnvQ A z  8   Tp 8  ,$D 0  p  f_ж_ж Ԕ? g   Stay CRE CRED R RE RED R Rooms CREDO RE O Breakfast R CREDO R Service charges CREDO Missing? DO O (C D) 8p  "p T<?= Id  -Guest Stay Room RoomState Service ServiceType(@(`..~ #p N Ԕ? 8  T 8 X $p#  8 ) B %p T DԔ?X~B &p N D?X~B 'p N D?LLX~B (p N D?  X~B )p N D?  X~B *p N D?8 8 XT  A  2p#  P `B +p T D? A B ,p T D?0 A0 B -p T D? A B .p Z DԔ? A B /p Z DԔ? 8 `  0p NX? X   RDatabase   1p N?, 9   V Virt. window  1L `  Mp#   5p      B` C DEFf  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| hX `   @``   Hp      BCDEF g  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||d< @`< X  Gp      B|CDEF g  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||X|, @`   6p      BCDEF g  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||`> @` Z   9p      BxCZDE@F"f  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||JRdtv x.f@HHGSZJ8 .J@     ` $  >p      BCDEF g  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||UT @`  f  ?p      B{CcDELF&f  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||I4=!'D:Z2[bcpQsG{,y aSI KI@      `Q.   @p      BCNDELF&f  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||4O!*BNkFk>%*p=(_4@      `m C  Fp      BpCKDELF&f  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||.4%1&<Z Bpm)h2ZKDB,7@1,9.4@      ` V  Ep      BCkDE4F  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| ]^keU_-Z8]v @    < 3  Ap  f    B8CDEFD 5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||++0"O.  F^urfa`+;$cp& yQH/*<D8=gr @              y  Bp S  BZC2DEFjJ?2Z@ . P Cp      B/C(DEtF6 jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||0 @k%)/ ( $nP[5)N,3Fl  0@         `] i ( :p      BCDEXF*f g  8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||3'e"+`yi?o3@       `| a  Ip      BCDE@F"f3 jJ 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||&4J2+BnwakHW &4@     `k e  Jp S  BCDEF1?@ 4 M  Kp S  BC DEF1?   @ < J  ;p  f    B CnDEFD 5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||++oI$h'6 -+C?Y\PKE ! yVdRoAJ78&,&R:AXnM9C @               C  Np Z_ж_ж?>bA,$D 0 HUser(@2* Op Z_ж_ж? &,$D 0 lDesigner Records problems6   Pp C xp@@GdH ?_ @This shows ... y Rp N_ж_ж? ,$D 0 ?2 For the rooms window, expert users told us that seasonal prices were missing. Some non-expert users thought that O (Occupied) in the matrix meant zero, meaning that the room was free - a bad mistake to make in a reception. At this stage, it is cheap to repair such defects - even to redesign several virtual windows.<@@23=? r Sp N _ж_ж?P ,$D 0 63 We can also check the internal consistency of our design. Here is an example: a check that all relevant data in the database can be handled by the user through some virtual window (assuming reasonable functions). C means that the data can be Created, R read, E edited, D deleted, and O that the user gets an overview of this data. The last line shows what is missing: There is no window that can delete a guest, although his stays can be deleted. Further there is no overview window for many guests or many stays (the FindGuest window - added later - helps here.),7@236( %  Up 3 r#G) H~w ?>  CUser believes ... H p 0޽h ?/ PpUp ̙33___PPT10+JǘD?' U= @B D' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*Rp%(D' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*Sp%(D' =%(DG' =4@BBB B%(D' =1:Bvisible*o3>+B#style.visibility<*Tp%(D' =-6B'blinds(horizontal)*<3<*Tp+p+0+Rp0 ++0+Sp0 +I" Fx0( oAJ7 xJ x N2_ж_жo0 P H*. Function design, the booking task$%$"  /x N<>_ж_ж?   ,$D 0 d1 The next part of the design is to add functions to the virtual windows. We place the virtual windows on a desk as if we had a giant screen. Then we look at the first task, Booking. Our desk would look like this.,@23,q$A  :x NI_ж_ж?7P@ ,$D 0 32 The first step of booking is to find free rooms. To do this, the user would use the Rooms window, fill in some search criteria, and activate a search function. We record it like this: ,@23 F x  `m_ж_ж jJ?R  ,$D 0  Choose room0 ,hl ~P Cx~,$D 0FN ~P Bx ~P 1x  fv_ж_ж jJ? N  x vwFindGuest:$  h 2x  f4_ж_ж jJ?(  tvwRooms:$  ,h` 3x 0o<!A  )  4x  f艒_ж_ж jJ?F^ svwStay:$,h 5x  f_ж_ o?   Task: Booking 1. Find room 2. Record guest 2a. Regular guest 3. Record booking 3a. More rooms 4. Print confirmation (optional)2 r8 8x  `_ж_ж Ԕ?~PZ @x s *`XA   ` Ax 0I `Te>A  p H x 0޽h ? ̙33IA___PPT10!+D% ' U= @B D ' = @BA?%,( < +O%,( < +D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*Cx%(D' =-6B#blinds(vertical)*<3<*CxDA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*:x%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*+B#style.visibility<*=x%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*>x%(++0+:x0 ++0+x0 +r2 !L(  P  N_ж_жo0 P N*. Function design, recording the guest$('%    f8_ж_ж jJ?   x vwFindGuest:$  h    fƒ_ж_ж jJ?(  tvwRooms:$  ,hX  0o<!A       fϒ_ж_ж jJ?zF^: svwStay:$,h   fْ_ж_ o?p I Task: Booking 1. Find room 2. Record guest 2a. Regular guest 3. Record booking 3a. More rooms 4. Print confirmation (optional)2 r8  N_ж_ж?  |,$D 0 A5 If the user found the guest, he will select the guest (SelectLine) and activate a NewStay function. We now have three functions on vwFindGuest. ,@23L9 *  F   `P_ж_ж jJ?D. ,$D 0  FindRooms0   ,h   `_ж_ж jJ?D    Choose room0 ,h  N _ж_ж?  @ ,$D 0 <4 The next step of booking is to record the guest. The user might first check whether the guest is a regular. Here we need a FindGuest function in vwFindGuest.,@23:}     N_ж_ж?  ,$D 0 M6 NewStay will create a new version of vwStay and fill it with guest data. The user may review the data with the guest. We record this edit function since it is not so obvious.,@23: :   `_ж_ж jJ?  4 ,$D 0 v FindGuest$   hD   `)_ж_ж jJ?  @,$D 0  SelectLine NewStay$h;   `,2_ж_ж jJ?zF,$D 0 w (EditData)$   ,h<   `<_ж_ж jJ?  ,$D 0 x NewGuest$   h  N F_ж_ж? 9,$D 0 T7 If the user didn t find the guest, he uses another function, NewGuest. It also creates a new version of vwStay, but leaves the guest data empty for the user to fill in. Our function list now looks like this.,@23N?#U  \  NXY_ж_ж?,$D 0 28 We have planned these functions according to a strict sequence of task steps, but the user need not follow this strict sequence. In our case, he could for instance record the guest first and select a room for him later. The functions don t care about the sequence in this case.,@23 8 ~P ~    `_ж_ж Ԕ?~PZ  s *`XA   `  0I `Te>A  p H  0޽h ? ̙33RJ___PPT10*+1)DN' U= @B D ' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(++0+ 0 ++0+0 ++0+0 ++0+0 ++0+0 ++0+0 ++0+0 ++0+0 +N1 ( w R  s *`XA    X  0I `Te>A    T  Nlz_ж_жo0 P R*. Function design, recording the booking$*)'   N䅖_ж_ж?   V,$D 0 9 The next step of the booking task is to record the booking. We need a Book function and it seems convenient to put it on vwStay.,@23({   Z22жԔ? x ,$D 0;   `t_ж_ж jJ?   3vwFindGuest: FindGuest SelectLine NewStay NewGuest04 &4hY   `_ж_ж jJ?D  ,$D 0 vwRooms: FindRooms ChooseRoom0 ,hR  s *o<!A      `_ж_ж jJ?zF vwStay: (EditData)0 ,h   `_ж_ o?p I Task: Booking 1. Find room 2. Record guest 2a. Regular guest 3. Record booking 3a. More rooms 4. Print confirmation (optional)2 r8  Z_ж_ж Ԕ?~  N콖_ж_ж?0  r,$D 0 J10 However, if the user first recorded the guest data and next found a room, it might be convenient to have the Book function on vwRooms. Why not have it in both places? Let us plan for this.,@23(8   Ndʖ_ж_ж?  ,$D 0 V11 While the previous functions didn t care about the step sequence, Book does. It requires that a room and a stay are selected. What is selected first doesn t matter, however. Book also makes the real thing: it records the guest data and changes the room state to booked for the stay period. During the design we record such rules and what each function does in the form of mini-specs. Here is part of the mini-spec for Book.h@23g  *   N˖_ж_ж?w ,$D 0 j12 Record booking has a variant: The guest may want more rooms. Which new functions are needed for this? <k@23gi z  N`_ж_ж?P  ,$D 0 L None! The user can just apply FindRooms, ChooseRoom, and Book once more. M@2M,!   D   `l_ж_ж jJ?D0 ,$D 0  Book?0  ,hC   `_ж_ж jJ?PFC ,$D 0  Book 0,h  C x_ж_жG;HcfjJ? a ; ,$D 0 Mini-spec: Book. One or more rooms must be selected and guest data adequately filled out. Record guest data and Set RoomStates to booked.L $  R H  0޽h ? ̙33___PPT10+9ĪD#' ,~= @B D' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(D_' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*%(D' =+4 8?dCB0-#ppt_w/2BCB#ppt_xB*Y3>B ppt_x<*D' =+4 8?\CB#ppt_yBCB#ppt_yB*Y3>B ppt_y<*++0+ 0 ++0+ 0 ++0+0 ++0+0 ++0+0 ++0+0 ++0+0 + , "(    P  NL,_ж_жo0 P N*. Function design, remaining functions$('%   N2_ж_ж?  0 V,$D 0 /13 The last step of the booking task is to print a confirmation if the guest wants it. It is easy. We just need a PrintConfirm function on vwStay.,@23:q   F ~P  ~=   f>_ж_ж jJ? f 3vwFindGuest: FindGuest SelectLine NewStay NewGuest$4 '4h-   fG_ж_ж jJ? 6  #vwRooms: FindRooms ChooseRoom Book?$$ $,h`  0o<!A  ) -   fP_ж_ж jJ?F vwStay: (EditData) Book0,h    fp\_ж_ o?   Task: Booking 1. Find room 2. Record guest 2a. Regular guest 3. Record booking 3a. More rooms 4. Print confirmation (optional)2 r8    `_ж_ж Ԕ?~P3  Ng_ж_ж? ` :,$D 0  14 In order to find the remaining functions, we walk through the other tasks in the same way. Many of the booking functions are reused in other tasks, but around 20 new functions are needed. Here are some of them (Chapter 7 shows all of them and their mini-specs)., @23 L   `w_ж_ж jJ?jFM ,$D 0  PrintConfirm 0 ,h  N_ж_ж?  7,$D 0 j15 What have we done at this stage? We have identified and described all the functions needed if we had a huge screen with space for all the virtual windows at the same time. In practice, this is not realistic. We have a much smaller screen and the user needs to navigate between screens. In the next slides we show how to deal with these navigation functions.Jk@23Si   Nܓ_ж_ж?Q,$D 0 J16 One thing more is missing. We have not decided what form the functions should have. Are they menu points, buttons, drag-and-drop? The answer depends on the software platform we work on, the user s experience, and other factors. This is function presenta-tion, and we will look at it later.Z&@23 :  p   `_ж_ж jJ?W  ,$D 0 ,Checkin? RepairRoom AddRoom DeleteRoom . . .8-'33-,he   `ܥ_ж_ж jJ? @d ,$D 0 !Checkin Checkout AddService . . .8"33",hO   `l_ж_ж jJ?x X,$D 0 FindStay OpenStay ResetSearch&3,hR  s *`XA    X  0I `Te>A    H  0޽h ? ̙33!___PPT10+DU' U= @B D' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(D#' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(++0+ 0 ++0+0 ++0+0 ++0+0 ++0+0 ++0+0 ++0+0 +.    :v (    Z  N$җ_ж_жo0 P X*. Navigation functions, page-based platform$-,*   Nݗ_ж_ж?  ,$D 0 "1 The necessary navigation functions depend on screen size and the software platform. First we will look at the case where the computer screen shows only one page of data at a time. Web-based systems and older computer systems are of this kind. Each page may be divided into several frames. Should we simply show one virtual window at a time as a single page? No, this would require that the user toggles between several pages during a single task. It would be better to show two or more virtual windows in the same page. How could this be done?h#@23y" M  N_ж_ж?  ,$D 0 -2 Our solution is to compose four screens as shown. The sSearch screen shows vwRooms and vwFindGuest as two frames. This screen is used for the first part of Book, Checkin, Checkout, etc. The sStay screen shows vwRooms and vwStay as two frames. This screen is used for the second half of Book, Checkin, etc. where we have found the guest. The sBreakfast screen shows only vwBreakfast. It is used for entering the breakfast list. Similarly, the sServiceList screen shows only vwServiceList. It is used for changing service charges, adding new services, etc.J.@23"8 @A*  =  E  * N_ж_ж?  ,$D 0 3 How will the user navigate between these screens? Some of our functions do it naturally. Look at the NewStay function. What would it do?,@23(g  + N_ж_ж? ,$D 0 l4 The user would activate it from the sSearch screen, and the system would switch to the sStay screen, as we have indicated with the red label on the arrow. Let us see which screens we can reach in this way.,@23:&,r / ,  f822ж Ԕ?yU ` ,$D 0 eNewStay(3l vI 6,$D 0d N vI 5 vIN v?  4 v? "   `жж G Ԕ??   3 r8PFPFԔ?v SsSearchT  2 R F #  2 R F   `|!PFж o?<   e vwServiceList& "  Zжж G Ԕ? } R F  # l'PFPFԔ?H2   X sServiceList   N  x   3  x  "    `жж G Ԕ?    ! 3 r*PFPFԔ? x  QsStayT : I "# : I #  `.PFж o?  c vwBreakfast&   " $ Zжж G Ԕ? I % # lL2PFPFԔ?':   V sBreakfast   B & # l22жD)?p 6 ' # l622ж Ԕ? Z  ,First part of Book, Checkin, Checkout . . .(-,6 ( # l <22ж Ԕ?   ,Second part of Book, Checkin, Checkout . . .(-,@   0  / 5 P    fdAPFж Ԕ?( 0  ^vwRooms vwFindGuestB . Z22жDjJ?  N   0  0  5 P   1  `LEPFж Ԕ?( 0  uvwRooms vwStay* B 2 Z22жDjJ?  H  0޽h ? ̙33  ___PPT10q +y0Du ' U= @B D0 ' = @BA?%,( < +O%,( < +D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*6%(D' =-6B#blinds(vertical)*<3<*6D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<**%(D2' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*,%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*+%(++0+ 0 ++0+*0 ++0++0 ++0+,0 +Z DD4C( 2 P Yl 0. {v  N 0{ ,$D 0 F c жж    BjCDEF33 o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||j8Z@ 0x L  G c жж    B4CfDEF33 o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||fv4@  4  H c жж    BC~DEF33 o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||<^~@  "G  I c жж    BClDEF33 o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||l"J@ l {4  J  `]жжԔ? A  TReturn 33 K  `8W\`жжԔ?   TReturn 33 L  `]жжԔ?=.   Z RecBreakfast  33  M  `ٝ6T_жжԔ? Jv  [ EditService   33 Z  Ni_ж_жo0P X*. Navigation functions, page-based platform$-,*  ; Npv_ж_ж?  b,$D 0 #1 Here we have added arrows that show all the screen switches our old functions can make. Not that many, really. NewStay, NewGuest and OpenStay should all switch to sStay. There is also a function DeleteStay, used when the guest cancels a stay. It should switch from sStay to sSearch.<@23q <  < Npw_ж_ж? &,$D 0 2 What will the dozens of other functions do? Various interesting things, but they don t switch to another screen. We can show these functions on a curly arrow that leads back to the same screen.,@23 z l 6 CI,$D 0 =B  жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ s( >  Zжж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@  0    ? Z4жжԔ?` 0FindRooms Repair, Add ... FindGuest FindStay ..., @21 1 @ ZжжԔ?`   aAddService DelService ... ) A Z,жжԔ?c @  5FindRooms Book, Checkin PrintConfirm, Checkout . . .060   6 B  Zжж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ E 6 E N_ж_ж? b,$D 0 J3 As you can see, we need some new functions: Navigation functions that can switch from sSearch to sBreakfast and return again. Similarly for sServiceList.,@23LX !   O N$_ж_ж?`,$D 0 :4 We also need another function to switch from sStay to sSearch. At present we can only do it by deleting the stay. A close or return function is needed too.,@23:/_  P ZжжԔ?  2 ,$D 0 TReturn 33 Q N_ж_ж? ,$D 0 K5 Now we have all the functions needed for a page-based dialog, including navigation functions shown in green. For each screen, the diagram shows all the functions to be available.J@23  R Nǘ_ж_ж? ,$D  0 8J6 In software-development termino-logy, the diagram is called a state diagram. It shows the possible states of an object and how the object changes from one state to another. In our case the object is the screen. It would be convenient if the system started in state sSearch. Web designers often call such a diagram a flow chart.hK@23@  P# F     N     8 N     T v?  n# ? " o Zжж G Ԕ??  p # lؽPFPFԔ?v SsSearchT  2 R F q#   R  r  `٘PFж o?<   e vwServiceList& " s Zжж G Ԕ? } R F t # lݘPFPFԔ?H2   X sServiceList   T  x   u#    " v Zжж G Ԕ?    w # l8PFPFԔ? x  QsStayT : I x#   y  `PFж o?  c vwBreakfast&   " z Zжж G Ԕ? I { # lPFPFԔ?':   V sBreakfast   T   0  #       `PFж Ԕ?( 0  ^vwRooms vwFindGuestB  Z22жDjJ?  T   0  #       `PFж Ԕ?( 0  uvwRooms vwStay* B  Z22жDjJ?     жж    BCnDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||nb`@ >   c жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||YIh@ ? 3    `(жжԔ?5 ; aNewStay NewGuest OpenStay    `жжԔ? J  R DeleteStay   H  0޽h ? ̙33F>___PPT10+3-D' U= @B Dm' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*<%(D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*C%(D' =-6B#blinds(vertical)*<3<*CDA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*E%(D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*N%(D' =-6B#blinds(vertical)*<3<*NDA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*O%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*P%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*Q%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*R%(+P+0+<0 ++0+E0 ++0+O0 ++0+P0 ++0+Q0 ++0+R0 +:8 !!  EM!( w  l P  ;P ,$D 0 @ P  6P "   `жж G Ԕ?P N ]    NO~   Nжж o?]  ~2 ! Nжж o? < N  <  " ~ < B #  `жж Do? < B $  `жж Do? ? N   %   O~ & Nжж o? ~ ' Nжж o?! ? q B (B  `жж Do?J T q u B )B  `жж Do?J c q B *B  `жж Do? ` n `  + Zжж o? ` J  ,  fжжo?R *  c vwFindGuest&    0  f$PFжo? E  d vwBreakfast&    9 # lX)@@GOHQ? @  :Bed icon   : # l.@@GHs? / @Breakfast icon ^  N0_ж_жo0P \*. Navigation functions, window-based platform$/.,    Nx;_ж_ж?   b,$ 0 n1 In a window based system, the computer screen may contain several small  screens at the same time - usually called  windows . This allows us to show each virtual window as a separate  screen . Here is a typical work situation for the receptionist.,@23  2 NG_ж_ж?"  ,$D 0 e2 The receptionist is entering the breakfast list, but the window for finding guests is at hand too.,f@23ee z [  > [  ,$D 0  3 # lPжжo?   gvwStay(booking)& 4 # lUPFжo?*[  _vwRooms& 7 NLY_ж_ж?" ,$D 0 b4 Suddenly a guest arrives and wants to be checked in. He has booked in advance. The user finds him by means of vwFindGuest, opens his stay and checks him in (vwStay for checkin).,@23Lp $ 1 8  fpdжжo? v*,$D 0 gvwStay(checkin)& < Nh_ж_ж?  ,$D 0 T5 Several things are different from the page-based dialog: Each window has its own life and can be opened and closed independently of the others. Some windows can be open in several versions, for instance the stay windows. The user navigates between the windows with built-in mechanisms (mouse, default keys) and we don t have to design for it. The window approach easily handles concurrent user tasks and interrupted tasks.D5@2n@23 xd = Nq_ж_ж?$ ,$D 0 <6 However, we still have to consider which windows our old functions open and whether we need special navigation functions. Once more, state diagrams will help us find out what is needed. Many developers say that you cannot make state diagrams for a window-based platform. Actually, it is not so hard. Let us see.*=3<<  ? Ñ_ж_ж?  ,$D 0 03 Now a fax arrives about an urgent booking. The user opens vwRooms (using the little bed icon) and starts creating the stay (vwStay for booking). ,@23:<; H  0޽h ?/ 9: ̙33___PPT10+QDi' U= @B D$' = @BA?%,( < +O%,( < +D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*;%(D' =-6B#blinds(vertical)*<3<*;D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*2%(D' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*?%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*>%(D' =-6B#blinds(vertical)*<3<*>D' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*7%(D' =%(DP' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*8%(D' =-6B#blinds(vertical)*<3<*8DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*<%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*=%(+P+0+20 ++0+70 ++0+80 ++0+<0 ++0+=0 ++0+?0 +8 y"q"0E !(   ^   N_ж_жo0P \*. Navigation functions, window-based platform$/.,    Nh_ж_ж?   V,$D 0 {1 Since each window has its own life, it also has its own state diagram. Let us first look at the diagram for vwFindGuest.,|@23{(n     NĿ_ж_ж?   ,$D 0 P2 It is painfully simple. It has only one state and is always open. The user can activate FindGuest etc. from it, but it remains open. Next let us look at the diagram for vwStay.,@23:Z I  ,  N ̙_ж_ж?  7,$D 0 gq3 It is more interesting. It shows that NewStay starts with nothing (the black dot) and creates a vwStay window. If the user activates NewStay once more, the system creates another vwStay window. Note that NewStay acts in two state diagrams at the same time. It acts in vwFindGuest - where the user activates it, and it acts in vwStay - where it creates a stay window.,r@23q(3'9 /#  -  Nۙ_ж_ж?0 G ,$D 0 #4 In a particular instance of vwStay, the user can activate Book, Checkin, etc. He can also activate DeleteStay, which deletes the stay from the database and closes the stay window. Just as for the page-based version, we need a harmless way of closing the stay window. We better add it now.,$@23#L  z ` W /  T K ,$D 0 0 B  жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ /(n  1  ZжжԔ?` z2FindGuest, FindStay NewStay, NewGuest OpenStay ...33 3 2   fжжo? W c vwFindGuest&   (l W  A W  ,$D 0 4  c жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||8x@   5   Zжж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ n \  6   `жжԔ?W  aNewStay NewGuest OpenStay  7   `жжԔ? M  o'Book, Checkin PrintConfirm Checkout ...(( ( 8   `жжԔ? t  b DeleteStay&     9  # lжжo? J  D :  # lжжo?S |   ^vwStay& ;   жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||6>@  J 2 <  Zo? T xC = #   2 >   ` jJ?xC2 ?  Tg ?+% @  ZжжԔ?[   ,$D 0 g CloseStay,  33  H   0޽h ? ̙33___PPT10+NBD' c= @B D^' = @BA?%,( < +O%,( < +D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*/ %(D' =-6B#blinds(vertical)*<3<*/ D' =%(D' =%(DT' =A@BBB B0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(D' =-6B'blinds(horizontal)*<3<* D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*A %(D' =-6B#blinds(vertical)*<3<*A D' =%(D' =%(DT' =A@BBB B0B%(D' =1:Bvisible*o3>+B#style.visibility<*, %(D' =-6B'blinds(horizontal)*<3<*, D' =%(D' =%(DT' =A@BBB B0B%(D' =1:Bvisible*o3>+B#style.visibility<*- %(D' =-6B'blinds(horizontal)*<3<*- D{' =%(D#' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*@ %(D' =+4 8?dCB0-#ppt_w/2BCB#ppt_xB*Y3>B ppt_x<*@ D' =+4 8?\CB#ppt_yBCB#ppt_yB*Y3>B ppt_y<*@ ++0+ 0 ++0+, 0 ++0+- 0 ++0+@ 0 +H= $11@'I`0( ̙33 ^  Nh'_ж_жo0P \*. Navigation functions, window-based platform$/., l   A ,$D 0  c жж    BC3DEF33 o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||Qk3@ Id    c жж    BCFDEF33 o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||FY@ y] $    `\2жжԔ?   X CloseRooms  33    `6жжԔ?   W OpenRooms  33    Zжж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ ) l:    f 9PFж o? Q  _vwRooms&    `>жжԔ?   gFindRooms, Repair Book, Checkin   T   !# y\ ~ " Nжж o? ~ # Nжж o?! ? q B $B  `жж Do?J T q u B %B  `жж Do?J c q B &B  `жж Do? ` n `  ' Zжж o? ` J V8  T  @T  YN ` W -  T K  .B  жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ /(n  / ZCжжԔ?` z2FindGuest, FindStay NewStay, NewGuest OpenStay ...33 3 0  fGжжo? W c vwFindGuest&    2 c жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||8x@   3  Zжж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ n \  4  `LжжԔ?W  aNewStay NewGuest OpenStay  5  `,QжжԔ? M  o'Book, Checkin PrintConfirm Checkout ...(( ( 6  `UжжԔ? t  b DeleteStay&     7 # l4Yжжo? J  D 8 # l,\жжo?S |   ^vwStay& 9  жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||6>@  J 2 : Zo? T xC ;#   2 <  ` jJ?xC2 = Tg ?+ > Zl`жжԔ?[   g CloseStay,  33  ~  The_ж_ж?  p ,$D 0 <5 Let us look at vwRooms. This window might work like this.,=@23<($ ~ ) Tp_ж_ж?p  {,$D 0 6 The diagram shows that vwRooms can be in two states: iconized (as a little breakfast icon), and open. We need two navigation functions to switch between the states. When open, the user can activate FindRooms, etc., when closed he can only activate OpenRooms.,@23^ )  F * T~_ж_ж?  b,$D 0 7 According to the diagram, the icon disappears when vwRooms open and re-appears when it closes. Completely logical, but sometimes tradition tells us to do it differently - let the icon stay when the vwRooms is open. How could we model this?,@23:5#  + T_ж_ж? ,$D 0 Q8 The solution is to let the icon and vwRooms have independent lives. Like this.,R@23Q(&$ H  0޽h ? ̙33  ___PPT10 +ޅD ' U= @B D ' = @BA?%,( < +O%,( < +D' =%(D' =%(DG' =4@BBB B%(D' =1:Bvisible*o3>+B#style.visibility<*A%(D' =-6B'blinds(horizontal)*<3<*ADA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*)%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<**%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*+%(++0+)0 ++0+*0 ++0++0 +i< F8>8P-T$@7( w $^ $ ND_ж_жo0P \*. Navigation functions, window-based platform$/., 8  T  /$T   $B  жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ # Tb  $  `жжԔ? T   z2FindGuest, FindStay NewStay, NewGuest OpenStay ...33 3 $ # l жжo? K  c vwFindGuest&    $ c жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||8x@   $  Zжж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ n \  $  `жжԔ?W  aNewStay NewGuest OpenStay  $  `жжԔ? M  o'Book, Checkin PrintConfirm Checkout ...(( (  $  `TжжԔ? t  b DeleteStay&     !$ # lpěжжo? J  D "$ # lǛжжo?S |   ^vwStay& #$  жж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||6>@  J 2 $$ Zo? T xC %$#   2 &$  ` jJ?xC2 '$ Tg ?+ ($ Z̛жжԔ?[   g CloseStay,  33  68 @    0$ @   .$B c жж    BCDEF33 o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@  <L  $  `ћжжԔ?@   W OpenRooms  33  $ c жж    B=C DEF33 o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||=|) @   ]  $ c жж    B[C#DEF33 o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||#'yc@[@  X  $  `՛жжԔ?b   X CloseRooms  33   $  Zжж    BCDEF o 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||,0@ ) l:   $  f(ٛPFж o? Q  _vwRooms&  $  `ܛжжԔ?   gFindRooms, Repair Book, Checkin   T    $# y\ ~  $ Nжж o? ~ $ Nжж o?! ? q B $B  `жж Do?J T q u B $B  `жж Do?J c q B $B  `жж Do? ` n `  $ Zжж o? ` J 2 )$ To?  T xC *$# p  2 +$  ` jJ?xC2 ,$ Tg ?+ -$ Z@жжԔ?wp$  W OpenRooms  33  $ T_ж_ж? \,$D 0 A9 Notice that OpenRooms now works on two diagrams: on the icon - where the user activates it - and on vwRooms, where it creates the vwRoom window.,@23L O  x Q$ NH_ж_ж?  p ,$D 0 <5 Let us look at vwRooms. This window might work like this.,=@23<($ x R$ N`_ж_ж?p  {,$ 0 6 The diagram shows that vwRooms can be in two states: iconized (as a little breakfast icon), and open. We need two navigation functions to switch between the states. When open, the user can activate FindRooms, etc., when closed he can only activate OpenRooms.,@23^ )  @ S$ NL_ж_ж?  b,$ 0 7 According to the diagram, the icon disappears when vwRooms open and re-appears when it closes. Completely logical, but sometimes tradition tells us to do it differently - let the icon stay when the vwRooms is open. How could we model this?,@23:5#  T$ N_ж_ж? ,$ 0 Q8 The solution is to let the icon and vwRooms have independent lives. Like this.,R@23Q(&$ H $ 0޽h ? ̙33___PPT10+1GDO' U= @B D ' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*$%(+8+0+$0 +3   `%<(  <2 < N*_ж_жo0 P 0*. Function presentation$ # < N`6_ж_ж?   ,$D 0 q1 Now we know all the functions, including the navigation functions. It is time to find out how to show them on the screen. Here are some presentation formats that are available on most software platforms (section 7.8 discusses more possibilities).,@23  F    <   3" <  tAPFPF 3G0*jJf11?PY eCheckin    < Z22жA jJ?P   < 3 rTIG HjJ? H  T ( 2B <  NPFPF 3jJf11?)a@ j Checkin F5      d < S ~Zжж 3jJf11??K FPrint confirmation F7 Change room F8 Cancel stay F9 Cancel booking Del$ 21G G   <  `22жA Ԕ?  T \  <# i  < Z22жA Ԕ?\P  < Z22жA Ԕ?P\  <  f_ж_жPbAo? j < 3 rbG2H8fjJ?  n*Function keys, e.g. F2, Esc, Enter, Alt+B(+*  < 3 rgGuxHtzjJ? H  \Clicking on texts, etc.(  < 3 rkGH jJ?Pm $ O Menu points(    < 3 roG+B#style.visibility<*<%(D' =%(D' =%(DG' =4@BBB B%(D' =1:Bvisible*o3>+B#style.visibility<*<%(D' =-6B'blinds(horizontal)*<3<*<D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*<%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*<%(Dn' =%(D' =%(D' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*<%(D' =+4 8?dCB0-#ppt_w/2BCB#ppt_xB*Y3>B ppt_x<*<D' =+4 8?\CB#ppt_yBCB#ppt_yB*Y3>B ppt_y<*<DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*<%(++0+<0 ++0+<0 ++0+<0 ++0+<0 +) ""p%-40 "(  4D 4 Nǜ_ж_жo0 P B*. Hotel system, mockup prototype$"! Y 4 NҜ_ж_ж?   ,$D 0 /1 The discussion of function presentation helps us decide how to show functions in the hotel system. We know that receptionists become very experienced and fast-working, but there are also temporary staff who have to learn. Conclusion: Use buttons and menu points. There are many functions, so they can not all be buttons since that would take too much screen space. Show the most frequently used functions as buttons, the rarely used ones as menu points. We are now able to make a prototype of the user interface. Here is part of a prototype for the hotel.,0@23// El PPD +4P,$D 0@ PX )4PX #4 Z22жԔ?P  4  `22жԔ?PXB !4  f22жDo?PB "4  f22жDo?P@ P `  %4   4 Z22жԔ?P `P  4 T22ԔP `  seFind guest Search guest from Name (any) Stay No. (any) Phone (any) Room No. (any) Date 28-08-2002  @2H             f8 B 4 Z$PFPFjJ @  s Find guest F2"      4  f_ж_ж jJ? B  4 3 r_ж_жDjJ? B  4 3 r_ж_жDjJ?O P B  4 3 r_ж_жDjJ? @    $4  fR 4 6=    4  f_ж_ж jJ?   4  f_ж_ж jJ? 2 B 4 C x_ж_жDjJ?  B 4 3 r_ж_жDjJ?  T  m  4# s  0  4  f_ж_ж jJ? m B 4 3 r_ж_жDjJ? qm q 4 H22ԔP P /Guest Phone Arrival Room# Stay# John Simpson, 456 Orange 94213700 28-08-2002 12 714 Lise Hansen, Dyssegaards 39561748 28-08-2002 12 753 Yun Chen, Kirchgasse 6 28-08-2002 13, 14 749 $   @ B 4 T PFPFjJ @   r Find stay F3"     B 4 TPFPFjJ   nReset F4"     B 4 T0"PFPFjJ @  r New guest F5"     B 4 T<,PFPFjJ@   q New stay F6"     B 4 Th5PFPFjJ   r Open stay F4"     B 4 # l_ж_жDjJ?p qB 4  `22жDo?PH `H  4 T,@22ԔPPD *4Hotel system Rooms Breakfast Services Undo 4@2            58  &4 S ~Uж 3jJf11?T  ?Open service list Add service Delete service Print service list~ 2.        @  *4 N,d_ж_ж?  C,$D 0 22 This prototype is a paper mockup. The final system will be in MS-Access, so the functions are drawn that way. We print the screens on paper, copy them and fill them out with various data. We draw the menus on separate slips. With such a mockup, we are able to let a user carry out various tasks - with the designer simulating what the computer would do. We can find most usability problems in this way. Chapters 2 and 13 tell more on this.,@23 H 4 0޽h ? ̙33___PPT10+XDJ' U= @B D' = @BA?%,( < +O%,( < +D' =%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*+4%(D' =-6B#blinds(vertical)*<3<*+4DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<**4%(+8+0+*40 +i }L (  L L Nz_ж_жo0 P lHotel system, final system$  L N_ж_ж?  p $ ,$D 0 ,1 Letting the user carry out tasks on his own is called a usability test. We observe the problems the user encounters (the usability problems). In the hotel case, the usability test revealed many problems that were not detected when testing the virtual windows for understandability: 1. In the FindGuest window, the user didn t realize that the name criterion could be any part of the guest name. 2. The user needed to see whether the guest was checked in or just booked. 3. The stay numbers were more convenient as the first column of the table. . . . And many more problems.JC@23{(&   L Z22жA Ԕ? PX,$D 0 L NT_ж_ж?  ,$D 0 32 At the mockup stage, it was easy to change the design and usability test it again. When the result is good enough, it is time to program the system. Here is a first version of the final FindGuest window with these three problems repaired. Note how closely the final window follows the mockup. Chapter 8 reports on the many other problems and how they were handled (a few seemed impossible to repair).,@23>   R L T_ж_ж?  ,$D 0 3 Does it take more time to ensure good usability? A company that makes professional sound-measure-ment equipment (Bruel & Kjaer), tried to use early prototyping and usability testing. They found that it made development much simpler. ,@23Lc l   L N_ж_ж? h,$D 0 B4 Developers now knew exactly what the user interface would be and how the system should work. The rest was  just programming according to the book. Furthermore they sold twice as many units of the product and at twice the usual price. Since then the appraoch has worked equally well in many other cases, including web-sites and mobile systems.,[@23Z,m H L 0޽h ? ̙33t l ___PPT10L +dkD ' U= @B DC ' = @BA?%,( < +O%,( < +D' =%(D' =%(DG' =4@BBB B%(D' =1:Bvisible*o3>+B#style.visibility<*L%(D' =-6B'blinds(horizontal)*<3<*LD' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*L%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*L%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* L%(++0+L0 ++0+L0 ++0+ L0 +j! |>(  | | Npʠ_ж_жo0 P nObject-oriented development?$ a | NHԠ_ж_ж?  p ,$D 0 71 Many developers and researchers claim that object-oriented analysis and design is the panacea for all software evils. Unfortunately, it remains obscure how the user interface comes out of the design exercise. Is our user interface approach object-oriented? Yes, in some ways. Let us look at it in the OO way.,8@2377   | N_ж_ж? p ,$D 0 F2 Virtual windows = user-oriented classes. The virtual windows correspond to classes in OO. But they focus on presenting the data contents in a user-oriented way. A virtual window may have many instances - many objects - for instance many Stay windows. With virtual windows we pay great attention to an early graphical design of the  class . Compared to traditional classes, the windows also have much redundancy since the same data may be shown in many windows (although we try to minimize it). Finally, we arrive at the proper set of windows from a close study of both the user tasks and a traditional static class model (a data model).Z@23)T?   I~   | N$_ж_ж? 0 ,$D 0 >3 Functions = Object operations. When we have defined the virtual windows, we add functions to each window. This is similar to how designers add operations (methods) to the classes.<@23  | N|_ж_ж?(0 , ,$D 0 4 Data presentation first, dialog later. While other user interface design methods look at dialog and functions first, and data presentation later, we say that it does not make sense to define the functions until we know the data presentation, i.e. the virtual windows. In OO-terms it should not be a surprise - of course we cannot define the object operations until we know the objects. In OO-terms there is another surprise, however. We can not derive the functions directly from a study of the domain (the analysis). The functions the users carry out do not transfer in a simple manner to the user interface. We need the virtual windows as an intermediate step. It does not make sense to assign the user interface functionality to the traditional static class model of the system.d+@23'RT%5  H | 0޽h ? ̙33LD___PPT10$+1D' U= @B DS' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* |%(DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* |%(+p+0+ |0 ++0+ |0 +U#" G?( KP   N"_ж_жo0 P mObject-oriented development$   N,_ж_ж? 0 n,$D 0 V5 Screens = Objects with multiple inheritance. When we transform the virtual windows into final screens, we essentially define new objects - the screens. They inherit data and functions from the virtual windows they show. We also add some new operations to the screens - the navigation functions that allow the user to move between screens. <W@23-)V v  Nx:_ж_ж?  p T,$D 0 4 Use cases = tasks? OO-designers talk about a use case as the interaction between a system and its user to reach some goal. In principle, it is similar to the user tasks we talk about. However, in practice the typical use case describes the detailed interaction, and primarily the computer s part of it. If you try to define such use cases early on (and many developers do so), you have defined the user dialog and the user functions much too early. The result is a poor user interface. The virtual windows are needed as an intermediate step. When we talk about tasks, we look at user and computer as one single agent and see what they must do together. Only late in the design do we split the work between user and computer. In this way we can use the tasks as guides for defining the virtual windows, and later as guides for defining the interface functions. When we have defined virtual windows and their functions, we can write down the detailed use cases, for instance for checking purposes, but it is hardly worthwhile.Z@23 ,~     Nh\_ж_ж?0 ,$D 0 X6 Interface objects = program objects? In the final interface, screens, fields, buttons, etc. may appear more or less directly in the program as objects. It depends heavily on the platform used. As an example, in MS-Access or MS-Forms, each screen is actually an object (a  Form ). Fields and buttons, however, are in some ways small objects of their own (controls) - with their own set of micro-level functions that respond to actions such as clicking, entering a character, etc. Much of the mini-specs become program pieces in these functions. Some complex program parts may become classes without direct connection to any virtual window. This is where traditional object-oriented programming plays a significant role.<@23&B x e xl < <,$D 0c  # lB22 3)? <l$D 0 0 0 KEnd of presentation3   C x(b@GC Ԕ?A*l$D 0, 0 0 m'Continue with task and data description*('H  0޽h ? ̙33  ___PPT10v +¸]Dz ' U= @B D5 ' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(D#' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* %(++0+0 ++0+ 0 ++0+0 ++0+ 0 +"  \ ( ~@  \ \ Ntu_ж_жo0 P cTask descriptions$  \ N_ж_ж?  p ,$D 0 f1 There are many ways to describe tasks. Here is a simple task list with some annotation for each task. It is a good idea to write down any particular problems in the way the task is done at present - and maybe record possible solutions.,@23 O  \ # lL ж жԔ))?  @ }Task list 1. Reception 1.1 Booking. May involve many rooms. 1.2 Checkin. Some guests have booked in advance, some not. 1.3 Checkout. Review account, then invoice. Problem: Checkout queue in the morning. Solution? Self-service checkout. 1.4 Change room. Possible any time during the stay. 1.5 Breakfast list & other services. Breakfast list daily, service notes at any time. x@VW@Y$   .        # ' 3 A68K  \ N_ж_ж? p el$D 0 0 0 YS2 Here is a more detailed description of the check-in task. We have broken it into sub-tasks. These sub-tasks describe what human and computer will do together. Only during the design process do we find out who does what. It is best to write such task descriptions together with expert users. They can readily understand the descriptions.JT@23& 0 0 xh \ N_ж_ж? ^l$D 0 0 0 v3 We have enumerated the sub-tasks for reference purposes, but the sub-tasks need not be carried out in this sequence. In some cases it is for instance convenient to record the guest data before selecting a room for him. Note that a sub-task can have variants. If the guest hasn t booked and is not in the files, the receptionist records him (sub-task 2). If he has booked, the receptionist will find his booking data (variant 2a). Sections 5.3 to 5.6 of the book explain more on task descriptions. ,@23,8 | \@ # lར@GC Ԕ?c)q~$D 0*U 0  Tasks 0 ZReturn to course. (l P  \P ,$D 0 \ # l|¢@@@Ԕ))?^  DTask: 1.2 Checkin Start: A guest arrives. End: The guest has got room and key. Accounting started. Frequency: Average 0.5 checkins/room/day Difficult: A bus with 50 guests arrives. Sub-tasks: 1. Find room Problem: Guest wants two neighbor rooms 1a. No suitable room. 1b. Guest has booked in advance. 2. Record guest data. 2a. Guest recorded at booking. 2b. Regular customer. 3. Record that guest is checked in. 4. Deliver key. 2     6          kt7^ XhhlB \ <DjJP lB  \ <DjJP fB \ 6DjJP fB \ 6DjJP@ @H \ 0޽h ? ̙33  ___PPT10 +nɸD0 ' U= @B D ' = @BA?%,( < +O%,( < +D' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<* \%(D' =%(DG' =4@BBB B%(D' =1:Bvisible*o3>+B#style.visibility<* \%(D' =-6B'blinds(horizontal)*<3<* \D2' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*\%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*\%(++0+ \0 ++0+\0 ++0+\0 +I P>H>19`=( w ` ` N4Ţ_ж_жo0 P cData descriptions$ & ` Nd_ж_ж?   ,$D 0 t1 Here is a compact description of the hotel data in the form of an entity-relationship data model. Each box shows a collection of records of the same type. The guest box, for instance, contains a record for each guest that the hotel wants to keep track of. The crows foot to Stay shows that each guest may have one or more recorded stays. The attributes for each box are shown too. For the guest, for instance, we record name, several address lines, a phone number, and a passport number (foreigners only).,@23 j `@ # lp@GC Ԕ?Ol$D 0\ 0 0 ZReturn to course. k+8 zw  0`@ = ` # l  jJ?| :Stay   `  f jJ?_|q  @ Room State     `  f jJ?& |  :Room   ` # ll jJ?5  =Service   ` # l  jJ? .  B Service Type     ` # ljJ??Y `  `jJ?w  B `  fDjJ?KK ` ZjJ?GJ `  `jJ?; J MtT ~ `# UtB ` T_ж_жDjJB `B T_ж_жDjJ~tT ~ `# Z7  vB ` T_ж_жDjJB `B T_ж_жDjJ~tT ~ `# h  B ` T_ж_жDjJB `B T_ж_жDjJ~tT ~ `# _B ` T_ж_жDjJB `B T_ж_жDjJ~/ ` # l  jJ?C  1  5date, personCount, state (booked | occupied | repair)66  % ` # lX# o?s  k7name, address1, address2, address3, phone, passport88   `  `$_ж_ж o?r t  %roomID, bedCount, type price1, price2&& $ !`  `,_ж_ж jJ?8 d W ? name, price   "`  `/_ж_ж jJ?L $h  ? date, count   #` S _ж_ж    BCDEF @  1 8c8c     ?A)BCD|E||C$@ @Q  $`  _ж_ж    B.CDEF @  1 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||B0 D.l@  0   %`  t_ж_ж    BC\DEF @  1 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||x@\@  .w ' &`  _ж_ж    BClDEF @  1 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||w 8$6Ql@  IF  '`  _ж_ж    B`C,DEF @  1 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E|| S$4 J`,@   ` X (` # l(4 jJ?g| ;Guest  )`  fjJ??tT ~ *`# B +` T_ж_жDjJB ,`B T_ж_жDjJ~ -` S _ж_ж    BHCDEF @  1 8c8c     ?A)BCD|E||88H@ ." .`  `8_ж_ж o?z{ *stayID, paymethod, state (book | in | out)++ $ s 1` N(>_ж_ж?P  ,$D 0 2 Data models are rarely suited for discussions with users, but they are an excellent tool for the IT professional. Traditionally they were primarily used for business applications, but today they are used also in the technical area in the form of static class diagrams.<@23 @X d 2` NL_ж_ж?  .,$D 0 $3 Data models lack the soft information often necessary for design. Data dictionaries can be a good supplement, such as this one for the guest. Expert users can readily help the designer make the data dictionary. Chapter 16 of the book explains more on data modeling and data descriptions. ,%@23$, l  w 6` w,$D 0~ 3`  fV@@@o))? w,$D  0 Class: Guest The guest is the person or company who has to pay the bill. Examples 1. A guest who stays one night. 2. A company with employees staying now and then, each of them with his own stay record where his name is recorded. 3. A guest with several rooms within the same stay. Attributes name: Text, 50 chars . . . passport: Text, 12 chars Recorded for guests who are obviously foreigners. Used for police reports in case the guest doesn t pay . . .S 2 24n  =        h  4xx 4` # ll_22жGHo?6 d  [Data dictionaryH ` 0޽h ?o` ` ` ` ``` `` ` ``(``)`4` ̙33  ___PPT10 +D, ' U= @B D ' = @BA?%,( < +O%,( < +DA' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*1`%(D' =%(D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*2`%(D' =%(DC' =4@BBBB%(D' =1:Bvisible*o3>+B#style.visibility<*6`%(D' =-6B#blinds(vertical)*<3<*6`D' =%(D' =A@BBBB0B%(D' =1:Bvisible*o3>+B#style.visibility<*`%(++0+`0 ++0+1`0 ++0+2`0 +$ 0 t(  ^  S 0     # lNJNJ~9q   "H  0og3 ? ̙33$ 0   t(   ^  S 0   -  # l-NJNJ~9q  - "H  0og3 ? ̙33$ 0 0(t(  (^ ( S 0   - ( # l-NJNJ~9q  - "H ( 0og3 ? ̙33$  0 @Lt(   L^ L S 0   - L # l-NJNJ~9q  - "H L 0og3 ? ̙33$  0 PXt(  X^ X S 0   - X # l$-NJNJ~9q  - "H X 0og3 ? ̙33$ 0 `tt( HZN t^ t S 0   - t # l*-NJNJ~9q  - "H t 0og3 ? ̙33$ 0 p|t(  |^ | S 0   - | # lH/-NJNJ~9q  - "H | 0og3 ? ̙33$ 0 t(  ^  S 0   -  # l9-NJNJ~9q  - "H  0og3 ? ̙33$ 0 t(  ^  S 0   -  # l3-NJNJ~9q  - "H  0og3 ? ̙33$ 0 t(  ^  S 0   -  # l<>-NJNJ~9q  - "H  0og3 ? ̙33$ 0 t(  ^  S 0   -  # lhC-NJNJ~9q  - "H  0og3 ? ̙33$ 0 t(  ^  S 0   -  # lH-NJNJ~9q  - "H  0og3 ? ̙33$ 0 t(  ^  S 0   -  # lM-NJNJ~9q  - "H  0og3 ? ̙33$ 0 t( z^ 0 ^  S 0   -  # lR-NJNJ~9q  - "H  0og3 ? ̙33$ 0  t(   ^   S 0   -   # lX-NJNJ~9q  - "H   0og3 ? ̙33$ 0 (t( ` (^ ( S 0   - ( # lD]-NJNJ~9q  - "H ( 0og3 ? ̙33$ 0  8t(  8^ 8 S 0   - 8 # lg-NJNJ~9q  - "H 8 0og3 ? ̙33$  0 @t( 6Kl @^ @ S 0   - @ # lpb-NJNJ~9q  - "H @ 0og3 ? ̙33$! 0 0Pt(  P^ P S 0   - P # ll-NJNJ~9q  - "H P 0og3 ? ̙33$& 0 @t(  ^  S 0   -  # lp-NJNJ~9q  - "H  0og3 ? ̙33$' 0 Pt(  ^  S 0   -  # lv-NJNJ~9q  - "H  0og3 ? ̙33$( 0 t(  ^ S f l   # lwgg~9q   "H  0og3 ? ̙33r  _0YcV  0eTVX@gIZ ]p#2ͲA_G ma)_+0c,e0 hg4 {j8 ZIl?FA0una~pF@rQtL@d%w0QyQ@Z}{ [`˫}=' -`HOh+'0x% hp  No Slide TitleSoren LauesenSoren Lauesen86eMicrosoft PowerPointP@P*@y @?b2@2NGT$g  "g& &&#TNPP2OMi & TNPP &&TNPP    --- !-----4--w@ ww @w f- @"Arial Gww @w f- .(2 gUser interface design #    .@"Arial ww @w f- .:2 "A software engineering perspective         . . 2 T. ."2 "he Virtual Window      . . 2 ?m. .2 [ethod .-- -- @"Arialb ww @w f- .$2  Soren Lauesen, IT       . . 2 Z-. ..2 _University of Copenhagen,     . .2 February 2009,   . .2 slauesen   . .2 @itu.dkn .--1-- @"Arial ww @w f- .2 This is a mini     . . 2 -. .`2 ;course in systematic user interface design. Go through the                  . .g2 @course on your own. It is not intended for presentation to a lar                 . .2  ge audience.   . .92 !!Plan to spend 30 focused minutes.e        . .72 N Use the spacebar, arrow keys or       . . 2 NPgUp . . 2 N/. . 2 NPgDn  . .62 Nto go through the course. In a          . .W2 d5few places you can take a detour by clicking on hyper               . . 2 dR-. .-2 dXlinks. You may print out       . .Z2 {7the slides for reference (change the file suffix from              . . 2 {Appsn . .2 {_ to  . . 2 {pptn . .!2 {, open the file    . .(2 and print all slides).      . .K2 -See teaching material, case studies, etc. on             . .2  http://www..   . . 2 aitun . . 2 u.. . 2 zdk . .2 /people/  . .2 slauesen  .--^,-- @"Arialb *ww @w f- .g2 @The course is based on the book User Interface Design by Soren                    . .2 xLauesen, Addison     . . 2 -k. .g2 @Wesley, 2005. The book describes the design approach in much mor                . .'2 e detail, explaining       . .O2 0also when things dont work exactly as this mini           . . 2 -k. .'2 course says. The mini      . . 2 -k. .%2 course often refers        . .g2 .@to chapters of the book. We have developed the design approach o                    . .(2 .yver several years. It      . .g2 A@combines software engineering principles, usability principles a                 . .(2 AZnd psychology. It has      . .2 Abeen . ."2 Thighly successful    . .2 Tfor Webn  . . 2 TS-k. .@2 TX&design, traditional applications, and          . .$2 TVmobile applications     . . 2 T.k.--"System f !-&TNPP &՜.+,D՜.+,    xOn-screen ShowITUA !Times New RomanArialCommonBullets Arial NarrowDefault DesignPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint PresentationPowerPoint Presentation  Fonts UsedDesign Template Slide Titles 8@ _PID_HLINKSA260,8,Slide 8290,24,Slide 24291,25,Slide 25257,3,Slide 3257,3,Slide 3%_U Soren LauesenSoren Lauesen  !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^`abcdefghijklmnopqrstuvwxyz{|}~      !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~      !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~      !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~Root EntrydO)PicturesNCurrent UserSummaryInformation(%PowerPoint Document(_yDocumentSummaryInformation8