Bài giảng Phương tiện tương tác kỹ thuật số Chương 2: Trần Thị Kim Chi (Mới nhất)

1 Nội Dung

1 Các mô hình phát triển phần mềm

2 Interactive Design

3 Human Interface Design

Flowcharts and Site Maps

5 Prototying

slide.tailieu.vn

Các mô hình quá trình phát triển phần mềm

Ba mô hình tiêu biểu

 Mô hình thác nước (waterfall)  Mô hình lặp  Mô hình xoắn ốc

18/09/13

slide.tailieu.vn

Mô hình thác nước (waterfall)

Requirement

Design

Code

Integration

Acceptance

18/09/13

Release

slide.tailieu.vn

Mô hình thác nước (waterfall)

Ý tưởng: “suy nghĩ trước, lập trình sau” Đặc điểm

o Là mô hình áp dụng sớm nhất trong phát triển phần

mềm

o Thiết kế theo trình tự các giai đoạn o Kết quả mỗi giai đoạn là một sản phẩm cụ thể và là

đầu vào cho giai đoạn tiếp theo o Mỗi giai đoạn có sự đánh giá riêng

Phù hợp với mô hình phát triển phần mềm hơn là phát triển UI

18/09/13

slide.tailieu.vn

Mô hình thác nước có phản hồi

Requirement

Design

Code

Integration

Acceptance

Giảm thiểu được lỗi xảy ra từ giai đoạn đầu

18/09/13

Release

slide.tailieu.vn

Mô hình thiết kế lặp

Design

Implement

Evaluate

Implement

18/09/13

Chu kỳ lặp gồm thiết kế, hiện thực và đánh giá

slide.tailieu.vn

Mô hình thiết kế lặp

Đặc điểm

 Làm mịn các chu kỳ thiết kế  Chu kỳ bao gồm :

 Tưởng tượng  thể hiện bằng thiết kế

(design)

 Hiện thực  cài đặt, lập trình (implement)  Kiểm thử  đánh giá bằng nhiều phương

pháp (evaluate)

18/09/13

slide.tailieu.vn

Mô hình thiết kế lặp

 Ví dụ  Xem xét chi tiết yêu cầu và tiến hành thiết kế

website  Tiến hành xử lý hiệu ứng ảnh, thu thập tài liệu liên quan  Sơ đồ cấu trúc website; Giao diện  CSDL  Nội dung từng trang  Liên kết giữa các trang

slide.tailieu.vn

Mô hình thiết kế lặp

 Giai đoạn thiết kế

slide.tailieu.vn

Mô hình thiết kế lặp

 Giai đoạn thiết kế

slide.tailieu.vn

Mô hình thiết kế lặp

Giai đoạn cài đặt: Do không dự đoán được tính sử dụng của hệ thống nên chúng ta phải xây dựng bản mẫu (prototype).

slide.tailieu.vn

Mô hình thiết kế lặp

 Giai đoạn đánh giá :

 Thực hiện thử nghiệm bản mẫu, sử dụng các phương pháp khác nhau như phương pháp Heuristic, phương pháp quan sát người dùng thao tác với UI

 Điều quan trọng nhất của kỹ nghệ hệ thống có tính tiện dụng là thiết kế lặp. Nghĩa là chúng ta sẽ thực hiện vài lần để tái thiết kế giao diện, xây dựng bản mẫu mới và tiếp tục đánh giá, như vậy chúng ta sẽ có giao diện tiện dụng như mong đợi.

slide.tailieu.vn

Mô hình xoắn ốc

1. Task analysis

2. Design

3. Paper prototype

4. In-class user testing

5. Computer prototype

6. Heuristic evaluation

7. Implementation

8. User testing

18/09/13

Evaluate Implement

slide.tailieu.vn

Mô hình xoắn ốc

1. Task analysis

Phân tích người sử dụng và nhiệm vụ : tập hợp các yêu cầu về giao diện

2. Design sketches

Phác hoạ thiết kế : phác họa thiết kế UI trên giấy

3. Paper prototype

Prototype trên giấy : tương tác trên giấy bằng các vật liệu rẻ tiền

Người sử dụng in-class kiểm thử

18/09/13

4. In-class user testing :

slide.tailieu.vn

Mô hình xoắn ốc

5. Computer prototype

Xây dựng prototype trên máy tính : bản mẫu phần mềm tương tác

6. Evaluation

7.

Thay đổi prototype, đánh giá chúng như chuyên gia về tính sử dụng được Implementation Xây dựng giao diên, cần chỉnh sửa hay không ?

8. User testing

Người sử dụng kiểm thử, người sử dụng tham gia thử nghiệm phần mềm làm mịn chúng

18/09/13

slide.tailieu.vn

Part II : Creating Interactive Products

1. The Process 2. Interactive Design 3. Human Interface Design 4. Flowcharts and Site Maps 5. Proto-tying 6. The Technology of the Web

slide.tailieu.vn

1. The Process

1. Concept development 2. Funds acquisition 3. Product design 4. Interface design 5. Design document 6. Proto-typing 7. Product production 8. Product launch 9. Product maintenance 10.Product updating

slide.tailieu.vn

1. The Process

Concept development

 Giai đoạn ý tưởng, sáng tạo  Làm thế nào để hình thành ý tưởng

• Dành ra 30 phút để suy ngẫm mỗi ngày • Liệt kê ra những điều “điên rồ” nhất mà bạn

đã từng nghĩ tới

• Tập cách ghi chép - nghe nhìn - đọc hiểu • Học hỏi, trau dồi khả năng diễn đạt, thể

hiện

• Thu nạp thông tin

slide.tailieu.vn

1. The Process

The Business Plan – Kế hoạch kinh doanh

 Kế Hoạch Kinh Doanh là một tài liệu mô tả về công ty, công việc dự định thực hiện và cách đạt được các mục đích và mục tiêu kinh doanh

 Tại sao cần KHKD

• Đảm bảo các chỉ tiêu và mục tiêu thực tế • Tránh các lỗi và lãng phí • Lựa chọn giải pháp tối ưu

 Tầm quan trọng • Công cụ quản lý • Thước đo mức độ thực hiện • Công cụ thông tin và thi đua • Công cụ tìm kiếm nguồn tài chính

slide.tailieu.vn

1. The Process-The Business Plan Tổng quan KHKD

Sứ Mệnh & Tầm Nhìn

Cạnh Tranh

1 6

Nhân Sự Chủ Chốt

Mục Tiêu Ngắn & Dài Hạn

2 7

3 Phân Tích Thị Trường 8 Nguồn Tài Nguyên Yêu Cầu

Cơ Hội & Thách Thức

Kế Hoạch Tài Chính

4 9

Ý Tưởng Kinh Doanh

Rủi Ro & Vấn Đề

5 10

slide.tailieu.vn

1. The Process-The Business Plan Tổng quan KHKD

 Bạn là ai ?  Công việc kinh doanh hiện tại (sản phẩm,

dịch vụ…?)

 Bạn dự định làm gì ?  Bạn sẽ tổ chức và quản lý như thế nào ?  Kế hoạch tài chính và dự báo  Phân tích rủi ro  Tại sao thành công

slide.tailieu.vn

Tổng quan quy trình hoạt động

Đóng gói

Nhu cầu Kết quả

Ai Cái gì Ở đâu

Khi nào Như thế nào

KHKD

Xác định và mô tả

Phân tích và lập KH

Lượng hóa và tổng kết

Tổ chức 1 cách có hệ thống

10.Tổng quan, tóm tắt 11. Mục lục 12.Phụ lục, minh họa

1.Công ty, dự án 2.Sản phẩm dịch vụ 3.Thị trường

4.Chiến lược marketing/KH bán hàng 5.Sản xuất, vận hành 6.KH quản lý

7.Tổng hợp các nguồn lực cần thiết 8.Dự kiến các hoạt động 9.KH tài chính

slide.tailieu.vn

1. The Process-The Business Plan

 Chỉ ra các mục tiêu và chiến lược thực hiện sản phẩm  Phân loại mục tiêu theo thời hạn

Loại mục tiêu

Thời hạn

Vô hạn

Tầm nhìn (Vision)

10 năm

Sứ mệnh (Mision)

Vài năm

Mục đích (Goal)

Năm

Mục tiêu (Object)

Tháng/ quý

Chỉ tiêu (Target)

Ngày/tuần

Công tác (Task)

slide.tailieu.vn

Thị Trường & Khách Hàng

 Thị trường: quá khứ, hiện

 Xem xét những thay đổi

tại, và tương lai

15%

Student

50%

trong thị phần, thay đổi thị trường, chi phí, giá cả, hoặc đối thủ cạnh tranh cung cấp các cơ hội cho sự thành công của công ty bạn

Staff

35%

Manager

 Các đối tượng khách

hàng

slide.tailieu.vn

Cơ Hội & Thách Thức

Phân tích các điểm mạnh điểm yếu của kế hoạch kinh doanh, kế hoạch tạo sản phẩm, những cơ hội và thách thức của dự án thông qua mô hình phân tích SWOT

Positive

Negative

S

W

s r o t c a F

l

Weaknesses

a n r e t n

S

I

Strengths

O

T

s r o t c a F

l

a n r e t x E

Threats

Opportunities

slide.tailieu.vn

Ý Tưởng Kinh Doanh

Bạn phải nung nấu trong đầu một ý tưởng kinh doanh và suy nghĩ kỹ về những ý tưởng đó. Lịch sử đã chứng minh, ý tưởng, dù cho điên rồ hay vĩ đại, thì cũng đều có những khả năng thành công.

Ý Tưởng Của Bạn

Ý tưởng kinh doanh độc đáo, sáng tạo, mô hình kinh doanh mới, xu hướng tiêu dùng

Ví dụ như Bill Gates từ bỏ trường đại học để thành lập công ty thì lúc đó, nhiều người coi đó là điên rồ nhưng cuối cùng, thế giới ai cũng biết đến sự thành công của ông

slide.tailieu.vn

Cạnh Tranh

Threat Of New Entrans

Threat Of Substitute Products Or Services

Rivalry

Phân tích 5 yêu tố cạnh tranh Porter’s Five Forces  Sức mạnh nhà cung cấp: Mức độ tập trung của các nhà cung cấp, Tầm quan trọng của số lượng sản phẩm đối với nhà cung cấp, Sự khác biệt của các nhà cung cấp,

 Nguy cơ thay thế: Xu hướng sử dụng hàng thay thế của khách hàng,Tương quan giữa giá cả và chất lượng của các mặt hàng thay thế.

Bargaining Power Of Suppliers

Bargaining Power Of Buyers

slide.tailieu.vn

 Các rào cản gia nhập: Các lợi thế chi phí tuyệt đối, Sự hiểu biết về chu kỳ dao động thị trường, Khả năng tiếp cận các yếu tố đầu vào

Cạnh Tranh

Threat Of New Entrans

Threat Of Substitute Products Or Services

Rivalry

Phân tích 5 yêu tố cạnh tranh Porter’s Five Forces  Sức mạnh khách hàng: Vi thế mặc cả, Số lượng người mua, Thông tin mà người mua có được, Tính đặc trưng của nhãn hiệu hàng hóa,

Bargaining Power Of Suppliers

Bargaining Power Of Buyers

 Mức độ cạnh tranh: Các rào cản nếu muốn “thoát ra” khỏi ngành, Mức độ tập trung của ngành, Khác biệt giữa các sản phẩm,

slide.tailieu.vn

Mục Tiêu Objectives & Goal

Bạn sẽ đạt được cái gì từ việc kinh doanh của bạn về mặt thời gian, tiền bạc và kinh nghiệm? Đưa ra các mục tiêu cho ý tưởng kinh doanh này. Và mục địch cuối cùng của dự án là thế nào?

GOAL! Leading Postition

Goal

Objective 1 Doanh số ??

Objective 5 Phát triển team?

Objective 2 Lợi nhuận ?

Objective 4 Target khách hàng ?

Objective 3 Tỷ lệ tăng trưởng ?

slide.tailieu.vn

Nguồn Tài Nguyên Yêu Cầu

Yêu cầu nguồn nhân lực cho dự án, Yêu cầu công nghệ, Yêu cầu tài nguyên - tài chính, phân phối, khuyến mãi, vv - Yêu cầu bên ngoài - Sản phẩm / dịch vụ / công nghệ cần thiết được mua bên ngoài công ty

Resource Requirement Financial, distribution, promotion

Tehcnology Requirement

External Requirement Outsourcing,

Human Resource Management, Execution

slide.tailieu.vn

Kế Hoạch Tài Chính

 Nguồn tài chính nào để tài trợ cho kế hoạch kinh doanh (Vay, vốn VCSH, tài khác). Các nguồn chính đó sẽ được sử dụng như thế nào.

 Lập dự toán dòng tiền hàng năm và vốn luân chuyển.

 Kế hoạch phát

slide.tailieu.vn

triển doanh số hàng năm và chi phí cho dự án. Xác định điểm hoàn vốn khi kinh doanh

Quản Lý Risk & Issue

Tóm tắt những rủi ro của dự án đề xuất, Giải quyết rủi ro - Tóm tắt như thế nào rủi ro này sẽ được giải quyết Cách ly quyết định quan trọng và những vấn đề cần giải quyết ngay lập tức hoặc trong ngắn hạn & dài hạn

AVOID

ACCEPT

RISK

REDUCE

TRANSFER

slide.tailieu.vn Slide.tailieu. vn

1. The Process-The Business Plan

Tiêu chí để xây dựng 1 KHKD thành

công 1. Mô tả rõ ràng về sản phẩm và dịch vụ 2. Kiến thức về thị trường 3. Có lợi thế lâu dài 4. Kinh nghiệm và tin cậy của các chủ sở hữu 5. Có kiến thức về cạnh tranh 6. Dự báo tài chính từ dưới lên 7. Dự báo kinh phí và doanh thu 8. Đánh giá rủi ro 9. Các điểm mốc thành công 10. Yêu cầu về vốn và trả lại

slide.tailieu.vn

Mô hình chiến lược

slide.tailieu.vn

The Sales Presentation Document

Tài liệu thuyết trình 1 sản phẩm đóng vai trò to

lớn trong việc thành công của sản phẩm

Một số tiêu chí cần có trong bài thuyết trình

1. Tiêu đề, hình ảnh 2. Đối tượng hướng tới 3. Lợi nhuận từ các bên tham gia 4. Số lượng các bên tham gia 5. Trình bày ý tưởng 6. Mô tả những tương tác trong sản phẩm 7. Cái nhìn và cảm nhận 8. Thông tin liên lạc 9. Ngân sách

