of 32/32
XÂY DỰNG PROTOTYPE PGS.TS. Đặng Văn Đức [email protected] HÀ NỘI – 2007/10 BÀI 7

Chủ đề môn học

  • View
    55

  • Download
    0

Embed Size (px)

DESCRIPTION

Chủ đề môn học. Giới thiệu về HCI Tính sử dụng được của hệ thống Thiết kế hướng người sử dụng Khả năng con người Mô hình vào – ra dữ liệu Nguyên lý thiết kế giao diện Xây dựng prototype Thiết kế đồ họa và tương tác Đánh giá và kiểm thử giao diện Các chủ đề nghiên cứu. Nội dung bài này. - PowerPoint PPT Presentation

Text of Chủ đề môn học

Xay dung prototype

XY DNG PROTOTYPEPGS.TS. ng Vn [email protected] NI 2007/10BI 7Ch mn hcGii thiu v HCITnh s dng c ca h thngThit k hng ngi s dngKh nng con ngiM hnh vo ra d liuNguyn l thit k giao dinXy dng prototype Thit k ha v tng tcnh gi v kim th giao dinCc ch nghin cu

dvduc-2007/10Bi 7: Xy dng prototype2/31dvduc-2007/10Bi 7: Xy dng prototypeNi dung bi nyLi thit k trong h thng tng tcKhi qut v prototype K thut xy dng prototype giyK thut xy dng prototype my tnhTng kt bi

3/311. Li thit k?dvduc-2007/10Bi 7: Xy dng prototypePhn mm ghi a CD: Adaptec Easy CD Creator

Phn mm Eudora Pro for Macintosh

Caps Lock may interfere with password!4/31Li thit k?WinCim Sau khi chn thc n File/Connect kt ni Compuserve, mn hnh xut hin hp thoi yu cu chn Kt ni (?)

PowerBuilderMi trng lp trnh ny hin th (vi tr) Tooltip v Status Bar mi khi dch con tr chut trn Icon. Nguyn l: Hin th Tooltip vi tr 1s-2s, Status Bar cn c hin th tc thi.

dvduc-2007/10Bi 7: Xy dng prototype

5/31Li thit k?Windows calculatorMi quan st th thit k ny c metaphor quen thucNhiu chi tit b bin iS dng sqt thay cho biu tngDu * thay cho X nhnCc phm MC, MR, MS, v M+?CE c khc C?CE = "Clear Error" hay = "Clear Everything" hay = "Clear Entry"Ti sao s dng nhn phm mu blue v Red?

dvduc-2007/10Bi 7: Xy dng prototype

6/312. Khi qut v prototypeTng qut th c th xem prototype (bn mu) l mt m hnh thu nh. N l bn tho hay m phng vi kh nng d thay i.Nhiu loi prototype

dvduc-2007/10Bi 7: Xy dng prototype

7/31Ti sao xy dng prototype?Prototype c xy dng nhanh hn nhiu so vi ci t thit k cui cng, vy ta c th nh gi sm v nhn c phn hi sm v nhng im tt v xu ca thit k.Nu c quyt nh thit k no m kh gii quyt, th c th xy dng nhiu prototype cha cc gii php khc nhau xem xt, nh gi.Vi prototype c th d dng thay i thit k nu cn. d dng quyt nh vt b prototype nu thit k c thiu st nghim trng (kh khn vi m trnh c debug)Prototype h tr vic giao tip gia cc i ng pht trin v ngi s dng giao din phn mm.

dvduc-2007/10Bi 7: Xy dng prototype8/31Cc loi prototypeCc loi prototype chnh bao gmDy cc phc ha mn hnhStoryboard (phim hot hnh nh dy cc bn phc ha)Powerpoint slideshowVideo m phng s dng h thngMakt bng ba cngon chng trnh vi chc nng hn ch c vit bng ngn ng lp trnh nh C#, Java... hay ngn ng m t ca Director (Flash)...M hnh vt l.

dvduc-2007/10Bi 7: Xy dng prototype9/31 trung thc ca prototype trung thc c xem nh mc tng t ca prototype so vi giao din ngi s dng cui cngPrototype vi trung thc thp s thiu nhiu chi tit, n s dng vt liu r tin hn. Prototype vi trung thc cao c mc tng t cao so vi sn phm cui cng. trung thc l a chiudvduc-2007/10Bi 7: Xy dng prototypedifferent featuresscenarioVertical prototypehorizontalprototypeFront endBack end10/31 trung thc ca prototype rng ca prototype:Phn trm ca tp c trng c biu din bi prototypePrototype vi trung thc thp theo chiu rng c ngha cn thiu nhiu cc nng, n ch thc hin c mt vi nhim v c thV d prototype ca trnh son tho vn bn c th thiu in v kim tra li chnh t su ca prototype: cp n vic ci t c trng su n mc noPrototype vi trung thc thp theo chiu su s c hn ch la chn, khng c qun l li...V d khng th in 2 mt, ch in cng mt on vn bn...

