After a decade writing computer manuals, in 1989 Steve Krug (pronounced “kroog”) moved up the food chain to usability testing and interface design so he could fix the problems instead of explaining them.

Don't Make Me Think

2013

Steve Krug

Goodreads

7 phút

Đây là một quyển kinh điển về Web Usability. Tác giả cung cấp những kiến thức rất cụ thể và đơn giản, có thể áp dụng nhanh chóng trong thiết kế web. Sách rất ngắn, chưa đến 200 trang, và có rất nhiều hình ảnh và ví dụ minh hoạ, nên rất dễ hiểu.

Trong phiên bản thứ ba này, tác giả cập nhật thêm một chương về Mobile Usability và cập nhật một số ví dụ minh hoạ.

Mặc dù phiên bản đầu tiên cách đây rất lâu (năm 2000, 20 năm trên internet ~ 2 thế kỷ), và phiên bản mới nhất (năm 2013) cũng cả “thế kỷ” trước, nhưng phần lớn các kiến thức trong đây vẫn còn nguyên giá trị, đặc biệt nếu bạn phải tự xây dựng website.

Sách cũng đề cập đến cách tự làm usability testing  và thiết kế để đáp ứng accessibility.

Don't Make Me Think!

Đừng Bắt Tôi Suy Nghĩ!

Nếu bạn chỉ có thể nhớ một nguyên tắc duy nhất về web usability, hãy nhớ lấy nguyên tắc này.

Đừng Bắt Tôi Suy Nghĩ!

Hay nói cách khác, khi người dùng nhìn vào web/app, tất cả mọi thứ đều rõ ràng, hiển nhiên, không cần phải giải thích.

Người dùng đánh giá mức độ dễ sử dụng (usability) của web/app bằng công sức bỏ ra khi sử dụng web/app đó. Quá nhiều công sức = khó sử dụng.

Có thể phân loại nỗ lực người dùng bỏ ra thành ba nhóm chính:

1. Visual load (thị giác)

Ấn tượng đầu tiên của người dùng về web/app. Càng nhiều thông tin, hình ảnh, màu sắc thì người dùng càng mất nhiều thời gian tìm cái mình cần.

Nỗ lực: trung bình.

Quá nhiều thông tin dư thừa, kích thước font chữ quá nhỏ, tương phản kém, dùng quá nhiều màu sắc, quảng cáo quá mức

Tất cả đều nổi bật = không có gì nổi bật được hết.

2. Cognitive load  (suy nghĩ)

Kế đến, người dùng sẽ phải suy nghĩ chức năng mình cần nằm ở đâu trong web/app. Đừng buộc người dùng phải suy nghĩ quá nhiều (don’t make me think!), vì đây là hoạt động cần nhiều nỗ lực nhất.

Nỗ lực: cao.

Cấu trúc thông tin không rõ ràng, dùng từ ngữ chuyên môn/khó hiểu, không tận dụng các tiêu chuẩn sẵn có (cố sáng tạo lại bánh xe), biểu tượng không rõ ý nghĩa

3. Motor load (hành động)

Đây là hoạt động cần ít nỗ lực nhất, người dùng chỉ cần nhấn/chạm vào chức năng mình cần. Cần tận dụng tối đa để giảm thiểu nỗ lực suy nghĩ bên trên.

Nỗ lực: thấp.

Nút nhấn quá nhỏ (đặc biệt trên mobile), không cho phép quay lại/không dùng chức năng Quay lại của Android/iOS.

Nút/chức năng Quay lại (Back) là không thể thiếu được

VIMM model

Tiki.vn Brochure

tiki.vn sử dụng quá nhiều màu sắc chói lọi, quá nhiều chữ, banner 2 bên quá nhỏ, tất cả thông tin sale đều muốn nổi bật, giống brochure siêu thị hơn là web ecommerce. Chưa kể chữ nhiều vô số & nhỏ như kiến.

amazon.com nhìn gọn hơn rất nhiều, rất ít chữ. Mặc dù quảng cáo rất nhiều, nhưng được chia nhỏ & xen kẻ với những cái người dùng cần. Đặc biệt, các thông tin quảng cáo rất liên quan đến những cái mình đã từng mua (ordered), hoặc có ý định mua (wishlist/history).

Momo.vn - Câu chuyện về nút nhấn

