Bài 5: Thiết kế giao diện - Giáo trình FPT

Bài 5:Thiết kế giao diện

Hiểu về mô hình dữ liệu mức khái niệmÔn lại kiến thức ERDXây dựng ERD

Xác định thực thểXác định bản sốXác định thuộc tính

Hệ thống bài cũ

Thiết kế giao diện 2

Thiết kế giao diện

Thiết kế giao diện 3

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

Thiết kế giao diện và hội thoạiThiết kế giao diện và hội thoại

Mục tiêu chương

Thiết kế giao diện 4

Thiết kế giao diện 5

THIẾT KẾ BIỂU MẪUVÀ BÁO CÁO

Biểu mẫuLà tài liệu được dùng trong tổ chức mà một vài dữ liệu đãcó sẵn thông tin và có thể chứa những vùng để điền dữliệu cần điền vàoThông tin trên form dựa trên dữ liệu một hoặc nhiều bảnghi trong CSDL

Báo cáoLà một tài liệu được sử dụng trong tổ chức chỉ chứa dữliệu đã có sẵn thông tinLà tài liệu được sử dụng để đọc hoặc xem dữ liệuChứa dữ liệu của nhiều bản ghi

Định nghĩa

Thiết kế giao diện 6

Quy trình lấy người dùng làm trung tâm

Xác định yêu cầuAi sẽ là người sử dụng biểu mẫu hay báo cáo này?Mục đích của biểu mẫu hay báo cáo này là gì?Khi nào thì biểu mẫu hay báo cáo này cần và được sử dụng?Biểu mẫu hay báo cáo này cần được chuyển đến đâu vàdùng ở đâu?Bao nhiêu người cần sử dụng hoặc xem biểu mẫu, báo cáonày?

Quy trình thiết kế

Thiết kế giao diện 7

XĐ yêu cầu Thiết kế mẫu

Sản phẩm chuyển giao là bản đặc tả thiết kế cho mỗibiểu mẫu hoặc báo cáo gồm 3 phần chính

Mô tả khái quátMẫu thiết kếKiểm thử và đánh giá tính tiện dụng

Đối với những biểu mẫu hoặc báo cáo đơn giản có thểkhông cần đến phần kiểm thử, đánh giá tính tiện dụng(Xem bản đặc tả thiết kế ở trang bên)

Sản phẩm chuyển giao

Thiết kế giao diện 8

Thiết kế giao diện 9

Quy tắc định dạng biểu mẫu và báo cáo

Thiết kế giao diện 10

• Quy tắc chung về định dạng1• Quy tắc làm nổi bật thông tin2• Quy tắc hiển thị văn bản3• Quy tắc hiển thị bảng và danh sách4

Quy tắc chung về cách định dạng

Thiết kế giao diện 11

Sử dụng tiêu đề có ý nghĩa

Đưa vào những thông tin có ý nghĩa

Bố cục cân đối

Hệ thống điều hướng tiện dụng

So sánh hai cách định dạng

Thiết kế giao diện 12

Mục đíchHướng người sử dụng đến thông tin mong muốn

Thông tin thường được làm nổi bật khiThông báo lỗi cho người dùng khi nhập liệuCảnh báo người dùngHướng sự chú ý đến các từ khóa, mệnh lệnh, thông báo

Phương pháp làm nổi bậtLàm nhấp nháy, sử dụng các giai điệu âm thanhDùng màu sắc, độ co dãn, kích thước, font chữĐảo ngược hình ảnh, đóng khung, gạch chân, viết hoa

Làm nổi bật thông tin

Thiết kế giao diện 13

Ví dụ biểu mẫuđã được làm nổi bật thông tin

Thiết kế giao diện 14

Lưu ýChỉ sử dụng kỹ thuật làm nổi bật thông tin khi cần thiếtSử dụng thống nhấtSự hỗ trợ khác nhau giữa các nền tảng, hệ điều hành…

Làm nổi bật thông tin

Thiết kế giao diện 15

Quy tắc hiển thị văn bản

Thiết kế giao diện 16

Kết hợp chữ hoa và chữ thường

Dãn dòng

Căn lề trái

Chỉ viết tắt các từ thông dụng

Quy tắc hiển thị bảng và danh sách

Thiết kế giao diện 17

Tiêu đề có ý nghĩa