dvduc-2007/10Bi 7: Xy dng prototype11/31Cc loi prototypeTrn c s trung thc th c th chia prototype thnhPrototype ngang (horizontal)Ton b chc nng l rng, mt t chc nng l suPrototype dc (vertical)Mt nhm c trng ca UI c ci t su.c s dng nhiu hnPrototype hng kch bn (scenario)L phn giao ca prototype ngang v prototype dcQuan st c front end ca mi nhim v c th.

dvduc-2007/10Bi 7: Xy dng prototypedifferent featuresscenarioVertical prototypehorizontalprototypeFront endBack end12/31Cc loi prototypeHai tnh cht khc ca trung thc ca prototypeHnh dng (Look)L din mo ca prototypeV d phc ha bng tay s c trung thc thp v hnh dng so vi prototype xy dng bng cng c phn mm my tnhCm gic (Feel) cp n cc phng php vt l m ngi s dng tng tc vi prototype.V d prototype vi trung thc thp v cm gic h tr ngi s dng tng tc vi bn mu giy bng cch tr ngn tay thay cho chut, vit trn giy thay cho nhp t bn phm.

dvduc-2007/10Bi 7: Xy dng prototype13/313. Xy dng prototype giyy l la chn tuyt vi cho nhng vng lp thit k u tin.Prototype giy l m hnh vt l ca giao din lm t giy. Giao din c phc ha bng tay trn cc mu giy. Mu giy biu din cc phn t khc nhau nh thc n, hp thoi hay ca s.Tng tcTr bng ngn tay tng ng vi tr bng chut; Vit trn cc mu giy tng ng vi g bn phm.Prototype giy c trung thc thp trong c hai kha cnh l hnh dng v cm gic.C gi r.dvduc-2007/10Bi 7: Xy dng prototype14/31Ti sao s dng prototype giy?Phc ha bng tay trn giy s nhanh hn vic vit m trnh hay phc ha bng my tnh.Giy l d thay iGia cc cng on kim th ca user hay c trong khi user kim thXy dng nhanh: Ngi thit k khng mt thi gian tp trung vo cc chi tit nh font, mu, cn chnh, khong cch Khch hng a ra cc gi sng to, khng "xoi mi" Phc ha bng tay lm tng phn hi nhn c t ngi s dng.Khng i hi k nng c bit noKhng cn nh thit k ha, chuyn gia v tnh s dng c, thm ch user cng c th to ra prototype.

dvduc-2007/10Bi 7: Xy dng prototype15/31V d prototype giy

dvduc-2007/10Bi 7: Xy dng prototype16/31

V d prototype giydvduc-2007/10Bi 7: Xy dng prototype

17/31Cc cng c xy dng prototype giyBng p phch trng (11 x14)Lm nn, khung ca sS lng ln cc th ch mc (4 x 6 , 5 x8)Lm menus, window contents, v dialog boxesH dn dn cc mu giyBng giy trng lm text fields, checkboxes, short messagesGiy bng knh highlighting. Mc ch khc l ngi s dng typing (vit ln chng)My sao chp to ra nhiu phn t trong bn mu.Bt, ko v bng giy

dvduc-2007/10Bi 7: Xy dng prototype18/31Kinh nghim xy dng prototype giyPrototype giy nn ln hn kch thc trong thc tChn bng tayD dng quan st t xa vi ng ngiKhng lo lng v vic s dng mu trong prototype. Hy s dng mu n khng lm mt tp trung vo nhng kha cnh quan trng hn.Khng cn trnh din mi hiu ng (v d tooltip, drag & drop, animation, progress bar)Thay th phn hi trc quan bng li niV d " A progress bar pops up: 20%, 50%, 75%, done"Kt hp phc ha giao din bng tay vi cc nh mn hnh (screenshort) tng hiu qudvduc-2007/10Bi 7: Xy dng prototype19/31ch li ca prototype giyM hnh khi nim: Ngi s dng c hiu UI khng?Chc nng: N c lm ci cn phi lm khng? Thiu c trng khng?Dn ng v lung nhim v: Ngi s dng c th tm ra cch s dng? Ph hp vi thng tin tin iu kin?Thut ng: Ngi s dng c hiu cc nhn khng?Ni dung mn hnh: Nhng ci g cn xut hin trn mn hnh?

