Mạng thông tin 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 báo cáo Thiết kế giao tiếp Mở đầu • Giao diện người sử dụng (user interfaces) cách thức thực thể tương tác với HT • Giao diện hệ thống (system interfaces) cách thức HTTT trao đổi thông tin với hệ thống khác • Phần tập trung vào thiết kế giao diện người sử dụng hay gọi vắn tắt thiết kế giao diện • Thiết kế giao diện trình PTV xác định cách thức người sử dụng tương tác với HT chất input output mà HT chấp nhận tạo • Giao diện người sử dụng, gọi tắt giao diện, gồm có ba phầ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ách mà qua người sử dụng bảo cho HT phải thực Ví dụ thực đơn, nút nhấn • Cơ chế nhập liệu nhằm nói đến cách mà qua HT nắm bắt thông tin Ví dụ biểu mẫu hình nhập thông tin đơn đặt hàng • Cơ chế xuất liệu nhằm nói đến cách mà HT cung cấp thông tin cho người dùng hệ thống khác Ví dụ báo cáo in ra, trang Web • Ba chế thường kết hợp với Chẳng hạn hình hiển thị chế điều khiển, phần lớn chứa chế nhập liệu xuất liệu • Ngoài ra, nói đến giao diện hình giao tiếp người ta thường đề cập đến giao diện dựa Web (Web-based Interfaces) giao diện GUI (Graphical User Interfaces) • Trong HTTT nói đến thiết kế giao diện, người ta trọng đến: - Thiết kế biểu mẫu nhập liệu (forms) hình máy tính - Thiết kế báo cáo xuất liệu (reports) từ máy in, hình máy tính, lưu thành tập tin - Thiết kế phương tiện giao tiếp (commands, windows, menus, objects) đối thoại người dùng HT qua 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 báo cáo Thiết kế giao tiếp Nguyên tắc thiết kế giao diện • Có thể nói thiết kế giao diện công việc nhiều mang tính nghệ thuật • Mục tiêu 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 nhiều thời gian để học Thừa kế thói quen thao tác • Giao diện đóng vai trò quan trọng người dùng thường đánh giá HT qua giao diện • Một số nguyên tắc 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ố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ố trang trí vùng hiển thị thông tin, hình ảnh biểu tượng 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 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) 10 • Thiết kế biểu mẫu môi trường đồ họa (GUI) dùng chuẩn đối tượng - Text boxes  nhập vă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 ds - Drop-down list boxes  chọn ds - Combo boxes  kết hợp chọn, nhập - Sliders  chọn thang đo 61 Ví dụ thiết kế biểu mẫu giao tiếp dùng đối tượng GUI 62 Ví dụ giao tiếp qua biểu mẫu trang Web Google 63 • Khi giao tiếp qua biểu mẫu thường NSD yêu cầu điền vào mục liệu • Một số hướng dẫn thực hành thiết kế mục cần nhập liệu: - Không nhập liệu tính toán Cung cấp giá trị thích hợp Nêu rõ đơn vị liệu Cung cấp ví dụ định dạng Tự động canh hàng mục liệu Luôn đặt nhãn mục liệu kề nơi nhập Cung cấp giúp đỡ theo ngữ cảnh thích hợp 64 Ví dụ cách nhập mục liệu văn 65 • Giao tiếp qua đối tượng - Ký hiệu, biểu tượng dùng để ám lệnh (hành động) chức - Thiết kế đối tượng giao tiếp hiệu quả: Đối tượng đồ họa, có ý nghĩa Chiếm chỗ hình Đơn giản, không nhiều họa tiết NSD hiểu dễ dàng Nhất quán ý nghĩa, kích cỡ Nhất quán vị trí, cách thức hiển thị 66 Ví dụ giao tiếp qua đối tượng 67 • Giao tiếp qua ngôn ngữ tự nhiên - Nhập liệu vào HT xuất liệu khỏi HT dạng ngôn ngữ tự nhiên (chủ yếu Anh ngữ) - Được thực dựa nghiên cứu lĩnh vực trí tuệ nhân tạo (xử lý ngôn ngữ tự nhiên) - Chưa áp dụng nhiều không tiện dụng NSD chuộng cách giao tiếp lâu giao tiếp qua lệnh, thực đơn đối tượng 68 • Các lựa chọn phần cứng để giúp NSD tương tác với HT - Bàn phím, 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 kéo theo đặc tính sử dụng, giao tiếp khác • PTV cần cân nhắc yếu tố chi phí đặc điểm NSD 69 • Trong trình giao tiếp với HT, NSD yêu cầu cung cấp liệu ý kiến phản hồi (thực chất liệu) • HT cần phải kiểm tra liệu NSD đưa vào nhằm giảm 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 ký tự Nhập sót ký tự Vào liệu bất hợp lệ Vào sai thứ tự ký tự 70 • PTV cần đưa loại kiểm tra tính hợp lệ liệu nhập 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 71 • Các thông báo phản hồi cần thiết kế nhằm giúp NSD tương tác với HT hiệu • Có thể 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 liệu cách nhập - Cảnh báo báo lỗi sai: Báo cho NSD biết có 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) 72 • Thiết kế hệ thống trợ giúp ngày xem phần quan trọng thiết kế HT • Khi thiết kế trợ giúp (help) cần tự đặt vào vị trí 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, thẳng vào vấn đề - Tổ chức: Thông tin thông báo trợ giúp phải dễ hấp thu NSD - Chỉ dẫn: Chỉ dẫn rõ ràng NSD cách thức thực thao tác 73 • Khi việc tương tác NSD HT xảy liên tiếp chuỗi thao tác xem đối thoại • Thiết kế đối thoại phần thiết kế giao tiếp 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 74 Tóm lại, nói … Mở đầu  Nguyên tắc thiết kế giao diện  Thiết kế biểu mẫu báo cáo  Thiết kế giao tiếp  75 [...]... đế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 20 Thiết kế giao diện Mở đầu Nguyên tắc thiết kế giao diện Thiết kế biểu... 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 24 • Quá trình thiết kế. .. nhập liệu được thiết kế bởi MS Visual Basic.NET 27 • Đặ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, …) 28 Đặc tả thiết kế biểu mẫu,... 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 11 Ví dụ khung giao diện 12 Ví dụ khung giao diện (Có nhiều khu vực điều khiển, cho phép NSD di chuyển) 13 Ví dụ khung giao diện (Bố trí các vùng thông tin theo... 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 30 Ví dụ biểu mẫu thiết. .. 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 26... 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 18 Nguyên tắc nhất quán • Nguyên... 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 16 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... giao diện (Bố trí các vùng thông tin theo kiểu dọc, theo kiểu ngang) 14 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... 20 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 21 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 ... chọn cách thức thực công việc 43 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 báo cáo Thiết kế giao tiếp  44 Thiết kế giao tiếp • Giao tiếp nhằm nói đến cách thức... tin - Thiết kế phương tiện giao tiếp (commands, windows, menus, objects) đối thoại người dùng HT qua 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 báo cáo Thiết. .. qua ba lần nhấp chuột ba lần nhấn phím 20 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 báo cáo  Thiết kế giao tiếp 21 Thiết kế biểu mẫu báo cáo • Biểu mẫu (forms) loại