CÔNG NGHỆ PHẦN MỀM Chương 7 Thiết kế giao diện người dù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  Cùng cách thức nhập liệu  Cùng cách thức chuyển từ công việc này

2 CNPM/NN

Thiết kế giao diện

1 Nguyên tắc thiết kế giao diện

2 Quy trình thiết kế giao diện

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

4 Giới thiệu Web

1 Nguyên tắc thiết kế giao diện

4 CNPM/NN

Lỗi đặc trưng

Thiếu toàn vẹn

Phải nhớ quá nhiều

Không có hướng dẫn, trợ giúp

Không nhạy với ngữ cảnh

Đáp ứng nghèo nàn

Không thân thiện, khó hiểu

6 CNPM/NN

Người dùng dễ điều khiển

 Không buộc người dùng phải hoạt động không cần thiết hay không ưa thích

 Tương tác mềm dẽo (bàn phím, chuột, bút, )

 Tương tác người dùng có thể ngắt và undo

 Tương tác theo luồng và cho phép tùy biến tương tác (macro)

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

 Tương tác trực tiếp với những đối tượng trên màn hình

“to control the computer, not have the computer control”,

“System reads their mind, it knows what the users want to do

before the user need to do”

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

 Giảm nhu cầu nhớ ngắn, nên đưa những gợi ý trực quan

 Đường dẫn tắt (Shortcut) trực quan

 Thể hiện hình ảnh bằng những biểu tượng theo thế giới thực

 Trình bày thông tin theo diễn tiến động

8 CNPM/NN

Một số đặc điểm của người sử dụng

 Khả năng nhớ tức thời của con người bị hạn chế: con

người chỉ có thể nhớ ngay khoảng 7 thông tin Nếu ta

biểu diễn nhiều hơn thì có thể khiến người sử dụng

không nhớ hết và gây ra các lỗi

 Người sử dụng có thể gây ra lỗi, khi đó những thông báo không thích hợp có thể làm tăng áp lực lên người sử

dụng và làm cho dễ xảy ra lỗi khác

 Người sử dụng có khả năng và sở thích hoàn toàn khác

nhau

 Giao tiếp đa phương tiện dễ thu hút người dù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

 Cùng cách thức nhập liệu

 Cùng cách thức chuyển từ công việc này sang công việc khác

 Mô hình tương tác trước đó được người dùng ưa

chuộng thì không nên thay đổi trừ khi có một lý do thuyết phục

10 CNPM/NN

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 dựa trên các thuật ngữ và các khái niệm mà người

sử dụng có thể hiểu được hơn là những khái niệm liên quan đến máy tính

 Ví dụ: hệ thống văn phòng nên sử dụng các khái niệm như thư, tài liệu, cặp giấy… mà không nên sử dụng những khái niệm như thư mục, danh mục …

 Thống nhất: hệ thống nên hiển thị ở mức thống nhất thích

hợp Ví dụ: các câu lệnh và thực đơn lệnh (menu) nên có

cùng định dạng…

12 CNPM/NN

…Nguyên tắc thiết kế giao diện

 Khả năng phục hồi: hệ thống nên cung cấp một số

khả năng phục hồi tới tình trạng trước đó: hoàn tác

vụ (undo), xác nhận một lần nữa trước khi sửa xóa…

 Hướng dẫn người sử dụng: như hệ thống trợ giúp,

hướng dẫn trực tuyến …

 Tính đa dạng: hỗ trợ nhiều loại tương tác cho nhiều

loại người sử dụng khác nhau

 Ví dụ: nên hiển thị phông chữ lớn với những người cận thị

14 CNPM/NN

16 CNPM/NN

18 CNPM/NN

20 CNPM/NN

2 Qui trình tạo giao diện người dùng

(UI User - Interface)

Phân tích người dùng, tác vụ, môi trường

 Khả năng sử dụng tài liệu hướng dẫn bằng giấy hay cần phải

22 CNPM/NN

1 Kỹ sư phần mềm tạo Mô hình thiết kế (design model)

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