slide.tailieu.vn

Thuyết phục khách hàng

Làm sao để thuyết phục KH lựa chọn

sản phẩm của mình ?  Duy trì mối quan hệ  Sử dụng phương pháp tiếp cận lạc quan  Giúp khách hàng thấy vai trò của họ  Diễn giải thuyết phục  Giới thiệu các lợi ích

slide.tailieu.vn

Duy trì mối quan hệ

 Mối quan hệ giữa nhà thiết kế và khách hàng nên luôn luôn

được duy trì ở trạng thái tốt nhất

 một mối quan hệ mà khách hàng có thể thoải mái trao đổi

những suy nghĩ và ý tưởng của họ với bạn

 Tuy nhiên, là một nhà thiết kế, bạn nên là người kiểm soát

quá trình thảo luận đó

Bạn nên tạo cho khách hàng của bạn thấy được những gì mà họ sẽ được nhận từ thiết kế của bạn.

slide.tailieu.vn

Sử dụng phương pháp tiếp cận lạc quan

 Không bao giờ phản bác lại những gì khách hàng của

bạn nói

 Thay vào đó, mỗi khi bạn nhận thấy một ý tưởng cực kỳ ngớ ngẩn từ phía khách hàng, bạn nên bắt đầu bằng “Yes… but…”

Điều này giúp bạn duy trì được cảm xúc của khách hàng, cũng như duy trì được ý tưởng thiết kế của họ một cách tích cực.

slide.tailieu.vn

Giúp khách hàng thấy vai trò của họ

 Đối với một số khách hàng, bạn cần cho họ thấy được vai

trò của họ trong dự án thiết kế

 Tốt hơn hết là trước khi bắt đầu một dự án, bạn nên tổ chức một cuộc họp hay gặp mặt để mô tả toàn bộ quá trình làm việc của bạn

slide.tailieu.vn

Điều này sẽ khiến cho khách hàng có thể nhận thức được vai trò và trách nhiệm của họ trong dự án thiết kế

Diễn giải thuyết phục

 Một quy luật phổ biến trong kinh doanh đó là bạn nên trình bày, diễn giải, cung cấp tất cả mọi thứ mà bạn có  Trong thiết kế cũng vậy, cách bạn trình bày ý tưởng thiết kế và concept là rất quan trọng trong việc thuyết phục khách hàng của bạn

slide.tailieu.vn

Giới thiệu các lợi ích

 Ngoài việc làm nổi bật phong cách và các tính năng, yếu tố trang trí trong thiết kế của bạn, bạn nên giải thích những lợi ích kinh doanh trong ý tưởng của bạn cho khách hàng

 Bạn có thể sẽ mất nhiều thời gian để giải thích cụ thể về điều đó, nhưng thực tế, mối quan tâm duy nhất của khách hàng là làm thế nào để đem lại lợi ích cho doanh nghiệp của họ

Vì vậy, bạn nên đi thẳng vào vấn đề và giải thích cho họ thấy rằng thiết kế của bạn sẽ đem lại lợi ích và nâng cao hình ảnh doanh nghiệp của họ như thế nào.

slide.tailieu.vn

Vòng đời kỹ nghệ giao diện người dùng Know user

Nhận biết ai là người sử dụng

Usability Benchmarking

Đo (benchmarking) tính sử dụng được

Goal-Oriented Interaction Design

Thiết kế tương tác hướng mục tiêu

Thiết kế lặp : bản mẫu, đánh giá tính sử dụng được

Interactive Design

Prototyping

Usability Evaluation

Nghiên cứu phản hồi

Follow-up Studies

18/09/13

slide.tailieu.vn

Vòng đời kỹ nghệ giao diện người dùng

Nhận biết người sử dụng (Know the User)  Nhận biết mục tiêu, quan điểm, thái độ của

NSD đối với phần mềm

 Hình thành các kịch bản NSD điển hình

(chiếm đa số)

 Phân lớp NSD theo kinh nghiệm, trình độ,

tuổi tác…

18/09/13

slide.tailieu.vn

Vòng đời kỹ nghệ giao diện người dùng

Đo tính sử dụng được (Benchmarking)

 Phân tích các sản phẩm hay giao diện theo cách khám phá (heuristic) và kinh nghiệm  Mục tiêu là xác định mức độ tính sử dụng

được so với các hệ thống khác

 Vd:  Hệ thống hiện tại sinh 4.5 lỗi/giờ->Mục tiêu của hệ

thống mới sẽ là 3 lỗi/giờ,

18/09/13

 Website book vé máy bay, người sử dụng mất 8 phút 21 giây mới đặt được vé, mục tiêu của website mới là 6 phút cho công việc này

slide.tailieu.vn

Vòng đời kỹ nghệ giao diện người dùng

Thiết kế tương tác hướng mục tiêu (Goal-

Oriented Iteraction Design)

 ID đưa ra sự ghép nối giữa mã trình hệ thống và người sử dụng. UI có trách nhiệm thực hiện việc trao đổi thông điệp giữa chúng

trình diễn cuối cùng.

 ID đề cập đến thiết kế chức năng, hành vi và thiết kế

 GOID là thiết kế phần mềm trên cơ sở hiểu các mục

18/09/13

tiêu của con người.

slide.tailieu.vn

2

Phân tích thiết kế UI ở mức rất cao

Thiết kế tương tác hướng mục tiêu (Goal-Oriented

 Mục tiêu (goal) là cái đích, là trạng thái mà người sử

Iteraction Design)

dụng muốn đạt tới.

 Goal :cần có gì để ăn,  Task: đến tiệm, hoặc gọi dịch vụ cơm hộp hoặc ra siêu thị

mua về nấu,…

 Có nhiều cách để đạt mục tiêu

 Nhiệm vụ (task) là con đường cụ thể để đạt tới mục tiêu(cách thức), là con đường mà người sử dụng muốn thực hiện.  Ví dụ :

 Nhiệm vụ thì thay đổi, mục tiêu thì không

slide.tailieu.vn

Vòng đời kỹ nghệ giao diện người dùng

Thiết kế lặp

 Thực hiện “thiết kế, kiểm thử, tái thiết kế”  Giai đoạn này xây dựng và đánh giá các bản

mẫu (prototype)

 Các giai đoạn thiết kế lặp : 4 giai đoạn

18/09/13

slide.tailieu.vn

Vòng đời kỹ nghệ giao diện người dùng

Thiết kế lặp 1. Phát hiện các vấn đề liên quan đến tính sử

dụng được

2. Thực hiện chỉnh sửa lỗi, hình thành giao diên

mới

3. Thu thập và lưu trữ các lý do thay đổi thiết kế 4. Cuối cùng là đánh giá

18/09/13

slide.tailieu.vn

Vòng đời kỹ nghệ giao diện người dùng

Bài tập: Dùng pp thiết kế lặp để thiết kế gd cho phép

user tra cứu sách trong thư viện

Vòng 1:  Các vấn đề liên quan: thông tin về quyển sách cần tra

cứu, thường chỉ là tên quyển sách

 Thực hiện giao diện  Lý do thay đổi thiết kế : độc gỉa muốn thông tin về tác

giả?

 Đánh giá : tìm đúng loại sách và tác giả

slide.tailieu.vn

Vòng đời kỹ nghệ giao diện người dùng

Bài tập: Dùng pp thiết kế lặp để thiết kế gd cho phép

user tra cứu sách trong thư viện

Vòng 2:  Vấn đề liên quan: thông tin thêm về quyển sách cần

tra cứu-> nhà xuất bản

 Thực hiện giao diện  Lý do thay đổi thiết kế : độc gỉa muốn thông tin về

nhà xuất bản ?

 Đánh giá phiên bản mới: tìm đúng loại sách và tác

giả, nhà xuất bản,…

Vòng 3 :  Xuất hiện thêm: năm xuất bản, thêm loại như tạp chí,

tài liệu, …

slide.tailieu.vn

Bài tập làm ngay

Hãy thiết kế màn hình cho giao diện phiếu mượn sách đảm bảo tính đúng đắn theo phương pháp lặp.

slide.tailieu.vn

Bài tập làm ngay

Cải tiến màn hình với tính tiện dụng và hiệu quả

Hãy cải tiến màn hình cho mượn sách với tính

tiện dụng và tính hiệu quả.

Màn hình cho mượn sách với tính đúng đắn:

slide.tailieu.vn

Bài tập làm ngay

Cải tiến với tính tiện dụng

Kĩ thuật 1: Cung cấp thêm thông tin cho người

dùng. Ví dụ:

slide.tailieu.vn

Bài tập làm ngay

Cải tiến với tính tiện dụng

slide.tailieu.vn

Bài tập làm ngay

Cải tiến với tính hiệu quả

Kĩ thuật 2: Cung cấp giá trị định sẵn cho ô

nhập liệu.

slide.tailieu.vn

Bài tập làm ngay

Cải tiến với tính hiệu quả

slide.tailieu.vn

Bài tập làm ngay

Cải tiến với tính tiện dụng

Kĩ thuật 3: Cho phép nhập nhiều giá trị đồng

thời

slide.tailieu.vn

Bài tập làm ngay

Cải tiến với tính tiện dụng

slide.tailieu.vn

Bài tập làm ngay

Cải tiến với tính tiện dụng

Kĩ thuật 4: Suy nghĩ thấu đáo về nghiệp vụ và đưa ra các cải tiến phục vụ tối đa cho người dùng.

slide.tailieu.vn

Bài tập làm ngay

slide.tailieu.vn

Bài tập về nhà

Hãy thiết kế và cải tiến các màn hình

với tính đúng đắn, tiện dụng, hiệu quả cho các màn hình sau:  Khám bệnh  Trong các giao diện đề tài của mỗi nhóm

slide.tailieu.vn

Bài tập về nhà

Bài tập: Dùng pp thiết kế lặp để thiết kế gd Web

cho phép bán quần áo

Thiết kế gd Web bán mỹ phẩm

slide.tailieu.vn

Vòng đời kỹ nghệ giao diện người dùng

Nghiên cứu tiếp theo (Follow- up studies) Các dữ liệu về tính sử dụng được cần được

thu thập sau khi release sản phẩm

Để có những dữ liệu này, ta có thể thực hiện  Nghiên cứu bằng phương pháp phỏng vấn

 Quan sát lấy ý kiến của NSD trên báo chí,

email…

 Dữ liệu log của phần mềm

18/09/13

slide.tailieu.vn

Interactive Design

slide.tailieu.vn

Thiết kế hướng người sử dụng

Các thí dụ về lỗi thiết kế hệ thống tương

slide.tailieu.vn

1

Các lỗi thiết kế hệ thống tương tác

Các thí dụ về lỗi thiết kế hệ thống tương tác

mouse?

• Where do you plug the

•

keyboard? top or bottom connector?

help?

• Do the color coded icons

slide.tailieu.vn

1

Các lỗi thiết kế hệ thống tương tác

(i) A provides direct adjacent mapping

Các thí dụ về lỗi thiết kế hệ thống tương tác

between icon and connector

(ii) B provides color coding to associate

the connectors with the labels

slide.tailieu.vn

1

Các lỗi thiết kế hệ thống tương tác

Coffee machine

So sánh

Các thí dụ về lỗi thiết kế hệ thống tương tác

slide.tailieu.vn

1

Các lỗi thiết kế hệ thống tương tác

Plugging in a USB connector Plugging in a USB connector

So sánh

slide.tailieu.vn

Thiết kế hướng người sử dụng

slide.tailieu.vn

Thiết kế hướng người sử dụng

slide.tailieu.vn

Thiết kế hướng người sử dụng

slide.tailieu.vn

Thiết kế hướng người sử dụng

slide.tailieu.vn

Interactive Design

Đối với lĩnh vực thiết kế, UI có thể coi là những tác phẩm mà các nhà thiết kế thông qua đó truyền tải thông điệp tới người sử dụng.

Mỗi người thiết kế như những nhà lập trình phải tìm mọi cách để bất cứ ai cũng có thể hiểu và sử dụng được sản phẩm của mình.

slide.tailieu.vn

Interactive Design Có một số nguyên tắc thiết kế như sau

1. Nguyên tắc người dùng 2. Nguyên tắc phép ẩn dụ 3. Các nguyên tắc tiếp xúc với tính năng 4. Các nguyên tắc của sự gắn kết 5. Nguyên tắc trực quan của từng môi trường 6. Nguyên tắc ngắn gọn 7. Nguyên tắc tập trung 8. Nguyên tắc ngữ pháp 9. Nguyên tắc trợ giúp 10.Nguyên tắc an toàn

slide.tailieu.vn

1. Nguyên tắc của người dùng

Biết người nào sẽ sử dụng sản phẩm của

bạn

 Tạo ra các mô hình người dùng khác

nhau, phù hợp cho mỗi đối tượng

Đặt ra những câu hỏi

 Mục đích của người sử dụng là gì?  Kỹ năng, kinh nghiệm của người sử dụng?  Người dùng cần điều gì? Dựa trên những câu hỏi mà chúng ta sẽ tạo ra những thiết kế phù hợp với mục đích của người dùng

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Thuận tiện và trực giác  thích nghi được với hệ thống

 Thiết kế hướng NSD chủ yếu tập trung vào

 Mục đích :

 Yêu cầu:

 Phải giao tiếp với người sử dụng trong suốt quá trình thiết kế.

 Mục tiêu  Mô hình, khái niệm  Khả năng và ràng buộc đối với NSD

 Để thiết kế thành công thì người thiết kế phải dành nhiều thời gian với người sử dụng, quan sát công việc họ làm, họ là đối tượng nào?

slide.tailieu.vn

Thiết kế hướng người sử dụng

Các bước thiết kế hướng người sử dụng  Người thiết kế hiểu sâu sắc/chi tiết về người sử dụng cuối cùng, nhiệm vụ của họ, yêu cầu về tính sử dụng được của hệ thống,…  Lặp lại tiến trình thiết kế  Người thiết kế và người sử dụng cùng nhau đánh giá hệ thống, sau đó đề xuất sớm nhất có thể và thực hiện hiệu chỉnh nếu cần.

slide.tailieu.vn

Thiết kế hướng người sử dụng

Các bước thiết kế hướng người sử dụng

