Mạng thông tin thiết kế giao diện

Thiết kế
giao diện

1


Thiết kế giao diện
Mở đầu 
Nguyên tắc thiết kế giao diện
Thiết kế biểu mẫu và báo cáo
Thiết kế giao tiếp

2


1. Mở đầu
• Giao diện người sử dụng (user interfaces) là
cách thức các thực thể ngoài tương tác với HT.
• Giao diện hệ thống (system interfaces) là cách
thức HTTT trao đổi thông tin với hệ thống khác.
• Phần này tập trung vào thiết kế giao diện người
sử dụng hay còn gọi vắn tắt là thiết kế giao diện.
• Thiết kế giao diện là quá trình PTV xác định cách
thức người sử dụng tương tác với HT cũng như
bản chất của các input và output mà HT chấp
nhận và tạo ra.

3


• Giao diện người sử dụng, gọi tắt là giao diện,

gồm có ba phần căn bản:
- Cơ chế điều khiển (navigation mechanism).
- Cơ chế nhập liệu (input mechanism).
- Cơ chế xuất liệu (output mechanism).
• Cơ chế điều khiển nhằm nói đến các cách mà
qua đó người sử dụng bảo cho HT những gì phải
thực hiện. Ví dụ thực đơn, nút nhấn.
• Cơ chế nhập liệu nhằm nói đến các cách mà
qua đó HT nắm bắt được thông tin. Ví dụ biểu
mẫu màn hình nhập thông tin đơn đặt hàng.
4


• Cơ chế xuất liệu nhằm nói đến các cách mà
HT cung cấp thông tin cho người dùng hoặc các
hệ thống khác. Ví dụ như báo cáo in ra, trang
Web.
• Ba cơ chế thường được kết hợp với nhau.
Chẳng hạn các màn hình đều hiển thị cơ chế
điều khiển, và phần lớn chứa cả cơ chế nhập
liệu và xuất liệu.
• Ngoài ra, khi nói đến giao diện là màn hình
giao tiếp người ta thường đề cập đến giao diện
dựa trên Web (Web-based Interfaces) và giao
diện GUI (Graphical User Interfaces).
5


• Trong HTTT khi nói đến thiết kế giao diện,
người ta chú trọng đến:

- Thiết kế các biểu mẫu nhập liệu (forms)
trên màn hình máy tính.
- Thiết kế các báo cáo xuất liệu (reports) từ
máy in, hoặc hiện ra trên màn hình máy
tính, hoặc lưu thành tập tin.
- Thiết kế các phương tiện giao tiếp
(commands, windows, menus, objects) và
các đối thoại giữa người dùng và HT qua
màn hình.
6


Thiết kế giao diện
Mở đầu

Nguyên tắc thiết kế giao
diện 
Thiết kế biểu mẫu và báo cáo
Thiết kế giao tiếp

7


2. Nguyên tắc thiết kế giao diện
• Có thể nói thiết kế giao diện là công việc ít nhiều
mang tính nghệ thuật.
• Mục tiêu của thiết kế giao diện:
-

Người dùng cảm thấy đẹp mắt.

Đơn giản, dễ sử dụng.
Không tốn nhiều công sức thao tác.
Không mất nhiều thời gian để học.
Thừa kế được các thói quen thao tác.

• Giao diện đóng vai trò quan trọng vì người dùng
thường đánh giá HT qua giao diện.
8


• Một số nguyên tắc căn bản thiết kế giao diện.
- Khung giao diện (Layout).
- Gợi lên nội dung (Content awareness).
- Thẩm mỹ (Aesthetics).
- Kinh nghiệm người dùng (User experiences)
- Nhất quán (Consistency).
- Người dùng ít tốn sức (Minimal user effort).

9


Nguyên tắc khung giao diện
• Nguyên tắc khung giao diện nhằm nói đến việc
phân bố và trang trí các vùng hiển thị thông tin,
hình ảnh và biểu tượng trên các màn hình giao
tiếp, biểu mẫu hay báo cáo.
• Ví dụ khung giao diện.
Màn hình thường được chia thành ba khu vực:
- Khu vực điều khiển (đỉnh).
- Khu vực thông báo tình trạng (đáy).

- Khu vực làm việc (giữa).
10


• Các khu vực giống nhau nên được nhóm lại.
• Các khu vực chứa thông tin đi cùng luồng (liên
quan logic với nhau) nên được sắp xếp sao cho
NSD dùng ít thao tác di chuyển.
• Nếu có thể, các khu vực nên nhất quán với
nhau về:
-

Kích thước.
Hình dáng.
Vị trí nhập dữ liệu.
Vị trí hiển thị các dữ liệu tìm thấy.
11


Ví dụ khung giao diện.

12


Ví dụ
khung
giao
diện.
(Có nhiều
khu vực

điều khiển,
cho phép
NSD di
chuyển)

13


Ví dụ khung
giao diện.
(Bố trí các vùng
thông tin theo
kiểu dọc, theo
kiểu ngang)

14


Nguyên tắc gợi lên nội dung
• Nguyên tắc gợi lên nội dung nhằm nói đến khả
năng giao diện làm cho NSD ý thức được dễ
dàng nội dung giao diện đang đề cập đến.
• Tất cả các phần của giao diện (điều khiển, di
chuyển, nhập, xuất) nên có nhiều khả năng gợi
lên nội dung.
• Một số áp dụng của nguyên tắc này:
- Có tiêu đề rõ ràng.
- Dấu hiệu cho thấy NSD đang ở đâu.
- Dấu hiệu cho thấy NSD đến từ đầu.
15