Định dạng cột, hàng, văn bản

Định dạng dữ liệu kiểu chữ, số

Ví dụ về báo cáo tuân theo nguyên tắc

Thiết kế giao diện 18

Thiết kế giao diện 19

THIẾT KẾ GIAO DIỆNVÀ HỘI THOẠI

Tập trung vào việc cung cấp thông tin cho người dùngvà thu nhận thông tin từ phía người dùngThiết giao diện và hội thoại liên quan đến cách thức conngười và máy tính trao đổi thông tinMột giao diện người – máy tốt cung cấp một cấu trúcthống nhất cho việc tìm kiếm, hiển thị và kích hoạt cácthành phần khác nhau của hệ thống

Thiết kế giao diện và hội thoại

Thiết kế giao diện 20

Lấy người dùng làm trọng tâmQuy trình tương tự như thiết kế biểu mẫu và báo cáoThực hiện song song với thiết kế biểu mẫu và báo cáo

Quy trình thiết kế

Thiết kế giao diện 21

Sản phẩm chuyển giao

Thiết kế giao diện 22

Thiết kế giao diện 23

THIẾT KẾ GIAO DIỆN

Thiết kế giao diện

Thiết kế giao diện 24

• Thiết kế bố cục1• Thiết kế trường nhập liệu2• Kiểm soát dữ liệu nhập vào3• Cung cấp phản hồi4• Cung cấp trợ giúp5

Bố cục giống như biểu mẫu giấy có sẵnĐiều hướng từ trái sang phải, từ trên xuống dướiThiết kế bố cục tập trung vào tính mềm dẻo và nhấtquán của giao diện

Dễ dàng di chuyển giữa các trườngDữ liệu chưa được ghi cho đến khi được sự xác nhận củangười dùngMỗi phím hoặc lệnh (command) chỉ tương ứng với mộtchức năng duy nhất

Thiết kế bố cục

Thiết kế giao diện 25

Biểu mẫu giấy và trên máy tính

Thiết kế giao diện 26

Tiêu chí đánh giá tính tiện dụng

Thiết kế giao diện 27

Khả năng điều khiển con trỏKhả năng điều khiển con trỏ

Khả năng chỉnh sửaKhả năng chỉnh sửa

Khả năng thoátKhả năng thoát

Khả năng trợ giúpKhả năng trợ giúp

• Không yêu cầu nhập liệu các trường có sẵn hoặccó thể tính toán1

• Luôn cung cấp giá trị mặc định2• Chỉ ra loại đơn vị cho dữ liệu nhập vào3• Luôn có tiêu đề cho các trường nhập liệu4• Định dạng, căn lề, trợ giúp5

Thiết kế trường nhập liệu

Thiết kế giao diện 28

Kiểm soát dữ liệu nhập vào để giảm lỗi gây ra khi nhậpdữ liệuPTV phải dự đoán trước các lỗi có thể xẩy ra và thiết kếgiao diện để tránh, phát hiện và sửa lỗi

Kiểm soát nhập dữ liệu

Thiết kế giao diện 29

Các lỗi thường gặp khi nhập dữ liệu

Thiết kế giao diện 30

• Thêm thừa ký tự vào trường

Nối dữ liệu

• Làm mất ký tự trong trường

Cắt bớt dữ liệu

• Nhập dữ liệu không hợp lệ vào trường

Nhập dữ liệu

• Đảo ký tự trong trường

Đổi chỗ dữ liệu

Kỹ thuật kiểm tra lỗi nhập dữ liệu

Thiết kế giao diện 31

Phân nhóm

Kết hợp• Kiểm tra kết hợp giá trị

của nhiều trường

Giá trị mong muốn

Thiếu sót dữ liệu

Định dạng

Kỹ thuật kiểm tra lỗi nhập dữ liệu

Thiết kế giao diện 32

Phạm vi

Hợp lý

Số ký tự

Giá trị

Hướng dẫn cung cấp phản hồi

Thiết kế giao diện 33

• Thông báo người dùng biết hệ thống đang làm gì• Hữu ích khi một thao tác xử lý mất nhiều thời gian

1. Thông tin trạng thái

• Đưa ra nhắc nhở cụ thể

2. Chỉ dẫn nhắc nhở

• Thông báo cụ thể, dễ hiểu

3. Cảnh báo và thông báo lỗi