Thiết kế nội dung thể hiện bằng hình ảnh

 Việc bố trí màn hình theo loại dữ liệu (hình ảnh thì thường thể hiện phía tay phải bên trên màn hình…)

 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 như thế nào cho dễ hiểu?

 Những biểu diễn hình ảnh có tính thống kê dữ liệu?

 Dữ liệu ra (Output) dạng hình ảnh có thể hiện vừa vặn?

 Sử dụng màu sắc?

 Thể hiện lỗi và cảnh báo?

24 CNPM/NN

Những lưu ý khi đưa ra thiết kế

 Thời gian đáp ứng: Độ dài (length) và Độ dao động

(variability) thời gian đáp ứng

 Những tiện ích trợ giúp

 Integrated help: đựợc thiết kế ngay trong phần mềm

 Add-on help: được bổ sung thêm vào phần mềm sau khi

hệ thống đã được xây dựng, người dùng phải dò tìm thông qua 1 danh mục

http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-3 Các mẫu thiết kế giao diện

26 CNPM/NN

Hiển thị thông tin động

Làm nổi bật

28 CNPM/NN

30 CNPM/NN

Order list

Price

2.5 (23 MAY 1998)

CNPM/NN

Tương tác trên report

Pine Valley Furniture

Detail customer account information Page : 2 of 2

Today : 11-OCT-98

Customer number: 1273

Name: Contemporary Design

CURRENT BALANCE

34 CNPM/NN

Thiết kế Help

 Help? Nghĩa là “help I want information”

 Help! Nghĩa là “help I'm in trouble”

 Trong thiết kế help cần chú ý tới hai trường hợp trên

 Một số trường hợp help phải cần có một số tiện ích

36 CNPM/NN

Thông tin Help

 Help không đơn giản là một sổ tay hướng dẫn on-line

 Màn hình hay cửa sổ nên phù hợp với trang giấy

 Cố gắng thể hiện thông tin động

 Giảm thiểu việc đọc văn bản của người dùng

Sử dụng hệ thống Help

 Có nhiều điểm vào nên người dùng có thể vào hệ

thống help từ nhiều nơi

 Những chỉ báo cho biết vị trí của người dùng trong

hệ thống help là nhân tố có giá trị

 Cung cấp những tiện ích cho phép người dùng di

chuyển và duyệt hệ thống help

38 CNPM/NN

Các điểm vào của hệ thống help

Tài liệu người dùng

 Tài liệu bằng giấy cần phải cung cấp cho người dùng

 Tài liệu phải thiết kế cho cả người dùng có kinh

nghiệm và không có kinh nghiệm

 Cũng như sổ tay, cần có những tài liệu dễ sử dụng cũng như những tham chiếu nhanh

40 CNPM/NN

Các loại tài liệu người dùng

Các loại tài liệu người dùng

 Mô tả chức năng

 Sổ tay cài đặt hệ thống

 Sổ tay giới thiệu

 Giới thiệu hệ thống cho người không có kinh nghiệm

 Sổ tay tham chiếu hệ thống

 Giới thiệu hệ thống cho người có kinh nghiệm

 Sổ tay quản trị hệ thống

 Mô tả cách thức quản lý hệ thống khi sử dụng

42 CNPM/NN

Bài tập: Thiết kế giao diện SafeHome

Nhiệm vụ của homeowner:

• accesses the SafeHome system

• enters an ID and password to allow remote access

• checks system status

• arms or disarms SafeHome system

• displays floor plan and sensor locations

• displays zones on floor plan

• changes zones on floor plan

• displays video camera locations on floor plan

• selects video camera for viewing

• views video images (4 frames per second)

• pans or zooms the video camera

Các đối tượng ?? Các hành động???

CNPM/NN

Màn hình SafeHome

Thiết kế giao diện cho chương quản lý kho

 Đăng nhập

 Quản lý nhập xuất kho, xin phiếu xuất, phiếu đề nghị

 Chuyển kho xuất chuyển nội

 Báo biểu: báo cáo tồn kho

 Tìm kiếm

 Trợ giúp

 Giới thiệu

