TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM MÔN HỌC CÔNG NGHỆ PHẦN MỀM Chương Thiết kế giao diện

12 CNPM„ Sự quen thuộc của người sử dụng: giao diện phải được 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 „ Tối thiểu hoá sự bất ng

2 CNPM

7.3 Các yêu cầu trong thiết kế

7.4 Giao diện Web

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

4 CNPM

Thiết kế giao diện

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

Lỗi thiết kế đặc trưng

6 CNPM

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

hay không ưa thích

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

8 CNPM

Giao diện toàn vẹn

„ Các giao diện trong ứng dụng phải toàn vẹn

ưa chuộng thì không nên thay đổi trừ khi có một

lý do thuyết phục

Ví dụ

10 CNPM

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

nhau

12 CNPM

„ Sự quen thuộc của người sử dụng: giao diện phải được

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

„ Tối thiểu hoá sự bất ngờ: nếu một yêu cầu được xử lý theo

thao tác của những yêu cầu tương tự

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

một số khả năng phục hồi tới tình trạng trước

đó: undo, xác nhận một lần nữa trước khi sửa

xóa…

giúp, hướng dẫn trực tuyến …

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

16 CNPM

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

(UI User - Interface)

18 CNPM

Phân tích giao diện

system through the interface;

work,

interface

bị, quan hệ…

20 CNPM

Phân tích người dùng

hay không?

tượng giao tiếp (classes)

22 CNPM

Phân tích nội dung thể hiện bằng hình ảnh

24 CNPM

Các bước thiết kế

Mẫu thiết kế giao diện

26 CNPM

Đánh giá giao diện theo bản mẫu

preliminary design

build prototype #1 interface

evaluation

is studied by designer

design modifications are made

build prototype # n

interface

user evaluate's interface

Interface design

28 CNPM

7.3 Các mẫu thiết kế

Các mẫu giao diện

„ Giao diện bảng điều khiển

Network Process

Units Reduce

cm Full

OUIT

PRINT

30 CNPM

Biểu mẫu (Form)

Number of copies

Loan status

Order status

NEW BOOK

Biểu diễn thay đổi thông tin

0 1000 2000 3000 4000

Jan Feb Mar April May June

Jan 2842

Feb 2851

Mar 3164

April 2789

May 1273

June 2835

32 CNPM

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

Hiển thị những giá trị liên quan

34 CNPM

Thiết kế Help

„ 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

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

Sử dụng hệ thống Help

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ị

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

38 CNPM

Help frame network

next topics more

You are here

40 CNPM

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

„ 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

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

Installation document

System administrators

Getting started

Introductory manual

Novice users

Facility description

Reference manual

Experienced users

Operation and maintenance

Administrator’

guide System administrators

42 CNPM

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

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

„ Sổ tay giới thiệu

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

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

7.4 Giao diện WEB

„ Network intensiveness (tập trung). A WebApp

resides on a network and must serve the needs of a diverse community of clients

„ Concurrency. A large number of users may access the WebApp at one time; patterns of usage among end-users will vary greatly

„ Unpredictable load. The number of users of the

WebApp may vary by orders of magnitude from day to day

„ Performance If a WebApp user must wait too long (for access, for server-side processing, for client-side formatting and display), he or she may decide to go elsewhere

44 CNPM

Những thuộc tính WEB

„ Availability. Although expectation of 100 percent

availability is unreasonable, users of popular WebApps

„ Data driven. The primary function of many WebApps is to use hypermedia to present text, graphics, audio, and video content to the end-user

„ Content sensitive. The quality and aesthetic nature of

content remains an important determinant of the quality of a WebApp

„ Continuous evolution. Unlike conventional application

software that evolves over a series of planned,

chronologically-spaced releases, Web applications evolve continuously

Những thuộc tính WEB

„ Immediacy. WebApps often exhibit a time to market that can be a matter of a few days or weeks

produced in only a few hours

„ Security In order to protect sensitive content and

provide secure modes of data transmission, strong

security measures must be implemented throughout the infrastructure that supports a WebApp and within the

application itself

„ Aesthetics (mỹ thuật). When an application has been designed to market or sell products or ideas, aesthetics may have as much to do with success as technical

design

46 CNPM

Phân loại ứng dụng WEB

„ Informational — read-only content is provided with simple

navigation and links

„ Download — a user downloads information from the

appropriate server

„ Customizable — the user customizes content to specific needs

„ Interaction — communication among a community of users

occurs via chatroom, bulletin boards, or instant messaging

„ User input — forms-based input is the primary mechanism for communicating need

Phân loại ứng dụng WEB

„ Transaction-oriented — the user makes a request (e.g., places an order) that is fulfilled by the WebApp

