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

Thiết kế giao diệnMở đầ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... • Trong HTTT khi nói đến thiết kế giao diện, người ta chú trọng đến: - Thiết

Thiết kế

giao diện

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

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

• 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

• 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)

• 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

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 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

• 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)

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)

• 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

Ví dụ khung giao diện.

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

• Đố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

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

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

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

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

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

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 đó

• 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

• 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

• 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?

• Áp dụng cách tiếp cận tạo mẫu (propotype)

để thiết kế biểu mẫu và báo cáo

- Xuất phát từ yêu cầu, thiết kế mẫu ban

đầu NSD xem xét, sau đó chấp nhận hoặc

yêu cầu thay đổi

- Nếu có yêu cầu thay đổi thì quá trình thay

đổi-xem xét được lặp đi lặp lại cho đến khi

NSD chấp nhận mẫu thiết kế

• Visual Basic và một số công cụ phát triển giúp

thiết kế biểu mẫu, báo cáo dạng màn hình giao

• Đặc tả thiết kế biểu mẫu, báo cáo.

- Là kết quả chính của việc thiết kế

Đặc tả thiết kế biểu mẫu, báo cáo.

• Một số hướng dẫn thực hành thiết kế biểu mẫu, báo cáo.

- Tựa đề, tiêu đề cần có nghĩa: Cần rõ ràng,

cụ thể, ngày, thông tin phiên bản

- Thông tin cần có nghĩa: Chỉ nên chứa những thông tin thực sự cần thiết (đối với NSD)

- Hình thức trình bày cân đối: Canh khoảng

cách cân đối, lề cân đối, có nhãn rõ ràng

- Dễ điều khiển, di chuyển trong HT: Cần cho

Ví dụ biểu

mẫu thiết kế

không tốt

• Sử dụng nhấn mạnh trong biểu mẫu, báo cáo.

- Chú ý NSD lỗi sai nhập liệu, xử lý

- Cảnh báo những vấn đề có thể xảy ra

- Gây sự quan tâm đến các từ khóa, lệnh,

thông báo quan trọng, giá trị dữ liệu không

thường có

• Có nhiều cách nhấn mạnh trong biểu mẫu,

báo cáo

- Nhấp nháy, in đậm, khác cỡ, khác phông

- Phát ra âm thanh, đóng khung, gạch dưới

- Đảo mầu sắc, dùng chữ in hoa

• Dùng màu sắc hay không dùng màu sắc khi

thiết kế biểu mẫu và báo cáo

- Ích lợi: Đánh thức thị giác, giúp phân biệt dễ dàng, nhấn mạnh logic tổ chức thông tin, giúp quan tâm các lời cảnh báo, có thể gợi lên các

cảm xúc tích cực

- Bất lợi: Có thể gây dị ứng hoặc phản cảm ở

một số NSD, độ phân giải hoặc hiển thị màu

sắc ở các màn hình khác nhau có thể tạo ảnh hưởng không như ý, có thể gây khó khăn khi

in ra hoặc khi chuyển qua phương tiện khác

• Những lưu ý khác khi thiết kế biểu mẫu và

báo cáo

- Dùng văn bản: Lưu ý chữ in, chữ thường,

cách chấm câu, khoảng cách dòng, khoảng

cách đoạn, canh lề, chữ viết tắt

- Dùng bảng biểu: Lưu ý tiêu đề cột, tiêu đề

dòng, canh lề ngang và lề đứng trong ô,

phân biệt dòng chi tiết, dòng tổng cộng

- Dùng biểu đồ, đồ thị: Lưu ý sự thích hợp,

giúp có cái nhìn tổng quát, so sánh được sự

Ví dụ bảng

thiết kế không

tốt

Ví dụ bảng

được thiết kế

cải tiến tốt

hơn

Ví dụ thiết kế

biểu đồ, đồ thị

trong báo cáo

• Đánh giá sự khả dụng (usability) của biểu

mẫu, báo cáo được thiết kế

- Cần thông tin phản hồi của NSD về các

biểu mẫu và báo cáo được thiết kế

- Đánh giá ở các khía cạnh:

Thời gian học sử dụng

Tốc độ thực hiện hoặc thao tác

Mức độ sai sót

