Input và Output với chương trình mobile pot

Giới thiệu chung  Một số phương pháp nhập liệu được sử dụng đối với thiết bị di động:  Nhập liệu sử dụng phím cứng  Nhập liệu thông qua cảm ứng  Nhập liệu sử dụng nhận dạng viết ta

Input và Output với

chương trình mobile

Đặc trưng, Tương tác, Tương

phản

 Âm thanh và vibration (sinh viên tự đọc – chương 12)

 Màn hình, Độ sáng và Cảm biến (sinh viên tự đọc –

chương 13)

Giới thiệu chung

 Một số phương pháp nhập liệu được sử dụng đối với thiết bị di động:

 Nhập liệu sử dụng phím cứng

 Nhập liệu thông qua cảm ứng

 Nhập liệu sử dụng nhận dạng viết tay

 Nhập liệu thông qua một số hành vi cử động

Text và nhập ký tự

 Một số kiểu layout bàn phím nhập liệu QWERTY:

 QWERTZ – được sử dụng ở trung tâm châu Âu và Đức

 AZERTY – được sử dụng tại Pháp và Bỉ

 QZERTY – được sử dụng tại Ý

4

Nhập liệu

 Điều khiển sử dụng nhập liệu được thông qua

các layout bàn phím cơ bản

 Nhập liệu trong các hoàn cảnh khác nhau, và sử

dụng các thiết bị nhập liệu khác như bút, bàn

phím cứng …

 Cân nhắc đến các đối tượng cần truyền đạt để có những phương pháp nhập liệu tốt

 Sử dụng các chức năng hỗ trợ khả năng tương

tác và nhập liệu nhanh, có hiệu quả

… ( tiếp)

6

Các mẫu nhập liệu

 Keyboard & keypads

 Nhập liệu bằng chữ, số trên thiết bị di động có sử dụng bàn phím

 Mở rộng khả năng của bàn phím mà không cần thêm các layout

phụ hoặc không gian phần cứng

 Tự hoàn thiện và dự đoán

 Cung cấp công nghệ hỗ trợ trong nhập liệu, giảm thời giản

Tương tác

 Phần lớn các bàn phím được thiết kế thông qua

các block đơn, và khác nhau giữa màn hình theo

Các thể hiện

 Nhãn của phím phải rõ ràng, dễ đọc và thao tác

 Các trạng thái liên quan tới phím bấm phải rõ

ràng

 Phải đặc tả được rõ ràng các hành vi với các

nhãn của bàn phím

10

Lưu ý khi thiết kế bàn phím

 Đảm bảo bàn phím phải được khóa khi không sử dụng hoặc để trong pocket

 Trong bất kỳ trường hợp nào cần phải có tự động hoàn thiện và dự đoán nhập liệu từ người dùng

 Tránh được sự nhầm lẫn trong thiết kế bàn phím

– như các phím chức năng không được để lẫn

vào trong các phím nhập liệu

 Không sử dụng các phương pháp nhập liệu

thông thường khi tương tác với bàn phím kiểu

multitap

Các tương tác điều khiển

Hạn chế trong tương tác điều khiển

 Contact pressure

 Cần hạn chế các tai nạn xảy ra trong nhập liệu – như

nhầm lẫn trong việc tương tác

 Hạn chế thời gian

 Đảm bảo thời gian tương tác giữa người sử dụng với

phím bấm, thời gian dài quá hay ngắn quá đều ảnh

hưởng đến dữ liệu tương tác

 Trục tương tác

 Đảm báo tương tác nhập liệu (có thể qua hình thức cử chỉ) thống nhất trong một hướng tương tác

… ( tiếp)

 Kích thước

 Khả năng tương tác với phím có thể phụ thuộc khá

nhiều vào kích thước vật lý của phím và sự tương ứng kích thước đối với các phím khác

 Cân nhắc sử dụng các cảm biến khác trong nhập liệu

14

Sự tương tác

 Đảm bảo điều khiển cử chỉ giống như sự tương

tác tự nhiên của người dùng

 Các task đơn giản cần phải có các cử chỉ điều

khiển đơn giản

 Giảm sự cồng kềnh trong tương tác

 Có nhiều sự linh hoạt hơn trong điều khiển

 Nhiều sắc thái trong điều khiển – như các

emotion được sử dụng trong điều khiển giao tiếp

 Press and Hold

 Sử dụng để chuyển tới các chức năng lựa chọn trong tương tác

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

 Thông qua xúc giác

 Thông qua các cử chi nhận diện chuyển động người

dùng

Các biến thể

 Điều khiển thông qua một trục - chỉ cho phép

chuyển động trong một trục (trái/phải, lên/xuống)

 Điều khiển qua 2 trục – kết hợp điều khiển theo 2 hướng nhập dữ liệu

 Planar – điều khiển thông qua các trackball, đa

hướng

20

Tính tương tác

 Tương tác thông qua các mẫu

 Focus & Cursors

 Scroll

 Đảm báo tương tác qua các trục thông qua thiết

kế các phím

Press and Hold

 Cung cấp các chức năng tương tác tập trung vào một vùng, vị trí

 Đưa ra các chức năng điều khiển qua tương tác

22

Tương tác

 Thông qua các hình thức cuộn

tới các thành phần được lựa

Lưu ý khi sử dụng

 Tránh sự phức tạp trong hiển thị

điều khiển qua press&hold

 Chắc chắn các chức năng hoạt

động thông qua các mẫu thiết kế

liên quan tới hành động này

24