Chỉ một màn hình mua thẻ cào, momo.vn dùng 5 màu, 3 loại nút khác nhau: xám, trông như disable (Hướng dẫn, Gởi thẻ nạp), xanh dương (SAO CHÉP, Xem tất cả các thẻ đã mua), hồng (Nạp ngay), xanh lá (mã giao dịch), nút màu vàng (KHẢO SÁT NGAY), nút màu hồng (Màn hình chính)

Thiết kế Bảng Quảng cáo

Cách người dùng lướt web

  • Ngoại trừ web/app tin tức, wiki, hầu hết người dùng đều chỉ xem lướt qua (scan/skim) để tìm cái mình cần chứ không mất thời gian đọc hết từng câu từng chữ.
  • Tiếp theo, người dùng sẽ nhấn vào cái gần nhất (satisficing ) với cái mình tìm, chứ không so sánh tất cả các lựa chọn. Nếu không đúng thì nhấn nút Quay lại.
  • Chiến lược phần lớn người dùng là thử và sai (trial & error), chứ không đọc hướng dẫn sử dụng của web/app.

Thiết kế Bảng Quảng cáo

Do đó, designer nên thiết kế web như một Bảng Quảng cáo (billboard) để giúp người dùng tìm kiếm và định hướng. Bên dưới là một số gợi ý:

1. Sử dụng các Tiêu chuẩn (conventions)

Designer thường có xu hướng ngại sử dụng các tiêu chuẩn, bởi tâm lý cho rằng chúng không “sáng tạo”. Do đó thường dẫn đến việc designer thường cố “phát minh lại bánh xe“.

Ngày nay người dùng tiếp xúc với vô số sản phẩm, nếu không có các tiêu chuẩn thì không ai có thể nhớ cách sử dụng được tất cả mọi thứ.

Cứ hình dung mỗi xe hơi có một cách điều khiển khác nhau: vô lăng, joystick, màn hình cảm ứng, game controller,… thì sẽ ra sao

Do đó, các tiêu chuẩn sẽ làm giảm tải cho người dùng (cognitive load), không phải học lại tất cả mọi thứ: vị trí menu, nút nhấn, màu sắc liên kết, hộp tìm kiếm,…

Nếu bạn không phải Apple, đừng tìm cách thiết kế lại các tiêu chuẩn

Clear Todos ($4.99) có các thao tác rất sáng tạo, nhưng không theo chuẩn, nên rất khó nhớ để sử dụng.

Dĩ nhiên bạn vẫn nên sáng tạo, tuy nhiên cần nhớ cân bằng giữa sáng tạo và mức độ dễ sử dụng.

2. Bố cục Rõ ràng (visual hierarchy)

  • Có chính/phụ rõ ràng: nội dung quan trọng thì tiêu đề/hình ảnh có kích thước lớn hơn
  • Những thứ có liên quan thì gần nhau (proximity): menu nằm phía trên, ý kiến nằm cột bên phải
  • Nhóm những thứ liên quan lại (common region): có đường phân cách giữa các nội dung

Gestalt Psychology

3. Giảm tối thiểu Nhiễu (signal-to-noise ratio)

Product/Marketing/Sales manager thường có xu hướng muốn càng nhiều thông tin nổi bật càng tốt. Nhiều thông tin nổi bật = không có gì nổi bật hết.

  • Shouting. Banner nào cũng muốn mình nổi bật hơn tất cả.
  • Disorganization. Lỗi này ít gặp hơn, thông tin không được ngay hàng thẳng lối, không được nhóm lại. Tuy nhiên vẫn thường thấy ở các web nghiệp dư, tự code.
  • Clutter. Thường gặp nhất ở trang chủ, có quá nhiều thông tin. Nếu tổ chức không tốt, sẽ dẫn đến tình trạng rối tinh rối mù.

Xem ví dụ #technicolor bên trên.

4. Cho thấy cái gì có thể Nhấn được (clickable)

Các thành phần có thể tương tác/nhấn được trên web/app cần rõ ràng, thống nhất.

Xem ví dụ #clickmenot bên trên.

5. Thiết kế để người dùng có thể lướt nhanh (design for scan)

  • Nên dùng nhiều headings để người xem có thể lướt qua nội dung.
  • Nên dùng bullets khi có thể.
  • Không nên viết một đoạn văn quá dài, trừ phi là tiểu thuyết/tin tức/wiki (long-form readings).
  • Làm nổi bật từ khoá. Nhưng đừng lạm dụng. Nên highlight <10% nội dung.
