Thiết kế một trang web
Đã giới thiệu| English | Ý nghĩa |
|---|---|
| information architecture/ˌɪnfəˈmeɪʃn ˈɑːkɪtektʃə/ | kiến trúc thông tin |
| wireframe/ˈwaɪəfreɪm/ | bản phác thảo |
| visual hierarchy/ˈvɪʒuːəl ˈhaɪərɑːki/ | thứ tự thị giác |
| whitespace/ˈwaɪtspeɪs/ | khoảng trắng |
Một thành viên mới không tìm thấy nơi họp
- Trang chủ câu lạc bộ trường học hiển thị một bức ảnh lớn, nhưng phòng họp và thời gian họp bị ẩn. Người truy cập rời đi mà không biết cách tham gia.
- Bắt đầu từ đối tượng khán giả và một nhiệm vụ bạn có thể quan sát: “Tìm thời gian và phòng họp của tuần này.” Yêu cầu một bạn cùng lớp thử nghiệm trước khi quyết định thiết kế hoạt động.
Nhiệm vụ nào mang lại cho người tham gia một mục tiêu có thể quan sát được?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Tìm kiếm thông tin cụ thể mang lại kết quả mà bạn có thể quan sát và kiểm tra.
Viết một nhiệm vụ có thể quan sát được dành cho thành viên mới đến truy cập trang web.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Ví dụ: “Tìm nơi câu lạc bộ robotics gặp gỡ vào thứ Năm tuần này.”
Tạo nơi ở hữu ích cho thông tin
- Kiến trúc thông tin nhóm các nội dung và liên kết các trang. Liệt kê thông tin mà người truy cập cần, sau đó chọn tên trang và đường dẫn rõ ràng.
- Một lộ trình ngắn giúp ích, nhưng không có quy tắc ba lần nhấp nào mang tính phổ quát. Một lộ trình dài hơn nhưng rõ ràng có thể dễ dàng hơn so với lộ trình ngắn nhưng nhãn confusing.
phác thảo một cấu trúc có thể kiểm tra
- Bản phác thảo (wireframe) là bản vẽ trang đơn giản. Sử dụng các hộp để bố trí, nhưng hãy bao gồm các nhãn và nội dung chính xác thực để bạn đồng hành có thể hiểu được các lựa chọn.
- Một mẫu có thể tiết kiệm thời gian nếu nó phù hợp với các nhiệm vụ. Hãy kiểm tra điều hướng, khả năng đọc và không gian nội dung thay vì chấp nhận mọi phần mà nó cung cấp.
For a new member, put “Thursday, 4 pm, room 12” near a clearly labelled “How to join” link. A returning member may need the current project instead. Test both tasks rather than assuming one homepage suits everyone.
Một bản phác thảo dây (wireframe) ban đầu hữu ích nên giúp việc thảo luận điều gì trở nên dễ dàng?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
A wireframe kiểm tra sự tổ chức; các nhãn thực tế giúp người tham gia hiểu rõ lộ trình đề xuất.
Hiển thị những gì quan trọng nhất trước tiên
- Cấp bậc trực quan sử dụng tiêu đề, kích thước, khoảng cách và độ tương phản để thể hiện mối quan hệ. Không gian trắng phân tách các nhóm giúp dễ dàng quét mắt hơn.
- Sử dụng tiêu đề dễ đọc cho mỗi phần và nhãn rõ ràng cho mỗi hành động. Màu sắc nên hỗ trợ cấu trúc chứ không phải là dấu hiệu duy nhất cho thấy một thứ gì đó có thể nhấp được.
Việc nhấn mạnh equal strong emphasis cho mọi mục luôn tạo ra một cấu trúc phân cấp rõ ràng.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Cấu trúc phân cấp truyền tải mức độ ưu tiên và mối quan hệ. Nhấn mạnh ngang bằng có thể khiến hành động quan trọng khó tìm thấy.
Gắn mỗi công cụ thiết kế với mục đích chính của nó.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Các công cụ này hoạt động ở các cấp độ khác nhau: lộ trình, bố cục trang và nhóm trực quan.
Kiểm tra nhiệm vụ, không chỉ riêng ngoại hình
- Giao cho bạn đồng hành một nhiệm vụ mà không giải thích nơi cần nhấp. Ghi lại nơi họ do dự, nhãn họ chọn và liệu họ có tìm thấy câu trả lời đúng hay không.
- Thay đổi phần gây nhầm lẫn và lặp lại nhiệm vụ. Việc kiểm tra nhiệm vụ có thể tiết lộ một vấn đề mà ảnh chụp màn hình không thể hiển thị.
Một trang đẹp mắt không phải là bằng chứng cho thấy đường đi khả dụng. Đừng tự sáng tạo một câu trích dẫn của người dùng hay gọi ý kiến cá nhân của bạn là nghiên cứu người dùng. Giữ các quan sát thực tế tách biệt với sự diễn giải của bạn.
Yếu tố nào thuộc về hồ sơ kiểm tra nhiệm vụ? Chọn tất cả các đáp án phù hợp.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Ghi lại những gì đã xảy ra. Phần diễn giải có thể đi kèm, nhưng các quan sát giả tưởng không được trình bày như là dữ liệu nghiên cứu.
Biến kết quả thành quyết định thiết kế
- Tạo danh sách trang, một bản phác thảo và bản ghi ngắn gọn về hai lần kiểm tra nhiệm vụ. Giải thích một lần chỉnh sửa dựa trên những gì người tham gia thực sự đã làm.
- Giữ lại phiên bản đầu tiên và phiên bản đã chỉnh sửa để lập luận của bạn được nhìn thấy. Kiểm tra yêu cầu nhiệm vụ xem có bằng chứng thiết kế nào bắt buộc không.
Khán giả → nhiệm vụ có thể quan sát được → cấu trúc nội dung → bản phác thảo → kiểm tra nhiệm vụ → chỉnh sửa. Mẫu và số lần nhấp là công cụ, không phải là đảm bảo.
Sắp xếp các giai đoạn của chu kỳ thiết kế-thử nghiệm đầu tiên này.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Nhiệm vụ định hướng bản phác thảo, bản phác thảo hỗ trợ thử nghiệm, và những quan sát cung cấp thông tin để sửa đổi. Các phiên bản sau có thể xem xét lại các quyết định trước đó.
Lộ trình bốn lần nhấp hoạt động rõ ràng trong thử nghiệm; lộ trình hai lần nhấp gây nhầm lẫn thì không. Bạn nên rút ra kết luận gì?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Số lần nhấp chỉ là một quan sát, chứ không phải là phán quyết phổ quát về khả năng sử dụng.