BI TP LN MN HC THIT K GIAO DIN NGI DNG

LP: INT 3115, HKI 2015, GVHD: NGUYN TH NHT THANH

(Ngun: http://www.ccs.neu.edu/course/is4300sp13/project.html)
M t yu cu M t bo co
BTL_P1
Tm ch
. (1
tun)
24/9
Bi tp ln thay im thi cui k yu cu cc cng
vic v thit k, lp trnh v nh gi giao din
ngi dng. Giao din s c thit k da trn
qu trnh tng tc vi ngi s dng. Cc nhm
c yu cu lp li cc mu giao din nhiu ln (4
ln) trc khi a ra bn chnh thc.
Sau y l mt s hng dn pht trin bi tp
ln:
- BTL phi c giao din cho ngi s dng. H
thng ch a ra thong tin tnh hoc phc v
qun l l cha
- Giao din phi c tng tc. Mt h thng ch
hin th mt lot cc trang thng tin hoc web
tnh s khng c chp nhn
- Giao din phi c xy dng hon ton mi
- Nn c khong 3 ngi i din cho lp ngi s
dng ca giao din c xy dng
- Giao din phi c hon thin c v thit k,
Hn np: 1/10
Bo co v phn ny bao gm cc ni
dung sau (t nht l 1 trang)
1. Pht biu bi ton: m t bi ton
m nhm la chn
2. Ngi s dng cui: Ai s l ngi
s dng ng dng ny?
3. Gii php: M t mt gii php hp
l cho vn c nu ra. V d:
Giao din nhm hnh dung, giao
din gii quyt vn c nu
ra th no. Ch y khng phi l
gii php cui cng v nhm c th
thay i trong qu trnh xy dng
v nh gi a ra gii php tt
hn
4. Phn cng cng vic cho cc thnh
vin trong nhm
lp trnh v nh gi vo cui k.

BTL_P2.
Phn tch
tc v. (1
tun)

1/10
Vic phn tch bi ton c tin hnh theo cch
sau:
Phn tch ngi s dng. Xc nh cc c im
ca ngi dng ng dng ca bn. Nu bn c
nhiu lp ngi dng, xc nh mt ngi i din.
To ra mt hoc nhiu c trng tnh cch cho lp
ngi dng ny
Phn tch tch v. Xc nh cc tc v trong bi
ton nu ra, phn tch c im ca n v tr li
cc cu hi v tc v (Mc ch l g? Lm nh th
no? Lm khi no? Thi gian thc hin? Ai thc
hin? ). Ngh v cc cu hi khc nhau bn c th
hi m lin quan n ng dng c pht trin.
Nhm cn tm v phn tch t nht l 6 tc v. Nu
nhm khng th tm 6 tc v trong bi ton,
nhm nn tp trung vo cc tc v chi tit ha cc
tc v ln, hoc cc tc v ngoi v cho cc trng
hp ngoi l v khn cp. Vit Kch bn tc v
(Task scenarios) cho tng ngi s dng v ng
cnh. Ti bc ny, bn nn tp trung vo cc bc
thc hin c tc v nu, cha nn ngh n
Hn np: 8/10
Bo co gm t nht 4 trang, bao gm
cc ni dung sau
1. Tiu : t tn cho ng dng (nu
cha c)
2. Bi ton: Pht biu ngn gn li bi
ton c chn
3. Ngi dng: M t mi ngi dng
trong lp ngi s dng v c
im chnh ca lp ngi
4. Kch bn tc v: Vit mt on m
t kch bn cho mi mt tc v
trong t nht 6 tc v (hoc nhiu
hn) m bn xc nh
5. Tc v: M t 6 (hoc nhiu hn)
cc tc v mt cch chi tit. Mi tc
v phi c mc tiu, tin iu kin,
tc v con (nu c) v ngoi l
(trng hp c th chy sai), cc
rng buc (thi gian, ) v tn
xut s dng.
chi tit ca giao din (hnh dng ).
Yu cu v tnh d dng. a ra bn yu cu v
tnh d dng cho ng dng ca bn. S dng Ca s
dng quan trng (Essential Use Case) chun
ho cc tc v
6. Phn cng cng vic

BTL_P3.
Thit k
khi nim.
(1 tun)

8/10
Bi tp ny bt u quy trnh thit k ng dng.
Bn s chuyn i cc kch bn tc v v cc ca s
dng quan trng sang cc thit k khi nim
Ca s dng. Xy dng mi Kch bn tc v thnh
mt ca s dng, bao gm chc nng, lin kt, i
tng v cc rng buc. Rt gn ni dung vo mt
biu ni dung (Content Diagram)
Metaphors. To mt danh sch cc n d s dng
trong giao din ca bn. Vi mi mt kch bn tc
v, hy lit k t nht 2 n d c s dng trong
. Ti sao bn ngh n l ph hp v gii thch v
s la chn .
Ti bc ny, bi nn tip tc tp trung vo cc tc
v mc tru tng, bao gm hnh ng u vo
t ngi dng, hnh ng u ra ca h thng v
cha ngh v chi tit hin th ca giao din
Hn np: 15/10
Bo co bao gm
1. Mt danh sch Metaphors (t nht l
2x6),
2. Cc ca s dng
3. Biu ni dung
4. Phn cng cng vic



BTL_P4.
Phc tho
thit k. 1
tun

15/10
Trong bi ny, nhm s phc tho cc giao din
nh thit k.
Nhm cn suy ngh v a ra mt s cc thit k
giao din s dng cho ng dng, bao gm c cc
metaphors nh s dng trong bi trc, v giao
din bng tay trn giy hoc bng. Sau , chn
mt ci tt nht. Khng nn tp trung vo cc chi
tit nh t ng, icon, lp. Gi mi th n gin.
Tp trung vo m hnh bn mun tng tc vi
ngi dng v ngh v cc tc v c phn tch:
ngi dng cn lm g, h lm vic nh th no.
Tp trung nhiu thi gian vo chi tit l v ch. Nu
c iu g cn phi thay i, s c thc hin
trong pha thit k ti.
Thit k giao din s b. bao gm mt hoc
nhiu ca s hoc hp thoi giao din vi menu v
cc nt iu khin cho ngi s dng.
Storyboards. Mi Ca s dng, m t giao din s
b s c s dng nh th no thc hin tc
v. S dng phc tho th minh ha giao din
Hn np: 22/10
Bo co bao gm:
1. Cc mu thit k. Cung cp t nht
3 phc tho cho mi thit k v m
t bn chn ci cui cng nh th
no
2. Thit k tng th. M t thit k s
b bng vic th hin cc phc tho
ca cc ca s quan trng, hp
thoi, menu, v gii thch ngn gn
ca tng chc nng
3. Scenario storyboards. Th hin mi
Ca s dng trong dng storyboard
bao gm phc tho m t giao
din s trng th no ti nhng
im quan trng.
4. Phn cng cng vic
s nh th no ti cc im quan trng ca tc v.

BTL_P5.
To bn
mu trn
giy (2
tun)

22/10

Trong bi tp ny, cc bn to cc bn mu trn
giy. Cc bn mu ny s hin thc ha t nht 3
trong s nhng Ca s dng c a ra trong
nhng phn trc. Bn s th nghim cc bn mu
trn t nht 3 ngi s dng.
T5a. Chun b bn mu v kch bn kim th:
1. Xy dng bn mu: V cc yu t tnh: nn,
menu, hp thoi v cc ca s. Quyt nh s
thc hin cc phn thng tin ng nh nh no
trn giao din . V bng tay l mt cch thc
hin tt.
2. Vit ba tc v kim th trn cc ba giy
(index card) khc nhau. Ch ghi cc mc tiu
ca tc v (vd: mua sa, c chua, bnh m).
Khng ghi chi tit cc bc cn thc hin v
l ni dung m ngi s dng s a ra. Cc tc
v cn ngn gn, thc hin trong khong 5. Bn
cng cn phi ph bin iu ny cho ngi s
dng khi thc hin th nghim.
3. Xc nh cc nhim v cho cc thnh vin:
Mt ngi ng vai tr chy cc tc v, mt
ngi h tr, thnh vin khc ng vai tr l
Hn np: 5/11
Bo co bao gm cc ni dung sau:
1. nh hoc video v bn mu. nh v
cc thnh phn ca bn mu.
2. Bn tm tt v ng dng cc bn
gii thiu cho ngi s dng
3. M t cc tc v (index card)
4. nh minh ha vic kim th vi
ngi dng v m t (thi gian, a
im, phng php )
5. Bo co quan st: cc vn v
tnh d dng cc bn pht hin t
qu trnh kim th v gii php. M
t xem ngi s dng lm g.
Cc bn cn th vi t nht 3 ngi
dng.
6. Kt qu t phng vn
7. Phn cng cng vic

ngi quan st, a ra cu hi trong qu trnh
thc hin. C th thay i vai tr thc hin khi
test trn nhng ngi dng khc nhau.
4. Thc hin vic chy th trn bn mu giy.
Mi thnh vin nn thc hnh trn my tnh
bit cc bc cn thc hin nh l sp cc mnh
giy v a ra phn hi. C th th 1 vi ln
trc. Ch lm cc bn mu trn giy
thc hin 3 tc v c la chn.
T5b. Thc hin vic kim th vi ngi dng thc
v vit bo co.
Chun b mt gii thiu ngn gn v ng dng cho
nhng ngi s dng, khong mt na trang. Gii
thiu ny nn nu ra mc tiu ca ng dng, cc
thng tin c bn v ng dng m ngi dng cn
hiu n c th thc hin cc tc v. Tuy nhin,
phn ny khng m t vic ngi s dng phi lm
g vi giao din c thit k.
Thc hin kim th trn 3-5 ngi dng. Ch gh
li thng tin c nhn (tui, gii tnh, ngh nghip,
gio dc ) trong bo co.
Kim th trn ngi dng. Khi chy kim th,
cc bn cn thc hin nhng bc sau:
- Hi s ng ca ngi dng tin hnh th
nghim
- M t ngn gn v ng dng. S dng bn
m t cc bn chun b m t bng li v
mc ch ca ng dng v cc thong tin c bn
ca min ng dng (Khong 1-2 pht l )
- Th hin mt tc v. a cc yu cu cho
ngi dng (index card), c n v ngi
s dng c n. Chc chn rng ngi s dng
hiu tc v.
- Quan st ngi s dng thc hin tc v.
Ghi ch v nhng iu cc bn quan st c.
C th dng video quay li.
- Lp li vi nhng tc v khc. Th nghim
cc tc v vi ngi dng nhiu nht c th.
Nn chun b d cc ti liu (ba giy, bn mu,
giy trng ) c th iu chnh cho ph hp.
- Phng vn. Hi cc cu hi c thng tin cn
thit. V d: Chc nng no thc hin d dng/
kh khn? Khi no/ti sao ngi dng
mun/khng mun s dng ng dng? ng
dng h tr cng vic/ cuc sng h nh th
no? C th ci tin g cho ng dng?
BTL_P6.
Vit
chng
trnh phn
mm (2
tun)

5/11
Trong bi tp ny, cc bn lp trnh cho ng dng
c thit k bn trn. Bn chy trn my nn
p ng nhng yu cu sau:
Yu cu cao v giao din. S dng cc bn mu
c thit k v chnh sa trong cc bc trc
lp trnh. Phc ha cc lp, thnh phn, la
chn mu sc, font ch, cn l, biu tng, khong
trng. Tuy nhin, bn lp trnh c th c mt s
sa i so vi thit k nu nhng sa i lm
ng dng tt hn.
Yu cu trung bnh v thc hin chc nng.
Bn mu s chy trn my v c th khng h tr
mt s tnh nng nng cao. Cc bn c th m t
n bng hot ha hoc cc din t bng li.
Yu cu trung bnh v s lng cc tc v thc
hin. Bn mu cn thc hin t nht l 3 tc v m
t trong phn thit k. Ngoi ra, bn mu phi bao
gm tt c cc giao din mn hnh chnh v hp
thoi ca cc tc v khc.
Yu cu thp v phn hi t h thng. Vic
chy cc chng trnh hon chnh c kt ni ti
my ch, h thng CSDL c khuyn khch thc
hin. Tuy nhin, cc bn c th ng gi cc thc
Hn np: 19/11
Bo co bao gm cc phn sau:
1. Source code chy ng dng v
cc m t v ci t.
2. Tm tt (t BTL_P5) bao gm cc
thng tin cc bn a cho ngi
dng v bn mu trn giy m t
mc ch ng dng v cc thng tin
c bn
3. Phn tch yu cu ngi s dng,
phn tch tc v v kch bn (t
BTL_P2)
4. Phn cng cng vic.
Bn c th bt u vit bo co
cui kha t thi im ny

hin ny bng cc d liu mu hoc cc thng bo
c chun b sn. Ch vit t chng trnh nht
c th.
BTL_P7.
nh gi
da trn
kinh
nghim v
chnh sa
li h
thng. (1
tun)

19/11
Chy giao din trn my c nhn ca t nht 2
bn cng lp (khc nhm) ly thng tin phn hi
t chuyn gia (heuristic evaluation). Trong thi
gian ny, cc bn c th tip tc hon thin ng
dng nhng khng nn c cc thay i ln ti UI.
Sau khi nhn c cc nh gi, cc bn nn phn
tch cc vn v gn cc mc (nh, quan
trng, nht thit phi thay i) v c gii php
sa i n. C gng sa cha cc li nhiu nht c
th da trn danh sch nh gi u tin v ghi
li vic bn chnh sa n nh th no.
Hn np: 26/11
Bo co bao gm
1. Source code ca ng dng c
chnh sa
2. Mt bo co v kin chuyn gia
v m t bn chnh sa nh th
no da trn cc gp .
3. Phn cng cng vic


BTL_P8.
Kim th
trn ngi
s dng v
chnh sa
(1 tun)

26/11
Trong bi tp ny cc bn s thc hin vic nh
gi giao din cui trn ngi dng v vit bo co
kt qu cui cng cho d n.
Kim th ngi dng. Chun b m t ngn gn
v ng dng v 3 tc v. C th s dng bn m t
dng trong BTL_P5.
Demo. Bn cn thc hin mt bn demo v giao
din trong bn thc hin cc tc v v hng
Hn np:3/12
Bo co bao gm:
1. Source code ca ng dng c
chnh sa
2. Mt bo co v kin ngi dng
v m t bn chnh sa nh th
no da trn cc gp .
3. Phn cng cng vic
dn chc chn rng thng tin gi ti tt c ngi
dng l nh nhau. Demo c th c s dng cho
mt s tc v c c trng l ngi s dng phi
hc mi thc hin c cc chc nng . Tuy
nhin, cc bn cn suy ngh cn thn v vic c s
dng demo cho tc v hay khng v n s lm mt
i c hi cc bn c th quan st phn ng thc
ca ngi dng khi s dng ng dng.
Pilot test. Bn nn thc hin kim th i vi cc
thnh vin trong lp trc thuc nhm khc. Trong
phn kim tra ny, bn nu m t ng dng, demo
v cc tc v trc khi ngi dng s dng cc
chc nng.
Thc hin vic nh gi trn ngi dng:
- Cung cp m t ng dng ngn gn v demo
(ty chn)
- Cung cp mt tc v ti mt thi im, quan st
v ghi li thng tin. Mt thnh vin trong nhm
nn qun l chng trnh kim th trong khi
nhng ngi khc ngi quan st.
Thit k li. Thu thp nhng vn v tnh d
dng tm thy trong pha ny, ghi li thnh mt
danh sch. Thc hin vic phn tch, nh gi (nh


trong BTL_P7) v a ra gii php thay i ph
hp. a ra u tin cho cc vn quan trng.

BTL_P9.
Bo co
cui cng
v trnh
by (2
tun)

3/12
T9A
Tun 10/12 v 17/12 cc nhm s c bi trnh by
15 pht v bi tp thc hin. Bi trnh bi nn
bao gm cc mc sau:
1. Pht biu bi ton. (2 pht) Vn l g? Ai l
ngi dng ? Cc tc v l g ?
2. Minh ha. (6 pht) M t thit k v thc hin
thng qua vic chy demo chng trnh. Chy
mt s tc v. Ni chi tit v cc im quan
trng.
3. nh gi. (6 pht) Tho lun v cc im chnh
trong nh gi giao din (nh gi trn bn mu
giy, nh gi da trn kinh nghim v nh gi
trn my)
4. Kt lun. (1 pht) im chnh ca ng dng l
g? Bi hc rt ra? im no bn c th lm
khc nu c lm li.
T9B
Thc hin vit bo co tng kt
Hn np: 17/12
Bo co tng kt cui kha bao gm
cc ni dung sau:
- Pht biu bi ton
- Thit k: M t bn thit k cui
cng ca giao din ( bao gm
phn chnh sa sau khi th nghim
trn ngi dng tht). Minh ha vi
hnh chp giao din. Ch ra nhng
im chnh quan trng trong thit
k v tho lun cc bn xem xt
v thc hin n nh th no. Tho
lun v cc thay i sau khi thc
hin ba phng php nh gi (qua
bn mu giy, nh gi da trn
kinh nghim v th nghim trn
ngi dng tht)
- Lp trnh: M t cu trc chng
trnh, chc nng thc hin ( mc
chung). Tho lun v v cc vn
trong thit k c lp trnh v nh
hng ca lp trnh ti tnh d dng
ca giao din.
- nh gi: M t vic thc hin kim
th. M t vic bn tm ngi dng
v tnh i din ca ngi dng
trong cng ng. M t ngn gn
v vic ngi dng thc hin cc
tc v. Tho lun v cc vn bn
quan st c. Tho lun cc vn
v tnh d dng m cn cha
c gii quyt trong thit k hin
ti v c gi gii php.
- Bi hc. Tho lun v nhng iu
bn hc c trong qu trnh thc
hin d n. Nu bn lm li, iu
no bn s lm khc i? Tp trung
vo nhng cng vic thc hin:
phn tch, thit k, thc hin, nh
gi (nu nhng iu cha c
tho lun cc phn trn)
- Bo co gm khong 8-10 trang,
tun theo khun dng sau:
http://chi2012.acm.org/cfp-
formatting-
instructions.shtml#archiveformat