Chú ý:  Việc tham gia của người sử dụng là đặc biệt quan trọng nhưng người sử dụng không phải là người thiết kế, họ không thiết kế cái gì và họ không phải luôn luôn đúng. Hơn nữa, thông thường người sử dụng ít hiểu biết và ít kinh nghiệm về thiết kế giao diện

 Tiến trình tương tác giữa người thiết kế và người sử dụng trong quá trình phát triển UI được gọi là phân tích người sử dụng và phân tích nhiệm vụ

slide.tailieu.vn

Thiết kế hướng người sử dụng

Mục tiêu của phân tích người sử dụng :

 Nhận biết ai là người sử dụng hệ thống phần mềm

do ta thiết kế

 Họ có kỹ năng gì và mức độ của họ tới đâu?

 Họ sử dụng hệ thống như thế nào?

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Tuổi, nam/nữ, dân tộc  Học vấn  Khả năng vật lý  Kinh nghiệm sử dụng máy tính  Các kỹ năng (gõ phím, đọc,…)  Kinh nghiệm chuyên môn, nghiệp vụ  Tần suất sử dụng hệ thống  Môi trường làm việc và ngữ cảnh xã hội khác  Quan hệ giao tiếp, nền văn hóa

Hai nhiệm vụ chính của phân tích người sử dụng:  Nhận biết các yếu tố quan trọng của người sử dụng:

slide.tailieu.vn

Phân tích người sử dụng

 Phân tích nhóm NSD theo các yếu tố, mỗi nhóm có

 Hai nhiệm vụ chính của phân tích người sử dụng:

các đặc tính tương tự

• Các mức độ kỹ năng sử dụng máy tính và kỹ năng

– Nhóm người thành thạo – Nhóm người có kinh nghiệm – Nhóm chuyên gia – Nhóm người mới bắt đầu/ học việc

• Tần suất sử dụng

nghiệp vụ

18/09/13

– Nhóm sử dụng thường xuyên – Nhóm thỉnh thoảng sử dụng

slide.tailieu.vn

Phân tích người sử dụng

Phân tích như thế nào  Ai là người sử dụng  Phân tích người sử dụng như thế nào

18/09/13

slide.tailieu.vn

Phân tích người sử dụng

Phân tích như thế nào

 Bài tập tình huống 1 (phân tích người sử dụng): Giả sử nhiệm vụ đặt ra là thiết kế hệ thông cho phép người mua hàng tạp hóa và thanh toán tiền. Bạn hãy phân tích theo hướng “Ai là người sử dụng “ và “Các nhóm người sử dụng chính

18/09/13

slide.tailieu.vn

Thiết kế hướng người sử dụng

Ai là người sử dụng : 1. Người mua tạp hóa 2. Tuổi (10 – 80) 3. Khả năng vật lý (khỏe mạnh, cao, thấp…) 4. Có kinh nghiệm máy tính (C/K, căn bản hay chuyên nghiệp, thường xuyên hay không)

5. Có được đào tạo (C/K) 6. Có hiểu biết về thực phẩm 7. Có hiểu biết và cách thanh toán (C/K)

slide.tailieu.vn

Thiết kế hướng người sử dụng

Các nhóm người sử dụng chính

1. Phụ nữ thường xuyên mua thực phẩm

cho gia đình

2. Nhân viên bán hàng có thể hỗ trợ khách 3. Các đối tượng khác

slide.tailieu.vn

Thiết kế hướng người sử dụng

Phân tích như thế nào

 Bài tập tình huống 2 (phân tích nhóm người sử dụng theo các yếu tố quan trọng): Giả sử nhiệm vụ đặt ra là phát triển hệ thống phần mềm kế toán cho các doanh nghiệp nhỏ. Bạn hãy khảo sát những thông tin quan trọng và tính xác suất cho các yếu tố vừa khảo sát

18/09/13

slide.tailieu.vn

Thiết kế hướng người sử dụng

Khảo sát theo các yếu tố sau

 Mức độ, kỹ năng sử dụng máy tính

 Mức độ, kỹ năng trong lĩnh vực kế toán

• Bắt đầu • Học việc • Kinh nghiệm • Thành thạo

slide.tailieu.vn

18/09/13

Thiết kế hướng người sử dụng

Khảo sát theo các yếu tố sau  Tần suất sử dụng máy tính

 Sở thích, môi trường đồ họa

• Người ít dùng • Người dùng nhiều

• Window • Mac • Khác • Không biết

 Tính xác suất cho từng tổ hợp các đặc tính. Xác suất cao nhất chỉ ra nhóm người sử dụng chính

slide.tailieu.vn

18/09/13

Thiết kế hướng người sử dụng

 Từ số liệu thống kê trên, ta có thể tính toán tìm ra nhóm người sử dụng chính của hệ thống như sau:  Tính xác suất cho từng tổ hợp các đặc tính của người

sử dụng

 Xác suất cao chỉ ra nhóm người sử dụng chính

slide.tailieu.vn

Thiết kế hướng người sử dụng

Môi trường Xác suất

STT Kỹ năng máy tính

Tần suất sử dụng

(%)

Kỹ năng Nghiệp vụ

Kinh nghiệm

Windows

Kinh nghiệm

9 %

Thường xuyên

Thành thạo Thành thạo

Mac

6,43 %

Thỉnh thoảng

Băt đầu

10,20 %

Không biết

Thường xuyên

Học việc

Khác

0,05 %

Thỉnh thoảng

……

310

slide.tailieu.vn

Thiết kế hướng người sử dụng

Phân tích nhiệm vụ.

 Là quá trình thu thập dữ liệu về nhiệm vụ mà người sử dụng thực hiện và phân tích chúng để hiểu biết sâu sắc về các nhiệm vụ đó.

 Phân tích nhiệm vụ tập trung vào các hành động bên ngoài hệ thống của người sử dụng, còn phân tích hệ thống hướng tới thiết kế bên trong hệ thống.

 Phân tích chi tiết các nhiệm vụ dẫn đến việc mô tả

nhiệm vụ rõ ràng, bảo đảm

slide.tailieu.vn

Thiết kế hướng người sử dụng

Phân tích nhiệm vụ.

 Nhiệm vụ (Task): là hành động mà người sử dụng

muốn thực hiện

 Mục tiêu (goal): là trạng thái mà người sử dụng

muốn đạt tới.

 Ví dụ : mục tiêu nói chuyện với ai đó bằng điện thoại

thì nhiệm vụ là gọi điện thoại cho người đó

slide.tailieu.vn

Thiết kế hướng người sử dụng

Sự khác nhau giữa phân tích hệ thống và phân tích nhiệm

vụ:  Phân tích nhiệm vụ hướng tới hành động bên ngoài của

người sử dụng

 Phân tích hệ thống hướng tới thiết kế bên trong hệ thống

slide.tailieu.vn

Thiết kế hướng người sử dụng

Các câu hỏi cần trả lời khi phân tích nhiệm vụ là:  Người sử dụng làm cái gì?  Họ làm việc bằng công cụ gì?  Họ cần phải hiểu biết những gì khi làm việc?

slide.tailieu.vn

Thiết kế hướng người sử dụng

Ví dụ phân tích nhiệm vụ : Hệ thống quản lý thư viện Mục tiêu: Mượn sách thư viện Nhiệm vụ:?  Đến thư viện  Tìm sách trên hệ thống máy tính  Đến giá để sách và lấy sách  Đem sách đăng ký với quản thư trước khi rời khỏi thư

viện

slide.tailieu.vn

Thiết kế hướng người sử dụng

Phân tích như thế nào

1. Phân rã chức năng HTA (hierarchical Task

Anslysis)

2. Phân chia thành các tập con (subtasks) hoặc

mục tiêu con (subgoals)

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Phân tích nhiệm vụ phân cấp (HTA Hierarchical Task

 Suy nghĩ tổng thể về vấn đề cần giải quyết đó là nhiệm vụ

mức đỉnh

 Sau đó phân chia chúng thành tập các nhiệm vụ con (subtasks, subgoals), chúng là các bộ phận làm thỏa mãn mục tiêu tổng thể

 Khi nhận ra danh sách các nhiệm vụ, ta phải bổ sung chi tiết

 Mỗi nhiệm vụ trong phân tích nhiệm vụ có các thành phần sau: mục tiêu, tiền điều kiện và phân rã nhiệm vụ thành nhiệm vụ con

Analysis)

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Phân tích nhiệm vụ phân cấp (HTA Hierarchical Task

 Mục tiêu: tên nhiệm vụ  Tiền nhiệm vụ: là điều kiện cần thỏa mãn trước khi

Analysis)

thuộc vào

thực hiện nhiệm vụ hiện hành  Là những nhiệm vụ mà nhiệm vụ hiện hành phụ

 Phân rã nhiệm vụ thành nhiệm vụ con: có thể thực hiện

 Là thông tin hay sự vật mà người sử dụng cần biết để thực hiện nhiệm vụ. (vd: muốn gửi được email thì cần phải biết địa chỉ,…)

phân rã đệ qui

slide.tailieu.vn

Thiết kế hướng người sử dụng

Qui tắc:

mục tiêu có ý nghĩa đối với người sử dụng.

 Mỗi task phải là closure, nghĩa là task kết thúc với

 Mỗi task cần được thực hiện kể từ khi kích hoạt

(trigger) cho đến khi đóng(closure)

 Cân nhắc việc lựa chọn task cho hệ thống

 Nếu task không tự kết thúc được thì người sử dụng có khả năng kết thúc task đó (ví dụ: trong nhiệm vụ đặt phòng ks, nếu không đặt phòng được, cần hủy đặt phòng)

Ví dụ: Quản lý phòng là task quan trọng, nó hoạt động liên tục  không nên đặt làm task hệ thống

slide.tailieu.vn

Thiết kế hướng người sử dụng

Phân tích nhiệm vụ bằng cách nào?

 Vd: quan sát thu ngân trong cửa hàng tạp hóa tính tiền để hiểu

được nhiệm vụ tính tiền tạp hóa

 Cách tốt nhất để thu thập thông tin cho phân tích người sử dụng là phỏng vấn và quan sát. Thông thường người thiết kế quan sát cách người sử dụng thực hiện nhiệm vụ.

 Kết quả của phân tích nhiệm vụ là danh sách nhiệm vụ hiện hành của người sử dụng, danh sách các đối tượng mà người sử dụng nhìn thấy vì nó là quan trọng đối với cái mà người sử dụng làm

slide.tailieu.vn

Thiết kế hướng người sử dụng

Mô tả nhiệm vụ

 Mô tả bằng văn bản  Mô tả trật tự các nhiệm vụ con bằng biểu đồ

slide.tailieu.vn

Thiết kế hướng người sử dụng

Bài tập tình huống (mô tả bằng văn bản) Bạn hãy mô tả nhiệm vụ con cho nhiệm vụ “ Check in “ của nhân viên tiếp tân trong hệ thống quản lý khách sạn Mẫu mô tả nhiệm vụ con (subtasks) có thể như sau : 1. Task header 2. Number and name 3. Start 4. End 5. Tần số 6. Khó khăn

slide.tailieu.vn

Thiết kế hướng người sử dụng

Mẫu mô tả nhiệm vụ của hệ thống quản lý khách sạn:

1.Tiếp tân:  T1.1: Đặt phòng :  T1.2: Check in : một số khách đã đặt trước, một số

không

 T1.3:Check out: Tính tiền, in báo giá. Vấn đề: hàng đợi check out vào buổi sáng. Giải pháp : tự động check out

 T1.4: Đổi phòng: có thể đổi phòng vào bất kỳ thời

điểm nào khi đang ở khách sạn

 T1.5: Dịch vụ giữ đồ và ăn sáng: ăn sáng hằng ngày,

dịch vụ giữ đồ vào bất kỳ thời điểm nào

slide.tailieu.vn

Thiết kế hướng người sử dụng

Mẫu mô tả nhiệm vụ của hệ thống quản lý khách sạn:

 T2.1: Check in  Khởi đầu: khi khách đến, kiểm tra 1 số thủ tục, giấy tờ  Kết thúc: Giao chìa khóa phòng cho khách. Bắt đầu tính

tiền

2.Nhân viên  T2.1: Dọn phòng  T2.2:  T2.3:  Mỗi nhiệm vụ cần được mô tả chi tiết hơn.  Vd:

slide.tailieu.vn

Thiết kế hướng người sử dụng

Tần số thực hiện nhiệm vụ:

Sự khó khăn xảy ra: khi khách đến theo đoàn

Mẫu mô tả nhiệm vụ:

 Task header: tiêu đề nhiệm vụ

 Number and Name: tên và số hiệu

 Start: bắt đầu nhiệm vụ

 End: Kết thúc(hoàn thành) nhiệm vụ. Nhiệm vụ có thể không hoàn thành, hệ thống cần ứng xử cho phù hợp

 Nhiệm vụ được thực hiện thường xuyên như thế nào.

 Khó khăn: mô tả nhiệm vụ khó thực hiện khi nào

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Mô tả nhiệm vụ con(subtask): trọng tâm của việc mô

tả nhiệm vụ là mô tả các nhiệm vụ con

MÔ TẢ TRẬT TỰ CÁC NHIỆM VỤ CON BẰNG BiỂU ĐỒ

Vd: mô tả nhiệm vụ con cho nhiệm vụ “Mượn sách ở

thư viện” như sau:

1.Đi đến thư viện

2.Tìm sách mong muốn

2.1 Tìm trong catalogue

2.2 Tìm trên màn hình máy tính

2.3 Nhập các tiêu chí tìm kiếm 2.4 Nhận biết sách muốn mượn (kiểm tra thông tin về sách: tác giả,nxb, năm xb,…) 2.5 Ghi lại vị trí để sách

3.Đi đến giá sách và chọn lựa sách 4.Lấy sách ra đăng ký với thủ thư

slide.tailieu.vn

Thiết kế hướng người sử dụng

Mượn sách từ thư viện

Tìm sách muốn mượn 2

Đi đến thư viện 1

Chọn lựa sách từ giá sách 3

Đem sách đến bàn đăng ký với thủ thư 4

Tìm trong Catalogue 2.1

Nhập các tiêu chí tìm kiếm 2.3

Ghi lại vị trí để sách 2.5

Tìm trên màn hình máy tính 2.2

109

Nhận dạng sách muốn mượn 2.4

slide.tailieu.vn

Thiết kế hướng người sử dụng

Phương pháp chuyển đổi sang thiết kế GUI

1. Ánh xạ yêu cầu người sử dụng trong luồng nhiệm

vụ vào các đối tượng nhiệm vụ

• Các thực thể của đối tượng nhiệm vụ

