Bài giảng Bộ môn Công nghệ phần mềm - Bài 5: Thiết kế giao diện người dùng

Bài 5 - Thiết kế giao diện người dùng. Bài giảng cung cấp các kiến thức về: Khái niệm, tầm quan trọng, mô hình thiết kế giao diện và các nguyên thiết kế giao diện đảm bảo sự thân thiện người sử dụng. Bên cạnh đó, bài giảng còn chia sẻ cách khắc phục sự cố, ổn định và các vấn đề liên quan đến thiết kế... Mời các bạn cùng tham khảo.

THI T K  GIAO DI N  Ế Ế Ệ

NG ƯỜ I S  D NG Ử Ụ

BM CNPM – Khoa CNTT – 

HVKTQS10/2012

Khái ni m, t m quan tr ng ệ ầ ọ

 Khái ni m giao di n ng ệ ệ ườ i dùng (User Interface – UI): Là không gian, 

n i mà s  t ơ ự ươ ng tác gi a ng ữ ườ ử ụ i s  d ng và máy tính đ ượ c th c hi n ự ệ

 UID là thành ph n quan tr ng trong thi t k  ph n m m ầ ọ ế ế ầ ề

 Y u t  con ng ế ố ườ i ph i đ ả ượ c coi tr ng đ c bi t (user­centric design) ọ ặ ệ

 Chúng ta có trí nh  gi i h n ớ ớ ạ

 Chúng ta đ u có th  có sai l m trong thao tác v i ph n m m ề ể ầ ớ ầ ề

 Chúng ta có kh  năng v t lý khác nhau: nghe nhìn, vv ả ậ

 Chúng ta có s  thích t ở ươ ng tác v i ph n m m khác nhau ớ ầ ề

 Ng ườ ử ụ i s  d ng thông th ườ ng đánh giá ph n m m thông qua giao di n  ầ ề ệ

h n là ch c năng ơ ứ

 Giao di n t i là nguyên nhân mà ph n m m không đ ệ ồ ầ ề ượ c s  d ng ử ụ

 Ph n l n là giao di n đ  h a, nói đ n UID th ầ ớ ệ ồ ọ ế ườ ng là nói đ n GUI  ế

design

Các mô hình thi t k  giao di n ế ế ệ

 Mô  hình  t/k   do  KS  PM  xây  d ng:  t   h p  ế ự ổ ợ b/di n  d   li u,  k/trúc  và  th   t c  c a  PM  đ   ễ ữ ệ ủ ụ ủ ể th/hi n đ ệ ượ c c/năng

 Mô  hình  ng ườ i  dùng:  do  KS  PM/  KS  con 

ng ườ i  XD,  nó  mô  t   s   l ả ơ ượ c  h   th ng  cho  ệ ố

ng ườ i dùng cu i ố

 Mô hình ng ườ i dùng c m nh n h  th ng do  ả ậ ệ ố

ng ườ i dùng cu i cùng xây d ng ố ự

 Hình  nh h  th ng do ng ả ệ ố ườ i cài đ t h  th ng  ặ ệ ố xây  d ng,  nó  t   h p  các  bi u  l   bên  ngoài  ự ổ ợ ể ộ

c a h  th ng d a trên máy tính ủ ệ ố ự

Các nguyên lý thi t k ế ế

Thân thi n ng ệ ườ ử ụ i s  d ng

 Tránh áp đ t cách s  d ng cho ngặ ử ụ ười 

s  d ngử ụ

 S  d ng các khái ni m ph  bi nử ụ ệ ổ ế

 G n v i môi trắ ớ ường làm vi c c  thệ ụ ể

n đ nh

Ổ ị

 Gi m thi u các hành đ ng không mong ả ể ộ

đ i khi ngợ ườ ử ụi s  d ng thao tác v i giao ớ

di n ph n m mệ ầ ề

Kh  năng kh c ph c s  c ả ắ ụ ự ố

 Nên có câu h i kh ng đ nh (confirm) ỏ ẳ ị

nh ng hành đ ng có th  gây ra s  m t ữ ộ ể ự ấmát

 Cung c p công c /thao tác undoấ ụ

 Đi m ki m tra (checkpointing): cho ể ể

