10 nguyên tắc thiết kế giao diện của jacob nielsen

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 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 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 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: Visibility of system status: tính rõ ràng hệ thống - Diễn giải: hệ thống phải thông báo cho người dùng điều xảy thơng qua phản hồi phù hợp 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 ứng dụng load lên, người sử dụng khơng biết đc thơng tin khoảnh khắc đó, dễ bị nhầm lẫn Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen Match between system and the real world: kết nối hệ thống với giới thực - Diễn giải: hệ thống nên nói ngơn ngữ người dùng với từ ,cụm từ, khái niệm gần gũi với người dùng thuật ngữ mang tính định hướng hệ thống Theo quy tắc giới thực thơng tin xuất tự nhiên xếp hợp lý - Hình ảnh: H1 Ngơn ngữ chủ yếu thích hợp cho đối tượng học sinh cha mẹ Sử dụng thích cho từ “Bursar” nghĩa “fees/cost” H2 Các trang web sử dụng số lượng rộng từ viết tắt, làm cho người dùng khơng hiểu !? Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen User control and freedom: người dùng cảm thấy kiểm soát tự - Diễn giải: người dùng thường chọn chức hệ thống phát sinh lỗi, cần dấu để 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 undo redo - Hình ảnh: H1 Người dùng thường chọn chức hệ thống nhầm lẫn cần "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 qua đối thoại mở rộng Hỗ trợ lùi lại làm lại cách rõ ràng để điều hướng Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H2 Đưa thơng báo khơng có link làm cho người dùng muốn thông báo khó mà làm Consistency and standards: thống tiêu chuẩn - Diễn giải: người dùng khơng nên tự hỏi có hay khơng từ khác, trường hợp khác, hành động khác mang ý nghĩa Tất tuân theo quy tắc - Hình ảnh: Bản qun thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H1 Khi Gmail thiết kế, họ dựa thư mục tổ chức tương tự sử dụng ứng dụng email khách hàng: Hộp thư đến, Nháp, Thư gửi H2 Mũi tên refresh màu đen, văn nút phía màu xanh, người sử dụng tự hỏi thực nút Nút refresh phân lập góc bên phải, cách xa nút khác phía thời gian đến mà cập nhật, khơng rõ ràng ấn vào refresh hình Bản qun thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen Error prevention: Ngăn chạn lỗi© - Diễn giải: lỗi thông báo lỗi tốt việc thiết kế cẩn thận để ngăn cản vấn đề xảy - Hình ảnh: H1 Hành động vùng nhấp chuột rộng Tự động đưa dự đoán giảm thiểu mắc lỗi H2 Nếu người sử dụng đơn giản nhấn "submit" lần mà không tẩy xố "require",) Và cuối cùng, có hay không trường mẫu điền , lỗi 404 luôn tạo Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen Recognition rather than recall: công nhận gọi lại/làm lại - Diễn giải: làm đối tượng,hành động, lựa chọn thấy Người dùng không cần phải nhớ thông tin từ hộp thoại hay khác Sự hướng dẫn hệ thống lên lại phù hợp - Hình ảnh: H1.Đưa hàm có sẵn thư viện Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H2 Nếu mục đích hình để hiển thị đồn tàu đến, lý tùy chọn xuất hình Trạm Khởi khơng có hình sau đó? Điều buộc người sử dụng để quay trở lại bước để tìm thời gian khởi hành, cố nhớ thơng tin trước Bản qun thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen Flexibility and efficiency of use: tính linh động hiệu sử dụng - Diễn giải: nhanh nhẹn thấy người dùng chưa thành thạo, người dùng thành thạo nhận thấy rõ điều hệ thống phục vụ cho 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 thợ - Hình ảnh: Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H1 Cho phép xem trước kết hàm thông dụng bên trái, hiệu cách nhấp vào biểu tượng hành động công cụ H2 Bản đồ q nhỏ, khơng cung cấp tính zoom-in/out Điều làm khó khăn cho người sử dụng chuyên nghiệp để có nhìn tổng quan đồ, buộc họ phải xoay xung quanh hình để có thơng tin mà họ cần Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen Aesthetic and minimalist design: thiết kế nhỏ gọn thẫm mĩ Diễn giải: hộp thoại khơng nên chứa thơng tin khơng thích đáng hay không cần thiết Mỗi thông tin hộp thoại ganh đua với thông tin phù hợp làm giảm bớt mối quan hệ chúng Hình ảnh: H1 Độ tương phản: văn in đậm sử dụng cho hai nhãn tìm kiếm Lặp lặp lại: văn màu cam, màu xanh, màu xanh phù hợp với loại phương tiện truyền thơng Bản qun thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H2 trang web thiếu định nghĩa rõ ràng ngắn gọn trang tại, mối quan hệ với hệ thống phân cấp trang web Mặc dù liên kết hữu ích, số trang có nhiều liên kết mà trở nên khó khăn với nhiều lựa chọn Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H3 Nhiều màu sắc làm tập trung.Tthống loại bỏ điều tập trung Help user recognise, diagnose, and recover from errors: giúp người dùng nhận diện, chẩn đoán, phục hồi lỗi Diễn giải: thông báo lỗi phải để dạng ngôn ngữ tự nhiên, khơng phải code, xác vấn đề, hướng dẫn giải pháp khắc phục Hình ảnh: H1.Đưa thông báo looixx cách khắc phục Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H2 Khơng có cách cho người dùng để phục hồi thao tác tất textfield Ngay người dùng trở lại hình "Bart App" cố gắng" Tính tốn giá vé "một lần nữa, bàn phím cịn Vì vậy, phần cịn lại phiên làm việc ứng dụng, "Tính tốn giá vé" chức hồn tồn khơng sử dụng được, người dùng khởi động lại tồn ứng dụng để có khỏi bàn phím Bản qun thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen 10 Help and documentation: trợ giúp tài liệu Diễn giải: sử dụng mà khơng cần tài liệu hướng dẫn tốt hơn, nhiên cần thiết để có giúp đỡ tài liệu hướng dẫn Bất kì thơng tin tìm thấy dễ dàng, tập trung vào tác vụ người dùng, hướng dẫn bước dung lượng khơng q lớn Hình ảnh: H1 Video nhúng sử dụng để giới thiệu tính để người bắt đầu sử dụng sản phẩm H2 Lời khuyên giúp hiển thị di chuột, trả lời câu hỏi có khả lĩnh vực hướng dẫn H3 Resourse help Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H4.Nếu mục đích hình để hiển thị đồn tàu đến, lý tùy chọn xuất hình Trạm Khởi khơng có hình sau đó? Điều buộc người sử dụng để quay trở lại bước để tìm thời gian khởi hành, cố nhớ thơng tin trước Bản quyên thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen Bản quyên thuộc nhóm 03, khoa CNTT - SGU .. .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... động khác mang ý nghĩa Tất tuân theo quy tắc - Hình ảnh: Bản qun thuộc nhóm 03, khoa CNTT - SGU 10 rules design of Jacob Nielsen H1 Khi Gmail thiết kế, họ dựa thư mục tổ chức tương tự sử dụng... CNTT - SGU 10 rules design of Jacob Nielsen Aesthetic and minimalist design: thiết kế nhỏ gọn thẫm mĩ Diễn giải: hộp thoại không nên chứa thông tin khơng thích đáng hay khơng cần thiết Mỗi thơng