Bài giảng Thiết kế giao diện

Thiết kế giao diện Thiết kế giao diện Mở đầu  Nguyên tắc thiết kế giao diện Thiết kế biểu mẫu và báo cáo Thiết kế giao tiếp 1. Mở đầu Giao diện người sử dụng (user interfaces) là cách thức các thực thể ngoài tương tác với HT. Giao diện hệ thống (system interfaces) là cách thức HTTT trao đổi thông tin với hệ thống khác. Phần này tập trung vào thiết kế giao diện người sử dụng hay còn gọi vắn tắt là thiết kế giao diện. Thiết kế giao diện là quá trình PTV xác định cách thức người sử dụng tương tác với HT cũng như bản chất của các input và output mà HT chấp nhận và tạo ra. Giao diện người sử dụng, gọi tắt là giao diện, gồm có ba phần căn bản: Cơ chế điều khiển (navigation mechanism).- Cơ chế nhập liệu (input mechanism).- Cơ chế xuất liệu (output mechanism). Cơ chế điều khiển nhằm nói đến các cách mà qua đó người sử dụng bảo cho HT những gì phải thực hiện. Ví dụ thực đơn, nút nhấn. Cơ chế nhập liệu nhằm nói đến các cách mà qua đó HT nắm bắt được thông tin. Ví dụ biểu mẫu màn hình nhập thông tin đơn đặt hàng. Cơ chế xuất liệu nhằm nói đến các cách mà HT cung cấp thông tin cho người dùng hoặc các hệ thống khác. Ví dụ như báo cáo in ra, trang Web. Ba cơ chế thường được kết hợp với nhau. Chẳng hạn các màn hình đều hiển thị cơ chế điều khiển, và phần lớn chứa cả cơ chế nhập liệu và xuất liệu. Ngoài ra, khi nói đến giao diện là màn hình giao tiếp người ta thường đề cập đến giao diện dựa trên Web (Web-based Interfaces) và giao diện GUI (Graphical User Interfaces). Trong HTTT khi nói đến thiết kế giao diện, người ta chú trọng đến: Thiết kế các biểu mẫu nhập liệu (forms) trên màn hình máy tính. Thiết kế các báo cáo xuất liệu (reports) từ máy in, hoặc hiện ra trên màn hình máy tính, hoặc lưu thành tập tin. Thiết kế các phương tiện giao tiếp (commands, windows, menus, objects) và các đối thoại giữa người dùng và HT qua màn hình. Thiết kế giao diện Mở đầu Nguyên tắc thiết kế giao diện  Thiết kế biểu mẫu và báo cáo Thiết kế giao tiếp 2. Nguyên tắc thiết kế giao diện Có thể nói thiết kế giao diện là công việc ít nhiều mang tính nghệ thuật. Mục tiêu của thiết kế giao diện: Người dùng cảm thấy đẹp mắt.- Đơn giản, dễ sử dụng.- Không tốn nhiều công sức thao tác.- Không mất nhiều thời gian để học.- Thừa kế được các thói quen thao tác. Giao diện đóng vai trò quan trọng vì người dùng thường đánh giá HT qua giao diện. Một số nguyên tắc căn bản thiết kế giao diện. Khung giao diện (Layout). Gợi lên nội dung (Content awareness). Thẩm mỹ (Aesthetics). Kinh nghiệm người dùng (User experiences) Nhất quán (Consistency). Người dùng ít tốn sức (Minimal user effort). Nguyên tắc khung giao diện Nguyên tắc khung giao diện nhằm nói đến việc phân bố và trang trí các vùng hiển thị thông tin, hình ảnh và biểu tượng trên các màn hình giao tiếp, biểu mẫu hay báo cáo. Ví dụ khung giao diện. Màn hình thường được chia thành ba khu vực:- Khu vực điều khiển (đỉnh).- Khu vực thông báo tình trạng (đáy).- Khu vực làm việc (giữa). Các khu vực giống nhau nên được nhóm lại. Các khu vực chứa thông tin đi cùng luồng (liên quan logic với nhau) nên được sắp xếp sao cho NSD dùng ít thao tác di chuyển. Nếu có thể, các khu vực nên nhất quán với nhau về: - Kích thước.- Hình dáng.- Vị trí nhập dữ liệu.- Vị trí hiển thị các dữ liệu tìm thấy. Ví dụ khung giao diện. Ví dụ khung giao diện. (Có nhiều khu vực điều khiển, cho phép NSD di chuyển) Ví dụ khung giao diện. (Bố trí các vùng thông tin theo kiểu dọc, theo kiểu ngang) Nguyên tắc gợi lên nội dung Nguyên tắc gợi lên nội dung nhằm nói đến khả năng giao diện làm cho NSD ý thức được dễ dàng nội dung giao diện đang đề cập đến. Tất cả các phần của giao diện (điều khiển, di chuyển, nhập, xuất) nên có nhiều khả năng gợi lên nội dung. Một số áp dụng của nguyên tắc này: - Có tiêu đề rõ ràng.- Dấu hiệu cho thấy NSD đang ở đâu.- Dấu hiệu cho thấy NSD đến từ đầu. Đối với các biểu mẫu, báo cáo. Các vùng cần được định danh rõ ràng để NSD không phải đoán thông tin trong vùng nào đó liên quan đến cái gì. Các vùng cần được phân bố rõ ràng để NSD có thể định vị nhanh những phần trong biểu mẫu, báo cáo chứa thông tin họ cần. Các tiêu đề vùng, tên các mục tin cần phải chọn lọc trình bày cẩn thận. Các mục tin liên quan cần được trình bày nhóm lại. Nguyên tắc thẩm mỹ Nguyên tắc thẩm mỹ nhằm nói đến khía cạnh mỹ thuật của giao diện làm hài lòng NSD. Để giao diện được đẹp mắt, cẩn thận khi: Trình bày logo tổ chức, các tiêu đề.- Phân phối các khoảng trắng.- Dùng phối hợp các màu sắc.- Canh thẳng hàng các vùng, các mục tin.- Phân bố các khu vực, các vùng.- Chọn phông chữ, kích cỡ chữ, màu chữ.- Chọn màu hay hình làm nền cho chữ. Nguyên tắc kinh nghiệm người dùng Nguyên tắc kinh nghiệm người dùng nhằm nói đến sự thích hợp của người dùng đối với việc giao tiếp giao diện. Đối với NSD có ít kinh nghiệm, giao diện cần có các giải thích hoặc hướng dẫn, các thực đơn của màn hình giao tiếp cần có đủ các chức năng. Đối với NSD có nhiều kinh nghiệm, họ thích giao diện ngắn gọn và súc tích, hoặc màn hình giao tiếp nên có các thực đơn thu gọn theo ngữ cảnh. Nguyên tắc nhất quán Nguyên tắc nhất quán nhằm nói đến khả năng cho phép NSD dự đoán điều gì sẽ xảy ra khi giao tiếp với giao diện. Với giao diện nhất quán, NSD có thể tương tác với một phần của HT và sau đó biết cách tương tác với phần còn lại  NSD giảm thời gian học. Sự nhất quán diễn ra ở nhiều khía cạnh: - Các biểu tượng điều khiển, di chuyển.- Các thuật ngữ, tiêu đề, logo.- Hình thức biểu mẫu, báo cáo, màn hình. Nguyên tắc người dùng ít tốn sức Nguyên tắc người dùng ít tốn sức nhằm nói đến giao diện nên được thiết kế sao cho NSD không tốn nhiều công sức thao tác, tìm hiểu vẫn sử dụng được HT để hoàn thành được công việc. Quy tắc ba lần nhấp chuột. NSD có thể đi từ điểm bắt đầu hoặc thực đơn chính của HT đến thông tin họ cần hoặc hành động họ muốn thực hiện mà không qua ba lần nhấp chuột hoặc ba lần nhấn phím. Thiết kế giao diện Mở đầu Nguyên tắc thiết kế giao diện Thiết kế biểu mẫu và báo cáo  Thiết kế giao tiếp 3. Thiết kế biểu mẫu và báo cáo Biểu mẫu (forms) là loại tài liệu công việc trên đó có những dữ liệu được xác định trước (tiêu đề, nhãn) và có thể có những vùng cần phải được điền dữ liệu vào khi một giao dịch công việc được phát sinh. Báo cáo (reports) là loại tài liệu công việc chỉ chứa những dữ liệu được ấn định trước, được tạo ra. Báo cáo là tài liệu chỉ để đọc và xem xét dữ liệu trên đó. Biểu mẫu thường là phương tiện mà qua đó các thực thể ngoài cung cấp thông tin cho HT hoạt động. Biểu mẫu có thể ở nhiều dạng như giấy, trang Web, màn hình nhập liệu. Ngược lại, báo cáo là phương tiện mà qua đó HT cung cấp những thông tin lưu trữ và đã được xử lý cho các thực thể ngoài xem xét. Báo cáo cũng có thể ở nhiều dạng như giấy, trang Web, màn hình xuất liệu hoặc lưu thành tập tin. Thu thập các biểu mẫu và báo cáo để phân tích là việc cần làm ở bước thu thập yêu cầu trong giai đoạn phân tích. Trong HTTT quản lý thường có các loại báo cáo thông dụng sau đây: - Báo cáo định kỳ: Báo cáo được tạo ra khi đến thời điểm được ấn định (cuối mỗi tuần). Báo cáo tóm lược: Báo cáo chứa thông tin tóm tắt, tổng kết quan trọng theo qui định. Báo cáo ngoại lệ: Báo cáo chứa thông tin bất thường không theo qui định, kế hoạch. Báo cáo kèm theo: Báo cáo chứa những thông tin chi tiết kèm theo các thông tin tóm tắt và tổng kết. Quá trình thiết kế biểu mẫu và báo cáo. Là hoạt động hướng vào NSD. Dùng cách tiếp cận tạo mẫu (propotype). Cần làm rõ (khi thu thập yêu cầu): Mục đích của biểu mẫu, báo cáo là gì? Ai dùng biểu mẫu, báo cáo? Biểu mẫu, báo cáo được dùng ở đâu? Biểu mẫu, báo cáo được dùng khi nào? Bao nhiêu người dùng biểu mẫu, báo cáo? Áp dụng cách tiếp cận tạo mẫu (propotype) để thiết kế biểu mẫu và báo cáo. Xuất phát từ yêu cầu, thiết kế mẫu ban đầu. NSD xem xét, sau đó chấp nhận hoặc yêu cầu thay đổi. Nếu có yêu cầu thay đổi thì quá trình thay đổi-xem xét được lặp đi lặp lại cho đến khi NSD chấp nhận mẫu thiết kế. Visual Basic và một số công cụ phát triển giúp thiết kế biểu mẫu, báo cáo dạng màn hình giao tiếp GUI dễ dàng, thuận tiện. Một biểu mẫu màn hình nhập liệu được thiết kế bởi MS Visual Basic.NET. Đặc tả thiết kế biểu mẫu, báo cáo. Là kết quả chính của việc thiết kế. Đặc tả gồm ba phần: Mô tả tổng quát: Trình bày đặc điểm của NSD, nghiệp vụ, hệ thống, môi trường. Bản thiết kế mẫu: Hình ảnh mẫu của biểu mẫu, báo cáo. Đánh giá: Kết quả đánh giá của NSD về mẫu thiết kế (hình thức, nhất quán, chính xác, dễ dùng, …). Đặc tả thiết kế biểu mẫu, báo cáo. Một số hướng dẫn thực hành thiết kế biểu mẫu, báo cáo. Tựa đề, tiêu đề cần có nghĩa: Cần rõ ràng, cụ thể, ngày, thông tin phiên bản. Thông tin cần có nghĩa: Chỉ nên chứa những thông tin thực sự cần thiết (đối với NSD). Hình thức trình bày cân đối: Canh khoảng cách cân đối, lề cân đối, có nhãn rõ ràng. Dễ điều khiển, di chuyển trong HT: Cần cho thấy cách di chuyển tới và lui, cho thấy NSD đang ở đâu. Ví dụ biểu mẫu thiết kế không tốt. Ví dụ biểu mẫu được thiết kế tốt. (Biểu mẫu này có nội dung giống như biểu mẫu trước nhưng được thiết kế lại tốt hơn.) Sử dụng nhấn mạnh trong biểu mẫu, báo cáo. Chú ý NSD lỗi sai nhập liệu, xử lý.- Cảnh báo những vấn đề có thể xảy ra.- Gây sự quan tâm đến các từ khóa, lệnh, thông báo quan trọng, giá trị dữ liệu không thường có. Có nhiều cách nhấn mạnh trong biểu mẫu, báo cáo. - Nhấp nháy, in đậm, khác cỡ, khác phông.- Phát ra âm thanh, đóng khung, gạch dưới.- Đảo mầu sắc, dùng chữ in hoa.- Dùng những ký tự trang trí đặc thù. Ví dụ dùng nhấn mạnh thông tin trong biểu mẫu. (Dùng in đậm, khác cở chữ, dùng chữ in hoa, đóng khung, …) Dùng màu sắc hay không dùng màu sắc khi thiết kế biểu mẫu và báo cáo. Ích lợi: Đánh thức thị giác, giúp phân biệt dễ dàng, nhấn mạnh logic tổ chức thông tin, giúp quan tâm các lời cảnh báo, có thể gợi lên các cảm xúc tích cực. Bất lợi: Có thể gây dị ứng hoặc phản cảm ở một số NSD, độ phân giải hoặc hiển thị màu sắc ở các màn hình khác nhau có thể tạo ảnh hưởng không như ý, có thể gây khó khăn khi in ra hoặc khi chuyển qua phương tiện khác. Những lưu ý khác khi thiết kế biểu mẫu và báo cáo. Dùng văn bản: Lưu ý chữ in, chữ thường, cách chấm câu, khoảng cách dòng, khoảng cách đoạn, canh lề, chữ viết tắt. Dùng bảng biểu: Lưu ý tiêu đề cột, tiêu đề dòng, canh lề ngang và lề đứng trong ô, phân biệt dòng chi tiết, dòng tổng cộng. Dùng biểu đồ, đồ thị: Lưu ý sự thích hợp, giúp có cái nhìn tổng quát, so sánh được sự tương quan, trình bày được khuynh hướng, dự đoán. Ví dụ trình bày văn bản trong biểu mẫu hoặc báo cáo. Ví dụ bảng thiết kế không tốt. Ví dụ bảng được thiết kế cải tiến tốt hơn. Ví dụ thiết kế bảng trong báo cáo. Ví dụ thiết kế biểu đồ, đồ thị trong báo cáo. Đánh giá sự khả dụng (usability) của biểu mẫu, báo cáo được thiết kế. Cần thông tin phản hồi của NSD về các biểu mẫu và báo cáo được thiết kế. Đánh giá ở các khía cạnh:  Thời gian học sử dụng. Tốc độ thực hiện hoặc thao tác. Mức độ sai sót. Khả năng nhớ lại theo thời gian. Sự thỏa mãn hoặc hài lòng. Sự khả dụng của các biểu mẫu, báo cáo được thiết kế sẽ được tăng lên khi chúng: Nhất quán: Thuật ngữ, định dạng, tiêu đề, nhãn, cách điều khiển, cách di chuyển, thời gian đáp ứng. Hiệu quả: Tốn ít thao tác, dễ nhớ, dễ học, có khả năng tự giải thích (gợi ý nội dung). Định dạng tốt: Hiển thị dữ liệu, biểu tượng một cách thích hợp. Linh động: Cho NSD nhiều lựa chọn cách thức thực hiện công việc. Thiết kế giao diện Mở đầu Nguyên tắc thiết kế giao diện Thiết kế biểu mẫu và báo cáo Thiết kế giao tiếp  4. Thiết kế giao tiếp Giao tiếp nhằm nói đến cách thức qua đó người dùng tương tác với hệ thống. Các cách giao tiếp thông dụng: - Dòng lệnh (commands).- Thực đơn (menus).- Biểu mẫu (forms).- Dựa vào đối tượng (objects, icons).- Ngôn ngữ tự nhiên (natural languages). Quá trình thiết kế giao tiếp. Xây dựng hình thức (bố trí thực đơn, văn bản, bảng biểu, các vùng hiển thị, …). Cấu trúc các mục cần vào dữ liệu (thứ tự phím tab). Kiểm tra dữ liệu nhập vào (kiểm tra hợp lệ, kiểm tra dạng thức). Tạo phản hồi (lời nhắc nhở, thông báo tình trạng, cảnh báo, thông báo sai). Thiết kế dãy đối thoại (tiếp tục, hủy bỏ, thoát khỏi, …). Đặc tả thiết kế giao tiếp tương tự như đặc tả thiết kế biểu mẫu và báo cáo, nhưng thêm phần đối thoại. Đặc tả thiết kế giao tiếp và đối thoại. Giao tiếp qua dòng lệnh. - NSD đánh vào lệnh cụ thể để chỉ thị HT thực hiện một tác vụ nào đó. Lệnh phải thuộc tập lệnh đã được lập trình sẳn và khi đánh vào phải đúng cú pháp. Giao tiếp này bao gồm cả kiểu dùng phím tắt (Alt+F), và phím chức năng (F1). Đây là kiểu giao tiếp truyền thống, ngày nay ít được sử dụng vì đòi hỏi người sử dụng phải nhớ nhiều và khó học. Giao tiếp qua thực đơn. Bản chất thực đơn (menus) là đưa ra một danh sách các lựa chọn cho phép NSD lựa chọn, mỗi lựa chọn hướng đến một hành động hoặc tác vụ nào đó. Các loại thực đơn thông dụng: Menu bar Pop-up menu Drop-down menu Tab menu Toolbar Image map Ví dụ thực đơn kiểu truyền thống trong HT Unix. Ví dụ thực đơn một cấp. Ví dụ các kiểu thực đơn khác nhau. Ví dụ thực đơn drop-down. Các loại thực đơn. Một số hướng dẫn thực hành thiết kế thực đơn. Từ ngữ: Tiêu đề có nghĩa, động từ ra lệnh rõ ràng, kết hợp chữ thường và chữ hoa. Cấu trúc: Nhóm các tùy chọn phù hợp trong từng mục của thực đơn. Độ dài: Tất cả các chọn lựa phải vừa vặn với chiều rộng màn hình hoặc cửa sổ. Chọn lựa: Cách chọn các mục trong thực đơn phải rõ và dễ dàng. Nhấn mạnh: Chỉ dành cho các mục được chọn hoặc các mục không sẳn dùng. Ví dụ thực đơn thiết kế không tốt. Ví dụ thực đơn được thiết kế tốt. Ví dụ thực đơn được thiết kế dùng MS Visual Basic.NET. Ví dụ thiết kế cửa sổ và thực đơn với các chuẩn GUI. Giao tiếp qua biểu mẫu. Cho phép NSD điền các vùng trống khi làm việc với HT. Thiết kế biểu mẫu giao tiếp hiệu quả: Tiêu đề và nhãn vùng có nghĩa.  Các vùng được nhóm lại một cách logic. Các đường biên vùng phân biệt rõ.  Chứa giá trị mặc nhiên. Hiển thị vừa với chiều dài vùng. Tối thiểu việc cuộn màn hình. (Tham khảo thêm phần thiết kế biểu mẫu) Thiết kế biểu mẫu trong môi trường đồ họa (GUI) có thể dùng các chuẩn về đối tượng. Text boxes  nhập văn bản Check boxes  đánh dấu chọn (nhiều) Radio buttons  đánh dấu chọn (một) On-screen list boxes  chọn một trong ds Drop-down list boxes  chọn một trong ds Combo boxes  kết hợp chọn, nhập Sliders  chọn trên thang đo Ví dụ thiết kế biểu mẫu giao tiếp dùng các đối tượng GUI. Ví dụ giao tiếp qua biểu mẫu ở trang Web Google. Khi giao tiếp qua biểu mẫu thường NSD được yêu cầu điền vào các mục dữ liệu. Một số hướng dẫn thực hành thiết kế các mục cần nhập dữ liệu: - Không nhập dữ liệu có thể tính toán.- Cung cấp giá trị mặc nhiên khi thích hợp.- Nêu rõ đơn vị dữ liệu.- Cung cấp các ví dụ định dạng.- Tự động canh hàng các mục dữ liệu.- Luôn đặt nhãn mục dữ liệu kề nơi nhập.- Cung cấp giúp đỡ theo ngữ cảnh thích hợp. Ví dụ các cách nhập mục dữ liệu văn bản. Giao tiếp qua đối tượng. Ký hiệu, biểu tượng được dùng để ám chỉ lệnh (hành động) hoặc chức năng. Thiết kế đối tượng giao tiếp hiệu quả: Đối tượng đồ họa, có ý nghĩa. Chiếm ít chỗ trên màn hình. Đơn giản, không quá nhiều họa tiết. NSD có thể hiểu dễ dàng. Nhất quán về ý nghĩa, kích cỡ. Nhất quán về vị trí, cách thức hiển thị. Ví dụ về giao tiếp qua đối tượng. Giao tiếp qua ngôn ngữ tự nhiên. Nhập liệu vào HT và xuất liệu ra khỏi HT ở dạng ngôn ngữ tự nhiên (chủ yếu là Anh ngữ). Được thực hiện dựa trên các nghiên cứu trong lĩnh vực trí tuệ nhân tạo (xử lý ngôn ngữ tự nhiên). Chưa được áp dụng nhiều do không tiện dụng. NSD vẫn chuộng các cách giao tiếp lâu nay như giao tiếp qua lệnh, thực đơn hoặc đối tượng. Các lựa chọn phần cứng để giúp NSD tương tác với HT. Bàn phím, con chuột.- Joystick, trackball.- Touchscreen, light pen, phone.- Graphics tablet, giọng nói.- Có thể kết hợp kỹ thuật wireless. Mỗi lựa chọn phần cứng sẽ kéo theo đặc tính sử dụng, giao tiếp khác nhau. PTV cần cân nhắc các yếu tố chi phí và đặc điểm của NSD. Trong quá trình giao tiếp với HT, NSD có thể được yêu cầu cung cấp dữ liệu hoặc ý kiến phản hồi (thực chất cũng là dữ liệu). HT cần phải kiểm tra những dữ liệu được NSD đưa vào nhằm giảm các lỗi sai nhập liệu. Một số nguyên nhân tạo lỗi sai nhập liệu thông dụng: - Nhập thêm các ký tự.- Nhập sót các ký tự.- Vào dữ liệu bất hợp lệ.- Vào sai thứ tự các ký tự. PTV cần đưa ra các loại kiểm tra tính hợp lệ của dữ liệu nhập trong quá trình NSD giao tiếp với HT: Class or composition - Range Combinations - Reasonableness Expected values - Missing data Self-checking digits - Size Pictures/Templates - Values Các thông báo phản hồi cũng cần được thiết kế nhằm giúp NSD tương tác với HT hiệu quả. Có thể có các loại thông báo phản hồi sau: Thông tin tình trạng: Thường xuyên thông báo NSD tình trạng diễn tiến công việc. Lời nhắc nhở: Báo cho NSD biết cần phải nhập dữ liệu và cách nhập ra sao. Cảnh báo và báo lỗi sai: Báo cho NSD biết rằng có gì đó đang sai (dữ liệu, thao tác). Các thông báo khác: Yêu cầu xác nhận, thừa nhận, trì hoãn (NSD đợi HT đáp ứng). Thiết kế hệ thống trợ giúp ngày nay được xem là phần quan trọng trong thiết kế HT. Khi thiết kế trợ giúp (help) cần tự đặt mình vào vị trí của NSD. Một số hướng dẫn thực hành thiết kế trợ giúp: Đơn giản: Thông báo trợ giúp nên ngắn gọn, đi thẳng vào vấn đề. Tổ chức: Thông tin trong các thông báo trợ giúp phải dễ hấp thu đối với NSD. Chỉ dẫn: Chỉ dẫn rõ ràng NSD cách thức thực hiện các thao tác. Khi việc tương tác giữa NSD và HT xảy ra liên tiếp như một chuỗi các thao tác thì được xem như là một cuộc đối thoại. Thiết kế đối thoại cũng là một phần của thiết kế giao tiếp nếu như HT tương đối phức tạp. Việc thiết kế đối thoại liên quan đến: Thiết kế chuỗi đối thoại. Xây dựng mẫu đối thoại (propotype). Đánh giá tính khả dụng. Tóm lại, chúng ta đã nói về … Mở đầu  Nguyên tắc thiết kế giao diện  Thiết kế biểu mẫu và báo cáo  Thiết kế giao tiếp 