• Các hành động áp dụng vào các đối tượng nhiệm vụ

• Các thuộc tính của đối tượng nhiệm vụ

• Quan hệ chính giữa các đối tượng nhiệm vụ

nhiệm vụ đối với luồng nhiệm vụ

• Thử nghiệm tính sử dụng được của các đối tượng

slide.tailieu.vn

Thiết kế hướng người sử dụng

Phương pháp chuyển đổi sang thiết kế GUI

• Các thực thể của đối tượng GUI • Quan hệ chính giữa các đối tượng GUI • Định nghĩa các cửa sổ của các đối tượng GUI • Các khung nhìn của các đối tượng GUI • Các lệnh trên các đối tượng GUI • Thử nghiệm tính sử dụng được của các đối tượng

2. Ánh xạ đối tượng nhiệm vụ vào các đối tượng GUI

GUI đối với luồng nhiệm vụ.

slide.tailieu.vn

Thiết kế hướng người sử dụng

PHÂN TÍCH NHIỆM VỤ

TRỌNG TÂM

Máy tính

Con người

MỤC TIÊU

Làm đầu vào cho tiến trình thiêt kế phần mềm hay cấu trúc dữ liệu

Làm đầu vào cho thiết kế UI và tài liệu sử dụng

Dữ liệu và các chức năng Nhiệm vụ người sử

CÁC ĐỐI TƯỢNG RA

dụng

TÀI LIÊU RA

Đặc tả chức năng và đặc tả kiến trúc

Đặc tả UI và hướng dẫn phong cách tương tác 112

PHÂN TÍCH CHỨC NĂNG HAY PHÂN TÍCH HƯỚNG ĐỐI TƯỢNG

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Quan hệ giữa phân tích người sử dụng và phân tích

nhiệm vụ.

 Mục tiêu của phân tích nhiệm vụ và phân tích người sử dụng là để có được bức tranh về mô hình trí tuệ (metal model) của người sử dụng.

 Mô hình trí tuệ là tập các hiểu biết về hệ thống làm việc như thế nào. Người sử dụng tương tác với hệ thống thông qua tập các hiểu biết này

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Quan hệ giữa phân tích người sử dụng và phân tích nhiệm

vụ.

 Mỗi người sử dụng có mô hình trí tuệ riêng đối với hệ thống. Nhiệm vụ của người thiết kế là giúp người sử dụng phát triển được mô hình trí tuệ hiệu quả. Mô hình trí tuệ rất quan trọng đối với tính sử dụng được của UI

 Mô hình trí tuệ được phát triển để hiểu, diễn giải và thực hiện. Hơn nữa, trên cơ sở mô hình trí tuệ, người sử dụng có khả năng dự báo hành động cần thiết để thực hiện công việc khi quên hay khi chưa gặp các hành động như vậy trước đây.

slide.tailieu.vn

Thu thập yêu cầu.Xác định phạm vi và mục đích

dựng mẫu động

Đánh giá

Phân tích và thiết kế UI Phân tích nhiệm vụ Xây Xây dựng mô hình quan niệm

Thu thập yêu cầu.Xác định phạm vi và mục đích Xây dựng bản mẫu chức năng và các kỹ thuật khác

Xây dựng bản mẫu UI

Thiết Kế Kiến trúc

Đặc tả API

Đặc tả UI

Thiết kế chi tiết

Các lớp khác

Lớp

slide.tailieu.vn

Đầu ra của pha phân tích người sử dụng là mô hình quan niệm của UI.

Thiết kế hướng người sử dụng

Trẻ em

www.id-book.com

116

 Thiết kế giao diện Web theo lứa tuổi

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Giữ sạch giao diện người dùng (trẻ em sẽ bị phân tâm

bởi sự lộn xộn hình ảnh)

 Sử dụng hình tượng (xác định với kinh nghiệm được

nhận biết)

 Sử dụng màu sắc sinh động, thú vị  Tránh quảng cáo tích hợp  Sử dụng hình ảnh động và âm thanh  Liên quan đến nội dung với các nhân vật họ biết (như từ

truyền hình)

 Cung cấp các trò chơi giáo dục và thu hút sự chú ý của họ  Củng cố hành động của mình thông qua cảm xúc (nói với họ rằng họ đã làm một công việc tốt khuyến khích sự lặp lại)

 Thiết kế giao diện Web thân thiện với trẻ em:

slide.tailieu.vn

Thiết kế hướng người sử dụng

Kỹ thuật thiết kế giao diện

 Thiết kế giao diện Web thân thiện với tuổi teen:

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Thiết kế giao diện Web thân thiện với tuổi teen:

cho tất cả các lứa tuổi)

 Giữ sạch giao diện người dùng (một yếu tố chung

 Ưu tiên nội dung đồ họa thay cho nội dung văn bản

mặc dù không nhiều như dành cho trẻ nhỏ )

(thanh thiếu niên có xu hướng đọc trực tuyến ít)  Sử dụng hình ảnh động và âm thanh (vừa phải,

 Đảm bảo rằng nội dung không phải là quá đơn giản

như trẻ con

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Thiết kế giao diện Web thân thiện với người lớn tuổi:

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Trang web dành cho người lớn nói chung là đơn giản, thông tin phải chính xác và hữu ích cho người dùng.

 Thiết kế giao diện Web thân thiện với người lớn tuổi:  Là người dùng web trung bình, hầu hết người lớn có ít nhất là kinh nghiệm vừa phải sử dụng máy tính và có xu hướng truy cập vào các trang web với mục tiêu rõ ràng (dựa trên tìm kiếm hơn so với phát hiện), và chúng thường quen với trải nghiệm người dùng.

 Thiên về văn bản qua hình ảnh.

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Thiết kế giao diện Web thân thiện với người cao

tuổi:

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Thiết kế giao diện Web thân thiện với người cao

tuổi:  Các trang web dễ dàng nhìn thấy và rất đáng

nhớ

 Văn bản cần được lớn và dễ dàng để đọc  Liên kết nên dễ dàng để nhấp chuột  Nên có ít hình ảnh động hay chuyển động có

thể được distracting

 Chuyển hướng trang web cần được đơn giản

slide.tailieu.vn

Thiết kế hướng người sử dụng

 Thiết kế mỗi lứa tuổi một giao diện với nội

dung tùy ý mỗi nhóm

 Bài tập

slide.tailieu.vn

2. Nguyên tắc của phép ẩn dụ Metaphor

 Metaphor được định nghĩa như sự thay thế một ý tưởng hay một đối tượng bằng cái khác để biểu diễn hay hiểu chúng.

 Vd: Windows OS là hệ thống gồm nhiều cửa sổ để trình diễn thông tin tương tự như những cửa số của ngôi nhà, cho phép ta nhìn ra thế giới bên ngoài với các góc độ khác nhau và thấy các đối tượng khác nhau

 Mỗi khi ta thấy một “từ” được sử dụng thay thế “từ

thực” thì đó là lối ẩn dụ (metaphor)

125

slide.tailieu.vn

2. Nguyên tắc của phép ẩn dụ

 Metaphor là công cụ quan trọng giúp ta xây dựng mô hình quan niệm. Giúp con người sử dụng tri thức có trước để hiểu hệ thống. Nó chi tiết hóa các ý tưởng trừu tượng

 Trong thiết kế giao diện người máy, metaphor là quan niệm, khái niệm cơ bản, là ảnh thông qua chúng, thông tin dễ dàng được nhận biết, hiểu và nhớ,…

126

 Một phép ẩn dụ thường có rủi ro nhất định.  Cần biết rằng một số ẩn dụ có những rào cản về văn hóa. Có thể người Việt Nam quen với cách nói này còn người nước ngoài lại khác.

slide.tailieu.vn

2. Nguyên tắc của phép ẩn dụ

127

Mượn các hành vi quen thuộc của người dùng

slide.tailieu.vn

2. Nguyên tắc của phép ẩn dụ

128

slide.tailieu.vn

2. Nguyên tắc của phép ẩn dụ

129

slide.tailieu.vn

2. Nguyên tắc của phép ẩn dụ

130

slide.tailieu.vn

2. Nguyên tắc của phép ẩn dụ

131

slide.tailieu.vn

2. Nguyên tắc của phép ẩn dụ

132

slide.tailieu.vn

3. Các nguyên tắc tiếp xúc với tính năng

 Ví dụ như menu thả của website, mỗi lần rê chuột là

Hãy để cho người sử dụng thấy rõ ràng những thông điệp có sẵn.  Các nhà thiết kế thường dành cho người dùng một chút động não về các thiết kế của họ. Nhưng không phải ai cũng thích "động não", thay vào đó họ muốn thấy các ý nghĩa ngay lập tức, thay vì phải suy nghĩ về chiều sâu của thiết kế.

133

một lớp liên kết mới.

slide.tailieu.vn

3. Các nguyên tắc tiếp xúc với tính năng

 Có 2 cá tính

 Cảm quan

 Trực quan

• "Trực quan" thích giao diện tập trung các mô hình trừu tượng,

liên tưởng, ẩn dụ, v.v.

• "Cảm quan" lại thích những giao diện được tận dụng khả năng nhận thức của họ – nói cách khác họ thích giao diện với các tính năng được đưa lên ngay vị trí dễ thấy nhất, thông điệp chỉ cần nhìn một lần là hiểu…

134

 Cảm quan thường nhiều hơn trực quan theo tỉ lệ 3:1. Tất cả đều tập trung vào 1 khía cạnh nào đó của cuộc sống

slide.tailieu.vn

3. Các nguyên tắc tiếp xúc với tính năng

 Có nhiều cấp độ khác nhau của việc ẩn đi. Đây là một phần danh sách của thứ tự từ việc dễ thấy nhất, cho tới ít dễ thấy nhất.  Hoàn toàn thấy được.  Thấy được thông qua kinh nghiệm.  Thấy được khi liên tưởng một việc liên quan.  Thấy được bằng hành động.

 Khuyến khích đơn giản hóa và tập trung vào tính

135

năng chính của thiết kế

slide.tailieu.vn

4. Các nguyên tắc của sự gắn kết

Các đối tượng nên được sử dụng nhất quán.  Có một số lập luận về việc các thiết kế/giao diện có cần phải cố gắng "trực quan" và khiến người xem phải tư duy

136

 Tuy nhiên nó chắc chắn phải có sự thống nhất – gắn kết với nhau (chính xác với những thiết kế tạp trí hay trang web nên làm).

slide.tailieu.vn

4. Các nguyên tắc của sự gắn kết

Nhất quán nội bộ có nghĩa là khiến người xem có thể "cảm giác" khi xem các phần khác nhau của một thiết kế  Ví dụ bạn dùng phông kích thước 25pt Time Roman cho tiêu đề, thì chỉ cần nhìn thoáng qua phông chữ kích thước vậy, người dùng có thể "cảm thấy" nó là tiêu đề

Nên hướng tới nguyên tắc "ít bất ngờ nhất" trong một thiết kế, đặc biệt với các thiết kế có tính ứng dụng cao.

137

slide.tailieu.vn

4. Các nguyên tắc của sự gắn kết

Nhất quán bên ngoài, nghĩa là thiết kế phù hợp với môi trường, con người sử dụng nó. Nó bao gồm việc sử dụng nền tảng nào, độ tuổi nào, thu nhập ra sao, làm gì, từ đâu tới .v.v.

138

 Khi người sử dụng giao tiếp qua giao diện cần cố gắng tối đa để hiểu người sử dụng, nên cho phép từ đồng nghĩa và biệt danh. Khi user nói về hành động thì cần nhất quán, hãy sử dụng cùng tên để mô tả cùng lệnh hay đối tượng. Vd: ngôn ngữ lệnh xóa chỉ có từ “delete” mà còn có “erase”, “remote”. Nhưng tính nhất quán lại khuyến cáo chỉ sử dụng một tên, nếu không user sẽ do dự về việc chọn lệnh.

slide.tailieu.vn

4. Các nguyên tắc của sự gắn kết

5. Các nguyên tắc trực quan của từng môi trường  Thay đổi trong từng môi trường cần được phản ánh

khi nó xuất hiện.

 Mỗi thay đổi người sử dụng cần thay đổi tương ứng

với giao diện.

 Tương tự như vậy, khi một thiết kế nếu thay đổi giao diện cần phải đáp ứng được các yêu cầu về UI của thiết kế cũ. Sẽ không có lý do rõ ràng nếu việc thay đổi diện mạo khiến người sử dụng cảm thấy xa lạ với thói quen sử dụng.

 Có rất nhiều lời chỉ trích khi có những giao diện không

thể phân biệt vùng miền sử dụng

slide.tailieu.vn

6. Nguyên tắc gắn gọn

Cung cấp sự tập trung và ý nghĩa trừu tượng của thiết kế  Một khi người dùng đã quen với thiết kế, quen với việc sử dụng, thì việc còn lại là xây dựng một mô hình kinh nghiệm của thiết kế

 Ở thời điểm này các thiết kế có thể phá vỡ những chỉ dẫn

phức tạp thành các bước đơn giản.

 Để làm điều này bạn cần chắc chắn người dùng đã nắm rõ

thói quen sử dụng sản phẩm.

Tất cả phải đạt được khái niệm tốc độ nhưng phải "dễ hiểu". Ví dụ với một chiếc ghế có thể nâng lên hạ xuống, người dùng có thói quen cúi xuống dưới tìm chỗ điều chỉnh, trước đây nhà thiết kế phải để một cần gạt thò hẳn ra ngoài, thì nay họ có thể giấu nó gọn gàng dưới ghế bằng một nút bấm nhỏ chẳng hạn.

140

slide.tailieu.vn

7. Nguyên tắc tập trung

Một số khía cạnh của UI thu hút người sử dụng hơn là những cái khác.  Mắt người là một thiết bị phi tuyến tính  Chúng ta thường bị thu hút bởi các khu vực

chuyển động hơn là các khu vực tĩnh

 Những thay đổi tại khu vực động sẽ được phát

hiện dễ dàng  Các con trỏ văn bản là một ví dụ của một đối

tượng hấp dẫn mắt

 Thay đổi hình ảnh của nó có thể là những báo hiệu thay đổi trạng thái khác nhau và hữu ích.

141

slide.tailieu.vn

8. Nguyên tắc ngữ pháp

Một UI là một loại ngôn ngữ của người dùng. Nhiều hoạt động trong một giao diện người dùng đòi hỏi cả một 'chủ đề' (đối tượng trên cùng) và một 'động từ' (hoạt động của đối tượng)

Điều này cho thấy rằng các hành động tự nhiên trong giao diện người dùng tạo thành một loại ngữ pháp.

142

slide.tailieu.vn

8. Nguyên tắc ngữ pháp

Hai ngữ pháp phổ biến nhất được biết tới là:  Action->Object” và “Object-Action“. Trong Action-Object các hoạt động (hoặc công cụ) là lựa chọn đầu tiên. Khi một đối tượng tiếp theo được chọn, công cụ này ngay lập tức hoạt động theo đối tượng.

 Việc lựa chọn các công cụ này vẫn xảy ra từ một trong những hành động tiếp theo, dó đó nhiều đối tượng có thể được vận hành bởi từng lần chọn mà không cần chọn lại công cụ.

 Action-Object còn được biết tới như “phương thức – modality” bởi việc lựa chọn là một “chế độ – mode” thay đổi hoạt động chương trình. Ví dụ cho kiểu này là phần mềm Illustrator, bạn có thể vẽ 1 nét, sau đó lựa chọn độ lớn nhỏ của nét mà không cần chọn lại.

143

slide.tailieu.vn

8. Nguyên tắc ngữ pháp

 Trong trường hợp Object-Action, đối tượng được chọn đầu tiên và còn tồn tại từ lần hoạt động tiếp theo. Hành động cá nhân được chọn sau đó hoạt động trên đối tượng đã chọn. Phương pháp này dễ thấy trong xử lý văn bản – đầu tiên kiểu chữ được chọn, sau đó người dùng chọn kiểu italic, bold,..

 Object-Action còn được gọi là “không phương thức – non- modal” bởi vì những hành vi có thể được áp dụng cho các đối tượng có sẵn. Một kiểu đầy hiệu quả của Object-Action được gọi là “thao tác trực tiếp”, nơi mà bản thân mỗi đối tượng chính là một công cụ – ví dụ như kéo một đối tượng tới vị trí mới và thay đổi kích thước.

144

slide.tailieu.vn

8. Nguyên tắc ngữ pháp

 “Phương thức – Action Object” bị chỉ trích khá nhiều trong UI vì chương trình được đề cao và có giao diện xấu xí. Còn “Không phương thức – Objec-Action) được sử dụng rộng rãi, cho dù một số tính huống trong cuộc sống lựa chọn rõ ràng là “Phương thức”.

 Ví dụ trong nghề mộc, hiệu quả tốt hơn khi đóng cùng lúc nhiều chiếc đinh hơn là đặt búa xuống, rồi cầm thước, vẽ vị trí đinh kế tiếp, chạy đi kiếm vít…

