Những điểm chính
1. Đừng bắt người dùng phải suy nghĩ: Thiết kế để điều hướng trực quan
Nếu bạn có thể làm cho điều gì đó hiển nhiên, ít nhất hãy làm cho nó dễ hiểu ngay lập tức.
Thiết kế trực quan là then chốt. Người dùng không nên phải mất công đoán xem trang web của bạn hoạt động thế nào. Mọi thành phần, từ nút bấm đến menu, cần được hiểu ngay lập tức. Khi gặp điều gì đó lạ, người dùng phải nhanh chóng nắm bắt được mục đích mà không tốn nhiều công sức suy nghĩ.
Sự rõ ràng quan trọng hơn sự tinh tế. Tránh dùng những tên gọi hay thuật ngữ khó hiểu cho các phần điều hướng. Hãy dùng nhãn mác rõ ràng, mô tả chính xác để người dùng nhận biết ngay. Ví dụ, dùng “Việc làm” thay vì “Cơ hội nghề nghiệp” hay “Tuyển dụng” cho mục danh sách việc làm.
Loại bỏ dấu hỏi trong đầu người dùng. Mỗi lần người dùng phải dừng lại suy nghĩ cách sử dụng một tính năng, bạn đang làm tăng gánh nặng nhận thức cho họ. Hãy cố gắng loại bỏ những “chướng ngại tinh thần” này bằng cách:
- Áp dụng các mẫu thiết kế và quy ước quen thuộc
- Cung cấp hướng dẫn rõ ràng, ngắn gọn khi cần
- Đảm bảo các phần có thể nhấp trông thật sự có thể nhấp
- Dùng tiêu đề và tiêu đề phụ mô tả rõ ràng
2. Người dùng không đọc, họ quét: Tối ưu để hiểu nhanh
Một thí nghiệm tinh tế đã cho thấy rất nhiều điều xảy ra ngay khi bạn mở một trang web.
Người dùng thiếu kiên nhẫn. Hầu hết không đọc từng chữ một mà chỉ quét tìm thông tin cần thiết. Thói quen này càng rõ nét trên thiết bị di động. Vì vậy, hãy thiết kế nội dung để người dùng dễ hiểu nhanh chóng:
- Dùng tiêu đề và tiêu đề phụ rõ ràng, mô tả chính xác
- Chia đoạn văn thành các đoạn ngắn
- Sử dụng danh sách gạch đầu dòng hoặc đánh số
- Làm nổi bật các thuật ngữ quan trọng và thông tin chủ chốt
- Dùng hình ảnh và sơ đồ có ý nghĩa để hỗ trợ văn bản
Đưa thông tin quan trọng lên đầu. Đặt nội dung thiết yếu ở phần đầu các đoạn, tiêu đề và mục trên trang. Cách viết “kim tự tháp ngược” này giúp người dùng nhanh chóng tìm thấy điều họ cần mà không phải đọc hết toàn bộ.
3. Tạo hệ thống phân cấp hình ảnh rõ ràng để dẫn dắt người dùng
Một hệ thống phân cấp hình ảnh tốt giúp chúng ta tiết kiệm công sức bằng cách xử lý trước trang, tổ chức và ưu tiên nội dung sao cho ta có thể hiểu ngay lập tức.
Hệ thống phân cấp hình ảnh rất quan trọng. Thiết kế phân cấp hình ảnh hợp lý giúp người dùng nhận biết mức độ quan trọng của các phần tử trên trang và mối liên hệ giữa chúng. Điều này giúp họ dễ dàng tìm kiếm và hiểu cấu trúc tổng thể của trang web.
Nguyên tắc tạo hệ thống phân cấp hiệu quả:
- Làm các phần quan trọng lớn hơn, đậm hơn hoặc dùng màu sắc nổi bật
- Nhóm các mục liên quan lại với nhau (ví dụ: gần nhau hoặc cùng kiểu dáng)
- Dùng khoảng trắng để tách các phần không liên quan
- Lồng các mục để thể hiện phần nào thuộc phần nào
Tính nhất quán rất cần thiết. Giữ hệ thống phân cấp hình ảnh đồng nhất trên toàn trang để người dùng dễ làm quen và nhớ cách điều hướng. Bao gồm việc dùng kiểu dáng nhất quán cho tiêu đề, liên kết và các phần quan trọng khác.
4. Chia trang thành các khu vực rõ ràng để dễ quét
Việc chia trang thành các khu vực rõ ràng giúp người dùng nhanh chóng quyết định tập trung vào phần nào và bỏ qua phần nào.
Chia nhỏ giúp hiểu nhanh hơn. Khi chia trang thành các phần riêng biệt, bạn giúp người dùng dễ dàng nắm bắt cấu trúc và tìm thông tin cần thiết. Điều này đặc biệt quan trọng với các trang dài hoặc có nội dung đa dạng.
Chiến lược tạo các khu vực rõ ràng:
- Dùng màu nền hoặc viền khác nhau để phân tách các phần
- Giữ khoảng cách đều đặn giữa các loại nội dung khác nhau
- Dùng tiêu đề và tiêu đề phụ để phân chia các phần
- Cân nhắc dùng bố cục lưới để trình bày nội dung có tổ chức
Ưu tiên nội dung. Đặt thông tin quan trọng nhất ở những khu vực người dùng thường nhìn đầu tiên, thường là góc trên bên trái với văn hóa đọc từ trái sang phải. Dùng nghiên cứu theo dõi mắt và bản đồ nhiệt để quyết định bố cục.
5. Làm rõ phần nào có thể nhấp để tăng tính tiện dụng
Vì phần lớn người dùng trên web đang tìm thứ để nhấp tiếp theo, nên việc làm rõ phần nào có thể nhấp là rất quan trọng.
Dấu hiệu rõ ràng là thiết yếu. Người dùng không bao giờ nên phải băn khoăn liệu một phần tử có thể nhấp hay không. Hãy dùng các dấu hiệu hình ảnh để làm nổi bật các phần tương tác:
- Định dạng liên kết đồng nhất (ví dụ: gạch chân hoặc màu sắc khác biệt)
- Làm nút bấm trông có chiều sâu, bóng đổ hoặc hiệu ứng khi rê chuột
- Dùng biểu tượng quen thuộc cho các hành động chuẩn (ví dụ: kính lúp cho tìm kiếm)
Lưu ý tương tác trên di động. Trên thiết bị cảm ứng, đảm bảo các phần có thể nhấp đủ lớn và cách nhau hợp lý để dễ chạm. Kích thước mục chạm tối thiểu được khuyến nghị là 44x44 pixel.
Cung cấp phản hồi. Dùng hiệu ứng khi rê chuột trên máy tính và trạng thái nhấn trên di động để người dùng nhận biết khi họ tương tác với phần tử có thể nhấp. Điều này củng cố tính tương tác và tạo cảm giác kiểm soát.
6. Thiết kế điều hướng hiệu quả: Dùng quy ước và dấu hiệu rõ ràng
Điều hướng web bù đắp cho cảm giác thiếu “địa điểm” bằng cách thể hiện cấu trúc trang, tạo cảm giác “đang ở đâu”.
Điều hướng rất quan trọng. Điều hướng tốt giúp người dùng hiểu trang web có gì, tổ chức ra sao và cách tìm thông tin họ cần. Nó cũng tạo sự tin tưởng vào trang và tổ chức của bạn.
Các yếu tố then chốt của điều hướng hiệu quả:
- Nhãn mác rõ ràng, mô tả chính xác cho các mục điều hướng
- Vị trí các phần điều hướng nhất quán trên toàn trang
- Hiển thị rõ vị trí hiện tại (ví dụ: tô sáng trang đang xem trong menu)
- Dùng “dấu bánh mì” cho cấu trúc sâu
- Có chức năng tìm kiếm nổi bật
Dùng mẫu quen thuộc. Tuân theo các quy ước điều hướng phổ biến trừ khi có lý do rất chính đáng để khác biệt. Người dùng đã quen với các mẫu như điều hướng chính ở đầu trang hoặc thanh bên trái.
Cung cấp nhiều đường dẫn. Cho phép truy cập nội dung qua điều hướng chính, tìm kiếm và liên kết ngữ cảnh trong nội dung. Điều này phù hợp với nhiều sở thích và cách duyệt khác nhau của người dùng.
7. Đơn giản hóa biểu mẫu và loại bỏ từ ngữ thừa
Hãy loại bỏ một nửa số từ trên mỗi trang, rồi lại loại bỏ một nửa số từ còn lại.
Nội dung ngắn gọn là chìa khóa. Mỗi từ không cần thiết làm cho nội dung hữu ích khó tìm hơn. Hãy cắt gọt nội dung một cách quyết liệt, tập trung vào sự rõ ràng và ngắn gọn.
Chiến lược đơn giản hóa nội dung:
- Dùng ngôn ngữ đơn giản, tránh biệt ngữ
- Chia đoạn dài thành các đoạn ngắn hơn
- Thay giải thích dài bằng ví dụ khi có thể
- Dùng danh sách gạch đầu dòng hoặc đánh số để dễ quét
- Loại bỏ thông tin trùng lặp
Tinh gọn biểu mẫu. Biểu mẫu thường là nguồn gây khó chịu cho người dùng. Để cải thiện:
- Chỉ hỏi thông tin cần thiết
- Nhóm các trường liên quan lại với nhau
- Dùng nhãn rõ ràng, cụ thể cho các trường
- Cung cấp thông báo lỗi hữu ích và xác thực ngay trong biểu mẫu
- Hiển thị tiến trình cho biểu mẫu nhiều bước
8. Thực hiện kiểm thử tính tiện dụng đơn giản để phát hiện và sửa lỗi
Kiểm thử một người dùng vẫn tốt hơn không kiểm thử ai cả.
Kiểm thử thường xuyên rất quan trọng. Kiểm thử tính tiện dụng không cần tốn kém hay mất nhiều thời gian. Ngay cả các bài kiểm thử nhỏ, không chính thức cũng có thể phát hiện vấn đề và cung cấp hiểu biết quý giá.
Cách thực hiện kiểm thử đơn giản:
- Tuyển 3-5 người đại diện cho đối tượng mục tiêu
- Tạo các nhiệm vụ thực tế để họ hoàn thành trên trang
- Yêu cầu họ nói to suy nghĩ khi làm nhiệm vụ
- Quan sát và ghi chú hành vi, nhận xét của họ
- Xác định các vấn đề chung và ưu tiên sửa chữa
Tập trung vào vấn đề lớn. Đừng sa đà vào chi tiết nhỏ nhặt. Hãy tập trung sửa những lỗi nghiêm trọng nhất cản trở người dùng hoàn thành nhiệm vụ quan trọng.
Kiểm thử sớm và thường xuyên. Lồng ghép kiểm thử tính tiện dụng xuyên suốt quá trình thiết kế, không chỉ cuối cùng. Điều này giúp phát hiện và sửa lỗi trước khi chúng ăn sâu vào thiết kế.
9. Thiết kế di động: Tập trung vào tốc độ, sự đơn giản và giao diện thân thiện với cảm ứng
Mọi thứ đều là sự đánh đổi.
Thiết kế ưu tiên di động là bắt buộc. Với sự phổ biến ngày càng tăng của thiết bị di động, thiết kế cho màn hình nhỏ và tương tác cảm ứng là điều thiết yếu. Cách tiếp cận này buộc bạn tập trung vào nội dung và chức năng quan trọng nhất.
Những điểm cần lưu ý khi thiết kế di động:
- Ưu tiên nghiêm ngặt nội dung và tính năng
- Thiết kế cho cảm ứng: dùng mục chạm lớn, khoảng cách hợp lý
- Tối ưu tốc độ: giảm thời gian tải trang, dùng tải dần
- Đơn giản hóa điều hướng: cân nhắc dùng menu “hamburger” hoặc thanh điều hướng dưới cùng
- Dùng thiết kế đáp ứng để thích ứng với nhiều kích thước màn hình
Xem xét ngữ cảnh. Người dùng di động có thể có nhu cầu và hành vi khác so với máy tính để bàn. Thiết kế cho các tình huống di chuyển nhưng vẫn đảm bảo truy cập đầy đủ tính năng quan trọng.
10. Khả năng tiếp cận: Làm cho trang web sử dụng được với mọi người
Đây không chỉ là điều đúng đắn mà còn là điều đúng đắn sâu sắc, vì một lý do ít được nhắc đến là khả năng tiếp cận làm cuộc sống của một số người tốt hơn rất nhiều.
Khả năng tiếp cận có lợi cho tất cả mọi người. Thiết kế để tiếp cận không chỉ giúp người khuyết tật mà còn cải thiện trải nghiệm cho tất cả người dùng. Nó cũng ngày càng trở thành yêu cầu pháp lý ở nhiều nơi.
Những điểm cần lưu ý về khả năng tiếp cận:
- Cung cấp văn bản thay thế cho hình ảnh
- Đảm bảo điều hướng bằng bàn phím cho mọi chức năng
- Dùng độ tương phản màu đủ cho văn bản và phần tử quan trọng
- Cấu trúc nội dung với hệ thống tiêu đề hợp lý
- Làm biểu mẫu dễ tiếp cận với nhãn rõ ràng và thông báo lỗi
- Cung cấp phụ đề và bản ghi cho nội dung đa phương tiện
Bắt đầu từ những điều cơ bản. Ngay cả cải tiến nhỏ về khả năng tiếp cận cũng tạo ra sự khác biệt lớn. Hãy tập trung vào các vấn đề quan trọng nhất trước, như cấu trúc tiêu đề đúng và văn bản thay thế cho hình ảnh, rồi phát triển dần.
11. Xây dựng thiện cảm bằng cách quan tâm đến nhu cầu và thời gian của người dùng
Tôi luôn thấy hữu ích khi tưởng tượng rằng mỗi lần chúng ta vào một trang web, ta bắt đầu với một kho thiện cảm.
Sự hài lòng của người dùng là tích lũy. Mỗi trải nghiệm tích cực góp phần xây dựng thiện cảm, trong khi trải nghiệm tiêu cực làm hao hụt nó. Hãy cố gắng tạo ra trải nghiệm tổng thể tích cực bằng cách quan tâm đến nhu cầu và thời gian của người dùng.
Cách xây dựng thiện cảm:
- Thẳng thắn cung cấp thông tin quan trọng (ví dụ: giá cả, phí vận chuyển)
- Đưa ra thông báo lỗi rõ ràng, trung thực và giúp người dùng khắc phục lỗi
- Cung cấp các kênh hỗ trợ khách hàng dễ tiếp cận
- Giảm thiểu các bước cần thiết để hoàn thành các tác vụ phổ biến
- Tôn trọng quyền riêng tư của người dùng và minh bạch về việc sử dụng dữ liệu
Dự đoán nhu cầu người dùng. Cố gắng hiểu người dùng muốn làm gì trên trang và làm cho các tác vụ đó càng dễ dàng càng tốt. Có thể bao gồm cung cấp phím tắt, ghi nhớ sở thích hoặc hỗ trợ ngữ cảnh.
Liên tục cải tiến. Thường xuyên thu thập phản hồi người dùng và dữ liệu phân tích để phát hiện điểm khó khăn và chỗ cần cải thiện. Cho người dùng thấy bạn trân trọng ý kiến của họ bằng cách giải quyết các vấn đề phổ biến và triển khai tính năng theo yêu cầu khi phù hợp.
Mọi người cũng đọc
Câu hỏi thường gặp
What's "Don't Make Me Think, Revisited" about?
- Focus on Usability: The book is a guide to web usability, emphasizing the importance of designing websites that are intuitive and easy to navigate.
- Krug’s First Law: It introduces Krug’s First Law of Usability: "Don’t make me think," which suggests that web pages should be self-evident and self-explanatory.
- Practical Advice: It provides practical advice and principles for creating user-friendly websites, applicable to both web and mobile design.
- Real-World Examples: The book uses real-world examples and illustrations to demonstrate effective and ineffective web design practices.
Why should I read "Don't Make Me Think, Revisited"?
- Improve User Experience: It offers insights into improving the user experience on websites, which is crucial for retaining visitors and achieving business goals.
- Simplified Concepts: The book breaks down complex usability concepts into simple, actionable steps that anyone can follow.
- Broad Applicability: While focused on web design, the principles can be applied to any interactive design, including apps and software.
- Engaging Style: Steve Krug’s engaging writing style, with humor and wit, makes the book an enjoyable read.
What are the key takeaways of "Don't Make Me Think, Revisited"?
- Self-Evident Design: Aim for designs that are self-evident, reducing the cognitive load on users.
- Usability Testing: Regular usability testing is crucial; even simple tests can reveal significant insights.
- Guiding Principles: Follow conventions, create clear visual hierarchies, and eliminate unnecessary elements to enhance usability.
- User-Centric Approach: Always design with the user in mind, ensuring that their needs and expectations are met.
What is Krug’s First Law of Usability?
- "Don’t Make Me Think": This principle emphasizes that web pages should be obvious and self-explanatory.
- Reduce Cognitive Load: The goal is to minimize the amount of thinking users need to do to understand and navigate a site.
- Immediate Understanding: Users should be able to grasp the purpose and functionality of a page at a glance.
- Design Clarity: Achieving this requires clear, intuitive design and navigation.
How does "Don't Make Me Think, Revisited" suggest improving web navigation?
- Consistent Navigation: Use persistent navigation elements that appear on every page to help users orient themselves.
- Clear Hierarchies: Establish a clear visual hierarchy to guide users through the site’s content.
- Breadcrumbs and Tabs: Implement breadcrumbs and tabs to show users their location and options within the site.
- User-Friendly Labels: Ensure that page names and navigation labels are clear and match what users expect.
What is the importance of usability testing according to Steve Krug?
- Early Testing: Conduct usability testing early and often to catch issues before they become costly to fix.
- Simple and Effective: Even simple, informal tests can provide valuable insights into user behavior and site issues.
- Focus on Major Issues: Prioritize fixing the most significant usability problems first to improve the overall user experience.
- Involve Stakeholders: Encourage team members and stakeholders to observe tests to understand user challenges firsthand.
What are some best practices for mobile usability mentioned in the book?
- Responsive Design: Ensure your site is usable on all screen sizes, from desktops to mobile devices.
- Prioritize Content: Focus on the most important content and features for mobile users, considering their context and needs.
- Visible Affordances: Make interactive elements like buttons and links clearly visible and distinguishable.
- Allow Zooming: Ensure users can zoom in on content to improve readability and interaction on small screens.
How does "Don't Make Me Think, Revisited" address accessibility?
- Inclusive Design: Emphasizes the importance of making websites accessible to all users, including those with disabilities.
- Simple Adjustments: Suggests simple changes like adding alt text to images and ensuring keyboard navigation to improve accessibility.
- Usability and Accessibility: Highlights that improving general usability often enhances accessibility for users with disabilities.
- Moral Obligation: Argues that making sites accessible is the right thing to do, as it significantly improves some users' lives.
What are some of the best quotes from "Don't Make Me Think, Revisited" and what do they mean?
- "Don’t make me think!" - This encapsulates the book’s core message that web design should be intuitive and effortless for users.
- "It’s not rocket surgery." - Usability doesn’t have to be complex; simple, common-sense approaches can lead to significant improvements.
- "Focus ruthlessly on fixing the most serious problems first." - Prioritize addressing the biggest usability issues to make the most impact.
- "Usability is about people and how they understand and use things, not about technology." - The focus should always be on the user experience, not just the technical aspects.
How does Steve Krug suggest handling web design debates?
- Avoid Religious Debates: Recognize that many design arguments are based on personal preferences rather than user needs.
- Test to Resolve: Use usability testing to settle debates by focusing on what works for users rather than opinions.
- Focus on Users: Keep the user’s experience at the forefront to guide design decisions and avoid unnecessary conflicts.
- Embrace Diversity: Understand that users are diverse, and design should accommodate a range of preferences and behaviors.
What is the "Trunk Test" in "Don't Make Me Think, Revisited"?
- Navigation Check: The Trunk Test is a method to evaluate if a page’s navigation is clear and intuitive.
- Key Elements: Ensure that users can easily identify the site ID, page name, sections, local navigation, and search options.
- Quick Assessment: The test involves quickly assessing a page to see if these elements are immediately apparent.
- User Orientation: It helps ensure that users can orient themselves and navigate the site without confusion.
How does "Don't Make Me Think, Revisited" suggest dealing with visual noise?
- Reduce Clutter: Eliminate unnecessary elements that distract users from the main content and navigation.
- Clear Hierarchy: Use visual hierarchy to guide users’ attention to the most important parts of the page.
- Consistent Design: Maintain consistency in design elements to avoid overwhelming users with too much information.
- Focus on Content: Prioritize content that supports users’ goals and remove anything that doesn’t add value.
Tải PDF
Tải EPUB
.epub digital book format is ideal for reading ebooks on phones, tablets, and e-readers.