Đặt vào vị trí của người sử dụngTrợ giúp cần phải

Đơn giảnCó tổ chứcTrực quan

Cung cấp các trợ giúp ngữ cảnhCần trả người dùng về lại vị trí cần trợ giúpMột số môi trường lập trình cung cấp công cụ để thiết kếtài liệu trợ giúp

SDK (Software Development Kit)

Hướng dẫn cung cấp trợ giúp

Thiết kế giao diện 34

Thiết kế giao diện 35

THIẾT KẾ HỘI THOẠI

Hội thoạiMột chuỗi hành động trong đó hiển thị thông tin cho ngườidùng và nhận thông tin từ người dùng

Nguyên tắc thiết kếSự nhất quán của trình tự các hành động, phím bấm, từngữ

Quy trình thiết kế gồm 3 bước

Thiết kế hội thoại

Thiết kế giao diện 36

Thiết kế thứtự hội thoại

Xây dựngmẫu

Đánh giá tínhtiện dụng

Hiểu người dùng, công việc, kỹ thuật và các đặc tính củamôi trườngSử dụng biểu đồ hội thoại để biểu diễnBiểu đồi hội thoại gồm hộp và đường nối

HộpMã số hộp thoại hiện tạiTên hoặc nội dung hộp thoại hiện tạiMã số của hộp thoại có thể truy cập

đến từ hộp thoại hiện tại

B1. Thiết kế thứ tự hội thoại

Thiết kế giao diện 37

Ví dụ về thứ tự hội thoại

Thiết kế giao diện 38

Bước này thường không bắt buộcSử dụng các môi trường thiết kế đồ họa để xây dựngnguyên mẫu nhanh chóng

Visual Basic.NETChương trình tạo nguyên mẫuChương trình tạo bản chạy thử

B2. Xây dựng mẫuvà đánh giá tính tiện dụng

Thiết kế giao diện 39

Thiết kế giao diện 40

TỔNG KẾT BÀI HỌC

Thiết kế giao diện 41

Thiết kế giao diện được phân thành hai công việc chínhThiết kế biểu mẫu và báo cáoThiết kế giao diện và hội thoại

Các quy trình thiết kế đều tuân theo nguyên tắc lấyngười dùng làm trọng tâm

Đầu tiên xác định yêu cầu người dùngSau đó thiết kế các mẫu

Sản phẩm của quá trình thiết kế biểu mẫu và báo cáo làtài liệu đặc tả thiết kế biểu mẫu và báo cáoSản phẩm của quá trình thiết kế giao diện và hội thoại làtài liệu đặc tả thiết kế giao diện và hội thoại

Tổng kết bài học

Thiết kế giao diện 42

Quy trình thiết kế biểu mẫu và báo cáo? Sản phẩm?Nguyên tắc chung về định dạng biểu mẫu và báo cáo?Nguyên tắc thiết kế giao diện?Nhận xét về báo cáo sau, hãy sửa lại? (Dựa vào nguyên tắcthiết kế báo cáo)

Câu hỏi

Thiết kế giao diện 43

Yêu cầu khách hàng:Jackie Judson

Tạo hồ sơ cá nhân khách hàng cho mỗi khách hàngGracie Breshers (Quản lý tiếp thị)

Báo cáo tổng kết sản phẩm theo đối tượng khách hàngTổng kết theo vùng miền, độ tuổi khách hàng của các mặthàng chủ đạo

Thi Hwang (Quản lý bán hàng)Báo cáo tần suất đặt hàng của khách hàng

(Xem câu hỏi tình huống trong SGK)

CaseStudy

Thiết kế giao diện 44

Thiết kế biểu mẫu báo cáo chohệ thống theo dõi khách hàng Cty nội thất PVF

SV thực hiện các công việc sauThiết kễ mẫu hồ sơ khách hàngThiết kế báo cáo tổng kết sản phẩm theo đối tượng kháchhàngThiết kế báo cáo tần suất đặt hàngSửa lại sơ đồ trình tự hội thoại ở Slide 36

CaseStudy

Thiết kế giao diện 45

Thiết kế biểu mẫu và báo cáoThiết kế giao diện và hội thoạiThiết kế menu

Workshop 4

Phân tích hệ thống về dữ liệu 46

HẾT BÀI !!!!

Thiết kế giao diện 47