Chủ đề

2. Chủ đề • Giới thiệu về HCI • Tính sử dụng được của hệ thống • Thiết kế hướng người sử dụng • Khả năng con người • Mô hình vào – ra dữ liệu • Nguyên lý thiết kế giao diện • Xây dựng prototype • Thiết kế đồ họa và tương tác • Đánh giá và kiểm thử giao diện • Các chủ đề nghiên cứu Bài 5: Mô hình vào-ra dữ liệu

3. Nội dung bài này • Lỗi thiết kế trong hệ thống tương tác • Mô hình ra • Mô hình trong thiết kế UI • Mô hình màu • Mô hình vào • Tổng kết bài Bài 5: Mô hình vào-ra dữ liệu

4. 1. Lỗi thiết kế? • Màn hình máy bán xăng dầu • Nhầm lẫn tổng giá và tổng số xăng bán • Hiển thị nhãn không nhất quán ở dưới màn hình • Rational Software Bài 5: Mô hình vào-ra dữ liệu

5. Lỗi thiết kế? • Microsoft's Access 95 • GIF Construction Set Bài 5: Mô hình vào-ra dữ liệu

6. Lỗi thiết kế? • Phần mềm RealCD của IBM • Thiết kế trên cơ sở đối tượng thực: Vỏ nhựa đựng CD -> thiết kế này có ẩn dụ. User dự đoán được cách sử dụng phần mềm. • Logo RealCD được thiết kế cầu kỳ và nổi bật, tuy nhiên nếu nhấn chuột trên chúng, không có gì xảy ra. • Vị trí xếp đặt các phím điều khiển theo chiều dọc không phù hợp • Để mở vỏ CD, khó tìm ra phím điều khiển (đáng lẽ ra chỉ cần nhấn phím chuột trên logo). Phím kết thúc chương trình ở đâu? • Trợ giúp ở đâu? Danh sách bài hát thường ở sau vỏ CD? Bài 5: Mô hình vào-ra dữ liệu

7. Lỗi thiết kế? • Win XP Search Tool • Đặc trưng thú vị: • Hỗ trợ tìm kiếm các loại tệp khác nhau theo các tiêu chí khác nhau • Khi chọn “Picture, music, and video”, bước tiếp theo sẽ không hỏi word hay phrase trong tệp • Khi chọn “Documents”, bước tiếp theo không chỉ hỏi keywords mà còn cả thời gian. • Vấn đề • HTML là Documents hay chỉ tệp Doc của MS? • Tại sao tách Internet thành nhóm riêng? Bài 5: Mô hình vào-ra dữ liệu

8. Lỗi thiết kế? • Trang khởi động của Google • Thiết kế tối thiểu nhất có thể, Load trang Web nhanh • Người lần đầu sử dụng sẽ gặp khó khăn: • Google làm cái gì? • Cần gõ gì trong text Box (không có tiêu đề) • Nhãn trên phím sai ngữ pháp ("Google Search" và "I'm Feeling Lucky" là gì?) • Trợ giúp ở đâu? • Tuy nhiên, giao diện của Google rất đơn giản, học sử dụng nhanh. Bài 5: Mô hình vào-ra dữ liệu

9. 2. Các mô hình ra dữ liệu • Bài này tập trung vào các cơ chế cài đặt UI • Ba mô hình cơ bản trình diễn trên GUI (Output Models) • Thành phần (components) • Các đối tượng đồ họa được sắp xếp trong cây với khả năng tự vẽ. • Ví dụ: các đối tượng nhãn, đối tượng đoạn thẳng • Còn gọi là widgets, controls,... • Nét vẽ (strokes) • Vẽ đầu ra bằng cách gọi các hàm nguyên thủy mức cao • Ví dụ: drawLine, drawRectangle, drawArc, và drawText • Điểm ảnh (pixels) • Xem màn hình như mảng các pixels, tương tác trực tiếp với pixels • Còn gọi là raster, image, bitmap • Ví dụ sử dụng mô hình • HTML (component); Postscript laser printer (stroke input, pixel output); plotter (stroke input and output); PDF (stroke); LCD panel (pixel). Bài 5: Mô hình vào-ra dữ liệu

10. Ví dụ thiết kế khung nhìn đồ thị • Nhiệm vụ: Xây dựng khung nhìn để hiển thị đồ thị của các nút và các cạnh • Mỗi ứng dụng đều sử dụng cả 3 mô hình • Khi nào trong ứng dụng sẽ chuyển đến mô hình mức thấp hơn? • Tiệm cận mô hình Component thuần túy • Nút và cạnh trong đồ thị được biểu diễn bằng thành phần nguyên thủy từ thư viện đồ họa • Mô hình stroke và pixel vẫn còn xuất hiện, nhưng chúng ở bên trong các thành phần nguyên thủy. A B C Bài 5: Mô hình vào-ra dữ liệu

