Bài thuyết trình Công nghệ phần mềm thiết kế giao diện người dùng - Phạm Ngọc Hạnh
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
→ Dễ sử dụng, thân thiệ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ờ
• Khả năng phục hồi
• Hướng dẫn người dùng
• Đa dạng người dù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
• Toàn vẹn về mô hình cũ đang được người dùng ưu chuộng
• .....
7
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.
Vd: cận thị, mù màu
9
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
• Đánh giá giao diện: thử nghiệm các mẫu thử cuối cùng với người
dùng để đưa ra bản chính thức
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
12
Quá trình thiết kế sơ lược
Tiến trình thiết kế giao diện (tổng thể)
Phâ n tí ch và
Tạo bản mẫu
thiết kế trên
giấy
Cùng người
dùng đánh giá
thiết kế
tìm hiểu các
hoạt động của
người dùng
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
Cài đặt
giao diện người
dùng cuối cùng
Bản mẫu
chạy được
13
Sơ đồ thiết kế giao diện người dùng
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
Retrieve pictures
from remote
libraries
➢Phân tích tác vụ:
do 1, 2,
3 until pictures found, 4
1
2
Establish
search
terms
3
4.
Discover
possible
sources
Request
photocopies
of found items
Search for
pictures
do 3.1, 3.2,
3.3 until pictures found,
3.4 if necessary
, 3.5
3.1
3.2
3.3
Search for
pictures
3.4
3.5
Record
relevant
items
Select
library
Log in to
catalogue
Modify
search terms
do 3.3.1, 3.3.2, 3.3.3
3.3.3
Initiate
search
3.3.1
Enter search
terms
3.3.2
Review
results
15
➢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
➢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 được
• Cài đặt giao diện người dùng cuối cùng
18
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
Tải về để xem bản đầy đủ
40 trang
22360
Free
Bạn đang xem 20 trang mẫu của tài liệu "Bài thuyết trình Công nghệ phần mềm thiết kế giao diện người dùng - Phạm Ngọc Hạnh", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- bai_thuyet_trinh_cong_nghe_phan_mem_thiet_ke_giao_dien_nguoi.pptx
