TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM MÔN HỌC CÔNG NGHỆ PHẦN MỀM Chương Thiết kế giao diện

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM
MÔN HỌC
CÔNG NGHỆ PHẦN MỀM

Chương 7

Thiết kế giao diện

CNPM

1


Thiết kế giao diện
7.1 Nguyên tắc thiết kế giao diện
7.2 Quy trình thiết kế giao diện
7.3 Các yêu cầu trong thiết kế
7.4 Giao diện Web

CNPM

2


7.1 Nguyên tắc thiết kế giao diện
Thiết kế giao diện
Dễ học?
Dễ dùng?
Dễ hiểu?

CNPM

3


Thiết kế giao diện
Lỗi thiết kế đặc trưng
Thiếu toàn vẹn
Phải nhớ q nhiều
Khơng có hướng dẫn, trợ giúp
Khơng nhạy với ngữ cảnh
Đáp ứng nghèo nàn
Khơng thân thiện, khó hiểu

CNPM

4


Luật vàng

„
„
„

CNPM

Người dùng dễ điều khiển
Người dùng ít phải nhớ
Giao diện toàn vẹn

5


Người dùng dễ điều khiển
„

„
„
„
„
„

Không buộc người dùng phải hoạt động khơng cần thiết
hay khơng ưa thích
Tương tác mềm dẽo
Tương tác người dùng có thể ngắt và undo
Tương tác theo luồng và cho phép tùy biến tương tác
Che dấu kỹ thuật bên trong
Tương tác trực tiếp với những đối tượng trên màn hình

CNPM

6


Người dùng ít phải nhớ
„
„
„
„

„

Giảm nhu cầu nhớ ngắn
Tạo những trường hợp mặc định có ý nghĩa
Shortcut trực quan
Thể hiện hình ảnh bằng những biểu tượng theo
thế giới thực
Trình bày thông tin theo diễn tiến động

CNPM

7


Giao diện toàn vẹn
„

„
„

Cho phép người dùng sử dụng các tác vụ theo
ngữ cảnh
Các giao diện trong ứng dụng phải tồn vẹn
Mơ hình tương tác trước đó được người dùng
ưa chuộng thì khơng nên thay đổi trừ khi có một
lý do thuyết phục

CNPM

8


Ví dụ

CNPM

9


CNPM

10


Một số đặc điểm của người sử dụng
„

„

„

„

Khả năng nhớ tức thời của con người bị hạn chế: con
người chỉ có thể nhớ ngay khoảng 7 thơng tin. Nếu ta
biểu diễn nhiều hơn thì có thể khiến người sử dụng
khơng nhớ hết và gây ra các lỗi.
Người sử dụng có thể gây ra lỗi, khi đó những thơng báo
khơng thích hợp có thể làm tăng áp lực lên người sử

dụng và làm cho dễ xảy ra lỗi khác.
Người sử dụng có khả năng và sở thích hồn tồn khác
nhau
Giao tiếp đa phương tiện dễ thu hút người dùng

CNPM

11


Nguyên tắc thiết kế giao diện
„

Sự quen thuộc của người sử dụng: giao diện phải được
xây dựng dựa trên các thuật ngữ và các khái niệm mà người
sử dụng có thể hiểu được hơn là những khái niệm liên quan
đến máy tính. Ví dụ: hệ thống văn phịng nên sử dụng các
khái niệm như thư, tài liệu, cặp giấy… mà không nên sử dụng
những khái niệm như thư mục, danh mục …

„

Thống nhất: hệ thống nên hiển thị ở mức thống nhất thích
hợp. Ví dụ: các câu lệnh và menu nên có cùng định dạng…

„

Tối thiểu hố sự bất ngờ: nếu một yêu cầu được xử lý theo
cách thông thường thì người sử dụng có thể dự đốn các
thao tác của những yêu cầu tương tự.

CNPM

12


Nguyên tắc thiết kế giao diện
„

„

„

Khả năng phục hồi: hệ thống nên cung cấp
một số khả năng phục hồi tới tình trạng trước
đó: undo, xác nhận một lần nữa trước khi sửa
xóa…
Hướng dẫn người sử dụng: như hệ thống trợ
giúp, hướng dẫn trực tuyến …
Tính đa dạng: hỗ trợ nhiều loại tương tác cho
nhiều loại người sử dụng khác nhau. Ví dụ: nên
hiển thị phơng chữ lớn với những người cận thị.