„ Service-oriented — the application provides a service to the user, e.g., assists the user in determining a mortgage payment

„ Portal — the application channels the user to other Web

content or services outside the domain of the portal

48 CNPM

“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

Các bước của qui trình WebE…

„ Phân tích nghiệp vụ (Business analysis) defines

the business/organizational context for the WebApp

„ Hình thành (Formulation) is a requirements

gathering activity involving all stakeholders The intent

is to describe the problem that the WebApp is to solve

„ The “plan” consists of a task definition and a timeline

schedule for the time period (usually measured in weeks) projected for the development of the WebApp increment.

…Các bước của qui trình WebE

52 CNPM

…Các bước của qui trình WebE

„ WebE tools and technology are applied to construct the

WebApp that has been modeled

„ Testing of all design elements

„ Phát hành và đánh giá triển khai (Delivery and

Evaluation - Deployment)

„ Configure for its operational environment

„ Deliver to end-users, and

„ Evaluation feedback is presented to the WebE team

„ The increment is modified as required (the beginning of

the next incremental cycle)

The WebE Process

sof t war e incr ement

Release

refact oring

business analysis formulat ion

it erat ion plan

analysis model cont ent

it erat ion

f unct ion conf igurat ion

design model cont ent archit ect ure navigat ion int erf ace

coding component t est

accept ance t est cust omer use cust omer evaluat ion

54 CNPM

The WebE Team

Khoán ngoài WebApp…

„ Khởi động dự án, thực hiện số công vêệc nội bộ

56 CNPM

…Khoán ngoài WebApp

„ Xem xét giá cả và độ tin cậy

án?

thực hiện hay mong đợi

„ Đánh giá lịch phát phát triển

Lập kế hoạch WebApp Planning – nội bộ

58 CNPM

Interface design Aesthetic design Content design Navigation design Architecture design Component design

user

technology

Kiến trúc nội dung

Hierarchical structure

Grid structure

Linear

structure

Network

structure

60 CNPM

„ Model chứa tất cả nội dung đặc trưng của ứng dụng và

cho phép

„ Controller quản lý truy cập tới Model và View và kết

prepares dat a from model request updat es from model present s view select ed by cont roller

model

encapsulat es funct ionalit y encapsulat es cont ent object s incorporat es all webApp st at es

server

ext ernal dat a

behavior request (st at e change)

dat a from model

62 CNPM

„ 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

BillOf Mat erials

<<navigat ion link>>

view BillOf Mat erials

<<navigat ion link>>

show descript ion

<<navigat ion link>>

ret urn t o Room

<<navigat ion link>>

request alt ernat ive

photograph schematic

video

MarketingDescription techDescription

CompDescript ion

<<navigat ion link>>

purchase Product Component

<<navigat ion link>> show Product Component

<<navigat ion link>>

purchase Product Component

64 CNPM

List of user objectives

Home page text copy

graphic graphic, logo, and company name

Navigation menu

Menu bar major functions

Qui trình kiểm thử

Interface design Aesthetic design Content design Navigation design Architecture design Component design

user

technology

Cont ent Test ing

Int erface Test ing

Component Test ing

Navigat ion Test ing

Performance Test ing

Configuration Test ing

Securit y Testing

66 CNPM

như kiểm thử đơn vị

của một use-case hay NSU ứng với các loại người dùng đặc trưng

của giao diện

trình duyệt

Kỹ thuật kiểm thử giao diện…

„ CGI scripts (CGI - common gateway interface)

„ Streaming content — rather than waiting for a request from the client-side, content objects are downloaded

automatically from the server side

„ Cookies

„ Application specific interface mechanisms (a shopping cart, credit card processing, or a shipping cost calculator)

68 CNPM

transaction

Giao diện Web

lưng

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

dựng”

duyệt

70 CNPM

Những câu hỏi cơ bản…

„ Trang chủ của Web site thì quan trọng như thế

nào?

„ Những bố trí (layout) của trang mà ảnh hưởng nhất

là gì (menu ở trên hay bên phải, bên trái…) và

chúng có phụ thuộc nhiều vào loại ứng dụng Web đang được phát triển?

tác động tới người dùng nhiều nhất?

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

…Những câu hỏi cơ bản

„ Với ứng dụng web phức tạp, sự hỗ trợ của việc

điều hướng (navigation) thì quan trọng như thế

nào?

„ Những dữ liệu nhập của biểu mẫu (forms input)

phức tạp có thể tạo ra mà không làm người dùng phải bực mình, và nó được thực hiện như thế nào?

„ Những khả năng tìm kiếm thì quan trọng như thế

nào?

72 CNPM

Thực hành

ứng dụng Web của người dùng