CTT 534 Thiết kế giao diện LN10 interaction styles vi

Hướng dẫn thiết kế menu: điều hướngquán cho tất cả các menu ở tất cả các màn hình Giữa 2 menu trái với 2 menu phải, cái nào tốt hơn?... Nhược điểm của form nhập liệun Người dùng phải biế

CTT534 – Thiết Kế Giao Diện

HK II 2015 – 2016

Các kiểu tương tác

Các dạng đối thoại

q Phân biệt giữa các lựa chọn, áp dụng nguyên lí nhận dạng thì tốt hơn hồi tưởng

q Tích hợp các giá trị dữ liệu, kĩ năng cao hơn, tính linh hoạt cũng cao hơn

q Các tính chất vật lí phản ánh trên đối tượng sự vật

q Cách thức tương tác linh hoạt, thực tế và hoàn hảo

Menu

Ưu điểm của menu

n Tự giải nghĩa (self-explanatory)

q Giảm thời gian viết tài liệu hướng dẫn

q Yêu cầu huấn luyện rất ít hoặc ko cần huấn luyện

q Giúp ngữ nghĩa và cú pháp tường minh

Nhược điểm của menu

suất cao

q Mọi thứ bị hệ thống điều khiển

q Bị gượng ép vào một số lựa chọn giới hạn

n Take up screen ‘real estate’

q Chỉ giới hạn trong các kiểu nhập liệu hợp lệ hạn chế

Khi nào nên sử dụng menu?

n Menu thích hợp trong các trường hợp sau

Hướng dẫn thiết kế menu: cấu trúc

rõ ràng

Hướng dẫn thiết kế menu: cấu trúc

cấu trúc văn phạm, vị trí đặt và khớp với tiêu đề

menu tương ứng

Hướng dẫn thiết kế menu: cấu trúc

cho chiều rộng của cây

Hướng dẫn thiết kế menu: thứ tự

năng, tần suất sử dụng, thứ tự sử dụng hoặc thứ tự bảng chữ cái

Hướng dẫn thiết kế menu: điều hướng

quán cho tất cả các menu ở tất cả các màn hình

Giữa 2 menu trái với 2 menu phải, cái nào tốt hơn?

Hướng dẫn thiết kế menu

n Thể hiện vị trí thông qua đồ họa, số, tiêu đề

ngữ

Hướng dẫn thiết kế menu

q Các cơ chế chọn lựa mới

q Tối ưu thời gian phản hồi, hiển thị

q Kích thước màn hình

Form nhập liệu

Yahoo 2012-13 Yahoo 2014

Ưu điểm của form nhập liệu

n Tự giải nghĩa (self-explanatory)

q Giảm thời gian viết tài liệu hướng dẫn

q Yêu cầu huấn luyện rất ít hoặc ko cần huấn luyện

q Giúp ngữ nghĩa và cú pháp tường minh

n Đòi hỏi nhớ ít

q Nhận dạng tốt hơn hồi tưởng

n Efficient use of screen “real-estate”

Nhược điểm của form nhập liệu

n Người dùng phải biết về các giá trị nhập liệu hợp lệ (kiến thức về ngữ nghĩa trong ứng dụng)

thông thạo các phím chức năng (chẳng hạn TAB,

RETURN, BACKSPACE)

Khi nào nên sử dụng form nhập liệu?

q Về mặt tâm lí người dùng

n Thái độ tiêu cực hoặc trung dung

n Động lực thấp hoặc chỉ ở mức độ vừa phải

q Về mặt kiến thức và kinh nghiệm

n Kĩ năng nhập liệu: từ mức vừa phải đến mức cao

n Kinh nghiệm hệ thống: vừa phải

n Kinh nghiệm tác vụ: từ mức vừa phải đến mức cao

n Kinh nghiệm ứng dụng: từ mức thấp đến mức vừa phải

n Sử dụng hệ thống khác: từ mức vừa phải đến mức thường xuyên

Hướng dẫn thiết kế form nhập liệu

n Thuật ngữ, từ viết tắt phải nhất quán

Hướng dẫn thiết kế form nhập liệu

trực quan

n Di chuyển cursor tiện lợi

n Sửa lỗi cho từng kí tự và cho toàn bộ field