• Đối với các biểu mẫu, báo cáo.
- Các vùng cần được định danh rõ ràng để
NSD không phải đoán thông tin trong vùng
nào đó liên quan đến cái gì.
- Các vùng cần được phân bố rõ ràng để
NSD có thể định vị nhanh những phần trong
biểu mẫu, báo cáo chứa thông tin họ cần.
- Các tiêu đề vùng, tên các mục tin cần phải
chọn lọc trình bày cẩn thận. Các mục tin liên
quan cần được trình bày nhóm lại.
16


Nguyên tắc thẩm mỹ
• Nguyên tắc thẩm mỹ nhằm nói đến khía cạnh
mỹ thuật của giao diện làm hài lòng NSD.
• Để giao diện được đẹp mắt, cẩn thận khi:
-

Trình bày logo tổ chức, các tiêu đề.
Phân phối các khoảng trắng.
Dùng phối hợp các màu sắc.
Canh thẳng hàng các vùng, các mục tin.
Phân bố các khu vực, các vùng.
Chọn phông chữ, kích cỡ chữ, màu chữ.
Chọn màu hay hình làm nền cho chữ.
17

Nguyên tắc kinh nghiệm người dùng
• Nguyên tắc kinh nghiệm người dùng nhằm nói
đến sự thích hợp của người dùng đối với việc giao
tiếp giao diện.
• Đối với NSD có ít kinh nghiệm, giao diện cần có
các giải thích hoặc hướng dẫn, các thực đơn của
màn hình giao tiếp cần có đủ các chức năng.
• Đối với NSD có nhiều kinh nghiệm, họ thích giao
diện ngắn gọn và súc tích, hoặc màn hình giao
tiếp nên có các thực đơn thu gọn theo ngữ cảnh.
18


Nguyên tắc nhất quán
• Nguyên tắc nhất quán nhằm nói đến khả năng
cho phép NSD dự đoán điều gì sẽ xảy ra khi giao
tiếp với giao diện.
• Với giao diện nhất quán, NSD có thể tương tác
với một phần của HT và sau đó biết cách tương
tác với phần còn lại  NSD giảm thời gian học.
• Sự nhất quán diễn ra ở nhiều khía cạnh:
- Các biểu tượng điều khiển, di chuyển.
- Các thuật ngữ, tiêu đề, logo.
- Hình thức biểu mẫu, báo cáo, màn hình.
19


Nguyên tắc người dùng ít tốn sức
• Nguyên tắc người dùng ít tốn sức nhằm nói đến

giao diện nên được thiết kế sao cho NSD không
tốn nhiều công sức thao tác, tìm hiểu vẫn sử
dụng được HT để hoàn thành được công việc.
• Quy tắc ba lần nhấp chuột.
NSD có thể đi từ điểm bắt đầu hoặc thực đơn
chính của HT đến thông tin họ cần hoặc hành
động họ muốn thực hiện mà không qua ba lần
nhấp chuột hoặc ba lần nhấn phím.
20


Thiết kế giao diện
Mở đầu
Nguyên tắc thiết kế giao diện

Thiết kế biểu mẫu và báo
cáo 
Thiết kế giao tiếp

21


3. Thiết kế biểu mẫu và báo cáo
• Biểu mẫu (forms) là loại tài liệu công việc trên
đó có những dữ liệu được xác định trước (tiêu đề,
nhãn) và có thể có những vùng cần phải được
điền dữ liệu vào khi một giao dịch công việc được
phát sinh.
• Báo cáo (reports) là loại tài liệu công việc chỉ
chứa những dữ liệu được ấn định trước, được tạo

ra. Báo cáo là tài liệu chỉ để đọc và xem xét dữ
liệu trên đó.
22


• Biểu mẫu thường là phương tiện mà qua đó
các thực thể ngoài cung cấp thông tin cho HT
hoạt động. Biểu mẫu có thể ở nhiều dạng như
giấy, trang Web, màn hình nhập liệu.
• Ngược lại, báo cáo là phương tiện mà qua đó
HT cung cấp những thông tin lưu trữ và đã
được xử lý cho các thực thể ngoài xem xét. Báo
cáo cũng có thể ở nhiều dạng như giấy, trang
Web, màn hình xuất liệu hoặc lưu thành tập tin.
• Thu thập các biểu mẫu và báo cáo để phân
tích là việc cần làm ở bước thu thập yêu cầu
trong giai đoạn phân tích.
23


• Trong HTTT quản lý thường có các loại báo
cáo thông dụng sau đây:
- Báo cáo định kỳ: Báo cáo được tạo ra khi
đến thời điểm được ấn định (cuối mỗi tuần).
- Báo cáo tóm lược: Báo cáo chứa thông tin
tóm tắt, tổng kết quan trọng theo qui định.
- Báo cáo ngoại lệ: Báo cáo chứa thông tin
bất thường không theo qui định, kế hoạch.
- Báo cáo kèm theo: Báo cáo chứa những
thông tin chi tiết kèm theo các thông tin tóm

tắt và tổng kết.
24


• Quá trình thiết kế biểu mẫu và báo cáo.
- Là hoạt động hướng vào NSD.
- Dùng cách tiếp cận tạo mẫu (propotype).
- Cần làm rõ (khi thu thập yêu cầu):
Mục đích của biểu mẫu, báo cáo là gì?
Ai dùng biểu mẫu, báo cáo?
Biểu mẫu, báo cáo được dùng ở đâu?
Biểu mẫu, báo cáo được dùng khi nào?
Bao nhiêu người dùng biểu mẫu, báo cáo?
25