Bài thuyết trình nhóm: Công nghệ phần mềm thiết kế giao diện người dùng

CÔNG NGHỆ PHẦN MỀM
Thiết Kế Giao Diện Người Dùng
Hồ hải nghĩa – lớp 13T3
Phạm Ngọc Hạnh – 12T3

1


Tổng quan về thiết kế giao diện người
dùng
•

Giới thiệu

•

Nguyên tắc thiết kế giao diện người dùng

•

Tiến trình thiết kế giao diện

•

Các công cụ thiết kế

•

Các mẫu thiết kế giao diện

2

Giới thiệu tổng quát
Ø

Ø

Là một khâu trong thiết kế phần mềm
•

Hướng người dùng

•

Làm bản mẫu, người dùng đánh giá

Vai trò, tầm ảnh hưởng
•

Cho phép người dùng sử dụng hệ thống

•

Người dùng đánh giá, cảm nhận thông qua tương tác giao
diện

•

Quyết định sự thành bại của một dự án
3

Nguyên Tắc Thiết Kế
Ø

Ø

Người sử dụng hệ thống
•

Dễ điều khiển

•

Ít phải nhớ

•

Giao diện toàn vẹn

Các nguyên tắc thiết kế giao diện
•

Sự quen thuộc của người sử dụng

•

Nhất quán

•

Tối thiểu hóa sự bất ngờ

4


Người sử dụng hệ thống
Ø

Dễ điều khiển
•

Không bắt người dùng làm những hoạt động không ưu thích

•

Có được sự mềm dẻo trong tương tác: keyboard, mouse,
bút...

•

Người dùng có thể ngắt thao tác và undo

•

Che dấu kỹ thuật bên trong

•

Đối tượng sử dụng là khác nhau

5


Người sử dụng hệ thống
•

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

Nên đưa ra những gợi ý trực quan cho người dùng

•

Hiển thị icon bẳng những biểu tượng có ý nghĩa

•

Tạo đường dẫn tắt (shortcut) trực quan

•

........

6


Người sử dụng hệ thống
Ø

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 toàn vẹn:

•

•

Đầy đủ:thêm, xóa, sửa

•

Có cùng các thức

7
Toàn vẹn về mô hình cũ đang được người dùng
ưu chuộng


Các 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 trên các thuật ngữ và các khái
niệm mà người sử dụng cảm thấy dễ hiểu hơn là thuật ngữ
liên quan đến máy tính.

Ø

Nhất quán
Hệ thống nên hiển thị ở mức thống nhất thích hợp.

Ø

Tối thiểu hóa sự bất ngờ
Nếu một yều được xử lý theo các thông thường thì người sử
dụng có thể dự đoán thao tác yêu cầu tương tự khác
8


Các nguyên tắc thiết kế giao diện
Ø

Ø

Ø

Khả năng phục hồi
•

Hoàn tác vụ (undo).

•

Hỏi lại những hành động: xóa, hủy..

Hướng dẫn người dùng
•

hệ thống trợ giúp

•

Hướng dẫn trực tiếp

Đa dạng người dùng
•

Hỗ trợ nhiều loại tương tác cho nhiều người khác nhau.
9
Vd: cận thị, mù màu


Tiến trình thiết kế giao diện
Ø

Là một quy trình lặp đi lặp lại với sự liên lạc chặt chẽ
giữa người dùng và người thiết kế.
Vd: ...

Ø

Gồm 3 hoạt động chính:
•

phân tích người sử dụng: tìm hiểu người dùng sẽ làm gì với

hệ thống

•

Lập mẫu thử hệ thống: phát triển một loạt các mẫu thử để
thử nghiệm

•

10


Tiến trình thiết kế giao diện
Quá trình thiết kế có thể chia ra làm hai bước chính:
Ø

Ø

Thiết kế tổng thể:
•

Giao diện có bao nhiêu màn hình

•

Sự liên kết giữa các màn hình đó như thế nào

Thiết kế chi tiết:
•

mô tả chi tiết từng màn hình

•

Sắp xếp các đối tượng trong một màn hình
11


Tiến trình thiết kế giao diện

Quá trình thiết kế sơ lược

12


Tiến trình thiết kế giao diện (tổng thể)
Phân tích và
tìm hiểu các
hoạt động của
người dùng

Tạo bản mẫu
thiết kế trên
giấy

Cùng người
dùng đánh giá
thiết kế

Bản mẫu

thiết kế

Tạo bản mẫu
thiết kế động

Bản mẫu
chạy được

Sơ đồ thiết kế giao diện người dùng

Cùng người
dùng đánh giá
thiết kế

Cài đặt
giao diện người
dùng cuối cùng

13


Tiến trình thiết kế giao diện (tổng thể)
Ø

Phân tích và tìm hiểu các hoạt động của người dùng
•

Hiểu rõ người dùng muốn làm gì với hệ thống

•

Mô tả theo cách cả người dùng lẫn người thiết kế đều hiểu

→ kỹ thuật viên cần
•

Phân tích tác vụ: mô hình hóa các bước cần thực hiện để
hoàn thành một nhiệm vụ

•

Phỏng vấn và đặt các câu hỏi trắc nghiệm