CNPM

13


CNPM

14


CNPM

15


CNPM

16


7.2 Qui trình tạo giao diện người dùng
(UI User - Interface)

CNPM

17


CNPM

18


Phân tích giao diện
„

Nhằm hiểu

„

„

„

„

CNPM

(1) the people (end-users) who will interact with the
system through the interface;
(2) the tasks that end-users must perform to do their
work,
(3) the content that is presented as part of the
interface
(4) the environment in which these tasks will be
conducted (ảnh hưởng): không gian làm việc, thiết
bị, quan hệ…

19


Phân tích người dùng
„
„
„

„
„

„

„

Người dùng là ai?
Trình độ người dùng?
Khả năng sử dụng tài liệu hướng dẫn bằng giấy hay cần
phải mở lớp huấn luyện?
Tuổi tác người dùng?
Người dùng sẽ được lợi như thế nào?
Người dùng có sử dụng thường xuyên cho công việc
hay không?
Nếu người dùng xảy ra lỗi thì hậu quả như thế nào?

CNPM

20


Phân tích tác vụ và mơ hình
„

Trả lời
„

„
„
„

„

„

„

„

Trong tình huống đặc trưng thì người dùng thực hiện cơng việc
gì?
Tác vụ và các tác vụ con?
Luồng công việc?
Hệ thống cấp bậc của tác vụ? …

Các Use case xác định những tương tác cơ bản
Hình thành những cơng việc lọc ra những tác vụ tương
tác
Hình thành những đối tượng nhận diện ra những đối
tượng giao tiếp (classes)
Phân tích luồng cơng việc xác định cách thức cơng việc
được hồn tất khi có nhiều người

CNPM

21


Biểu đồ Swimlane
p a t ie n t

p h a r m a c is t

r e q u e s t s t h at a

d e t e r m in e s s t at u s o f

p r e s c r ip t io n b e r e f ille d

p h y s ic ia n

p r e s c r ip t io n

n o r e f ills
r e m ain in g
r e f ills
r e m ain in g

c h e c k s in v e n t o r y f o r
r e f ill o r alt e r n at iv e

c h e c k s p at ie n t
r e co r d s

ap p r o v e s r e f ill

r e f ill n o t
allo w e d

e v alu at e s alt e r n at iv e
r e c e iv e s o u t o f s t o c k

m e d ic at io n

o u t o f st o ck

n o t if ic at io n

a lt e r n a t iv e
a v a ila b le
in st o ck
r e c e iv e s t im e / d at e

none

t o p ic k u p

p ic k s u p
p r e s c r ip t io n

f ills
p r e s c r ip t io n

r e c e iv e s r e q u e s t t o
c o n t ac t p h y s ic ian

CNPM

F ig u r e 1 2 . 2

S w im la n e d ia g r a m f o r p r e s c r ip t io n r e f ill f u n c t io n

22

Phân tích nội dung thể hiện bằng hình ảnh
„

„
„
„

„

„
„

Việc bố trí màn hình theo loại dữ liệu (hình ảnh thì
thường thể hiện phía tay phải bên trên màn hình…)
Người dùng có thể tùy biến màn hình?
Phân chia những báo cáo lớn như thế nào cho dễ hiểu?
Những kỹ thuật nào dùng cho thể hiện thơng tin tóm tắt
trong việc thu thập dữ liệu lớn?
Output dạng hình ảnh có phù hợp trong biên của thiết bị
thể hiện hình ảnh được dùng?
Sử dụng màu sắc?
Thể hiện lỗi và cảnh báo?

CNPM

23

Các bước thiết kế
„
„
„
„

Xác định đối tượng giao tiếp và tác vụ
Xác định sự kiện, mơ hình hóa hành vi
Thể hiện bằng hình ảnh mỗi trạng thái giao tiếp
Chỉ ra cách thức người dùng hiểu những trạng thái của
hệ thống từ những thông tin qua giao diện

CNPM

24


Mẫu thiết kế giao diện
„
„
„
„
„
„
„
„
„

CNPM

The complete UI
Page layout
Forms and input
Tables
Direct data manipulation
Navigation
Searching
Page elements
e-Commerce

25