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

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 : Nhóm 03 sáng thứ tư

Tp.HCM 11/10/11

10 NGUYÊN TẮC THIẾT KẾ GIAO

DIỆN CỦA Jacob Nielsen

F Tài liệu tham khảo:

- http://www.mattsoave.com/old/cogs187a/iu_site_eval/1visibility.html

- http://vis.berkeley.edu/courses/cs160sp10/wiki/index.php/HeuristicEvaluation-SallyAhn

- http://vis.berkeley.edu/courses/cs160sp10/wiki/index.php/HeuristicEvaluation-WeiWu

- http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5

- http://www.whatwasithinking.co.uk/2009/02/27/explaining-usability-heuristics-a-quick-guide/#.TpMTbptryW4

- http://pazo.posterous.com/schneidermans-8-golden-rules-of-interface-des#

- http://vis.berkeley.edu/courses/cs160sp10/wiki/index.php/HeuristicEvaluation-ArpadKovacs

- http://www.usefulusability.com/increase-your-usability-and-website-roi-with-perceived-affordance/

- http://www.slideshare.net/gelvan/design-principles

III 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

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

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ì !?

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

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:

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

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

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

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

đó

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:

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

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

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

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

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

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

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 đó