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.
BM CNPM – Khoa CNTT – HVKTQS 10/2012
ệ
ầ
ủ
Khái ni m UI ọ T m quan tr ng c a UI và UI design Nguyên lý UID ế ế Thi
t k UI
ệ
ệ
ườ
i dùng (User Interface – UI): Là không gian,
Khái ni m giao di n ng ữ ự ươ
ơ
ượ
ự
ệ
n i mà s t
ng tác gi a ng
c th c hi n
ề
ầ ườ
ệ
ọ
i ph i đ
con ng
ườ ử ụ UID là thành ph n quan tr ng trong thi Y u t
i s d ng và máy tính đ ầ ế ế t k ph n m m ặ t (usercentric design) c coi tr ng đ c bi
ọ ả ượ ớ ớ ạ
i h n
ề
ề
ớ
ả
ầ
ở
ớ
ề ầ
ệ
ề
ế ố Chúng ta có trí nh gi ầ ầ ể 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 ươ ng tác v i ph n m m khác nhau Chúng ta có s thích t ườ ng đánh giá ph n m m thông qua giao di n i s d ng thông th
Ng ơ
ề
ượ
i là nguyên nhân mà ph n m m không đ
ầ ớ
ầ ế
ồ ọ
ệ
ườ
ườ ử ụ ứ h n là ch c năng ệ ồ Giao di n t Ph n l n là giao di n đ h a, nói đ n UID th
ử ụ c s d ng ế ng là nói đ n GUI
design
ự
ổ ợ
Mô hình t/k do KS PM xây d ng: t
ủ
ủ ụ
ế ữ ệ ượ
c c/năng
ườ
h p ể ễ b/di n d li u, k/trúc và th t c c a PM đ ệ th/hi n đ Mô hình ng
ệ
i dùng: do KS PM/ KS con ố c h th ng cho
ả ơ ượ s l
ng ng
ệ ố
ườ
ả
ườ ườ Mô hình ng ườ
ng
ườ
Hình nh h th ng do ng
ự ặ ệ ố i cài đ t h th ng ể ộ bên ngoài
ủ
i XD, nó mô t ố i dùng cu i ậ i dùng c m nh n h th ng do ố i dùng cu i cùng xây d ng ệ ố ả ổ ợ ự xây d ng, nó t h p các bi u l ự ệ ố c a h th ng d a trên máy tính.
Tránh áp đ t cách s d ng cho ng
ử ụ ặ ườ i
ệ
S d ng các khái ni m ph bi n ườ ớ G n v i môi tr
ử ụ s d ng ử ụ ắ ụ ể ổ ế ệ ng làm vi c c th
Đ nh d ng th ng nh t gi a các đ i
ữ ấ ạ ố ố
t
ấ ị
ẽ ử ụ ầ ọ ờ
ế ộ ệ ạ Th ng nh t đ nh d ng s giúp cho vi c ề gi m th i gian h c s d ng ph n m m ử Đi u gi n u m t phana mèm khác s
ị ngượ ố ả ề ụ ứ ộ
d ng “Ctrl+S” cho m t ch c năng khác thay vì SAVE?
ộ
Gi m thi u các hành đ ng không mong i s d ng thao tác v i giao ề
ườ ử ụ ớ
ả ợ ệ ể đ i khi ng ầ di n ph n m m
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
ể
ạ ệ ộ ỳ i công vi c theo m t chu k
ấ ể phép ghi l ấ ị nh t đ nh
ự ố
ụ
ắ
ế
Kh c ph c s c (chi ti
t)
ắ ọ ệ ố Các h th ng help ầ Thông tin help c n ng n g n súc tích
T
ớ ươ
ả ườ ử ụ i s d ng c n ph i ể ạ ầ ườ ử i s
ng tác v i ng ạ đa d ng theo các th lo i ng d ng.ụ
Ng
ườ i s d ng thông th ợ ầ ng thì c n tr
Ng
ườ ử ụ ơ ề giúp nhi u h n ườ ử ụ ệ ầ i s d ng chuyên nghi p thì c n
ề ơ shortcuts nhi u h n
ẽ ươ ớ i s d ng s t ệ ng tác v i h
ườ Ng ố ử ụ ư ế
Thông tin nên đ
th ng nh th nào? ượ ư ế c trình bày nh th
nào thông qua giao di n?ệ
ế ự
ự
ệ
Thao tác tr c ti p ọ L a ch n menu ậ Nh p form ử ụ S d ng ngôn ng dòng l nh ử ụ S d ng ngôn ng t
ữ ữ ự nhiên
ươ
ườ ử ụ
ế
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)
ộ ố
ỏ ầ
ể
ể
ị
ả ặ M t s câu h i c n ph i đ t ra đ xác đ nh ki u trình
bày thông tin ườ ử ụ
ớ ộ
Ng
i s d ng quan tâm t
i đ chính xác thông tin
ị ữ ệ
ệ ữ
ố
hay là m i quan h gi a các giá tr d li u?
ườ ử ụ
ộ
ệ
i s d ng có
ổ ắ
ả
ả
ộ
i s d ng có b t bu c ph i tác đ ng ph n
ố ầ ệ Li u ng ng l
ườ ử ụ
ả ươ
ớ
ổ T c đ thay đ i thông tin? Và li u ng ề c n thông báo v thay đ i này? ộ ườ ử ụ ổ ạ i thay đ i này? i s d ng có ph i t
ứ Ng
ng tác v i thông tin trình
bày? ể
ữ ệ
Ki u d li u trình bày là gi?
ượ ố i h n s màu đ c dùng trên giao
ớ ạ Gi ệ ộ ử ổ
Thay d i màu s c => thay đ i tr ng thái
di n, vd; <=4 màu trên m t c a s ổ ạ ắ
ổ ệ ố h th ng
ệ ạ Mã màu dùng đ i di n cho mã công
vi cệ
ả ự ẩ ọ ồ ầ Màu đ ng hành: c n ph i l a ch n c n
th n.ậ
Jan 2842
Feb 2851
Mar 3164
April 2789
May 1273
June 2835
4000
3000
2000
1000
0
Jan
Feb Mar April May
June
1
0
10
20
4
2
3
Dial with needle
Pie chart
Thermometer
Horizontal bar
0
100
200
300
400
0
25
50
75
100
Ch. 16 User interface design
ắ ầ
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
ệ ể ạ ớ
và máy tính đ đ t t
ườ i i ch c năng h th ng
ụ ướ ứ ế ượ
ng con ng ệ ố ụ c áp d ng cho
Xem xét các gi
ế
m i t/k giao di n
ả
ẫ
ế
ế
ả i pháp t/k đ ệ ụ 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
ế i s d ng
Phân tích ng ệ
ườ ử ụ : hi u bi ườ ử ụ ể t i s d ng, môi
ề ườ
ụ ủ v nhi m v c a ng ệ ng làm vi c,vv… tr ả
ườ ử ụ ớ ự trình bày v i ng ẫ Xây d ng b n m u h th ng i s d ng tr
ng
ệ ố : có th ể ướ c ươ Đánh giá giao di nệ : thông qua t ườ ử ụ ớ tác v i ng i s d ng
ắ ượ ộ
c các hành đ ng ể i s d ng có th trên các giao
ề ả ắ ầ C n ph i n m b t đ ườ ử ụ ủ c a ng ầ ệ di n ph n m m
ệ
ệ
ỏ
ộ
Ba k thu t phân tích chính ụ Phân tích công vi c/nhi m v ề ấ Ph ng v n/đi u tra Phân tích t
ng tác tính dân t c
ươ (ethnography)
ỹ ậ
ẫ Xây d ng b n m u trên gi y, sau đó ườ ử ụ ấ i s d ng
ự ả ẫ Ch nh s a b n m u và xây d ng b n
ự ả ậ ớ th o lu n v i ng ả ủ đ ng. ả ỉ ẫ ự ộ m u t
ươ ị
Ph PP s d ng ngôn ng tr c quan hóa
ng pháp k ch b 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 online
user feedback.
ề
ầ
ậ ườ ị
ộ
ệ R. Pressman, K ngh ph n m m. T p 1, 2, i d ch:
3. NXB Giáo d c, Hà N i, 1997 (Ng Ngô Trung Vi
ỹ ụ t).ệ
R. Pressman, Software Engineering: A Practioner’s Approach. 5th Ed., McGrawHill, 2001. Chapter 15.
I. Sommerville, Software Engineering. 5th
Ed., AddisonWesley, 1995. Chapter 15.