Khả năng nhớ lại theo thời gian

Sự thỏa mãn hoặc hài lòng

• Sự khả dụng của các biểu mẫu, báo cáo

được thiết kế sẽ được tăng lên khi chúng:

- Nhất quán: Thuật ngữ, định dạng, tiêu đề,

nhãn, cách điều khiển, cách di chuyển, thời

gian đáp ứng

- Hiệu quả: Tốn ít thao tác, dễ nhớ, dễ học,

có khả năng tự giải thích (gợi ý nội dung)

- Định dạng tốt: Hiển thị dữ liệu, biểu tượng

một cách thích hợp

- Linh động: Cho NSD nhiều lựa chọn cách

thức thực hiện công việc

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 

4 Thiết kế giao tiếp

• Giao tiếp nhằm nói đến cách thức qua đó người dùng tương tác với hệ thống

• Các cách giao tiếp thông dụng:

- Dòng lệnh (commands)

- Thực đơn (menus)

- Biểu mẫu (forms)

- Dựa vào đối tượng (objects, icons)

- Ngôn ngữ tự nhiên (natural languages)

• Quá trình thiết kế giao tiếp.

- Xây dựng hình thức (bố trí thực đơn, văn

- Tạo phản hồi (lời nhắc nhở, thông báo tình

trạng, cảnh báo, thông báo sai)

• Đặc tả thiết kế giao tiếp tương tự như đặc tả

thiết kế biểu mẫu và báo cáo, nhưng thêm

phần đối thoại

Đặc tả thiết kế giao tiếp và đối thoại.

• Giao tiếp qua dòng lệnh.

- NSD đánh vào lệnh cụ thể để chỉ thị HT

thực hiện một tác vụ nào đó

- Lệnh phải thuộc tập lệnh đã được lập trình

sẳn và khi đánh vào phải đúng cú pháp

- Giao tiếp này bao gồm cả kiểu dùng phím

tắt (Alt+F), và phím chức năng (F1)

- Đây là kiểu giao tiếp truyền thống, ngày

nay ít được sử dụng vì đòi hỏi người sử

• Giao tiếp qua thực đơn.

- Bản chất thực đơn (menus) là đưa ra một

danh sách các lựa chọn cho phép NSD lựa

chọn, mỗi lựa chọn hướng đến một hành

động hoặc tác vụ nào đó

- Các loại thực đơn thông dụng:

Menu bar Pop-up menu

Drop-down menu Tab menu

Toolbar Image map

Ví dụ thực đơn kiểu truyền thống trong HT Unix.

Ví dụ

thực đơn

một cấp

Các loại

thực đơn

• Một số hướng dẫn thực hành thiết kế thực đơn.

- Từ ngữ: Tiêu đề có nghĩa, động từ ra lệnh rõ ràng, kết hợp chữ thường và chữ hoa

- Cấu trúc: Nhóm các tùy chọn phù hợp trong

Ví dụ thực đơn thiết kế không tốt.

Ví dụ thực đơn được thiết kế tốt.

Ví dụ thực đơn được thiết kế dùng MS Visual

Basic.NET

• Giao tiếp qua biểu mẫu.

- Cho phép NSD điền các vùng trống khi làm

việc với HT

- Thiết kế biểu mẫu giao tiếp hiệu quả:

Tiêu đề và nhãn vùng có nghĩa

Các vùng được nhóm lại một cách logic

Các đường biên vùng phân biệt rõ

Chứa giá trị mặc nhiên

Hiển thị vừa với chiều dài vùng

Tối thiểu việc cuộn màn hình

• Thiết kế biểu mẫu trong môi trường đồ họa

(GUI) có thể dùng các chuẩn về đối tượng

- Text boxes  nhập văn bản

- Check boxes  đánh dấu chọn (nhiều)

- Radio buttons  đánh dấu chọn (một)

- On-screen list boxes  chọn một trong ds

- Drop-down list boxes  chọn một trong ds

- Combo boxes  kết hợp chọn, nhập

- Sliders  chọn trên thang đo

Ví dụ giao tiếp qua biểu mẫu ở trang Web Google.

• Khi giao tiếp qua biểu mẫu thường NSD được

yêu cầu điền vào các mục dữ liệu

• Một số hướng dẫn thực hành thiết kế các mục cần nhập dữ liệu:

- Không nhập dữ liệu có thể tính toán

- Cung cấp giá trị mặc nhiên khi thích hợp

- Nêu rõ đơn vị dữ liệu

- Cung cấp các ví dụ định dạng

- Tự động canh hàng các mục dữ liệu

- Luôn đặt nhãn mục dữ liệu kề nơi nhập

Ví dụ các cách nhập mục dữ liệu văn bản.

• Giao tiếp qua đối tượng.

- Ký hiệu, biểu tượng được dùng để ám chỉ

lệnh (hành động) hoặc chức năng

- Thiết kế đối tượng giao tiếp hiệu quả:

Đối tượng đồ họa, có ý nghĩa

Chiếm ít chỗ trên màn hình

Đơn giản, không quá nhiều họa tiết

NSD có thể hiểu dễ dàng

Nhất quán về ý nghĩa, kích cỡ

Ví dụ về giao tiếp qua đối tượng.

• Giao tiếp qua ngôn ngữ tự nhiên.

- Nhập liệu vào HT và xuất liệu ra khỏi HT ở

dạng ngôn ngữ tự nhiên (chủ yếu là Anh

ngữ)

- Được thực hiện dựa trên các nghiên cứu

trong lĩnh vực trí tuệ nhân tạo (xử lý ngôn

ngữ tự nhiên)

- Chưa được áp dụng nhiều do không tiện

dụng NSD vẫn chuộng các cách giao tiếp lâu nay như giao tiếp qua lệnh, thực đơn hoặc

• Các lựa chọn phần cứng để giúp NSD tương

tác với HT

- Bàn phím, con chuột

- Joystick, trackball

- Touchscreen, light pen, phone

- Graphics tablet, giọng nói

- Có thể kết hợp kỹ thuật wireless

• Mỗi lựa chọn phần cứng sẽ kéo theo đặc tính

sử dụng, giao tiếp khác nhau

• PTV cần cân nhắc các yếu tố chi phí và đặc

điểm của NSD

• Trong quá trình giao tiếp với HT, NSD có thể

được yêu cầu cung cấp dữ liệu hoặc ý kiến

phản hồi (thực chất cũng là dữ liệu)

• HT cần phải kiểm tra những dữ liệu được NSD

đưa vào nhằm giảm các lỗi sai nhập liệu

• Một số nguyên nhân tạo lỗi sai nhập liệu

thông dụng:

- Nhập thêm các ký tự

- Nhập sót các ký tự

- Vào dữ liệu bất hợp lệ

• PTV cần đưa ra các loại kiểm tra tính hợp lệ

của dữ liệu nhập trong quá trình NSD giao tiếp

với HT:

- Class or composition - Range

- Combinations - Reasonableness

- Expected values - Missing data

- Self-checking digits - Size

- Pictures/Templates - Values

• Các thông báo phản hồi cũng cần được thiết kế nhằm giúp NSD tương tác với HT hiệu quả.

• Có thể có các loại thông báo phản hồi sau:

- Thông tin tình trạng: Thường xuyên thông

báo NSD tình trạng diễn tiến công việc

- Lời nhắc nhở: Báo cho NSD biết cần phải

nhập dữ liệu và cách nhập ra sao

- Cảnh báo và báo lỗi sai: Báo cho NSD biết

rằng có gì đó đang sai (dữ liệu, thao tác)

• Thiết kế hệ thống trợ giúp ngày nay được xem

là phần quan trọng trong thiết kế HT

• Khi thiết kế trợ giúp (help) cần tự đặt mình

vào vị trí của NSD

• Một số hướng dẫn thực hành thiết kế trợ giúp:

- Đơn giản: Thông báo trợ giúp nên ngắn

• Khi việc tương tác giữa NSD và HT xảy ra liên

tiếp như một chuỗi các thao tác thì được xem

như là một cuộc đối thoại

• Thiết kế đối thoại cũng là một phần của thiết

kế giao tiếp nếu như HT tương đối phức tạp

• Việc thiết kế đối thoại liên quan đến:

- Thiết kế chuỗi đối thoại

- Xây dựng mẫu đối thoại (propotype)

- Đánh giá tính khả dụng