145

slide.tailieu.vn

9. Các nguyên tắc Help – Trợ giúp

Hiểu được các Trợ giúp mà người dùng cần

 Định hướng mục tiêu "Tôi có thể làm gì với

chương trình này?"

 Mô tả "Cái này là gì? Thế nào? Làm sao?"  Thủ tục "Làm thế nào để tôi làm điều này"  Diễn giải "Tại sao điều này xảy ra"  Định hướng "Tôi đang ở đâu?"

Mỗi sản phẩm cần ẩn chứa trong đó sự "trợ giúp" người dùng cần dễ dàng nhận biết họ đang có sản phẩm gì, để làm gì, sử dụng thế nào, và phù hợp với văn hóa của họ.

146

slide.tailieu.vn

10.Nguyên tắc về an toàn

Hãy để cho người dùng tự tin bằng cách tạo dựng một hệ thống an toàn Trong thiết kế có thể coi điều này là sự xác định

nhận thức của khác hàng

Nếu cung cấp một thiết kế vượt ra khỏi nhận định thẩm mỹ của họ, họ sẽ cảm thấy không tin tưởng, và họ cũng không tin tưởng nếu thấy một thiết kế theo họ quá tệ

Những hộp thoại "Are you sure – Bạn có chắc?"

là một thao tác quan trọng cho người dùng

147

slide.tailieu.vn

Human Interface Design

Bốn nguyên tắc trong thiết kế tính tiện

lợi giao diện người dùng  Tính có thể học được (learnability)  Tính dễ sử dụng (ease of use)  Tính linh động (flexibility)  Tính cảm xúc (affectiveness)  Có thể tham khảo tại

B. Shackel. Human Factors and

Usability. In: Preece, J. and L. Keller (Ed.), Human-Computer Interaction: Selected Readings. Prentice Hall, 1990.

148

slide.tailieu.vn

Các nguyên tắc của tính tiện lợi

Tính có thể học được

 Các hệ thống tương tác phải dễ học

Tính dễ sử dụng

 Các hệ thống tương tác phải hiệu quả trong việc giúp người dùng đạt được mục đích

Tính linh động

 Các hệ thống phải thích ứng được những hoàn

cảnh khác nhau

Tính cảm xúc

 Các hệ thống tương tác phải làm cho người

dùng cảm thấy thoải mái

149

slide.tailieu.vn

Các nguyên tắc của tính tiện lợi

Tại sao phải theo những nguyên tắc này

 Những nguyên tắc này giúp chúng ta tập

trung vào mục tiêu được đặt ra

 Giúp đo được mục tiêu hoàn thành đạt tới

mức độ nào

Đây là một phương pháp dùng để đánh giá

một thiết kế !!!!

150

slide.tailieu.vn

Tính có thể học được

Tính có thể học được thể hiện qua thời gian và công sức bỏ ra để có thể đạt được một trình độ sử dụng nhất định  Tính có thể tổng hợp được : khi tôi làm thế

này thì cái gì sẽ xảy ra • Hệ thống cho phép người dùng tổng hợp các kiến thức mà họ thu được thông qua việc sử dụng hệ thống có thể xây dựng một hệ thống các nguyên tắc về các kiến thức này

151

slide.tailieu.vn

Tính có thể học được Tính có thể đoán được: khi tôi làm điều này

thì việc đó sẽ xảy ra  Người dùng dự đoán được sự tương tác dựa vào hệ thống kiến thức mà họ thu được từ các lần tương tác trước.

 Hệ thống nên hỗ trợ suy luận hay dự đoán bằng cách luôn luôn đưa ra các thông tin phản hồi nhất quán

152

slide.tailieu.vn

Tính có thể học được

Tính tổng hợp được

153

slide.tailieu.vn

Tính có thể học được

Tính tổng hợp được được

154

slide.tailieu.vn

Tính có thể học được

Tính quen thuộc

 Người dùng sử dụng các kiến thức có từ trước để quyết định xem sẽ phải làm gì trong các tình huống mới

 Vận dụng các kiến thức theo quy luật để người dùng đỡ phải suy nghĩ quá nhiều trước tình huống mới

155

slide.tailieu.vn

Tính có thể học được

Làm thế nào để có thể đánh giá được “ Tính

có thể học được”

 Thông qua việc sử dụng để học được cách hoàn thành một công việc nhất định ở một trình độ nhất định

156

slide.tailieu.vn

Tính dễ sử dụng

 Tính dễ sử dụng được thể hiện qua mức độ dễ mà một nhiệm vụ có thể được hoàn thành một cách hiệu quả mà không có lỗi  Tính quan sát được: tôi biết tôi đang làm gì

• Cho phép người dùng trực tiếp nhận biết được

trạng thái của hệ thống

• Thiết kế hệ thống của bạn sao cho không chỉ hành

động mà các trạng thái cũng nhìn thấy được

 Tính phản ứng nhanh:

• Cho phép người dùng nhận biết được phản ứng

157

cho hành động của họ ngay lấp tức

slide.tailieu.vn

Tính dễ sử dụng

 Tính có thể khôi phục được : Oops! Tôi vừa xóa

mất toàn bộ ổ cứng  Người dùng có thể gây ra lỗi  Các hệ thống được thiết kế sao cho các lỗi có

thể được ngăn chặn và khôi phục

 Các tính năng của hệ thống có thích nghi với

 Tính thích nghi với nhiệm vụ :

nhiệm vụ của người dùng không ?

158

 Các hệ thống được thiết kế sao cho tính năng của chúng đáp ứng nhiệm vụ của người dùng. Hay nói cách khác, các tính năng của hệ thống phải dựa trên nhiệm vụ của người dùng

slide.tailieu.vn

Tính dễ sử dụng

 Làm thế nào để đánh giá được tính dễ sử dụng

 Mức hiệu suất công việc đạt được  Thời gian hoàn thành công việc ở mức cao nhất  Tần suất lỗi  Công sức bỏ ra

159

• Thông qua các câu hỏi điều tra hoặc chỉ số tâm lý (ví dụ : thông qua chỉ số nhịp tim)

slide.tailieu.vn

Tính linh động

 Tính linh động được thể hiện qua : khả năng đáp ứng đáp ứng của một hệ thống đối với những người dùng khác nhau trong những trường hợp khác nhau  Cửa sổ khởi tạo :

• Người dùng thích sử dụng những khởi tạo có sẵn • Ví dụ : Windows Wizard  Đa tiến trình (Multithreading) :

• Người dùng thường làm nhiều việc cùng 1 lúc • Hệ thống nên được thiết kế cho phép điều này

• Có khả năng phân biệt được người dùng nào đang

 Khả năng chuyển giao giữa các nhiệm vu :

làm gì

160

• Ví dụ : cho phép tự động sửa lỗi chính tả

slide.tailieu.vn

Tính linh động

 Tính thay thế được :

 Cho phép những giá trị vào ra tương đương có thể

thay thế thoải mái

 Cho phép một hệ thống có thể thích nghi được với

 Ví dụ : cho phép kéo thả  Tính tùy biến (customizability)

nhu cầu người dùng

161

 Làm thế nào để đánh giá được tính linh động : thông qua hiệu suất và số lỗi trong những tình huống khách quan

slide.tailieu.vn

Tính cảm xúc

Tính cảm xúc thể hiện qua mức độ ưa thích và thoải mái của người dùng cảm thấy khi sử dụng hệ thống  Giá trị cảm xúc  Tính thẩm mỹ  Các yếu tố môi trường

Các hệ thống nên được thiết kế phù hợp với các môi trường vật lý RSI (Repetitive Strain Injury)

162

slide.tailieu.vn

Lỗi thiết kế trong hệ thống tương tác

163 slide.tailieu.vn

Lỗi thiết kế trong hệ thống tương tác

164 slide.tailieu.vn

Prototyping

 Prototyping là việc: (Wire Frame)  Prototype là mô hình thu nhỏ, là bản thảo hay mô phỏng với

khả năng dễ thay đổi của một phần UI.

 Tạo ra prototype là làm ra một phiên bản hệ thống kích

thước nhỏ, không đầy đủ để trình diễn và kiểm thử  Sử dụng các hình ảnh trực quan để mô tả thiết kế  Định hướng sự phát triển của các tính năng kỹ thuật, và nó mô tả một cách chi tiết về làm thế nào để xử lý hệ thống.  Là một quá trình lên mô hình cho hệ thống trong tương lai một cách nhanh chóng, có thể là cho một trang web hay một ứng dụng

 Được xác nhận từ những người dùng, các bên liên quan,

các nhà phát triển và các nhà thiết kế trên phạm vi rộng lớn.

165

slide.tailieu.vn

Prototyping

 Tại sao phải sử dụng Prototyping

 Điều đó có thể giúp cải thiện sản phẩm thiết kế và làm

giảm việc phải thay đổi trong suốt quá trình thiết kế.

 Các prototype đi từ các phác thảo trên giấy nháp đến các mô hình tương tác thực sự và hoạt động như sản phẩm cuối cùng

 Hỗ trợ các nhóm thử nghiệm bằng tiếp cận các ý tưởng khác nhau, làm cho các cuộc thảo luận dễ dàng hơn bằng các hình ảnh trực quan thay vì dùng từ ngữ

 Đảm bảo rằng tất cả mọi người sẽ chia sẻ những hiểu biết chung, làm giảm các rủi ro và tránh bỏ quên các yêu cầu

 Kết quả là ta sẽ có một thiết kế nhanh hơn và tốt

hơn.

166

slide.tailieu.vn

Quy trình Prototyping

167

slide.tailieu.vn

Quy trình Prototyping

Prototype

Chuyển đổi các mô tả về giải pháp của người dùng vào trong mô hình mẫu, phân tích thành các tiêu chuẩn theo user experience và phương pháp thực hiện tốt nhất.

Refine

Chia sẻ prototype với người dùng và đánh giá liệu nó có đáp ứng được nhu cầu và mong đợi của họ không.

168

slide.tailieu.vn

Quy trình Prototyping

Review

 Dựa trên thông tin phản hồi, xác định các phạm vi cần phải được nâng cấp hoặc cần phải xác định lại và làm rõ hơn.

Prototyping thường bắt đầu rất đơn giản, tập trung vào một vài vùng trọng điểm được dựng lên mô hình mẫu, sau đó phát triển thêm để tiếp cận được các phạm vi được yêu cầu

Tùy thuộc vào mục tiêu của prototype, ta cần phải sắp xếp thứ tự và thay đổi thời gian cho các chu kỳ

169

slide.tailieu.vn

Mục tiêu của Prototype Từ prototype thường gợi lên các hình ảnh về một phiên bản của ứng dụng hay một giao diện đã được mã hóa và hoạt động hoàn chỉnh

Các prototype không có nghĩa là phải phát triển thành các giải pháp hoàn toàn thiết thực, nhưng nó sẽ hỗ trợ người dùng hình dung về sản phẩm cuối cùng

170

slide.tailieu.vn

Mục tiêu của Prototype

Vì vậy, khi đặt mục tiêu cho một protopype, cần phải dựa trên một vài vấn đề chủ chốt trước khi bắt đầu thực hiện bất kỳ một prototype nào.

Những gì cần được prototype? Chi phí bao nhiêu cho prototype? Xây dựng các câu chuyện Lên kế hoạch cho các bước của bạn. Chọn sự mô tả thích hợp

171

slide.tailieu.vn

Những gì cần được prototype? Các sản phẩm cần làm prototyping bao gồm:

 Các tương tác phức tạp  Chức năng mới và các thay đổi trong quy

trình làm việc, công nghệ hoặc thiết kế.

 Chẳng hạn, prototyping cho các kết quả tìm kiếm là rất hữu ích khi bạn muốn thay đổi đi một cách đáng kể so với tiêu chuẩn tìm kiếm hiện tại.

172

slide.tailieu.vn

Chi phí bao nhiêu cho prototype?