phép ghi l i công vi c theo m t chu k  ạ ệ ộ ỳ

nh t đ nhấ ị

Kh c ph c s  c  (chi ti t) ắ ụ ự ố ế

H ướ ng d n ẫ

 Các h  th ng helpệ ố

 Thông tin help c n ng n g n súc tíchầ ắ ọ

Đa d ng ạ

 Tương tác v i ngớ ườ ử ụi s  d ng c n ph i ầ ả

đa d ng theo các th  lo i ngạ ể ạ ườ ửi s  

T ươ ng tác c a ng ủ ườ ử ụ i s  d ng

T ươ ng tác ng ườ ử ụ i s  d ng (chi ti t) ế

Tương tác ngườ ử ụi s  d ng (chi ti t – ti p)ế ế

Nh n xét v  các lo i t ậ ề ạ ươ ng  tác

 T c đ  thay đ i thông tin? Và li u ng ố ộ ổ ệ ườ ử ụ i s  d ng có 

c n thông báo v  thay đ i này? ầ ề ổ

 Li u ng ệ ườ ử ụ i s  d ng có b t bu c ph i tác đ ng ph n  ắ ộ ả ộ ả

Xây d ng h  th ng thông báo ự ệ ố

Bi u đ ể ồ

0 1000

Feb 2851

Mar 3164

April 2789

May 1273

June 2835

Bi u di n giá tr  t ể ễ ị ươ ng đ i ố

Pressure Temper atu re

Ti n trình UID: Ti n trình l p ế ế ặ

Các ho t đ ng UID ­ chi ti t ạ ộ ế

 B t đ u v i vi c t o ra các mô hình khác  ắ ầ ớ ệ ạ

nhau v  ch c năng h  th ng ề ứ ệ ố

 Phác h a ra các nhi m v  h ọ ệ ụ ướ ng con ng ườ i 

và máy tính đ  đ t t i ch c năng h  th ng  ể ạ ớ ứ ệ ố

 Xem xét các gi i pháp t/k  đ ả ế ượ c áp d ng cho  ụ

m i t/k  giao di n ọ ế ệ

 S  d ng các công c  làm b n m u ử ụ ụ ả ẫ

 Cài đ t cho mô hình t/k  và đánh giá k t qu   ặ ế ế ả

v  ch t l ề ấ ượ ng

Các ho t đ ng UID ­ t ng quát ạ ộ ổ

 Phân tích ng ườ ử ụ i s  d ng: hi u bi t ể ế

v  nhi m v  c a ngề ệ ụ ủ ườ ử ụi s  d ng, môi 

trường làm vi c,vv…ệ

 Xây d ng b n m u h th ng ự ả ẫ ệ ố : có th  ểtrình bày v i ngớ ườ ử ụi s  d ng trước

 Đánh giá giao di n ệ : thông qua tương tác v i ngớ ườ ử ụi s  d ng

Phân tích ng ườ ử ụ i s  d ng

 C n ph i n m b t đầ ả ắ ắ ược các hành đ ng ộ

c a ngủ ườ ử ụi s  d ng có th  trên các giao ể

di n ph n m mệ ầ ề

Ví dụ

Xây d ng b n m u ự ả ẫ

 Xây d ng b n m u trên gi y, sau đó ự ả ẫ ấ

th o lu n v i ngả ậ ớ ườ ử ụi s  d ng

 Ch nh s a b n m u và xây d ng b n ỉ ủ ả ẫ ự ả

m u t  đ ng.ẫ ự ộ

Ph ươ ng pháp xây d ng b n m u ự ả ẫ

 Phương pháp k ch b nị ả

 PP s  d ng ngôn ng  tr c quan hóaử ụ ữ ự

Đánh giá UID

Các k  thu t đánh giá đ n gi n ỹ ậ ơ ả

 Questionnaires for user feedback

 Video recording of system use and 

subsequent tape evaluation.

 Instrumentation of code to collect information  about facility use and user errors.

 The provision of a “gripe” button for on­line  user feedback.