Web Navigation 101

Web Navigation 101

Người dùng có 2 cách để khám phá web/app: tìm kiếm & duyệt (search & browse).

Nội dung càng nhiều thì người dùng có xu hướng tìm kiếm nhiều hơn. Dễ thấy nhất là phần lớn người dùng đều Google chứ ít khi lưu lại trang web.

Trên trang này, menu để duyệt, và chức năng tìm kiếm trong menu

Đối với các web/app thương mại điện tử, cách hiệu quả nhất là tìm kiếm, vì có quá nhiều sản phẩm.

Duyệt (browse)

  • Menu/danh sách cần cho người dùng biết mình đang ở đâu
  • Cần có breadcrumb để người dùng có thể quay lại trang trước
  • Tránh để người dùng lạc đường do thay đổi cấu trúc/vị trí menu/danh sách.

tiki.vn

Trang chủ > Apple, chọn iPhone sẽ dẫn đến một breadcrumbs hoàn toàn khác Trang chủ > Điện thoại – Máy Tính Bảng > Điện thoại Smartphone > Apple

amazon.com

Khi chuyển sang Apple shop, sẽ có một hệ thống menu và breadcrumbs phụ, chỉ liệt kê các sản phẩm của Apple: Apple > iPhones > All models

  • Dùng từ ngữ đơn giản, vì chức năng này quá quen thuộc, không cần giải thích nhiều.
  • Nên có nút xoá tất cả.
  • Nên gợi ý nếu có thể.
Usability Testing

Usability Testing

Chỉ có một cách để biết web/app của bạn có hoạt động như thiết kế hay không: usability testing.

Quá ít và Quá trễ

Thường thì công ty ít khi thực hiện usability test, hoặc chỉ làm 1 lần vào cuối dự án. Các lí do thường là:

Lí doThực tế
Không đủ thời gianChỉ 1 buổi/tháng là đủ.
Test sẽ giúp tiết kiệm việc đập đi làm lại.
Không đủ ngân sáchSố tiền bỏ ra để tuyển tester sẽ rẻ hơn thời gian developer/designer bỏ ra sửa lại web/app.
Không có chuyên mônUsability testing rất dễ thực hiện.
Ai cũng có thể làm được, không cần thuê chuyên gia.
Không có công cụ/labChỉ cần có một chỗ ngồi,
và camera quay lại thao tác của người dùng.
Những người quan sát có thể xem livestream.
Không có vấn đề về usabilityVì designer/developer đã quá quen thuộc.
Do đó thường không thể nhìn ra vấn đề về usability.

Do-It-Youself Testing

Bạn có thể hoàn toàn tự thực hiện mà không cần phải thuê chuyên gia. Nên nhớ:

  • Có test thì mới phát hiện được vấn đề
  • Test 1 người vẫn hơn là không test
  • Test lúc bắt đầu dự án sẽ tốt hơn lúc sắp xong

Rocket Surgery Made Easy 

Kịch bản, Checklist, Hướng dẫn cho người quan sát 

How to Recruit Participants for Usability Studies 

MụcDo-It-Yourself Testing
Thời gianMột buổi sáng/tháng.
Nên cố định một thời gian cụ thể,
càng nhiều người quan sát càng tốt.
Tần suấtTrong suốt thời gian dự án
Số tester3 người cho một lần
Khuyến khích người dùng nói lên suy nghĩ.
Tiêu chí testerKhông cần phải giống 100% target audience.
Cần lưu ý background để so sánh.
Tần suất test quan trọng hơn.
Test cái gìĐưa ra các chức năng của web/app.
VD: tìm một sản phẩm bằng cách browse
Không hướng dẫn, gợi ý.
Nên để tester tự tìm/khám phá.
Địa điểmTại nơi làm việc.
Người quan sát sẽ xem livestream.
Quan sátCàng nhiều người trong dự án càng tốt.
Báo cáoMỗi người quan sát ghi chú 3 vấn đề quan trọng nhất.
Sau đó team sẽ so sánh ghi chú với nhau.
Và quyết định cần sửa cái gì trước.
Mục tiêuPhát hiện các vấn đề nghiêm trọng nhất.
Cố gắng sửa trước lần test tiếp theo.
Xem thêm
100 Things Every Designer Needs to Know about People
Design
The Design of Everyday Things
Design
The pocket Universal Principles of Design
Design
Seductive Interactive Design
Design