Một nguyên tắc nhỏ là khi tập trung vào 20% về chức năng sẽ phải sử dụng 80% về thời gian

Tức là chức năng chính quan trọng sẽ được

sử dụng thường xuyên nhất.

Hãy nhớ rằng, vấn đề của prototyping là để giới thiệu một cái gì đó sẽ hoạt động như thế nào hoặc trong các giai đoạn sau này, thiết kế sẽ trông như thế nào

173

slide.tailieu.vn

Xây dựng các câu chuyện

Sau khi xác định các khu vực được prototyped, liên kết chúng lại với nhau vào một hoặc nhiều kịch bản:  xác định các cách liên kết thông qua sự cải tiến nâng cấp website mà prototype mô phỏng

174

slide.tailieu.vn

Lên kế hoạch cho các bước của bạn

Một prototype hoàn chỉnh thường không chỉ được xây dựng trong một bước duy nhất mà còn phải được ghép chặt vào nhau

Một phương pháp hay là bắt đầu prototyping một cách rộng rãi và sau đó đi vào chiều sâu là lựa chọn các phạm vi cho giải pháp

175

slide.tailieu.vn

Lên kế hoạch cho các bước của bạn

 Ví dụ lên kế hoạch cho 1 website :

1. Phải xây dựng trang chủ sau đó đưa vào các trang những phần chính (đôi khi được hướng như một prototype theo chiều ngang) và sau đó xem xét và sửa đổi lại kết cấu đó

2. Các bước tiếp theo có thể đi sâu vào một hoặc nhiều phần của trang web (một prototype theo chiều dọc)

176

3. Ví dụ : với một trang web download về âm nhạc (phim ảnh), đây có thể là các bước cần để một người sử dụng sẽ làm thế nào để tìm kiếm một video và download nó, hoặc làm sao để họ có thể quản lý các bài nhạc (phim ảnh) này trên web.

slide.tailieu.vn

Chọn sự mô tả thích hợp

Tùy thuộc vào giai đoạn của quá trình thiết kế và các mục tiêu của prototype, hãy chọn sự mô tả cho các thành phần thích hợp cho mỗi một cái sau đây

177

slide.tailieu.vn

Phác thảo về đồ họa (phác thảo ↔tạo kiểu dáng)

1. Hãy nhìn và cảm nhận về độ chính xác của một prototype, và nếu không chọn được các phác thảo thích hợp, có thể xem xét lại độ lệch của prototype. Đi tới độ chính xác quá sớm là không phù hợp với giai đoạn đầu.

2. Các prototype không cần phải chính xác tuyệt đối; chẳng hạn, nếu navigation bên trái phải chiếm 1/5 của màn hình 1024 pixel, nó không cần thiết phải chính xác là 204 pixels chiều rộng, miễn là nó được vẽ tương ứng trong prototype này.

3. Khi phát triển prototype, chúng ta sẽ tăng độ chính xác trực quan bằng cách đưa vào các yếu tố về kiểu dáng, màu sắc, thương hiệu và các yếu tố đồ họa.

178

slide.tailieu.vn

Phác thảo về tính năng (tĩnh ↔ tương tác)

Prototype thể hiện giải pháp này sẽ hoạt động như thế nào và nó sẽ đáp ứng làm sao với phần tương tác của người dùng?

179

slide.tailieu.vn

Một khía cạnh khác mà người dùng thường xuyên sao lãng là nội dung được hiển thị trong prototype. Các dòng nguệch ngoạc và text cẩu thả như Lorem Ipsum là hữu ích trong các giai đoạn đầu của prototyping

Nhưng khi prototype được nâng cấp, nó cần phải bị xóa bỏ và thay thế bằng nội dung thực để xem xét xem liệu nó sẽ ảnh hưởng như thế nào tới toàn bộ thiết kế

180

Phác thảo về nội dung (Lorem Ipsum ↔ nội dung thực)

slide.tailieu.vn

Phác thảo prototyping

181

slide.tailieu.vn

Phác thảo cơ bản

Cách nhanh nhất để bắt đầu prototyping

cũng là dễ nhất:  Đặt bút chì xuống giấy. Phác thảo trên giấy là một cách tiếp cận ở mức độ mà bất kỳ ai cũng có thể làm, không có các công cụ đặc biệt hoặc đòi hỏi kinh nghiệm

 Hầu hết thường được dùng trong suốt các giai đoạn đầu của một quy trình thiết kế, phác thảo là một cách nhanh chóng để tạo ra một mô hình mẫu của thiết kế và để có được phản hồi từ người sử dụng

182

slide.tailieu.vn

Phác thảo cơ bản

Prototyping trên giấy là lý tưởng trong  Thời gian suy nghĩ để giải quyết vấn đề  Có thể thực hiện một mình trong phòng với một quyển sổ nháp hoặc làm theo nhóm với một biểu đồ nháp (hoặc bảng trắng) và các ký hiệu

183

slide.tailieu.vn

Phác thảo cơ bản

 Vào giai đoạn cuối của phác thảo cơ bản cho prototyping,

các prototype trên là tĩnh và thường có

 tính trực quan và độ thể hiện cho nội dung là không

nhiều.

 Điều này đẩy người dùng tập trung vào cách họ sử dụng hệ thống như thế nào thay vì nó sẽ trông như thế nào.

 Việc này làm làm cho các nhà thiết kế cởi mở hơn trong việc thay đổi dựa trên thông tin phản hồi của người dùng

 Chính sự phác thảo cơ bản prototyping giúp prototyping nhanh. Và bạn có thể thay đổi dễ dàng và nhanh chóng

184

slide.tailieu.vn

Phác thảo tính năng

185

slide.tailieu.vn

Phác thảo tính năng

Có hai lý do giải thích tại sao cần phải phác

thảo tính năng:  Lý do đầu tiên là bạn cần bắt người dùng xem nó như một bản vẽ hoặc một tác phẩm đang trong tiến trình hoàn thiện, chứ không phải là một sản phẩm đã hoàn tất.

 Lý do thứ hai là việc đưa ra một prototype có chất lượng cao (chẳng hạn, trong một layout hoàn thiện được thực hiện trong Pho- toshop), bạn sẽ làm cho người dùng tập trung vào việc cảm nhận màu sắc, phông chữ, layout, logo và hình ảnh.

186

slide.tailieu.vn

Phác thảo chi tiết

187

slide.tailieu.vn

Phác thảo chi tiết

Lý do giải thích tại sao cần phải phác

thảo chi tiết :  Yêu cầu về độ trung thực có tính trực quan cao  Các prototype cũng có ích để tiến hành kiểm tra

tính khả dụng và hướng dẫn người dùng

 Bằng cách sử dụng các công cụ mô phỏng kéo- và-thả để tạo nhanh các Prototyping có độ trung thực cao

 Một số công cụ này tạo điều kiện thuận lợi cho

việc thu thập thông tin phản hồi của người dùng và xem xét các yêu cầu, giúp đở đẩy mạnh tốc độ thiết kế

188

slide.tailieu.vn

Lựa chọn một mức độ cho việc phác thảo

Trong việc lựa chọn độ mức độ cho việc phác thảo prototype, không có một phương pháp chính xác

Hầu hết các thiết kế của các sản phẩm mới được bắt đầu bằng phác thảo cơ bản, sau đó di chuyển đến các prototype có sự thể hiện ở mức trung bình hoặc ở mức độ cao, phụ thuộc vào sự phức tạp của hệ thống và các yêu cầu

189

slide.tailieu.vn

Lựa chọn các công cụ

Tùy thuộc vào cách tiếp cận của bạn, bạn có rất

nhiều công cụ để lựa chọn

Tham

khảo

tại

đây

http://www.adaptivepath.com/ideas/rapid- prototyping-tools-revisited

Mỗi công cụ có tính năng và thế mạnh riêng của

nó.

Căn cứ vào nhu cầu của bạn và các yêu cầu của dự án mà bạn đang làm việc, có thể định ra công cụ nào là thích hợp nhất

190

slide.tailieu.vn

Lựa chọn các công cụ

Một số lời khuyên khi lựa chọn công cụ  Công cụ này có thể tìm hiểu và sử dụng dễ dàng như thế nào?  Nó có linh hoạt để hỗ trợ các prototype trên Web, các ứng dụng phần mềm đóng gói và tùy chỉnh, cũng như trên web và các ứng dụng di động?

 Có một kho lưu trữ giấy nến có thể tái sử dụng, các tempate

hoặc các vật dụng sẵn có?

 Nó có dễ dàng chia sẻ prototype với những cái khác để đánh giá? Thông tin phản hồi có thể đạt được khi sử dụng công cụ này không?

 Nó có dễ dàng để tạo sự thay đổi hoặc kết hợp thông tin phản

hồi không?

 Liệu nó có bất kỳ một tính năng cộng tác , chẳng hạn như cho

phép nhiều người làm việc trên nó cùng một lúc?

 Các điều khoản cho phép và chi phí của nó? 191

slide.tailieu.vn

Phân loại prototype

Các loại Prototype:  Dãy các phác họa màn hình  Storyboard (phim hoạt hình như dãy các bản phác

họa)

 Power Point slideshow  Video mô phỏng sự sử dụng hệ thống  Maket bằng bìa cứng  Đoạn chương trình với chức năng hạn chế được viết bằng ngôn ngữ lập trình như C#, Java,…hay ngôn ngữ mô tả của Director(Flash)…

 Mô hình vật lý

192 slide.tailieu.vn

Phân loại prototype

Các loại Prototype:  Dãy các phác họa màn hình

193 slide.tailieu.vn

Phân loại prototype

Các loại Prototype:  Storyboard (phim hoạt hình như dãy các bản phác họa)

194 slide.tailieu.vn

Phân loại prototype

dụng vật liệu rẻ tiền hơn

 Prototype với độ trung thực cao có mức độ tương tự cao so

với sản phẩm cuối cùng

Độ trung thực của prototype  Tính chất cơ bản của prototype là độ trung thực (fidelity) : độ trung thực được xem như mức độ tương tự của prototype so với giao diện người sử dụng cuối cùng.  Prototype với độ trung thực thấp sẽ thiếu nhiều chi tiết, nó sử

195 slide.tailieu.vn

Phân loại prototype

Độ trung thực của prototype  Độ trung thực không phải là một chiều mà là đa chiều. Độ trung thực có thể cao hay thấp theo nhiều cách khác nhau. Hai tính chất quan trọng của prototype là :  Độ rộng  Độ sâu

196 slide.tailieu.vn

Phân loại prototype

Độ trung thực của prototype

 Đề cập đến số phần trăm các đặc trưng của UI mà prototype

có.

 Prototype với độ trung thực thấp về độ rộng sẽ thiếu nhiều đặc

trưng, nó chỉ có đủ cho một vài nhiệm vụ cụ thể.

 Ví dụ: bản mẫu bộ xử lý văn bản có thể thiếu chức năng in hay

kiểm tra lỗi chính tả.

 Độ rộng :

 Đề cập đến việc cài đặt các đặc trưng chi tiết đến mức nào.  Bản mẫu với độ trung thực thấp về độ sâu có giới hạn các lựa

chọn.

 Ví dụ : không thể in 2 mặt. Đáp ứng bị hạn chế.

 Độ sâu :

197 slide.tailieu.vn

Chỉ in văn bản, không thể in những gì ta nhập, hoặc thiếu tin cậy, quản lý lỗi,…

Phân loại prototype

Độ trung thực của prototype

198 slide.tailieu.vn

Phân loại prototype

Trên cơ sở độ trung thực có thể chia prototype

thành:

 Bản mẫu ngang (horizontal prototype): có đầy đủ tính chất rộng, nhưng ít tính chất sâu. Xây dựng prototype hướng chiều ngang để cung cấp nhiều chức năng nhưng ít chi tiết.

 Bản mẫu dọc (vertical prototype): một vùng giao diện sẽ được cài đặt chi tiết sâu. Nói cách khác, cần xây dựng prototype hướng chiều dọc để cung cấp nhiều chi tiết cho một vài chức năng

199 slide.tailieu.vn

Phân loại prototype

 Trong thiết kế giao diện người sử dụng, bản mẫu ngang hay được sử dụng hơn cả, vì nó hướng tới sự rủi ro của tính sử dụng được của cả hệ thống.

 Nếu nhận thấy một vài khía của giao diện có rủi ro cao trong cài đặt (ví dụ : không chắc chắn việc cài đặt có đáp ứng yêu cầu của hệ thống hay không) thì hãy xây dựng bản mẫu dọc để thử nghiệm chúng.

200 slide.tailieu.vn

Phân loại prototype

Trên cơ sở độ trung thực có thể chia prototype thành:

 Prototype hướng kịch bản (Scenario): Là phần giao giữa bản mẫu dọc và bản mẫu ngang. Với prototype hướng kịch bản, chỉ có các đặc trưng chức năng thuộc kịch bản mới được xây dựng. Kịch bản là rất tốt cho việc trình diễn thiết kế, nhưng nó rất khó đánh giá đối với người sử dụng

201 slide.tailieu.vn

Phân loại prototype

 Hai tính chất khác của độ trung thực của Prototype:  Hình dáng (look):

 Look là diện mạo của bản mẫu.  Ví dụ: Bản mẫu bằng tay có độ trung thực thấp về hình dáng so với bản mẫu xây dựng bằng công cụ phần mềm

 Cảm giác:

 Feel đề cập đến phương pháp vật lý mà nó được

sử dụng để tương tác với bản mẫu.

 Ví dụ: bản mẫu với độ trung thực thấp về cảm giác hỗ trợ người sử dụng tương tác với bản mẫu giấy bằng cách trỏ ngón tay thay cho chuột, viết trên giấy thay cho việc nhập của bàn phím.

202 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

Định nghĩa Prototype giấy  Là lựa chọn tuyệt vời cho các vòng lặp đầu tiên của

quá trình thiết kế.

 Nó là mô hình vật lý của giao diện, chủ yếu được

làm từ giấy.

 Thường được phác họa bằng tay trên các mẫu giấy.  Mỗi mẫu giấy khác nhau sẽ biểu diễn các phần tử

khác nhau như menu, hộp thoại hay cửa sổ

203

slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

sự tương tác.