11. Ví dụ thiết kế khung nhìn đồ thị • Tiệm cận mô hình Stroke thuần túy • Cửa sổ mức đỉnh không có subcomponents • Có thể vẽ đồ thị bằng cách gọi drawRectangle cho nút và drawText cho nhãn và drawLine cho cạnh đồ thị. • Tiệm cận mô hình Pixel thuần túy • Có thể hiển thị từng pixel một để tạo nên đồ thị • Nhãn: Có thể copy ảnh ký tự lên màn hình • Ngày nay ít sử dụng vì đòi hỏi nhiều công sức của lập trình viên • Tiệm cận mô hình lai • Sử dụng các mô hình ra khác nhau cho các nhóm đối tượng khác nhau • Ví dụ: sử dụng mô hình components cho nút và text, sử dụng mô hình Stroke cho các cạnh đồ thị Bài 5: Mô hình vào-ra dữ liệu

12. Vẽ trong mô hình Component • Vẽ trong mô hình Component được thực hiện theo tiến trình top-down • Bắt đầu từ gốc của cây thành phần • Mỗi thành phần tự vẽ • Lặp để vẽ con của nó • Kỹ thuật cắt xén vùng đối với mỗi thành phần để tối ưu tiến trình vẽ • Ví dụ các nút B, C không cần vẽ • Vẽ một phần các cạnh • Giải thuật • Sutherland-Cohen • ... A B C Clip region Bài 5: Mô hình vào-ra dữ liệu

13. Vẽ trong mô hình Component • Với thành phần ở gốc cây vùng cắt xén là cả màn hình, khi vẽ xuống các cây thành phần thì vùng cắt xén là chữ nhật bao (minimum bounding boxes - MBB) thành phần. • Việc sử dụng MMB thay cho hình dạng thực của thành phần là để nâng cao tốc độ thực hiện của hệ thống. • Để tăng cường hiệu ứng thị giác, ví dụ cắt xén xâu ký tự, thì vùng cắt xén cần phải là hình dạng bất kỳ trên màn hình. • Postscript là mô hình stroke đầu tiên sử dụng vùng cắt xén không phải chữ nhật • Hiện nay hầu hết Toolkits đồ họa (kể cả Windows) hỗ trợ vùng cắt xén không phải chữ nhật. Bài 5: Mô hình vào-ra dữ liệu

14. Vấn đề tự động vẽ lại • Khi thành phần cần thay đổi "diện mạo" thì nó không vẽ trực tiếp mà yêu cầu hệ thống đồ họa vẽ lại vào thời điểm sau đó • Yêu cầu gửi đi bao gồm cả vùng màn hình cần vẽ lại (damaged region) • Vùng vẽ lại là chữ nhật bao thành phần. Bài 5: Mô hình vào-ra dữ liệu

15. Vấn đề tự động vẽ lại • Khi dịch chuyển thành phần trên màn hình và sử dụng thuật toán vẽ lại có thể dẫn tới một phần màn hình nhấp nháy. Bài 5: Mô hình vào-ra dữ liệu

16. Double-Bufering • Sử dụng vùng đệm đúp để giải quyết vấn đề nhấp nháy trên màn hình • Một bản sao màn hình được lưu trữ trong vùng đệm • Thuật toán vẽ lại thực hiện trên buffer, sau đó copy khối pixel lên màn hình Bài 5: Mô hình vào-ra dữ liệu

17. Mô hình Strokes • Mô tả ảnh bởi các nét vẽ với thuộc tính kèm theo • Màu, độ rộng, kiểu nét vẽ, kiểu tô • Phần lớn các UI Toolkit có các hàm cơ sở để vẽ các đối tượng như drawLine, drawRectangle, drawArc, và drawText • Biểu diễn các nét vẽ bằng cách nào? • Rời rạc hóa các đường "toán học" để có các pixels tạo nên các đường "đồ họa". Bài 5: Mô hình vào-ra dữ liệu

18. Antialiasing • Các đối tượng trơn tru có thể xuất hiện với răng cưa trên các thiết bị với độ phân giải quá thấp • Chống răng cưa: kỹ thuật vẽ bổ sung vào vị trí răng cưa • Pixels với độ xám khác nhau • Màu sơ cấp (Subpixel rendering) • Mỗi pixel được tạo bởi ba thành phần R, G, B gần nhau. • Màn hình LCD sẽ tăng mật độ 3 lần theo chiều ngang • Không sử dụng cho màn hình CRT vì các pixels sắp xếp theo tam giác Bài 5: Mô hình vào-ra dữ liệu