46 CNPM/NN

4 Giới thiệu WEB

48 CNPM/NN

Những thuộc tính WEB

 Tính ảnh hưởng sâu sắc bởi mạng (Network

intensiveness): đa dạng người dùng

 Việc sử dụng đồng thời (Concurrency)

 Tải không thể tiên đoán (Unpredictable load)

 Việc thực thi, trình diễn (Performance)

 Tính sẵn dùng (Availability): 24/7/365

 Dùng siêu liên kết chuyển hướng đến dữ liệu (Data

driven)

 Nhạy cảm về nội dung (Content sensitive)

 Sự tiến hóa liên tục (Continuous evolution)

 Tức thời (Immediacy): phát triển có thể vài giờ

 An ninh (Security)

 Mỹ thuật (Aesthetics)

Công nghệ Web

“Web development is an adolescent (sắp trưởng thành)… Like most adolescents, it wants to be accepted as an adult as it tries to pull away from its parents If it is going to reach its full potential,

it must take a few lessons from the more seasoned world of software development.”

Doug Wallace et al

50 CNPM/NN

Nhóm kỹ nghệ Web

 Vai trò của nhóm kỹ nghệ Web

 Content Developer /Providers

Hình chóp thiết kế WebE

52 CNPM/NN

Điều hướng

Hierarchical structure

Grid structure

Linear

structure

Network

structure

Kiến trúc MVC

54 CNPM/NN

NSU (Navigation Semantic Units)

 Navigation semantic unit

 Ways of navigation (WoN) — Biểu diễn cách điều

hướng tốt nhất cho người dùng có một tiền sử xác định để đạt được mục tiêu hay mục tiêu con

link 12

link 34 link 24

NSU

Tạo một NSU

56 CNPM/NN

Thiết kế trang web

Limited Length (HTML)

Preset Values (HTML) Preset Transfer Mode

in form definition (HTML)

URL with preset Values

(HTML)

Inter Value

Tạo các hiệu ứng

58 CNPM/NN

Progressive Enhancement <> Graceful Degradation

60 CNPM/NN

Mô hình Quy trình kiểm thử Web

Kiểm thử tải (Load Testing)

 N : số người dùng đồng thời

 T : số giao dịch trực tuyến trong một đơn vị thời gian

 D : lượng dữ liệu được xử lý bởi server cho một giao dịch

62 CNPM/NN

Những điều cơ bản

 Tránh dùng nhiều text vì việc đọc trên màn hình thường

chậm hơn 25% so với đọc trên giấy

 Tránh phải dùng thanh cuộn nhất là thanh cuộn ngang

 Khi người dùng tìm kiếm thông tin thì bao nhiêu thao tác màngười dùng phải thực hiện?

 Việc nhập thông tin cho biểu mẫu phức tạp có thể thực hiện

mà không làm người dùng bực mình, và nó được thực hiện như thế nào?

 Khả năng tìm kiếm thì quan trọng như thế nào?

 Ứng dụng Web có được thiết kế mà cho phép những người

có khả năng khác nhau sử dụng?

Một số nguyên tắc cho phát triển Web

 Theo nguyên tắc này, người dùng sẽ không tiếp tục sử dụng

trang web nếu họ không tìm thấy thông tin hoặc không thể truy cập các tính năng của trang web trong vòng 3 cú click chuột

64 CNPM/NN

Thực hành

 Tìm hiểu nhu cầu thương mại và mục tiêu của sản phẩm

 Mô tả theo hướng kịch bản tương tác của người dùng với

ứng dụng Web

 Phát triển một kế hoạch dự án đơn giản

 Cần mô hình hóa những gì cần xây dựng và kiểm tra tính

toàn vẹn và chất lượng cho mô hình

 Dùng những công cụ và kỹ thuật cho phép ta xây dựng hệ thống mà có nhiều thành phần sử dụng lại

 Không quá sớm tin cậy vào người dùng để sửa lỗi ứng

dụng Web, phải test trước khi phát hành hệ thống