Định nghĩa Prototype giấy  Sự khác biệt cơ bản giữa phác họa và prototype giấy là

 Prototype giấy mô phỏng cái mà máy tính cần làm để đáp ứng nhấn chuột, gõ phím của người sử dụng, bằng cách xếp đặt các mẩu giấy, viết các đáp ứng trên mẫu giấy…

 Vì prototype giấy có khả năng tương tác, cho nên ta có thể yêu cầu người sử dụng kiểm thử : giao nhiệm vụ cho người sử dụng và quan sát xem họ làm như thế nào

 Tương tác của loại prototype này là tự nhiên: trỏ bằng ngón tay tương ứng với trỏ bằng chuột, viết các mẫu giấy tương ứng với gõ bàn phím.

204 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

 Prototype giấy rõ ràng có độ trung thực thấp ở cả 2 khía cạnh là hình dáng(look) và cảm giác(feel), nhưng có độ trung thực cao tùy theo chiều sâu với giá trị rất thấp.

 Prototype giấy có giá rẻ

205 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

Tại sao phải xây dựng prototype giấy?  Phác họa bằng tay trên giấy nhanh hơn việc viết mã

lệnh hay phác họa bằng máy tính.

 Giấy thì dễ thay đổi:

 Có thể thay đổi khi người sử dụng đang kiểm thử. Nếu một phần prototype có vấn đề với người sử dụng thì ta có thể loại bỏ hay thay thế nó trước khi người sử dụng khác đến.

 Xây dựng nhanh:

 Prototype phác họa bằng tay tập trung trí tuệ vào bức tranh tổng thể. Người thiết kế không mất thời gian để tập trung vào các chi tiết như font, màu, căn chỉnh, khoảng cách,…Khi thực hiện trên máy tính thì phải quan tâm nhiều đến các chi tiết này, do vậy sẽ thật lãng phí nếu bỏ đi bản mẫu.

 Khách hàng đưa ra các gợi ý sáng tạo, không xoi mói

206 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

Tại sao phải xây dựng prototype giấy?  Phác họa bằng tay làm tăng phản hồi nhận được

từ người sử dụng.  Họ đề xuất các ý tưởng sáng tạo và ít quan tâm đến

chi tiết liên quan.

 Không phàn nàn về lược đồ màu nếu thiếu nó  Bản mẫu phác họa bằng tay được xem như ít hoàn thiện, do đó có tính mở cao hơn để có thể gợi ý và làm tốt hơn. Vd: khi các kiến trúc sư đưa ra bản vẽ CAD hoàn thiện cho khách hàng để trao đổi ở giai đoạn thiết kế ban đầu thì khách của họ ít có khả năng tranh luận về nhu cầu mà nó ảnh hưởng đến sự thay đổi đáng kể trong thiết kế.

207 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

Tại sao phải xây dựng prototype giấy?

 Không đòi hỏi kỹ năng đặc biệt nào:

Các nhà thiết kế đồ họa, các chuyên gia về tính sử dụng được thậm chí cả người sử dụng cũng có thể giúp đỡ để tạo ra prototype và thao tác trên chúng.

208 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

209 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

210 slide.tailieu.vn

3

Kỹ thuật xây dựng prototype bằng giấy

211 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

 Làm menus, windows contents, dialog boxes

Các công cụ xây dựng market giao diện  Bảng áp phích trắng (11” x 14”) : làm nền, khung cửa sổ  Số lượng lớn các thẻ chỉ mục(4” x 6”, 5” x 8”)

messages,…  Giấy bóng kính :

 Hồ dán : dán các mẩu giấy  Băng giấy trắng : làm text fields, checkboxes, short

 Làm highlight : người dùng có thể thử nhập liệu lên highlight này, thay vì phải thay đổi băng giấy trắng dán lên mỗi trường nhập liệu.

 Máy sao chụp : để tạo ra nhiều phần tử trong bản mẫu  Bút, kéo, băng giấy,…

212 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

Kinh nghiệm xây dựng prototype giấy  Prototype giấy nên lớn hơn kích thước trong thực tế. Do ngón tay lớn hơn con trỏ chuột và chữ viết thường lớn hơn 12 points. Do vậy, để dễ dử dụng bản mẫu giấy thì nó phải có kích thước lớn hơn thực tế một ít.

 Đối với prortotype giấy lớn hơn thực tế, ta có thể dễ dàng quan sát từ xa. Việc này là quan trọng vì prototype nằm trên bàn. Hơn nữa khi người sử dụng thử nghiệm thì nhiều người sẽ quan sát xem họ thực hiện như thế nào.

 Không quá bận tâm về màu trong prototype : hãy sử dụng màu đơn giản, nhưng không làm giảm sự chú ý đến các nhiệm vụ quan trọng.

213 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

 Tổ chức tốt các mẫu giấy nhỏ trong prototype. Sử dụng kẹp giấy cho những mẫu giấy lớn và phong bì cho menu.

Kinh nghiệm xây dựng prototype giấy  Không cần trình diễn mọi hiệu ứng quan sát trên giấy (ví dụ tooltip, drag&drop, animation, progress bar). Một số thành phần thay vì trình diễn ta chỉ cần nói to lên.  Vd: Thanh progress trỏ : 20%,50%,70%,…Nếu thiết kế có hỗ trợ tooltip thì ta chỉ cần trỏ vào đối tượng và nói lớn thông điệp của tooltip,…

 Khi xây dựng bản mẫu giấy, có thể phác họa giao diện bằng tay kết hợp với các ảnh màn hình để làm tăng hiệu quả.

214 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

Có thể biết gì và không biết gì từ prototype giấy  Các prototype giấy có thể biểu lộ rất nhiều vấn đề

tính sử dụng được.

 Vấn đề quan trọng cần phải tìm ra trong giai đoạn

đầu của thiết kế.

 Nếu người sử dụng không hiểu ẩn dụ hay mô hình khái niệm của giao diện thì toàn bộ giao diện cần phải bị loại bỏ.

215 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

• Người sử dụng có hiểu UI không?

Lợi ích của prototype giấy  Mô hình khái niệm:

• Có làm cái cần phải làm không? Có thiếu đặc trưng gì không?

 Chức năng:

• Người sử dụng có tự tìm ra cách sử dụng không? Có phù hợp

với thông tin tiền điều kiện không?

 Dẫn đường và luồng nhiệm vụ:

• Người sử dụng có hiểu các nhãn không? (labels)

 Nội dung màn hình:

• Những gì cần xuất hiện trên màn hình?

 Thuật ngữ:

216 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

Hạn chế của prototype giấy  Prototype giấy không biểu lộ mọi vấn đề về tính sử dụng được vì nó có mức độ trung thực thấp về trực giác (look).  Đôi khi người sử dụng rất khó nhận ra các widgets mà họ vẽ bằng tay hay các nhãn mà họ vừa mô tả một cách vội vàng.

 Prototype giấy không cho biết việc bố trí các đối tượng đồ họa có phù hợp không vì font chữ viết tay và các bảng không phải là sự mô phỏng thực. Không thể dễ dàng mô phỏng các tính chất về trực giác của giao diện.

 Vd: việc chọn thanh highlight không đủ tương phản. Ta phải quyết định thiết kế đồ họa vào một thời điểm nào đó. Do đó, ta cần một phương pháp làm prototype khác.

217 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

Hạn chế của prototype giấy  Prototype giấy có độ trung thực thấp về cảm

động di và nhả chuột (drag-and-drop).

 Các vấn đề liên quan đến luật Fitts như phím quá nhỏ, controls quá gần hay quá xa nhau đều không thể nhận biết được trên prototype giấy.

giác(feel).  Ngón tay và bút không ứng xử như chuột và bàn phím. Vd: hành

 Prototype giấy có độ trung thực thấp về phản hồi

động (dynamic feedback).  Không thể có hình ảnh động (annimation).  Vd: không thấy được các chuyển động như quả địa cầu xoay, thanh progress chuyển động, các nút, icon chuyển trạng thái từ nổi sang chìm, hoặc đổi màu,khi di chuyển chuột,…

218 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng giấy

Hạn chế của prototype giấy  Prototype có độ trung thực thấp về thời gian đáp

ứng.  Lý do là máy tính con người chậm hơn nhiều so mới máy tính điện tử. Do vậy không thể đo được thời gian mà người sử dụng thực hiện nhiệm vụ với prototype.

 Prototype giấy có độ trung thực thấp về ngữ cảnh

sử dụng.  Prototype giấy chỉ được sử dụng trong văn phòng, trên bàn.  Người sử dụng không thể đem nó ra cửa hàng tạp hóa, tàu điện ngầm, trên máy bay hay bất kỳ nơi nào mà giao diện người sử dụng cuối cùng sẽ được ứng dụng trên thực tế.

219 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Bài tập  Thiết kế prototype bằng giấy màn hình thống kê cho thư viện  Thiết kế prototype bằng giấy giao diện chính cho quản lý thư

viện

 Thiết kế prototype bằng giấy màn hình cho trang chủ và phiếu

đặt hàng mua sách trực tuyến của Website Sach

 Thiết kế prototype bằng giấy màn hình thống kê cho quản lý

bệnh viện

 Thiết kế prototype bằng giấy giao diện chính cho quản lý

bệnh viện

 Thiết kế protype bằng giấy giao diện trang chủ và form đăng

ký khám bệnh trực tuyến cho Website của một bệnh viện

 Thiết kế các prototype bằng giấy cho các giao diện của đề tài

mỗi nhóm

220 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

 Prototype máy tính là mô phỏng phần mềm tương

 Prototype máy tính điển hình là loại prototype theo

tác

221

chiều ngang.  Nó có độ trung thực cao về hình dáng và cảm giác,  Nhưng có độ trung thực thấp theo chiều sâu.

slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Có thể biết được gì từ Prototype máy tính?  Prototype máy tính giúp ta quản lý được thiết kế đồ

họa và phản hồi động của giao diện.

 Prototype máy tính có khả năng biết những thứ như đã có trong prototype giấy và hơn nữa, bao gồm các tính chất sau:  Bố trí màn hình:

 Rõ ràng hay phức tạp? Cách sắp xếp các icon,…  Người sử dụng có thể tìm thấy các phần tử quan

trọng không?

 Màu, font, icon,… : có phù hợp chưa?

222 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Phản hồi tương tác:

Có thể biết được gì từ Prototype máy tính?

Luật Fitts :

 Có khả năng thông báo với người sử dụng bằng thông điệp trên thanh trạng thái, thay đổi con chạy và phản hồi khác.

 Các điều khiển đủ lớn chưa? Vị trí : có gần nhau

 Danh sách trượt quá dài không?

không, xa,…

223 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Tại sao phải sử dụng công cụ phần mềm làm

prototype?

 Xây dựng prototype máy tính là lập trình trực tiếp giao diện bằng ngôn ngữ cài đặt như Java, C++, hay sử dụng toolkit giao diện như Swing, MFC,…

 Dễ dàng xây dựng giao diện bằng công cụ GUI Design Studio : nhanh, không phải gỡ rối, dễ thay đổi,…

224 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Hai kỹ thuật xây dựng Prototype bằng máy tính

 Storyboard

 Là trình tự của các màn hình cố định

 Form Builder

 Là công cụ để vẽ các giao diện thực

225 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Các kỹ thuật xây dựng prototype máy tính  Storyboard: là trình tự của các màn hình cố định. Mỗi màn hình có một hoặc nhiều điểm nóng (hotspots) hoặc hyperlink để ta có thể nhấn chuột để nhảy đến màn hình khác.

 Storyboard được sử dụng cho các kịch bản, chuyển dần đến chi tiết hơn. Nó là dãy các phác thảo/khung hình cơ bản.

226 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Help

Return

Computer Telephone Last Name: First Name: Phone: Place Call

Help Screen You can enter either the person’s name or their number. Then hit the place button to call them

Dialling…

Cancel dds

Place Call

Help

Computer Telephone Last Name: Greenberg First Name: Phone:

227 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Các kỹ thuật xây dựng prototype máy tính  Form builder: là công cụ để vẽ các giao diện thực, sử dụng bằng cách di chuyển các widgets từ thanh công cụ(pallete) và đặt lên các cửa sổ.

 Widget là thành phần giao diện người sử dụng với tính chất sử dụng lại được. Nó thuộc toolkit(hộp công cụ) và được rất nhiều ứng dụng GUI sử dụng lại. Ưu điểm của widget là giảm yếu tố lập trình, tăng tính nhất quán ngoài. Nhược điểm là mang theo suy nghĩ của người thiết kế

228 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Công cụ xây dựng storyboard  Trình diễn PowerPoint:

 Mỗi Slide show là một màn hình cố định mà nó được vẽ bởi trình vẽ hay vẽ trực tiếp bằng PowerPoint.  PowerPoint storyboard không phải là slideshow tuyến tính. Có thể tạo ra các hyperlink để nhảy đến các slide bất kỳ.  Macromedia Flash:

 Là công cụ giúp xây dựng giao diện đa phương tiện.  Nó đặc biệt hữu hiệu cho các giao diện prototype với

giàu thông tin phản hồi chuyển động.

229 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Công cụ xây dựng storyboard  HTML:

 Hữu ích cho việc xây dựng prototype.  Mỗi màn hình là một bản đồ ảnh của HTML (image map).  Macromedia Dreamweaver hỗ trợ tốt cho việc xây dựng

bản đồ ảnh của HTML.

 Tất cả các công cụ đều có ngôn ngữ mô tả. Vd: PowerPoint có Basic, Flash/Director có Ligo, HTML có Javascript,… để có thể viết mã trình khi cần thiết.

230 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

231 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

232 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Ưu điểm và nhược điểm của storyboard  Lợi thế lớn nhất của storyboard là tương tự prototype giấy: có thể vẽ bất kỳ cái gì trên storyboard, cho phép tự do sáng tạo mà form builder không thể có (với widgets cố định)

 Bất lợi :do bản chất tĩnh của storyboard. Chỉ có thể nhấn phím chuột, không nhập text. Textbox, scrollbar, listbox và button là những công cụ thụ động,…

233 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Kỹ thuật xây dựng Form Builder  Form Builder là công cụ để vẽ các giao diện thực. Thực hiện bằng di các widgets (buttons, text fields, tables,..) từ palette và đặt nó trên cửa sổ.

 Công cụ xây dựng Form:

 HTML là công cụ xây dựng ứng dụng Web.

 Có thể tổ hợp các trang HTML tĩnh để mô phỏng các đáp

ứng động của giao diện Web.

 Prototype loại này tốt hơn storyboard bởi vì các màn hình ở đây tích cực hơn nhiều so với screenshots: có thể gõ phím vào form, sử dụng thanh trượt,…

 GUI Builder:

 Visual Basic là Form Builder kinh điển.  Một số Form Builder : .Net Windows Form, Eclipse Visual

