3.5.1 Login:
- Người dùng khởi động chương trình Sametime từ máy tính. - Người sử dụng dùng tên tài khoản là haluong.
- Người sử dụng nhấn vào ô checkbox Remember password.
- Người sử dụng chọn status là Available và status message là I am available.
- Người sử dụng nhấn nút Log In để đăng nhập.
Hình 3-5. Giao diện Log in với tài khoản haluong.
- Đăng nhập thành công.
Hình 3-6. Giao diện Sametime với tài khoản haluong.
File Menu
Hình 3-7. Giao diện File Menu.
- File New: tạo tài khoản mới, hoặc group mới
- Open Chat History: để xem lại những cuộc trò chuyện từ trước - Status: thay đổi status trên Sametime
- Log Out: log out khỏi chương trình
- Preferences: cài đặt các thuộc tính cho Sametime - Exit: thoát khỏi Sametime
Edit Menu
Hình 3-8. Giao diện Edit Menu.
- Edit Nickname: để sửa lại nick name - Rename Group: thay đổi tên group
View Menu:
Hình 3-9. Giao diện View Menu.
- Show: chọn những cái để view
- Online Only: chỉ view những người đang online
- Groups Alphabetically: view các group theo thứ tự A,B,C… - Contacts Alphabetically: view các contact theo thứ tự A, B, C…. - Expand/Collapse: view mở rộng hoặc thu gọn các group
Tool Menu:
- Privacy Lists: tạo danh sách riêng tư
- Instanst Share: share toàn bộ màn hình, một vùng màn hình hoặc một ứng dụng đang chạy trên màn hình.
- Invite to Chat: mời ai đó vào chat
- Send: gửi một file hoặc một thông báo hay email. - Screen Capture: dùng để chụp ảnh màn hình.
- Plug-ins: để quản lý, tích hợp hoặc cài thêm các plug-ins vào Sametime.
3.5.2 Sametime Instant Message.
- Người sử dụng nhấn chuột vào Nguyen Minh Tuyen để chat
Hình 3-11. Giao diện chát với Nguyen Minh Tuyen.
3.5.3 Sametime Call
- Người sử dụng nói chuyện với Luong Thanh Tung.
Hình 3-12. Giao diện Call với Luong Thanh Tung.
3.5.4 Sametime Video Call
Hình 3-13. Giao diện Video Call với Luong Thanh Tung.
3.6 Xây dựng Prototype máy tính
Các biểu tượng:
: mời thêm người khác vào trò chuyện. : mở lại những cuộc trò chuyện từ trước. : để call hoặc video call với người khác. : thêm người mới vào danh sách liên lạc.
: để share màn hình.
3.6.1 Log in
- Một người dùng khởi động chương trình Sametime. Người này chưa có tài khoản Sametime.
- Người dùng nhấn vào liên kết: Don’t have a User name để tạo tài khoản mới
Hình 3-14. Giao diện tạo tài khoản mới.
- Người sử dụng điền đầy đủ các thông tin. Giả sử người này lấy tên tài khoản là haluong.
- Người sử dụng điền thông tin tài khoản vào màn hình Log in. - Người sử dụng nhấn nút Log In để đăng nhập.
Hình 3-15. Giao diện Log in bằng prototype máy tính.
- Đăng nhập thành công
File Menu
Hình 3-17. Giao diện File Menu bằng prototype máy tính.
Edit Menu
View Menu:
Hình 3-19. Giao diện View Menu bằng prototype máy tính.
Tool Menu:
Help Menu:
Hình 3-21. Giao diện Help Menu bằng prototype máy tính.
3.6.2 Sametime Instant Message.
- Người sử dụng nhấn chuột vào Nguyen Minh Tuyen để chat
Hình 3-22. Giao diện chat bằng prototype máy tính.
3.6.3 Sametime Call
- Người sử dụng nói chuyện với Luong Thanh Tung
3.6.4 Sametime Video Call
- Người sử dụng Video call với Luong Thanh Tung
Hình 3-24. Giao diện Video Call bằng prototype máy tính.
3.7 Một số mẫu ứng dụng trong thiết kế Sametime
Để quản lý việc nhập dữ liệu từ bàn phím và chuột cũng như lấy dữ liệu vừa nhập vào để hiển thị ra màn hình thì ta cần sử dụng mẫu MVC (Model – View – Controller). Việc nhập dữ liệu vào được quản lý bằng Controller, dữ liệu vừa nhập vào được quản lý bởi Model. Dữ liệu đó sẽ được hiển thị nhờ sự quản lý của View. Khi thiết kế giao diện Log In (hình 3-15) thì tôi đã sử dụng mẫu MVC để thiết kế các text box chứa User name và Password, các check box Remember password và Automatically log in, các combo box để lựa chọn trạng thái của log in và trạng thái của tin nhắn.
Trong hệ điều hành Windows, nếu ta xóa bất cứ một đối tượng nào đó thì hệ thống luôn đưa cho người sử dụng sự lựa chọn: “Bạn có chắc chắn xoá đối tượng đó không?”. Sự lựa chọn đó chính là mẫu thiết kế Model Panel. Nếu như không sử dụng mẫu Model Panel thì đôi khi vô tình ta xoá đi đối tượng mà ta chưa cần xoá. Trong chương trình Sametime tôi đã đưa mẫu Model Panel vào thiết kế các giao diện Notice. Khi người sử dụng nhấn vào biểu tượng hoặc biểu tượng trên thanh công cụ của Sametime (hình 3-16) thì xuất hiện hộp thoại. Hộp thoại này nó cắt ngang chương trình và buộc người sử dụng phải trả lời nó.
Trong các giao diện, các Button sẽ giúp giao diện nhìn sinh động hơn. Các nhóm Button thông báo đến người sử dụng họ sẽ phải giải quyết những công việc nào trong hoàn cảnh nào. Do đó trong chương trình Sametime tôi đã thiết kế các nhóm Button. Giao diện Notice hình 3-25 nhóm button là Yes và No. Giao diện New Contact có nhóm button là Add và Close. Các nhóm button này được thiết kế nhờ sử dụng mẫu Button Groups.
Hình 3-26. Giao diện New Contact sử dụng mẫu Button Groups.
Trong danh sách những người cần liên hệ, nếu ta có nhiều bạn thì danh sách đó là khá lớn. Nếu ta sử dụng mẫu Closable Panels thì ta có thể chia thành từng nhóm bạn. Do đó ta quản lý các nhóm đơn giản, dễ dàng hơn. Trong chương trình Sametime, mục Contacts là danh sách người liên hệ ta chia thành các Group như Friend và Colleague. Ta coi mỗi nhóm Friend và Colleague là một kênh thì ta có thể mở hoặc đóng các kênh này tuỳ theo ý thích. Để làm được điều đó tôi đã sử dụng mẫu Closable Panels vào thiết kế.
Một công việc có thể diễn ra theo nhiều giai đoạn khác nhau. Để giúp người sử dụng cảm nhận được bước cuối cùng của công việc đó thì ta sử dụng mẫu Prominent “Done” Button. Nhờ mẫu này mà công việc kết thúc trở nên rõ ràng và dễ hiểu hơn. Trong chương trình Sametime tôi đã sử dụng mẫu Prominent “Done” Button để thiết kế nút Create account trong giao diện Create a new Sametime account (hình 3-14) và nút Submit trong giao diện Forgotten your password.
Hình 3-28. Giao diện Forgotten your password.
Nếu tất cả các công việc được đặt vào một kênh thì đôi khi sẽ dẫn tới sự khó sử dụng. Do đó ta chia công việc lớn thành các bộ phận và mỗi bộ phận được đặt vào một kênh thì sẽ giúp người sử dụng tập trung giải quyết từng bộ phận một. Để làm được điều đó thì ta sử dụng mẫu Card Satck. Với chương trình Sametime, khi chát thì người sử dụng có nhu cầu thay đổi các phông chữ, cỡ chữ, kiểu chữ, tạo hiệu ứng cho chữ hay định dạng khoảng cách giữa các đoạn. Ta nhấn chuột vào biểu tượng trong giao diện chát (hình 3-22). Khi đó xuất hiện hộp thoại Font. Trong hộp thoại Font có ba thẻ là Font, Character Spacing và Text Effects. Các thẻ này được thiết kế theo mẫu Card Stack. Ta đặt nội dung phù hợp vào từng thẻ, tại một thời điểm chỉ có một thẻ được hiển thị.
Hình 3-29. Giao diện Font sử dụng mẫu Card Stack.
3.8 Cài đặt
Môi trường và yêu cầu phần mềm để chạy prototype:
Máy tính cài đặt hệ điều hành Windows
Cài đặt chương trình GUI Design Studio Professional v4.1.109.0 Repack-iNViSiBLE
Các bước để test prototype:
1. Khởi động GUI Design Studio 2. Chọn File Open Project
3. Chỉ đến thư mục chứa chương trình Sametime 3. Mở file Sametime.gdb
4. Mở file Login.gui
5. Ấn F9 để chạy Login.gui
3.9 Kiểm thử bởi người sử dụng 3.9.1 Thiết kế 3.9.1 Thiết kế
Thiết kế cuối cùng của Sametime project sau khi xây dựng prototype và kiểm thử:
- Giao diện Login
- Giao diện chính của Sametime - Giao diện chat
- Giao diện Call
- Giao diện tạo tài khoản mới
- Giao diện Forgotten your password - Giao diện thêm người mới:
Hình 3-26. Giao diện New Contact.
- Giao diện Chat History
Hình 3-28. Giao diện Chat History.
- Giao diện Send File
Trong thiết kế giao diện của Sametime tôi có sử dụng thanh thực đơn và thanh công cụ. Thanh công cụ bao gồm các biểu tượng mà dựa vào đó người sử dụng có thể tưởng tượng ra hoặc dễ dàng hiểu nhiệm vụ của mỗi biểu tượng. Với thanh công cụ, người sử dụng sẽ sử dụng dễ dàng và thao tác nhanh hơn. Ví dụ như thêm một người mới vào danh sách liên lạc. Người sử dụng chỉ việc nhấn chuột vào biểu tượng thay vì phài vào thanh thực đơn File New Contact. Như vậy người sử dụng cũng có thể thao tác tương tự với các biểu tượng khác trên thanh công cụ thay vì phải sử dụng thanh thực đơn.
Trong quá trình phân tích và thiết kế UI cho Sametime tôi quyết định sử dụng những phím tắt để giúp người sử dụng kinh nghiệm có thể thao tác nhanh hơn.
3.9.2 Cài đặt
Dưới đây là một số hình ảnh về cài đặt ở mức cao sử dụng GUI Design Studio.
Hình 3-31. Giao diện cài đặt Menu Sametime.
Sametime là chương trình thỏa mãn các chuẩn của Norman về tính sử dụng được của hệ thống phần mềm: Sự rõ ràng: phần hệ thông liên quan đến tương tác như textbox để nhập user/password là rõ ràng; Sự phản hồi: khi người dùng đăng nhập thành công. Chương trình sẽ đưa ra phản hồi bằng thị giác (hiển thị màn hình giao diện chính); Sự ràng buộc: Tên tài khoản và mật khẩu phải ít nhất có 6 ký tự trở lên hoặc user phải bắt đầu bằng một chữ cái và không được chứa các ký tự đặc biệt như $, %...; Sự ánh xạ: thứ tự của User và Password được thiết kế đúng. User được đặt trên password; Sự nhất quán: bố trí thực đơn nhất quán cả về việc nhìn và cảm giác. Thực đơn được bố trí và sắp xếp nhất quán theo chuẩn của Windows nên người sử dụng sẽ học được cách sử dụng nhanh hơn và dễ dàng hơn khi sử dụng; Sự gợi ý: nút Log In được thiết kế một cách trực quan. Những gợi ý trong trường hợp quên mật khẩu hoặc muốn đăng ký một tài khoản mới. Các biểu tượng trên thanh công cụ cũng được thiết kế trực quan và có tính diễn đạt tốt tới nhiệm vụ mà biểu tượng đó thể hiện.
3.9.3 Đánh giá
Sau khi cài đặt và triển khai cho một vài người dùng sử dụng thử chương trình Sametime. Người dùng đã đưa ra một vài đánh giá trong quá trình sử dụng Sametime: Giao diện Sametime thân thiện, gần gũi với người dùng; Chương trình đáp ứng được nhu cầu cần thiết của người dùng như: trò chuyện bằng cách gửi tin nhắn hay nói chuyện, nói chuyện và nhìn thấy nhau, khi chát người sử dụng có thể gửi kèm một file dữ liệu, người sử dụng có thể mời một người mới vào danh sách trò chuyện, người sử dụng có thể chia sẻ được một ứng dụng, toàn bộ màn hình hoặc một vùng màn hình…; Nhờ thiết kế thanh công cụ giúp người dùng dễ hình dung các lệnh và sử dụng các lệnh dễ dàng hơn. Các biểu tượng trên thanh công cụ rất gần gũi, giúp người sử dụng dễ hình dung ra các lệnh. Nhờ các phím tắt mà người dùng sử dụng các lệnh nhanh chóng hơn. Và đặc biệt Sametime là chương trình có tính sử dụng cao. Nó đáp ứng đầy đủ các nguyên lý để thiết kế một hệ thống có tính sử dụng mà Don Norman đề ra là: sự rõ ràng, sự phản hồi, sự ràng buộc, ánh xạ, nhất quán và gợi ý.
Ta thấy Sametime là một chương trình đáp ứng được các nhu cầu giao tiếp, liên lạc, kết bạn từ xa của người dùng. Giao diện của Sametime rất tốt, thân thiện, trực quan và phù hợp với người dùng.
Kết luận:
Chương 3 phát triển GUI phần mềm thử nghiệm định hướng mẫu. Tôi đã xây dựng và phát triển chương trình Sametime nhằm đáp ứng các nhu cầu giao tiếp, liên lạc, kết bạn từ xa của con người thông qua mạng Internet. Chương trình được xây dựng theo quy trình thiết kế GUI. Một số mẫu thiết kế như MVC (Model-View-Controller), Modal Panel, Button Groups, Closable Panels, Prominent “Done” Button và Card Satck đã được đưa vào để thiết kế giao diện Sametime.
Chương trình Sametime được xây dựng ngoài ứng dụng một số mẫu thiết kế thì còn sử dụng phần mềm GUI Design Studio. Do đó giao diện được thiết kế nhanh chóng. Quá trình làm bản mẫu dễ dàng và nhanh hơn rất nhiều so với cài đặt. Đặc biệt là ta có thể đánh giá sớm và nhận được phản hồi sớm về những điểm tốt và điểm xấu của thiết kế. Nhờ vậy tôi có thể thiết kế được giao diện của Sametime thân thiện, trực quan và gần gũi với người sử dụng.
KẾT LUẬN Kết quả đạt được
Mục tiêu của luận văn đã đưa ra: Tìm hiểu thiết kế GUI và mẫu thiết kế;
Tìm hiểu một số mẫu ứng dụng trong thiết kế GUI, đặc biệt là các mẫu đồ hoạ. Ứng dụng một số mẫu thiết kế để xây dựng chương trình Sametime.
Kết quả luận văn đạt được: Thứ nhất, tìm hiểu thiết kế GUI và mẫu thiết
kế gồm tìm hiểu về UI, tại sao cần thiết kế UI, tính sử dụng được của hệ thống phần mềm, nguyên lý và quy trình thiết kế GUI, mẫu trong phát triển phần mềm; Thứ hai, tìm hiểu một số mẫu ứng dụng trong thiết kế GUI gồm các mẫu kiến trúc và các mẫu đồ họa. Các mẫu đồ hoạ gồm các mẫu định vị, các mẫu tổ chức trang, các mẫu hành động, đồ hoạ thông tin; Cuối cùng, sử dụng phần mềm GUI Design Studio để xây dựng chương trình Sametime. Chương trình Sametime gồm có các chức năng: Sametime Instant Message; Sametime Call; Sametime Video Call; Sametime Screen Sharing; Sametime Send File. Khi xây dựng chương trình tôi đã ứng dụng được một số mẫu vào thiết kế giao diện như: như mẫu MVC (Model-View-Controller), Modal Panel, Button Groups, Closable Panels, Prominent “Done” Button và Card Stack.
Khi thiết kế một giao diện người sử dụng thì tôi thực hiện lần lượt theo các bước của quy trình thiết kế GUI đồng thời tận dụng các kinh nghiệm, tri thức đã có từ trước đó là mẫu thiết kế. Việc áp dụng mẫu thiết kế trong thiết kế giao diện người sử dụng đã mang lại nhiều lợi ích to lớn, nó giúp cho quá trình thiết kế giao diện được nhanh chóng và hiệu quả.
Hướng phát triển
Do thời gian thực hiện luận văn còn hạn chế nên luận văn mới chỉ tìm hiểu và áp dụng một số mẫu thiết kế trong thiết kế giao diện người sử dụng. Hướng phát triển tiếp theo của luận văn là: Tìm hiểu các mẫu thiết kế khác bao gồm các mẫu kiến trúc và các mẫu đồ hoạ. Đặc biệt là các mẫu đồ hoạ. Ứng dụng nhiều mẫu thiết kế hơn nữa vào thiết kế vào giao diện người dùng, cụ thể là chương trình Sametime. Đưa nhiều mẫu đồ hoạ hơn nữa vào chương trình để chương trình trở nên sinh động, dễ hiểu, dễ sử dụng, gần gũi với người dùng và chương trình đảm bảo có tính sử dụng cao. Từ đó đưa hệ thống Sametime vào