Đồ họa thông tin bao gồm đồ thị, bản đồ, bảng biểu, cây, và sơ đồ của tất cả các loại. Các dữ liệu có thể rất lớn và nhiều tầng, hoặc nhỏ và tập trung. Nhờ có đồ hoạ thông tin mà người sử dụng có cái nhìn trực quan hơn thay vì bằng lời nói.
2.2.4.1 Overview Plus Detail
a. Định nghĩa
Overview Plus Detail đặt một đồ hoạ khái quát bên cạnh một “hình ảnh chi tiết” được phóng ra. Khi người sử dụng chọn một vùng của cái nhìn tổng thể, hãy thể hiện phần đó của đồ thị trong cái nhìn chi tiết [15].
b. Sử dụng khi nào
Bạn đưa ra một tập các dữ liệu được trình bầy như một đồ hoạ thông tin lớn, đặc biệt là một hình ảnh hay một bản đồ. Bạn muốn người sử dụng tập trung vào “bức tranh lớn” cùng lúc cũng muốn họ chú tâm vào các chi tiết nhỏ. Người sử dụng sẽ lướt qua các dữ liệu, thăm dò các vùng nhỏ, hoặc tìm kiếm các điểm họ muốn. Sự bao quát ở mức cao rất cần thiết trong việc tìm kiếm các điểm quan trọng, tuy nhiên người sử dụng không cần phải thay tất cả các chi tiết cho tất cả các điểm dữ liệu cùng lúc. Tập trung vào bộ phận nhỏ là hữu hiệu để đạt được các chi tiết tốt.
c. Tại sao
Đó là một cách cổ điển trong việc giải quyết sự phức tạp: trình bầy một cái nhìn về những gì đang diễn ra ở mức độ cao, và người sử dụng có thể xem từ toàn cảnh đến chi tiết nếu họ muốn. Do đó cần giữ hai mức độ hiển thị trên cùng một trang của một hoạt động nhanh.
Người sử dụng luôn có những cấu trúc lớn trong khi có thể tìm thấy các chi tiết nhỏ nếu họ muốn. Như vậy họ có thể lướt qua các nội dung, di chuyển nhanh hoặc di chuyển chậm.
Người sử dụng có thể nhận biết nhanh chóng họ đang ở đâu trong khung cảnh của toàn dữ liệu bằng việc tìm kiếm và nhìn trên điểm bao quát.
d. Bằng cách nào
Luôn thể hiện sự bao quát của chuỗi dữ liệu. Nó có thể là một kênh bên trong điểm chi tiết hoặc một cửa sổ khác trong trường hợp ứng dụng nhiều cửa sổ.
Ở điểm bao quát, đặt một khung nhìn sao cho chúng dễ nhận thấy. Có thể sử dụng màu sắc khác trong kênh bao quát. Nếu như đồ hoạ thường có màu tối thì làm cho nó sáng lên, nếu đồ hoạ có màu sáng thì làm cho nó tối lại. Khung nhìn có thể di chuyển với mũi tên để người sử dụng có thể nắm được và lướt quanh khung khái quát.
Điểm chi tiết phải thể hiện được những gì bên trong khung nhìn bao quát. Cả hai cần phải xảy ra cùng lúc. Nếu khung nhìn di chuyển, điểm chi tiết phải thay đổi cùng lúc, nếu khung nhìn được thu nhỏ thì sự phóng đại của điểm chi tiết cần tăng lên. Sự thay đổi của chúng cần phải nhanh chóng, trong vòng 1/10 giây.
2.2.4.2 Datatips
Hình 2-26. Giao diện sử dụng mẫu Datatips
a. Định nghĩa
Khi con chuột chỉ vào các điểm quan trọng trên đồ hoạ, ta đặt các giá trị dữ liệu cho điểm đó vào trong tooltip hoặc các cửa sổ di chuyển khác [15].
b. Sử dụng khi nào
Khi bạn nhìn thấy một khung khái quát của tập dữ liệu ở bất kỳ dạng nào. Có nhiều dữ liệu “được giấu đằng sau” các điểm cụ thể trên đồ hoạ như tên của các đường phố trên bản đồ, giá trị của các thanh trên bản đồ thanh, hoặc các dữ liệu về các cầu thủ trong sơ đồ trận đấu. Người sử dụng có thể “chỉ vào” các vị trí quan trọng bằng chuột hoặc màn hình tiếp xúc.
c. Tại sao
Quan sát các giá trị dữ liệu là nhiệm vụ bình thường trong các đồ hoạ giàu dữ liệu. Người sử dụng muốn khái quát nhưng vẫn có thể tìm kiếm các thông tin cụ thể mà không được thể hiện ở phần khái quát. Datatips giúp thể hiện các thông tin cụ thể đó. Họ đặt các dữ liệu nơi có sự chú ý của người sử dụng. Nếu phần khái quát được tổ chức một cách hợp lý, người sử dụng sẽ dễ dàng tìm thấy những gì họ cần mà không phải đặt mọi thứ trên biểu đồ.
Datatips đưa ra một dạng tương tác dễ dàng và hiệu quả. Datatips rất nhanh chóng đưa ra cái nhìn thoáng qua vào loạt dữ liệu không hiển thị.
d. Bằng cách nào
Sử dụng một cửa sổ như tooltip để hiển thị các dữ liệu liên quan tới điểm đó. Không nhất thiết phải là một “tooltip”, điều quan trọng là nó phải xuất hiện nơi mà mũi tên có mặt. Nó được đặt ở lớp đỉnh của biểu đồ nhưng chỉ là tạm thời. Người sử dụng sẽ hiểu một cách nhanh chóng.
Bên trong cửa sổ, định dạng dữ liệu cho thích hợp. Thu nhỏ sẽ tốt hơn vì cửa sổ tooltip thường phải nhỏ. Không để cửa sổ quá lớn khiến nó che khuất các biểu đồ khi nó xuất hiện. Hãy đặt nó vào vị trí thích hợp để nó bao quát nội dung càng ít càng tốt.
Tuỳ vào tình huống ta có thể định dạng datatip khác đi. Nếu trên bản đồ có một tập dữ liệu được xuất hiện như các dòng tách biệt, datatips sẽ được đánh dấu khác nhau cho mỗi dòng hoặc có những loại dữ liệu khác trong chúng.
2.2.4.3 Local Zooming
Hình 2-27. Giao diện sử dụng mẫu Local Zooming
a. Định nghĩa
Local Zooming trình bầy tất cả các dữ liệu trong một trang đơn dày đặc, với các mục dữ liệu ở quy mô nhỏ. Bất kì nơi nào con chuột đến sẽ làm các mục dữ liệu lớn hơn và dễ đọc hơn [14].
b. Các tình huống sử dụng
Khi bạn đưa ra một bộ dữ liệu lớn sử dụng bất kỳ dạng tổ chức nào của đồ thị, bản đồ, mạng lưới và các bảng trên màn hình lớn hoặc nhỏ.
Người sử dụng sẽ lướt qua các dữ liệu hoặc tìm kiếm các điểm quan trọng bên trong cấu trúc tổ chức đó. Sự bao quát ở mức độ cao rất cần thiết trong việc tìm kiếm các điểm quan trọng này, tuy nhiên người sử dụng không cần phải thay tất cả các chi tiết cho tất cả các điểm dữ liệu cùng lúc. Local Zooming là cách hữu hiệu để tìm được các chi tiết nhỏ.
c. Tại sao
Việc phóng to thường được áp dụng phổ biến đối với hầu hết các thông tin đồ hoạ, nhưng nó làm mất toàn khung cảnh. Một cảnh được phóng to hết cỡ sẽ không cho thấy hết toàn bộ khung cảnh dữ liệu. Local Zooming tập trung vào các chi tiết cục bộ và cùng lúc giữ được khung cảnh. Local Zooming không dẫn đến sự lộn xộn mà dấu đi các phần của cảnh bao quát.
Overview Plus Detail là một phương pháp đối với Local Zooming. Nó trình bầy cả cảnh chi tiết và cảnh bao quát trên cùng một trang, tuy nhiên nó tách biệt hai mức độ thành hai cảnh cận kề nhau, thay vì nhập chung chúng vào một cảnh. Nếu như Local Zooming quá khó để thực hiện, hoặc quá khó cho người sử dụng dùng thì ta nên dùng Overview Plus Detail.
Datatips cũng là một khả năng có thể sử dụng. Bạn sẽ thấy cả sự bao quát lẫn chi tiết, tuy nhiên thông tin được trình bầy không hoàn toàn được phóng cũng như là miêu tả dữ liệu ở điểm đó. Datatip là một mục tạm thời được đặt ở trên đỉnh của đồ hoạ.
d. Bằng cách nào
Đưa ra một phương thức zoom cục bộ. Khi người sử dụng mở nó ra và di chuyển mũi tên, vùng nhỏ được phóng lên tức thì dưới mũi tên.
Phóng lớn lên trông giống như thế nào phụ thuộc vào loại đồ hoạ thông tin bạn sử dụng. Như hình 2-27 việc phóng lớn sẽ làm giảm bớt theo cả chiều ngang và chiều dọc của bảng. Một bản đồ hay hình ảnh cần phải điều chỉnh cả hai hướng để có thể duy trì độ cân của nó. Ta không nên kéo hoặc thay đổi một bản đồ vì nó sẽ khiến ta khó đọc hơn.
Kết luận:
Mẫu thiết kế là phương pháp tốt để tăng cường hiệu quả thiết kế. Nó là sản phẩm dựa trên thực tế người sử dụng hay làm để đúc kết lên. Ta đã tìm hiểu một số mẫu ứng dụng trong thiết kế GUI. Gồm có hai loại mẫu là các mẫu kiến trúc và các mẫu đồ hoạ. Các mẫu kiến trúc được giới thiệu trong rất nhiều tài liệu của nhiều tác giả, trong giới hạn luận văn tôi chỉ trình bầy 6 mẫu kiến trúc. Các mẫu đồ hoạ tôi tìm hiểu 4 loại mẫu: các mẫu định vị, các mẫu tổ chức trang, các mẫu hành động và đồ hoạ thông tin. Các mẫu định vị giúp người sử dụng biết họ đang ở đâu, họ đã đi được những đâu và họ cần phải đi đến đâu. Các mẫu tổ chức trang nhằm thu hút, lôi kéo người dùng tập trung vào những phần quan trọng của trang. Các mẫu hành động giúp người dùng sử dụng giao diện đỡ nhàm chán hơn. Các mẫu đồ hoạ thông tin đưa người sử dụng có cái nhìn trực quan hơn lời nói.
Ta thấy mỗi mẫu là một giải pháp trong thiết kế phần mềm. Các mẫu kiến trúc mô tả cấu trúc bên trong của hệ thống. Các mẫu này được dùng để xác định toàn bộ kiến trúc của hệ thống, được dùng để thiết kế các quan hệ tương tác giữa các lớp thiết kế. Các mẫu đồ hoạ hay còn gọi là các mẫu về tương tác người máy. Các mẫu này mô tả việc thiết kế bên ngoài, cụ thể là mô tả việc thiết kế giao diện. Thiết kế đồ hoạ có nhiều thiết thực trong thiết kế giao diện. Do đó sử dụng thiết kế đồ hoạ là rất tốt. Nhờ có các mẫu đồ hoạ mà việc thiết kế giao diện trở nên dễ dàng hơn, giao diện trở nên sinh động, thân thiện, gần gũi với người sử dụng và giao diện đảm bảo có tính sử dụng cao. Trong giới hạn luận văn nghiên cứu về thiết kế giao diện người sử dụng nên tôi tập trung đi sâu nghiên cứu về các mẫu đồ hoạ.
Chương 3 – PHÁT TRIỂN GUI PHẦN MỀM THỬ NGHIỆM ĐỊNH HƯỚNG MẪU
Chương 3 trình bày một cách tổng quan về hệ thống Sametime. Bố cục của chương gồm 9 mục. Mục 1 giới thiệu bài toán. Mục 2 mô tả cách giải quyết bài toán. Mục 3 phân tích người sử dụng và phân tích nhiệm vụ. Mục 4 trình bầy các bước phác hoạ thiết kế. Mục 5 xây dựng Prototype giấy. Mục 6 xây dựng Prototype máy tính. Mục 7 một số mẫu ứng dụng trong thiết kế chương trình Sametime. Mục 8 thực hiện các bước cài đặt. Mục 9 kiểm thử bởi người sử dụng.