19. Sử dụng mô hình Stroke • Có thể sử dụng mô hình stroke để vẽ thành phần trên UI • Các font Postscript & TrueType sử dụng stroke để vẽ đường bao, sau đó được chuyển đổi sang bitmap trước khi hiển thị Bài 5: Mô hình vào-ra dữ liệu

20. 3. Mô hình trong thiết kế UI • Mô hình của hệ thống là cách mô tả hệ thống hoạt động như thế nào • Ví dụ Photoshop sử dụng mô hình pixel, Visio sử dụng mô hình đồ họa có cấu trúc. • Ba loại mô hình trong thiết kế UI • Mô hình hệ thống (mô hình cài đặt) • Hệ thống làm việc như thế nào • Mô hình giao diện (mô hình trình diễn - manifest) • Là mô hình mà hệ thống trình diễn tới người sử dụng • Mô hình người sử dụng (mô hình khái niệm - conceptual) • Người sử dụng nghĩ về hệ thống làm việc như thế nào. System model Interface model • User model Bài 5: Mô hình vào-ra dữ liệu

21. Blue (0,0,1) Cyan (0,1,1) Magenta (1,0,1) White (1,1,1) Green (0,1,0) Red (1,0,0) Yellow (1,1,0) 4. Mô hình màu • Các mô hình màu sử dụng trong hệ thống UI: RGB, HSV, CMYK • RGB Bài 5: Mô hình vào-ra dữ liệu

22. Mô hình màu • HSV • Hue: Loại màu • Saturation: Mức độ tinh khiết của màu • Value: Độ chói • CMYK • Dành cho máy in Blue (1,1,0) Cyan (1,0,0) Magenta (0,1,0) Blue Cyan Magenta White (0,0,0) Black Green (1,0,1) Black (1,1,1) Green Red Yellow Red (0,1,1) Yellow (0,0,1) Bài 5: Mô hình vào-ra dữ liệu