Nhập liệu và lựa chọn

 Thể hiện dưới dạng form

 Có thể cho phép nhiều lựa chọn với các cách thể hiện layout khác nhau

Sử dụng các phương pháp thể hiện danh sách

… ( tiếp)

 Màn hình landscape của mobile được định nghĩa

bởi phương pháp nhập liệu

 Web forms make or break the most crucial online

interactions: checkout (commerce),

communication & registration (social), data input

(productivity), and any task requiring information

entry These activities are taking off in a big way

on mobile So getting input on mobile devices

matters more each day (Wroblewski 2010)

26

Nhập liệu và không gian di động

 Cử chỉ giao diện cho phép tương tác với các đối

tượng trong chương trình, nhập liệu sử dụng

form

… ( tiếp)

 Cân nhắc về sử dụng các công nghệ trong nhập liệu

(auto-complete, dự đoán về nhập liệu của người

dùng)

 Khi có thể cho phép, cân nhắc sử dụng drop-down

list ( như trong lựa chọn nhập liệu dạng form)

 Giới hạn số lượng các phím điều khiển không cần

thiết

 Theo sát phương pháp của luật Fitt – càng nhiều lần

click thì càng chậm trong sự thực hiện các task

 Cân nhắc sử dụng các sensor hoặc lưu trữ dữ liệu

trong nhập thông tin

28

 Cung cấp sự lựa chọn đơn hoặc đa dựa vào các dạng form

 Kiểu điều khiển

 Kiểu đơn giản, hiệu quả giúp người dùng thay đổi các tham số

hoặc giá trị

 Clear entry

 Cung cấp phương pháp cho người dùng loại bỏ nội dung khỏi

form

Vùng nhập liệu

 Cung cấp vùng cho người dùng nhập liệu

 Form và các dạng nhập liệu cơ bản được sử

dụng – thông qua bàn phím, các dạng danh sách

khác nhau

30

Lựa chọn form

 Hỗ trợ đa lựa chọn trong form

 Sử dụng các mẫu như radio, pull-down

32

Lưu ý khi thiết kế

 Giảm các mục nhập liệu trong form khi thiết kế

 Một số hình thức:

 Lựa chọn đơn – mục đích kết nối với các thành phần

form khác mà có thể thay thế cho chương trình mobile

 Đa lựa chọn – mục đích để kết nối với các thành phần

form khác mà cung cấp nhiều thành phần trong danh

sách lựa chọn

… ( tiếp)

 Tránh sử dụng panel lựa chọn toàn màn hình

 Không bao giờ được sử dụng kiểu form chồng

nhau

34

Các kiểu cơ chế điều khiển

 Cung cấp một số phương pháp

điều khiển nhằm thay đổi

setting, mức độ, hoặc giá trị

 Cho phép sử dụng các hình

thức nhập liệu khác nhau

Xóa dữ liệu

 Thiết kế cho phép người dùng

có thể xóa dữ liệu khỏi form (đổi

khi cả form)

 Chức năng điều khiển phải rõ

ràng, ít thao tác

 Không được sử dụng sự thiết kế

nghèo nàn, khi cho phép chức

năng xóa ra ngoài màn hình

cùng với các chức năng nhập

liệu

36

Bài tập số 4

 Yêu cầu bắt buộc về thiết kế:

 Sử dụng Vertical/Infinite List để hiển thị các danh sách thông tin

 Sử dụng Film Strip/Caroul để mở chi tiết các thông tin và chuyển

đổi giữa các trang chi tiết thông tin

 Có sử dụng menu cố định và theo quan hệ

 Thiết kế theo luật Fitt (Fitt’s law) về việc cân bằng giữa các nút

chức năng và layout thông tin

 Có sử dụng dạng form nhằm mục đích cho lựa chọn, điền thông

tin, và thiết kế các chức năng điều khiển (xóa dữ liệu,

copy/paste)

 Có sử dụng widget về link, location within

 Chú ý các tổ chức dữ liệu và sắp xếp theo quan hệ (định danh,

thứ tự, và chủ đề)

Bài tập số 4

 Lựa chọn 1 trong các phương án sau:

1 Thiết kế và viết chương trình duyệt email (có thể là gmail hoặc

pop3) và giao diện phải thiết kế thỏa mãn các yêu cầu bắt buộc trên, bao gồm liệt kê email, cập nhật, sắp xếp, hiển thị chi tiết, xóa, nhập tài khoản

2 Thiết kế và viết chương trình quản lý danh sách sinh viên của 1

lớp trên mobile (bao gồm các thông tin về thứ tự, danh sách sinh viên, lớp, mã số sinh viên, địa chỉ, điểm tổng kết theo năm), cho phép hiển thị theo danh sách, nhập, xóa, khôi phục lại mục

bị xóa và click vào xem thông tin chi tiết (Khuyến khích thiết kế theo kiểu modern UI)

3 Chương trình đọc file docx cơ bản (bao gồm hiển thị được phần

text, edit, liệt kê, sắp xếp, cập nhật, di chuyển, xóa và lưu)

38

Bài tập số 4

 Yêu cầu về bài làm:

 Thực hiện theo các yêu cầu bắt buộc và đưa ra các

thiết kế layout thêm (khi cần thiết)  mô tả trong tài

liệu thiết kế

 Tài liệu mô tả phân tích chương trình

 Source code + đoạn video nhỏ (nén dưới dạng ogg, và khoảng 1 phút) demo

 Thời gian thực hiện trong 03 tuần (trong tuần từ

06/11 đến 27/11)