Editor, Borland Jbuilder, Sun NetBeans…

234 slide.tailieu.vn

Kỹ thuật xây dựng prototype bằng máy tính

Bài tập • Thiết kế prototype bằng máy màn hình thống kê cho thư viện • Thiết kế prototype bằng máy giao diện chính cho quản lý thư

viện

• Thiết kế prototype bằng máy màn hình cho trang chủ và phiếu

đặt hàng mua sách trực tuyến của Website Sach

• Thiết kế prototype bằng máy màn hình thống kê cho quản lý

bệnh viện

• Thiết kế prototype bằng máy giao diện chính cho quản lý

bệnh viện

• Thiết kế protype bằng máy giao diện trang chủ và form đăng

ký khám bệnh trực tuyến cho Website của một bệnh viện

• Thiết kế các prototype bằng máy cho các giao diện của đề tài

mỗi nhóm Yêu cầu: dùng 2 kỹ thuật Storyboard

235 slide.tailieu.vn

Flow Chart & Site map

Flow chart là gì ?

• Minh hoạ các hành động của một quá trình công việc được sắp xếp theo một tiến trình logic và thể hiện dưới dạng sơ đồ

236

slide.tailieu.vn

Các loại sơ đồ khối

Có ba loại sơ đồ khối cơ bản:

 Cơ bản  Quy trình  Triển khai

237

slide.tailieu.vn

Các loại sơ đồ khối

Sơ đồ khối cơ bản xác định nhanh chóng tất cả

các bước chủ yếu trong quy trình.

Sơ đồ này được sử dụng để định hướng các bước chủ yếu cho nhóm bằng cách đưa ra một cái nhìn tổng quan về quy trình

238

slide.tailieu.vn

Các loại sơ đồ khối

 Sơ đồ khối quy trình

 Xem xét quy trình ở mức độ chi tiết.  Sơ đồ này liệt kê đầy đủ tất cả các bước chính

và bước phụ trong một quy trình.

 Sơ đồ khối triển khai

 Tương tự như các sơ đồ quy trình ở chỗ chúng cũng rất chi tiết, nhưng ngoài ra các sơ đồ triển khai còn chỉ rõ những người tham gia vào quy trình.

 Điều này có thể rất có ích trong trường hợp quy trình cần đến sự hợp tác giữa nhiều phòng ban chức năng

239

slide.tailieu.vn

Các loại sơ đồ khối

Sử dụng trong lưu đồ

Ký hiệu - Biểu tượng

Biểu thị bắt đầu hoặc kết thúc một quá trình / chương trình

Biểu thị hướng chảy logic trong một quá trình / chương trình

Biểu thị thông tin vào hoặc thông tin ra

Biểu thị một hoạt động / quá trình được tiến hành

Biểu thị một quyết định (hoặc phân nhánh) được thực hiện. Quá trình / chương trình phải tiếp tục theo một hoặc hai tuyến (Có/không)

Hình mũi tên kết nối cuối trang được sử dụng để biểu hiện dòng quy trình sẽ tiếp tục ở trang khác

240

slide.tailieu.vn

Công cụ cải tiến chất lượng

Một sơ đồ khối được định nghĩa là việc dùng hình ảnh để mô tả một quy trình được nghiên cứu hoặc được sử dụng để lập kế hoạch các bước cho một dự án

Khi xử lý một sơ đồ khối quy trình, cần xem xét hai giai đoạn riêng biệt của quy trình: giai đoạn thành phẩm và giai đoạn tạo sản phẩm

241

slide.tailieu.vn

Công cụ cải tiến chất lượng

Để phân tích giai đoạn thành phẩm, hoặc phân tích cách vận hành quy trình, các sơ đồ khối thường sử dụng các ký hiệu đơn giản và dễ nhận biết

Các sơ đồ khối cơ bản sử dụng những ký hiệu dưới đây khi phân tích cách vận hành quy trình

242

slide.tailieu.vn

Công cụ cải tiến chất lượng

Tài liệu

Quyết định

Quy trình

Kết thúc

Số liệu

Qui trình

243

slide.tailieu.vn

Quy trình lập sơ đồ khối

1. Xác định rõ ràng ranh giới của quy trình 2. Sử dụng ký hiệu càng đơn giản càng tốt 3. Đảm bảo rằng mỗi một đường vòng quay lại

đều có một đường thoát

4. Thường chỉ có một mũi tên đầu ra cho một ô quy trình. Nếu không, sẽ phải dùng ký hiệu

5. Hình thoi để thể hiện một quyết định.

244

slide.tailieu.vn

Ví dụ

Sơ đồ khối cơ bản cho việc nhận hàng tại bến Chỉ vẽ ra những bước chủ yếu trong quy trình

để có một cái nhìn tổng quan

245

slide.tailieu.vn

Sơ đồ khối chi tiết vẽ ra từng bước sự kiện và quyết định trong quy trình.

246

slide.tailieu.vn

247

Sơ đồ triển khai tổ chức sơ đồ theo các cột, mỗi cột biểu hiện một người hoặc một phòng/ban tham gia vào quy trình

slide.tailieu.vn

Bài tập

Sơ đồ khối quy trình – Tìm đường tốt

nhất để về nhà

Kiểm tra thời gian (có phải giờ cao

điểm) và thời tiết (xấu hay tốt)

248

slide.tailieu.vn

249

slide.tailieu.vn

Site Map

Site map (sơ đồ của một website)

 là một danh lục liệt kê tất cả các mục thông tin trên trang web của bạn cùng sự mô tả ngắn gọn cho các mục thông tin đó.

Site map nên được sử dụng dễ dàng trong việc thực hiện tìm kiếm nhanh để tìm ra thông tin cần thiết cũng như trong việc di chuyển thông qua các đường link trên website

250

slide.tailieu.vn

Site Map

Site map là sự cần thiết cho trang web của bạn để đạt được một vị trí cao trong các hệ thống tìm kiếm

Một site map nên được bao gồm như

sau:  Một chú thích ngắn về website, sử dụng các từ khoá cơ bản trong các đường link text dẫn đến các trang chính của bảng điều hướng

 Một site map tốt nên dẫn tới được mọi vị trí trên website. Bằng cách này bạn sẽ có được sự ưu tiên lớn trong khi tìm kiếm hệ thống

251

slide.tailieu.vn

Site Map

252

slide.tailieu.vn

Lời khuyên quan trọng khi tạo các site map

Một site map nên tương ứng với thiết kế

của trang web.

 Không nên sử dụng những yếu tố đồ hoạ

trong khi tạo một site map

Cấu trúc của sơ đồ nên có tương quan với chính hệ thống có tính phân cấp của web Nên đặt đường liên kết tới sơ đồ website trên trang chính hoặc trang đầu của trang web hoặc theo một cách nào đó tương tự để người dùng có thể sử dụng được dễ dàng khi cần thiết

253

slide.tailieu.vn

Thiết kế tương tác

Sau khi phân tích nhiệm vụ, người thiết kế phải chuyển đổi các “đặc trưng” của chương trình

Trong thiết kế UI, khái niệm “dẫn

đường” là việc thực hiện chuyển đổi nhiệm vụ sang đặc trưng

254

18/09/13

slide.tailieu.vn

Thiết kế tương tác

Dẫn đường là gì ?

 Dẫn đường đơn giản :

 Dẫn đường phức tạp :

• Là ánh xạ trực tiếp một nhiệm vụ sang một cửa sổ

• Là chuyển đổi một nhiệm vụ sang nhiều cửa sổ và

Nhiệm vụ của người thiết kế  Dẫn đường 1 cách trực quan

255

18/09/13

đường đi của nó không rõ ràng

slide.tailieu.vn

Thiết kế tương tác

 Dẫn đường trực quan bao gồm các

yếu tố :  Cần dễ dàng nhận biết điểm khởi đầu  Hiểu rõ điểm đích  Dấu hiệu rõ ràng trên đường đi từ khởi đầu

tới đích

 Tại bất kỳ thời điểm nào cũng phải biết được đang ở đâu, cách tiến lên và cách lùi lại hoặc thoát khỏi chương trình

256

18/09/13

slide.tailieu.vn

Thiết kế tương tác

 Các yếu tố chính Điểm khởi đầu

• Cung cấp điểm bắt đầu rõ ràng, để người dùng biết bắt đầu thao tác như thế nào (menu, phím tắt..)

• Đảm bảo khởi đầu là ở ngay trong giao

diện chính của chương trình. Nếu không phải sử dụng menu command hoặc link để kết nối

257

18/09/13

slide.tailieu.vn

Thiết kế tương tác

 Các yếu tố chính

Điểm đích

• Người sử dụng có khả năng dự báo điểm khởi đầu nào sẽ dẫn tới đích như mong muốn

258

18/09/13

slide.tailieu.vn

Thiết kế tương tác

 Các yếu tố chính Điểm thoát

• Lệnh thoát được đánh dấu rõ ràng trong trường hợp người sử dụng thay đổi ý định hay khởi động lại (sử dụng button Exit hoặc Home)

259

18/09/13

slide.tailieu.vn

Thiết kế tương tác

 Các yếu tố chính

Bước hiện hành

• Cung cấp rõ ràng chỉ báo : người sử dụng đang đứng ở nơi nào trong tiến trình công việc

• Thông thường mô tả trên thanh tiêu đề cửa sổ trong trường hợp xuất hiện nhiều cửa sổ (step 1 of 8)

260

18/09/13

slide.tailieu.vn

Thiết kế tương tác

 Các yếu tố chính Bước tiếp theo

• Chỉ rõ ràng cách thực hiện đến bước

• Thường sử dụng các lựa chọn hay

lệnh phù hợp

• Các phím lệnh nên có nhãn mô tả để người sử dụng biết sẽ thực hiện cái gì trong bước tiếp theo

261

18/09/13

slide.tailieu.vn

Thiết kế tương tác

 Các yếu tố chính Bước trước đó

• Chỉ rõ ràng cách quay trở lại bước

trước đó

• Thường sử dụng phím Cancel hoặc

Back

262

18/09/13

slide.tailieu.vn

Thiết kế tương tác

Một số cách nên làm để có đường dẫn

trực quan :  Nhận biết các bước trong cửa sổ

• Phân nhóm logic các control trong cửa sổ. Hiển thị

263

18/09/13

theo trật tự từ trên xuống dưới • Đánh số các bước trong nhiệm vụ

slide.tailieu.vn

Thiết kế tương tác

264

18/09/13

slide.tailieu.vn

Thiết kế tương tác

 Một số cách nên làm để có đường dẫn trực quan :

 Sử dụng cửa sổ đơn khi có thể

• Có thể tổ hợp các cửa sổ liên quan vào một

265

18/09/13

Property Sheet - ví dụ : hộp thoại Personalization của Window

slide.tailieu.vn

Thiết kế tương tác

Một số cách nên làm để có đường dẫn

trực quan :  Sử dụng Wizard

266

18/09/13

• Lý tưởng khi thực hiện các tác vụ phức tạp

slide.tailieu.vn

Thiết kế tương tác

Một số cách không nên làm để có

đường dẫn trực quan :  Không sử dụng các cửa sổ liên quan cho

cùng một nhiệm vụ • Khi người sử dụng phải xâm nhập vài cửa sổ

không liên quan để thực hiện nhiệm vụ tức là thiết kế đã vi phạm lỗi dẫn đường không trực quan • Người sử dụng không biết điểm khởi đầu bắt đầu

267

18/09/13

từ đâu

slide.tailieu.vn

Thiết kế tương tác

268

18/09/13

slide.tailieu.vn

269

Bài giảng Phương tiện tương tác kỹ thuật số: Chương 2 - Trần Thị Kim Chi

Chủ đề:

Kỹ thuật điện tử số

1

Nội Dung

slide.tailieu.vn

Các mô hình quá trình phát triển phần mềm

slide.tailieu.vn

Mô hình thác nước (waterfall)

Design

Code

slide.tailieu.vn

Mô hình thác nước (waterfall)

Phù hợp với mô hình phát triển phần mềm hơn là phát triển UI

slide.tailieu.vn

Mô hình thác nước có phản hồi

Design

Code

slide.tailieu.vn

Mô hình thiết kế lặp

slide.tailieu.vn

Mô hình thiết kế lặp

slide.tailieu.vn

Mô hình thiết kế lặp

website  Tiến hành xử lý hiệu ứng ảnh, thu thập tài liệu liên quan  Sơ đồ cấu trúc website; Giao diện  CSDL  Nội dung từng trang  Liên kết giữa các trang

slide.tailieu.vn

Mô hình thiết kế lặp

slide.tailieu.vn

Mô hình thiết kế lặp

slide.tailieu.vn

Mô hình thiết kế lặp

slide.tailieu.vn

Mô hình thiết kế lặp

slide.tailieu.vn

Mô hình xoắn ốc

1. Task analysis

2. Design

3. Paper prototype

4.

In-class user testing

5. Computer prototype

6. Heuristic evaluation

7.

Implementation

8. User testing

slide.tailieu.vn

Mô hình xoắn ốc

slide.tailieu.vn

Mô hình xoắn ốc

7.

Người sử dụng kiểm thử, người sử dụng tham gia thử nghiệm phần mềm làm mịn chúng

slide.tailieu.vn

Part II : Creating Interactive Products

1. The Process 2. Interactive Design 3. Human Interface Design 4. Flowcharts and Site Maps 5. Proto-tying 6. The Technology of the Web

slide.tailieu.vn

1. The Process

1. Concept development 2. Funds acquisition 3. Product design 4. Interface design 5. Design document 6. Proto-typing 7. Product production 8. Product launch 9. Product maintenance 10.Product updating

slide.tailieu.vn

1. The Process

slide.tailieu.vn

1. The Process

slide.tailieu.vn

1. The Process-The Business Plan Tổng quan KHKD

Sứ Mệnh & Tầm Nhìn

Cạnh Tranh

Nhân Sự Chủ Chốt

Mục Tiêu Ngắn & Dài Hạn

Cơ Hội & Thách Thức

Kế Hoạch Tài Chính

Ý Tưởng Kinh Doanh

Rủi Ro & Vấn Đề

slide.tailieu.vn

1. The Process-The Business Plan Tổng quan KHKD

slide.tailieu.vn

Tổng quan quy trình hoạt động

slide.tailieu.vn

1. The Process-The Business Plan

Loại mục tiêu

Thời hạn

slide.tailieu.vn