23. Mô hình màu • Chuyển đổi mô hình màu RGB sang CMYK • Chuyển đổi mô hình màu RGB sang HSV • Chuyển đổi mô hình màu HSV sang RGB • void RGB2CMYK(float R,float G,float B,float &C, • float &M,float &Y,float &K) • { • RGB2CMY(R,G,B,C,M,Y); • K = min3(C,M,Y); // Cho lại giá trị min từ ba đối số • C = C - K; • M = M - K; • Y = Y - K; • } Bài 5: Mô hình vào-ra dữ liệu

24. Mô hình màu • Ví dụ sử dụng HSV Chọn Hue-Saturation Bổ sung sáng/tối Bài 5: Mô hình vào-ra dữ liệu

25. Gợi ý gỡ lỗi đầu ra • Khi vẽ đối tượng đồ họa nhưng không nhìn thấy trên màn hình, tại sao? • Sai vị trí hiển thị: Gốc hệ trục tọa độ ở đâu? Thước đo của chúng như thế nào? • Sai kích thước: Đối tượng có 0 độ rộng và 0 độ cao. • Sai màu: Vẽ đối tượng cùng màu với màu nền. Sử dụng giá trị 100% alpha. • Sai trình tự z (z-order): Vẽ đối tượng khác đè lên trên. Bài 5: Mô hình vào-ra dữ liệu

26. 5. Các mô hình vào dữ liệu • Lập trình trình tự với UI • Hệ thống in dấu nhắc và chờ người sử dụng nhập đáp ứng • Sau khi nhận được trả lời của người sử dụng, hệ thống lại hiển thị dấu nhắc và chờ trả lời. • Chương trình nắm hoàn toàn điều khiển quá trình đối thoại • Ví dụ: Vào/ra console sử dụng lời gọi thủ tục print ( Enter name: ) name = readLine(); print ( Enter phone number: ) name = readLine(); Bài 5: Mô hình vào-ra dữ liệu

27. Các mô hình vào dữ liệu • GUI tương tác • Người sử dụng có thể nhấn chuột bất kỳ ở đâu trên cửa sổ • Có thể kích hoạt bất kỳ lệnh nào đang sẵn sàng • Có thể tương tác với bất kỳ View nào mà họ nhìn thấy • Do vậy, không thể viết chương trình GUI theo phong cách tuần tự, prompt-response. • GUI cần được thiết kế để chúng có khả năng quản lý đầu vào dị bộ, hệ thống chờ đầu vào từ người sử dụng • Toàn bộ giao tiếp từ người sử dụng đến máy tính đều thông qua "sự kiện" • Sự kiện là cái xảy ra trong hệ thống khi • Nhấn phím chuột • Di đối tượng đồ họa trên màn hình • Gõ phím trên bàn phím. Bài 5: Mô hình vào-ra dữ liệu

28. Các loại sự kiện vào • Hai nhóm chính của sự kiện vào • Các sự kiện vào thô: • Đi đến từ trình điều khiển thiết bị • Hầu hết các hệ thống đồ họa đều có các sự kiện này như dịch chuyển chuột, nhấn phím chuột, nhấc phím chuột, nhấn phím trên bàn phím và nhấc phím trên bàn phím. • Nếu không tách riêng nhấn và nhả phím thì không thể thiết kế hiệu ứng vào như di-nhả (drag-and-drop)... • Sự kiện vào đã chuyển đổi (mức cao) • Nhấn và nhả phím chuột được chuyển đổi thành nhấp phím chuột (sự kiện click) • Sự kiện nhấn nhả phím trên bàn phím sẽ chuyển đổi thành sự kiện gõ phím ký tự và sinh ra mã ASCII. • Khi di chuột vào hay ra chữ nhật bao thành phần thì các sự kiện Entry và Exit được phát sinh. Các thành phần sẽ phản hồi như thay đổi cách hiển thị, thay đổi hình dạng con chạy chuột... Bài 5: Mô hình vào-ra dữ liệu

29. Hàng đợi sự kiện • Các thuộc tính của sự kiện chuột • Vị trí (x,y), • Trạng thái phím (nhấn, nhả), • Thời điểm nhận sự kiện... • Lưu trữ các sự kiện vào hàng đợi • Các sự kiện “sườn” (như nhấn chuột và nhả chuột) được lưu trữ trực tiếp trong hàng đợi. • Đa sự kiện mô tả trạng thái liên tục (ví dụ dịch chuyển chuột) sẽ được nhóm lại thành một sự kiện trước khi lưu trữ để chờ xử lý. • Cái gì xảy ra khi di đối tượng lớn trên màn hình nếu không nhóm các sự kiện di chuột trong hàng đợi? Bài 5: Mô hình vào-ra dữ liệu

30. Vòng lặp sự kiện • Trong khi chạy, chương trình • Chờ sự kiện sẵn sàng • Nhận sự kiện từ hàng đợi • Đôi khi chuyển đổi sự kiện thô mức thấp thành sự kiện mức cao hơn (ví dụ phát sinh nhấn đúp chuột, ký tự, focus, enter/exit...) • Gửi (dispatch) sự kiện đến các thành phần đích • Ai cung cấp vòng lặp sự kiện? • Các Toolkits mức thấp yêu cầu ứng dụng tạo vòng lặp (MS Windows, Palm, SWT) • Các Toolkits mức cao tạo lập vòng lặp sự kiện bên trong chúng (Java, VB, C#) • Gửi sự kiện đến thành phần đích • Chọn sự kiện đích để gửi sự kiện • Sự kiện bàn phím sẽ chuyển đến thành phần có focus bàn phím • Sự kiện chuột sẽ gửi đến thành phần dưới con chạy chuột Bài 5: Mô hình vào-ra dữ liệu

31. Ví dụ xử lý sự kiện trong Windows Bài 5: Mô hình vào-ra dữ liệu

32. Thiết kế Controller • Cấu trúc của thành phần quản lý đầu vào • Controller là máy trạng thái hữu hạn • Ví dụ Push Button • Trạng thái Idle: khi người sử dụng không hướng đầu vào đến nó • Hover: Khi dịch chuyển chuột lên trên phím • Armed: Khi nhấn phím chuột trên Push Button • Disarmed: Dịch chuyển chuột ra khỏi Push Button • Nhả phím chuột khi ở trong thành phần: Trở về trạng thái Hover Bài 5: Mô hình vào-ra dữ liệu

33. 6. Tổng kết bài • Nghiên cứu ba mô hình ra cơ bản • Component • Stroke • Pixel • Khảo sát ba mô hình màu cơ bản của thiết kế GUI • RGB • HSV • CMYK • Hai mô hình vào dữ liệu cơ bản • Mô hình I/O Console • Mô hình vào theo sự kiện Bài 5: Mô hình vào-ra dữ liệu

34. Các chủ đề nghiên cứu tiếp theo • Anh /chị đã sử dụng Output model nào trong các hệ thống phần mềm do anh/chị phát triển? Tại sao? • Các phần mềm mà các anh chị đã sử dụng có Output model nào? Phân tích và đánh giá. • Anh chị đã sử dụng Input model nào trong khi phát triển phần mềm? Tại sao? Trả lời gửi về eMail: hci.dvduc@gmail.com Bài 5: Mô hình vào-ra dữ liệu

35. Câu hỏi?