•

Mô tả: quan sát người sử dụng làm việc

•

...

14


Kỹ thuật phân tích
Ø

Phân tích tác vụ:

Retrieve pictures

from remote
libraries
do 1, 2,
3 until pictures found, 4

1

2

Discover
possible
sources

Establish
search
terms

3

Search for
pictures

4.

Request
photocopies
of found items

do 3.1, 3.2,
3.3 until pictures found,

3.4 if necessary , 3.5
3.1

Select
library

3.2

Log in to
catalogue

3.3
Search for
pictures

3.4

3.5

Modify
search terms

do 3.3.1, 3.3.2, 3.3.3
3.3.1
Enter search
terms

3.3.2
Initiate
search

3.3.3
Review
results

15

Record
relevant
items


Kỹ thuật phân tích
Ø

Ø

Phỏng vấn: có thể là phỏng vấn tay đôi, hoặc nhóm
•

Đặt câu hỏi theo hai dạng: câu hỏi mở, câu hỏi đóng (có thể
trắc nghiệm)

•

Câu hỏi có thể sắp xếp: thu hẹp dần, mở rộng dần

•

Chú ý: không được thể hiện sự áp đặt, một định kiến chủ

quan, biết lắng nghe, tôn trọng, cảm thông ...

Phiếu điều tra: có thể coi là một hình thức phỏng vấn
gián tiếp
16


Kỹ thuật phân tích
Ø

Mô tả
•

Quát sát người dùng khi họ đang làm việc, có thể hỏi công
việc của học

•

Có nhiều tác vụ mà tính trực quan, rất khó để diễn đạt nên
quan sát họ làm việc để cảm nhận là tốt nhất

•

Giúp hiểu về vai trò của các ảnh hưởng xã hôi, tổ chức đối
với công việc

17


Tiến trình thiết kế giao diện (tổng thể)

Ø

Tạo bản mẫu thiết kế:
•

Cho phép người dùng trải nghiệm trực tiếp đối với giao diện.

Đánh giá khả năng sử dụng giao diện một cách khách quan
nhất
•

Quy trình làm bản mẫu có thể theo 2 bước:
•
•

•

Làm bản thiết kế trên giấy trước
Từ bản mẫu trên giấy cộng với tìm hiểu ý kiến người dùng
để tạo ra bản mẫu động phức tạp hơn

Sau khi tạo bản mẫu thiết kế động đã được người dùng
đánh giá sẽ tiến hành tạo bản mẫu chạy được18


Tiến trình thiết kế giao diện
Ø

Kỹ thuật thiết kế
•

Tương tác người dùng: cách người dùng đưa thông tin vào
hệ thống

•

Biểu diễn thông tin: cách hệ trình diễn thông tin cho người
dùng

Giải pháp được xem xét theo góc độ:
•

Thiết bị tương tác với người dùng

•

Cách hệ thống trình diễn chủng loại giao diện

•

Mô hình tương tác

19


Tiến trình thiết kế giao diện
Ø

Thiết bị vào ra:
•

Màn hình

•

Bàn phím

•

Mouse, bút từ

•

Màn hình cảm biến

•

Mic, loa

•

Smart cards....

Cả thiết bị lẫn phương thức đều đang tiến hóa
20


Tiến trình thiết kế giao diện
Ø

Các bộ phận thiết kế
•

Kỹ sư phần mềm tạo ra mô hình thiết kế

(design model)
•

Người phụ trách về nhân sự, tạo ra mô hình người dùng

(user model)
•

Người dùng cuối phát triển mô hình nhận biết hệ thống

(system perception)
•

Người thực thi tạo ra mô hình thực thi
(implementation model)

21


Tiến trình thiết kế giao diện
Ø

Thiết kế chi tiết trên màn hình dao diện
•

Bố trí màn hình theo loại dữ liệu: hình ảnh, icon...

•

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 dễ hiểu nhất

•

Dữ liệu xuất ra dạng hình ảnh phải vừa vặn

•

Sử dụng màu sắc phù hợp

•

Cảnh báo lỗi
22


Các vấn đề trong thiết kế giao diện
Ø

Thời gian phản hồi:
•

Thời gian phản hồi trung
bình:
•

•

không được lâu quá: cảm giác
mệt mỏi
Cần chứng tỏ hệ thống đang
hoạt động

•

Độ biến thiên thời gian

•

Gây cảm giác hệ thống đang
gặp lỗi

23


Các vấn đề trong thiết kế giao diện
Ø

Thông báo:
Là phản hồi của hệ thống đối với thao tác
•

•

Cần có nghĩa, dễ hiểu, đưa ra các thông tin hưu ích với
người dùng
•

Tránh đưa ra sai số liệu

•

Định dạng thông báo nhất quán

Thông báo lỗi
•

•

•

chính xác
Có tính xây dựng, nguyên nhân, cách khắc phục

Số lượng thông báo

24


Xử lý lỗi
•

Giả sử một game thủ tìm kiếm thông tin
của một hero trong game bằng cách nhật
tên
                 Mời nhận tên hero và ấn OK
Tên Hero

YASUOS
OK

Cancel