Tài liệu 10 nguyên tắc thiết kế giao diện của jacob nielsen

10 rules design of Jacob Nielsen BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SÀI GÒN KHOA CNTT ĐỀ TÀI: 10 nguyên tắc thiết kế giao diện của Jacob - Nielsen GVHD : Phạm Thi Vương SVTH : Nguyễn Quang Minh Võ Tấn Lợi Trịnh Ngọc Lựu Lớp Tp.HCM 11/10/11 Bản quyên thuộc về nhóm 03, khoa CNTT - SGU : Nhóm 03 sáng thứ tư 10 rules design of Jacob Nielsen 10 NGUYÊN TẮC THIẾT KẾ GIAO DIỆN CỦA Jacob Nielsen F Tài liệu tham khảo: III. - http://www.mattsoave.com/old/cogs187a/iu_site_eval/1visibility.html - http://vis.berkeley.edu/courses/cs160sp10/wiki/index.php/HeuristicEvaluationSallyAhn - http://vis.berkeley.edu/courses/cs160sp10/wiki/index.php/HeuristicEvaluationWeiWu - http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5 - http://www.whatwasithinking.co.uk/2009/02/27/explaining-usability-heuristicsa-quick-guide/#.TpMTbptryW4 - http://pazo.posterous.com/schneidermans-8-golden-rules-of-interface-des# - http://www.devirtuoso.com/2009/05/8-golden-rules-of-interface-design/ - http://vis.berkeley.edu/courses/cs160sp10/wiki/index.php/HeuristicEvaluationArpadKovacs - http://www.usefulusability.com/increase-your-usability-and-website-roi-withperceived-affordance/ - http://www.slideshare.net/gelvan/design-principles Jacob Nielsen: 10 Usability Heuristics Visibility of system status. Match between system and real world. User control and freedom. Consistency and standards. Error Prevention. Recognition rather than recall. Flexibility and efficiency of use . Aesthetic and minimalist design . Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen Help users recognize, diagnose, and recover from errors . Help and Documentation. F Bản dịch: 1. Visibility of system status: tính rõ ràng của hệ thống - Diễn giải: hệ thống phải luôn thông báo cho người dùng điều gì sắp xảy ra thông qua những phản hồi phù hợp trong từng thời điểm cần thiết. - Hình ảnh: H1.Bạn nên làm gì??? H2. Màn hình bị treo khi ứng dụng đang load lên, người sử dụng không biết đc thông tin gì trong khoảnh khắc đó, rất dễ bị nhầm lẫn. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen 2. Match between system and the real world: kết nối hệ thống với thế giới thực - Diễn giải: hệ thống nên nói bằng ngôn ngữ của người dùng với những từ ,cụm từ, khái niệm gần gũi với người dùng hơn là những thuật ngữ mang tính định hướng của hệ thống. Theo quy tắc thế giới thực đó là những thông tin xuất hiện trong tự nhiên và được sắp xếp hợp lý. - Hình ảnh: H1. Ngôn ngữ là chủ yếu thích hợp cho các đối tượng học sinh và cha mẹ. Sử dụng chú thích cho từ “Bursar” nghĩa là “fees/cost”. H2. Các trang web sử dụng một số lượng rộng các từ viết tắt, làm cho người dùng không hiểu gì !? Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen 3. User control and freedom: người dùng cảm thấy được kiểm soát và tự do - Diễn giải: người dùng thường chọn chức năng của hệ thống và phát sinh lỗi, vì vậy sẽ cần một cái dấu để thoát khỏi tình trạng không mong muốn mà không cần phải có thêm hộp thoại như undo và redo. - Hình ảnh: H1. Người dùng thường chọn chức năng hệ thống do nhầm lẫn và sẽ cần một "thoát hiểm" đánh dấu rõ ràng để rời khỏi trạng thái không mong muốn mà không cần phải đi qua một cuộc đối thoại mở rộng. Hỗ trợ lùi lại và làm lại và là một cách rõ ràng để điều hướng. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H2. Đưa ra thông báo nhưng không có bất kì 1 link nào làm cho người dùng muốn thông báo cũng khó mà làm được. 4. Consistency and standards: sự thống nhất và tiêu chuẩn - Diễn giải: người dùng không nên tự hỏi có hay không những cái từ khác, trường hợp khác, hành động khác mang cùng một ý nghĩa. Tất cả đều tuân theo quy tắc. - Hình ảnh: Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H1. . Khi Gmail được thiết kế, họ dựa trên các thư mục tổ chức trên những cái tương tự được sử dụng trong các ứng dụng email khách hàng: Hộp thư đến, Nháp, Thư đã gửi. H2. Mũi tên refresh là màu đen, trong khi các văn bản trên các nút phía dưới là màu xanh, vì vậy người sử dụng có thể tự hỏi nếu nó thực sự là một nút. Nút refresh được phân lập ở góc trên bên phải, cách xa các nút khác ở phía dưới cũng như thời gian đến mà nó cập nhật, vì vậy nó không rõ ràng là ấn vào sẽ refresh màn hình. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen 5. Error prevention: Ngăn chạn lỗi© - Diễn giải: lỗi hơn là một cái thông báo lỗi tốt là việc thiết kế cẩn thận để ngăn cản vấn đề có thể xảy ra. - Hình ảnh: H1. Hành động ở vùng nhấp chuột rộng hơn. Tự động đưa ra các dự đoán giảm thiểu sự mắc lỗi. H2. Nếu người sử dụng chỉ đơn giản là nhấn "submit" một lần nữa mà không tẩy xoá các "require",). Và cuối cùng, bất kể có hay không các trường mẫu được điền đúng , một lỗi 404 luôn luôn tạo ra. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen 6. Recognition rather than recall: sự công nhận hơn là sự gọi lại/làm lại - Diễn giải: làm những đối tượng,hành động, những lựa chọn thấy được. Người dùng không cần phải nhớ những thông tin từ những hộp thoại hay những cái khác. Sự hướng dẫn của hệ thống sẽ hiện ra và hiện lên lại khi phù hợp. - Hình ảnh: H1.Đưa ra các hàm có sẵn trong thư viện Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H2. Nếu mục đích của màn hình này là để hiển thị khi đoàn tàu tiếp theo sẽ đến, vì thế lý do tại sao là tùy chọn chỉ xuất hiện trên màn hình Trạm Khởi và không có ở đây hoặc bất kỳ màn hình sau đó? Điều này buộc người sử dụng để quay trở lại 2 bước để tìm ra thời gian khởi hành, và cố nhớ thông tin trước đó Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen 7. Flexibility and efficiency of use: tính linh động và hiệu quả sử dụng - Diễn giải: sự nhanh nhẹn không thể thấy bởi người dùng chưa thành thạo, những người dùng thành thạo sẽ nhận thấy rõ điều ấy như là hệ thống sẽ phục vụ cho cả những người chưa có kinh nghiệm lẫn có kinh nghiệm. Cho phép người dùng thành thạo như thợ - Hình ảnh: Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H1. Cho phép xem trước kết quả của các hàm thông dụng ở bên trái, hiệu quả hơn các cách nhấp vào các biểu tượng hành động trong thanh công cụ H2. Bản đồ quá nhỏ, và không cung cấp tính năng zoom-in/out. Điều này làm khó khăn cho người sử dụng chuyên nghiệp để có được một cái nhìn tổng quan về bản đồ, buộc họ phải xoay xung quanh trên màn hình để có được các thông tin mà họ cần. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen 8. Aesthetic and minimalist design: thiết kế nhỏ gọn và thẫm mĩ Diễn giải: hộp thoại không nên chứa những thông tin không thích đáng hay không cần thiết. Mỗi thông tin trong hộp thoại sẽ ganh đua với những thông tin phù hợp và làm giảm bớt mối quan hệ giữa chúng. Hình ảnh: H1. Độ tương phản: văn bản in đậm được sử dụng cho hai nhãn trong tìm kiếm Lặp đi lặp lại: các văn bản màu cam, màu xanh, và màu xanh lá cây phù hợp với loại phương tiện truyền thông. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H2. trang web thiếu một định nghĩa rõ ràng và ngắn gọn về trang hiện tại, và mối quan hệ của nó với hệ thống phân cấp trang web. Mặc dù các liên kết hữu ích, một số trang có rất nhiều liên kết mà trở nên khó khăn với rất nhiều sự lựa chọn. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H3. Nhiều màu sắc đang làm mất tập trung.Tthống nhất có thể loại bỏ điều này mất tập trung. 9. Help user recognise, diagnose, and recover from errors: giúp người dùng nhận diện, chẩn đoán, và phục hồi lỗi Diễn giải: những thông báo lỗi phải để dưới dạng ngôn ngữ tự nhiên, không phải là code, chỉ ra chính xác vấn đề, hướng dẫn giải pháp khắc phục. Hình ảnh: H1.Đưa ra các thông báo looixx và cách khắc phục. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H2. Không có cách nào cho người dùng để phục hồi các thao tác trên tất cả các textfield. Ngay cả khi người dùng trở lại màn hình chính "Bart App" và cố gắng" Tính toán giá vé "một lần nữa, bàn phím vẫn còn đó. Vì vậy, đối với phần còn lại của phiên làm việc của ứng dụng, "Tính toán giá vé" chức năng hoàn toàn không sử dụng được, và người dùng chỉ có thể khởi động lại toàn bộ ứng dụng để có được thoát khỏi bàn phím. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen 10. Help and documentation: sự trợ giúp và những tài liệu Diễn giải: nếu sử dụng mà không cần tài liệu hướng dẫn thì sẽ tốt hơn, tuy nhiên rất cần thiết để có sự giúp đỡ và tài liệu hướng dẫn. Bất kì thông tin nào cũng sẽ tìm thấy dễ dàng, tập trung vào tác vụ của người dùng, hướng dẫn từng bước một và dung lượng không quá lớn. Hình ảnh: H1. Video nhúng có thể được sử dụng để giới thiệu các tính năng để mọi người bắt đầu sử dụng sản phẩm. H2. Lời khuyên giúp được hiển thị trên di chuột, trả lời các câu hỏi có khả năng nhất về một lĩnh vực hoặc hướng dẫn. H3. Resourse help. Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H4.Nếu mục đích của màn hình này là để hiển thị khi đoàn tàu tiếp theo sẽ đến, vì thế lý do tại sao là tùy chọn chỉ xuất hiện trên màn hình. Trạm Khởi và không có ở đây hoặc bất kỳ màn hình sau đó? Điều này buộc người sử dụng để quay trở lại 2 bước để tìm ra thời gian khởi hành, và cố nhớ thông tin trước đó. . Bản quyên thuộc về nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen Bản quyên thuộc về nhóm 03, khoa CNTT - SGU