n Trong thông báo lỗi cần thể hiện các giá trị hợp lệ

Thao tác trực tiếp

n Thể hiện trực quan “world of actions”

q Hiển thị các đối tượng, các hành động.

q Taps analogical reasoning.

Thao tác trực tiếp – Ví dụ

n Programming of industrial robots

n Office automation systems

n Windowing systems

n Visual programming

n Touch-screen kiosk

n Touch-screen phones

Thao tác trực tiếp (tt)

q Tương thích với control/hiển thị.

q Giảm cú pháp à giảm lỗi.

q Học nhanh, nhớ lâu.

q Khuyến khích khám phá.

q Có thể làm tăng yêu cầu về tài nguyên hệ thống.

q Nhiều hành động có tính vướng víu.

q Kĩ thuật macro thường yếu.

q Lưu giữ và truy vết lịch sử khó.

Ưu điểm của thao tác trực tiếp

q Cho phép người dùng tập trung vào ngữ nghĩa tác vụ hơn

là ngữ nghĩa và cấu trúc hệ thống

giảm khả năng gây lỗi của người dùng

Nhược điểm của thao tác trực tiếp

hay sử dụng hệ thống và sẽ gặp vấn đề khi có nhiều đối tượng, hành động cần thể hiện trên 1 màn hình

cho nhiều đối tượng và hành động

Khi nào nên sử dụng thao tác trực tiếp?

n Thao tác trực tiếp thích hợp trong các trường hợp sau:

Hướng dẫn thiết kế thao tác trực tiếp

chuyên gia hoặc hay sử dụng

q Mô tả “trước và sau”

q Mô tả công cụ

q Mô tả hành động

về chọn lựa và di chuyển vị trí,

Ngôn ngữ dòng lệnh

n Tương tác với máy tính thông quan các lệnh

bằng văn bản hay giọng nói

n Phụ thuộc nhiều vào các đặt tên và cú pháp

n Chẳng hạn

q Command trên DOS

q Command trên UNIX

Ưu điểm và nhược điểm

Hướng dẫn thiết kế ngôn ngữ dòng lệnh

động

n Hỗ trợ các luật viết tắt nhất quán

q prefer truncation to one letter

vụ

q Little or no onscreen real estate needed

q Yêu cầu gõ được giới hạn

Hỏi đáp

q Wizard dialog: hộp thoại nhiều bước, có thể quay lui

q Điền thông tin còn thiếu

nghiệm

Hỏi đáp – Ví dụ

This is Artificial Intelligence Corporation’s Intellect

Query System I’m ready to answer questions about

the employee file

Please enter your first request:

=> What’s in the database?

Fields in the file of Employees:

Hỏi đáp – Ví dụ (tt)

Next request:

=> Who works in New York City?

Print the job and name of all employees with City = New York

Tương tác bằng ngôn ngữ tự nhiên

Tương tác bằng ngôn ngữ tự nhiên

n Limitations

q Reducing syntactic load is not enough

q Computer and task semantics are the hard part

n Predicate calculus, Boolean algebra

n Set theory, normalization theory

n Database entities and values

n Permissible operations and constraints

q NLI often shows too little context

n “world of action”

Khi nào nên sử dụng

tương tác bằng ngôn ngữ tự nhiên?

q Người dùng có kiến thức về lĩnh vực nghiệp vụ

q Người dùng hay bị gián đoạn, ko nhớ cú pháp

q Người dùng có kĩ năng sử dụng máy tính tương đối

q Truy cập giới hạn với các loại tương tác khác

n Chẳng hạn, chỉ có thể sử dụng giọng nói để ra lệnh khi đang lái xe

n Người khuyết tật ko thể gõ được

Tổng kết các kiểu tương tác

Tổng kết các kiểu tương tác (tt)

Tổng kết các kiểu tương tác (tt)

Tổng kết các kiểu tương tác (tt)

Tổng kết các kiểu tương tác (tt)

Tổng kết các kiểu tương tác (tt)

Tốt hay xấu?

n MS Visual SourceSafe 5.0

Source: Interface Hall of Shame

Open dialog of MS Word 2010

Tốt hay xấu?

Tốt hay xấu?

Tốt hay xấu?

n Augmented reality & magic

http://www.youtube.com/watch?v=C4pHP-pgwlI