dvduc-2007/10Bi 7: Xy dng prototype20/31Hn ch ca prototype giyPrototype giy c trung thc thp v trc gic (look)i khi ngi s dng rt kh nhn ra cc widgets m h v bng tay hay cc nhn m h va m t mt cch vi vng.C trung thc thp v cm gic (feel)Hnh ng di v nh chut. Cc vn lin quan n lut Fitts nh phm qu nh, controls qu gn nhau hay qu xa nhau u khng th c nhn bit trn prototype giy.C trung thc thp v phn hiV d khng th c thanh progress chuyn ng. C trung thc thp v thi gian p ngKhng th o thi gian thc hin nhim vC trung thc thp v ng cnh s dngKhng th em n ra ca hng tp ha, tu in ngm, dvduc-2007/10Bi 7: Xy dng prototype21/314. Xy dng prototype bng my tnhPrototype my tnh l m phng phn mm tng tcPrototype my tnh in hnh l loi prototype theo chiu ngangC trung thc cao v hnh dng v cm gic, C trung thc thp theo chiu su.Hai k thut xy dng prototype my tnhStoryboardL trnh t ca cc mn hnh c nhForm builderL cng c v cc giao din thcdvduc-2007/10Bi 7: Xy dng prototype22/31C th bit c g t prototype my tnh?C mi th nh prototype giy v hn na.B tr mn hnhR rng, phc tp hay lm ri bi hay khng?Ngi s dng c th tm thy cc phn t quan trng?Mu, font, icon v cc phn t khcLa chn ph hp cha?Phn hi tng tcC kh nng thng bo vi ngi s dng bng thng ip, thanh trng thi, thay i hnh dng con chy v cch phn hi khc. Lut FittsCc iu khin ln cha? C qu gn nhau khng? Danh sch trt c qu di?dvduc-2007/10Bi 7: Xy dng prototype23/31K thut xy dng StoryboardStoryboard: L trnh t ca cc mn hnh c nh. Mi mn hnh c mt hoc nhiu hotspots (hyperlink) StoryBoard c s dng cho cc kch bn, chuyn dn n chi tit hn. L dy cc phc tho/khung hnh c bn.Li th ca storyboard C th v bt k ci g trn storyboard. N cho php t do sng to m Form builder khng th c (vi widgets c nh).Bt li l t bn cht tnh ca storyboardCh c th nhn phm chut, khng c th nhp text. Text box, scrollbars, list boxes, v buttons ch l nhng bc tranh, th ng.

dvduc-2007/10Bi 7: Xy dng prototype24/31Cng c xy dng storyboardPowerPointMi slide show l mt mn hnh c nh m n c v bi trnh v hay v trc tip bng PowerPoint. PowerPoint storyboard c cc hyperlink nhy n slide bt k trong trnh din.Macromedia Flash L cng c gip xy dng giao din a phng tin. c bit hu hiu cho cc giao din prototype vi giu thng tin phn hi chuyn ng.HTMLMi mn hnh l mt bn nh (image map). Macromedia Dreamweaver h tr tt cho vic xy dng bn nh ca HTML.Cc cng c trn u c ngn ng m tBasic, Ligo v Javascript.

dvduc-2007/10Bi 7: Xy dng prototype25/31V d storyboarddvduc-2007/10Bi 7: Xy dng prototype

26/31V d storyboarddvduc-2007/10Bi 7: Xy dng prototype

27/31K thut xy dng Form builderForm builder: L cng c v cc giao din thcThc hin bng di cc widgets (buttons, text fields, labels, ) t palette v t n trn ca s.Cng c xy dng FormHTML L cng c xy dng ng dng Web. C th t hp cc trang HTML tnh m phng cc p ng ng ca giao din Web. C th g phm vo form, s dng thanh trt GUI BuilderVisual Basic l Form Builder kinh in. .NET Windows Forms, Java Form Builders: Eclipse Visual Editor, Borland JBuilder, Sun NetBeansMac Interface Builder

dvduc-2007/10Bi 7: Xy dng prototype28/31GUI Design Studiodvduc-2007/10Bi 7: Xy dng prototype

29/315. Tng kt biTm quan trng ca vic xy dng prototypeCc loi prototype trung thc ca prototypeK thut xy dng prototype giyK thut xy dng prototype my tnhCc cng c xy dng prototype giy v my tnhdvduc-2007/10Bi 7: Xy dng prototype30/31Cc ch nghin cu tip theoGii thiu cng c m anh/ch tng s dng xy dng prototype.Nu cha s dng cng c no, anh ch hy s dng GUI Design Studio xy dng mt prototype demo.

dvduc-2007/10Bi 7: Xy dng prototype31/31Tr li gi v eMail: [email protected] hi?