The Design of Everyday Things

Thuật ngữ

• Affordance: đặc tính cho biết hành động có thể tương tác. Thiết kế tốt sẽ cho thấy rõ những hành động có thể tương tác.
  
  Cửa kính cho phép nhìn xuyên qua.
• Anti-affordance: đặc tính cho biết hành động không thể tương tác.
  
  Cửa kính không cho phép đi xuyên qua.
  Tuy nhiên, đặc tính này không rõ ràng, khiến nhiều người đâm đầu vào.
• Signifier: dấu hiệu cho biết hành động có thể thực hiện, nơi có thể thực hiện hành động.
  
  Biển báo “Cẩn thận! Cửa tự động mở!”
• Mapping: thiết kế và trình bày các nút điều khiển tương ứng với đối tượng cần điều khiển. Nguyên tắc chủ đạo trong mapping là Gestalt Proximity : nhóm những chức năng tương tự gần nhau, nút điều khiển nằm gần đối tượng.
• Feedback: phản hồi về kết quả của hành động. Đặc biệt quan trọng trong thiết kế web/ứng dụng.
  • Phản hồi cần phải tức thời, vừa đủ. Quá nhiều sẽ khiến người dùng bỏ qua các phản hồi quan trọng.
  • Tất cả các hành động đều nên có phản hồi, nhưng không gây phiền nhiễu.
  • Cần có ưu tiên các thông tin phản hồi, chỉ tập trung vào các thông tin quan trọng.
• Conceptual models: là mô hình đơn giản hoá, giải thích cách hoạt động của sản phẩm.
  
  Biểu tượng file folder là mô hình mô phỏng tài liệu và phong bì để người dùng dễ hình dung.
  • Mental models: mô hình hoạt động của mọi thứ được đơn giản hoá trong đầu người sử dụng. Tuỳ thuộc vào mức độ thành thạo của người dùng, mà mô hình này sẽ khác nhau. Hầu hết các vấn đề đều xuất phát từ sự khác biệt về mental model của designer và user.
  • System image: là sự kết hợp các thông tin từ sản phẩm (sản phẩm+hướng dẫn sử dụng+thông tin trên mạng+…) để dựng lên mô hình của người dùng.

• Discoverability: hành động nào có thể thực hiện được? làm thế nào để thực hiện?
  
  Cửa này mở thế nào? kéo? đẩy? lùa? đứng chờ? nhấn nút?”
• Understanding: sản phẩm/ứng dụng này dùng thế nào? mấy cài đặt này có ý nghĩa gì? Đối với các sản phẩm phức tạp, discoverability & understanding thường cần phải có hướng dẫn sử dụng.
  
  iPhone: cài đặt Screen Time? tạm xoá bớt những ứng dụng ít dùng?
• Industrial design: thiết kế các sản phẩm đáp ứng nhu cầu người dùng
• Interaction design: chú trọng vào tương tác giữa người dùng và sản phẩm dựa trên các nguyên tắc tâm lý học, thiết kế, mỹ thuật nhằm tạo trải nghiệm thú vị cho người dùng sản phẩm.
• Experience design: thiết kế tổng thể từ sản phẩm, quy trình, dịch vụ nhằm tạo trải nghiệm tốt nhất cho người dùng.
  
  iPhone (sản phẩm) > App Store (dịch vụ) > Apple Store (sản phẩm, quy trình) > Customer Service (dịch vụ)
• Human-centered design: triết lý thiết kế lấy người dùng làm trọng tâm, cần hiểu rõ nhu cầu của họ và thiết kế sản phẩm đáp ứng được nhu cầu này.
• Skeuomorphic: sử dụng những hình ảnh quen thuộc để thể hiện công năng, mặc dù những sản phẩm này không còn dùng nữa.
  
  bìa thư (email), đĩa mềm (save), tai nghe điện thoại (call)

7 Nguyên lý Thiết kế

Hầu hết các vấn đề trong thiết kế đều do engineer/designer thiếu kiến thức về các nguyên tắc thiết kế cơ bản trong tương tác. Engineer thường chỉ tập trung vào khía cạnh kỹ thuật và thiết kế theo logic (của mình), Designer là người phải hiểu rõ và cân bằng cả khía cạnh kỹ thuật và tâm lý của người dùng.

Mô hình 7 Bước Hành động

1. Goal: xác định mục tiêu cần thực hiện.
   
   VD: giảm cơn đói.
2. Plan: lên kế hoạch để thực hiện mục tiêu trên.
   
   VD: nấu mì hay đặt Grab.
3. Specify: các hành động cụ thể cần thực hiện.
   
   VD: quyết định đặt Grab.
4. Perform: thực hiện các hành động trên.
   
   VD: mở app, tìm quán ăn, tìm món, đặt hàng, nhận hàng.
5. Perceive: ghi nhận kết quả.
   
   VD: nhận cháo gà thay vì cơm gà.
6. Interpret: diễn giải kết quả.
   
   VD: kiểm tra app thì thấy đặt nhầm.
7. Compare: so sánh với mục tiêu xem đã đạt chưa.
   
   VD: vẫn còn đói sau khi ăn cháo.

Mô hình này có thể bắt đầu từ trên (goal-driven, đói bụng) hoặc từ dưới (data or event-driven, gặp quán ăn mới trên đường đi). Đối với các sản phẩm cải tiến (incremental), các thay đổi chủ yếu ở các bước thực hiện (execution) và đánh giá (evaluation). Các sản phẩm cấp tiến (radical) thường bắt đầu bằng việc phân tích mục tiêu (goal) thực sự là gì? (root cause analysis).

Mô hình 3 Cấp độ Xử lý Thông tin

1. Visceral: ấn tượng ban đầu của sản phẩm, mức độ hài hoà về màu sắc/bố cục của giao diện. Designer cần sử dụng tính thẩm mỹ (aesthetics) để thu hút sự chú ý của người dùng.
   
   Bình chữa cháy Samsung Firevase
   
2. Behavioral: tương tác của người dùng khi sử dụng sản phẩm/ứng dụng, mức độ dễ sử dụng (usability). Ở đây, yếu tố quan trọng nhất designer cần sử dụng là feedback cho tất cả hành động của người dùng.
   
   Khi nhấn nút trên điện thoại, nên có animation/trạng thái/âm thanh để cho biết người dùng đã nhấn nút. Con người có thể phát hiện độ trễ giữa hình ảnh và âm thanh khi độ trễ ~ 200 ms. Do đó tiêu chuẩn feedback là ~ 100 ms.
3. Reflective: đánh giá tổng thể của người dùng dựa trên kinh nghiệm sử dụng, mức độ dễ sử dụng, chức năng, thẩm mỹ và quyết định có tiếp tục sử dụng sản phẩm/ứng dụng hay không.
   
   Samsung (aesthetics & featuristis) vs. Apple (aesthetics & usability)

7 Nguyên tắc Thiết kế Nền tảng

1. Conceptual Models: mô hình hoạt động của sản phẩm/ứng dụng. Mô hình của designer càng gần với mô hình của người dùng thì sản phẩm càng thân thiện và dễ sử dụng. Có tác động lên tất cả các bước.
2. Discoverability: hành động nào có thể thực hiện được? làm thế nào để thực hiện? Dựa vào các nguyên tắc bên dưới: affordances, signifiers, mappings & constraints.
3. Affordances: đặc tính cho biết hành động có thể tương tác. Thiết kế tốt sẽ cho thấy rõ những hành động có thể tương tác.
4. Signifiers: dấu hiệu cho biết hành động có thể thực hiện, nơi có thể thực hiện hành động. Đặc biệt trong thiết kế web/ứng dụng, vì không có affordances.
5. Mappings: thiết kế và trình bày các nút điều khiển tương ứng với đối tượng cần điều khiển. Nguyên tắc chủ đạo trong mapping là Gestalt Proximity: nhóm những chức năng tương tự gần nhau, nút điều khiển nằm gần đối tượng.
6. Constraints: giới hạn các hành động có thể thực hiện giúp người sử dụng dễ quyết định hơn.
   
   VD: tay nắm cửa có thể kéo/đẩy, một tấm biển thì chỉ có thể đẩy
   VD: chỉ cho phép nạp tiền một số mệnh giá cố định
7. Feedback: phản hồi về kết quả/trạng thái của hành động. Đặc biệt quan trọng trong thiết kế web/ứng dụng.

Kiến thức trong đầu và bên ngoài

Mỗi ngày chúng ta sử dụng/tiếp xúc với vô số sản phẩm, ứng dụng. Vậy làm thế nào để biết cách sử dụng tất cả mọi thứ?

1. Kết hợp kiến thức trong đầu và kiến thức bên ngoài. Chúng ta không cần nhớ tất cả mọi thứ, mà chỉ cần nhớ những điểm quan trọng. Chúng ta sử dụng vô số thứ để hỗ trợ trí nhớ: ghi chú, danh sách, nhắc nhở, lịch hẹn,…
   
   Không cần nhớ vị trí mệnh giá tiền ở góc nào, mà chỉ cần nhìn qua màu sắc (USD cần có mệnh giá ở các góc vì màu sắc tương tự nhau)
   
   
   Để nhớ trả một quyển sách, cách tốt nhất là để chìa khoá xe lên quyển sách
2. Không cần chính xác. Ít khi chúng ta phải nhớ chính xác, mà thường kết hợp hai loại kiến thức.
   
   Không cần phải nhớ vị trí của tất cả các chữ trên bàn phím, vì bạn có thể nhìn & gõ từng phím.
   
3. Có các giới hạn (constraints). Hầu hết các mọi thứ chúng ta tiếp xúc hàng ngày đều do con người tạo ra, và hầu hết đều có những giới hạn hành động có thể thực hiện.
   
   Nút tròn > xoay, công tắc đèn > bật/tắt, nắp > vặn, vít > xoay
4. Có các tiêu chuẩn (convention). Tương tự, hầu hết đều tuân theo một số tiêu chuẩn nhất định.
   
   Xoay theo chiều kim đồng hồ để vặn chặt, ngược lại để mở; đầu cắm sạc của hầu hết sản phẩm đều có thiết kế để đảm bảo không nhầm, hoặc có nhầm cũng không sao (cổng lightning/USB-C)

Trí nhớ của con người không chính xác như máy tính, do đó designer không nên buộc người dùng phải nhớ chính xác tất cả mọi thứ trong đầu, mà nên để chúng ở ngoài thông qua constraints, signifiers, mappings.

Mật khẩu

Một trong những thiết kế bảo mật tệ nhất là mật khẩu, đây là kiến thức buộc phải để trong đầu, nhưng không ai có thể nhớ tất cả, chưa kể việc phải đổi mật khẩu thường xuyên, do đó nhiều người viết mật khẩu lên post-it và dán nó lên màn hình, biến nó thành kiến thức ở ngoài.

Trí nhớ Ngắn hạn (STM, short-term or working memory)

Chỉ tồn tại trong thời gian ngắn, vài giây, cần phải lặp đi lặp lại liên tục. Nghiên cứu hiện đại cho thấy ta chỉ có thể giữ trong đầu 4±1 thông tin cùng lúc.

Do vậy, không nên buộc người dùng phải nhớ các thông tin quan trọng khi đang thao tác, đặc biệt đối với các công việc cần phải có nhiều bước.

Ngoài ra, designer nên tận dụng nhiều giác quan khác nhau để truyền đạt thông tin: hình ảnh, âm thanh, rung,… để giảm tải lên STM.

Trí nhớ Dài hạn (LTM, long-term memory)

Trí nhớ dài hạn là các trí nhớ trong ngày, được củng cố thông qua giấc ngủ. Có thể xem thêm quyển Sao Chúng Ta Lại Ngủ để hiểu rõ thêm về quá trình này. Đây là kiến thức trong đầu của chúng ta.

• Episodic memory (trí nhớ về sự kiện, trung hạn). Đây là bộ nhớ lưu giữ các ký ức về sự kiện, bao gồm thời gian, địa điểm, nhân vật tham gia,… Bộ nhớ này được hình thành thông qua hippocampus (đồi hải mã).
• Semantic memory (trí nhớ ngữ nghĩa, dài hạn). Khi chúng ta ngủ, não sẽ tái hiện lại các ký ức ban ngày (episodic memory), tổng quát hoá và tích hợp vào mạng lưới kiến thức trước đó.
  Con người có xu hướng chỉ nhớ những thứ có ý nghĩa, có cấu trúc, mối liên hệ với các sự kiện, thông tin trước đó và bỏ qua những thông tin rời rạc.
• Procedure memory (trí nhớ cơ học, tự động). Khi bạn lặp đi lặp lại một hành động, chúng sẽ trở thành trí nhớ cơ học, nhờ vào mạng lưới basal ganglia.
  
  Đạp xe, đọc bảng cửu chương, nhấn Ctrl+S để lưu
  
  Designer nên tận dụng tối đa trí nhớ này bằng cách sử dụng các tiêu chuẩn sẵn có (standard, convention) sẵn có, đừng bắt người dùng học lại.

Kiến thức bên ngoài và Kiến thức trong đầu

Designer cần hiểu rõ ưu/nhược điểm của hai loại kiến thức này để có thiết kế phù hợp. Về cơ bản, người dùng sẽ dần chuyển kiến thức từ bên ngoài vào trong đầu. Do vậy, designer cần thiết kế linh động để có thể đáp ứng được nhiều cấp độ thành thạo khác nhau (novice/expert mode).

Tuy nhiên, với lượng thông tin ngày càng nhiều như hiện nay, con người chắc chắn sẽ ngày càng phụ thuộc vào kiến thức bên ngoài (google, wikipedia, smartphone). Vai trò của designer là khiến người dùng có thể truy cập các kiến thức này một cách nhanh chóng và hiệu quả nhất.

Natural Mapping

Một trong những phương pháp để giảm tải cho người dùng là natural mapping: vị trí các nút điều khiển có tương quan trực tiếp với vật cần điều khiển.

Giới hạn, Khám phá và Phản hồi

Giới hạn (constraints)

Ổ cắm, chìa khoá, pin là những vật dụng hàng ngày có những giới hạn vật lý (physical constraints), chỉ cho phép sử dụng theo một cách nhất định. Và ngày càng có nhiều giải pháp để bỏ các giới hạn này đi: chìa khoá cảm ứng từ xa, USB-C, sạc không dây,…

Đối với web/ứng dụng, designer có thể sử dụng nhiều cách giới hạn khác nhau: on/off, dropbox, slider, chiều dài chữ/số,…

Bên cạnh đó, các tiêu chuẩn (convention, standards) cũng là một hình thức giới hạn văn hoá (cultural constraints) giúp người dùng không cần phải học lại: ổ cắm/phích cắm, đi bên trái/phải,…

Bắt buộc (forcing function)

Là một hình thức giới hạn cực đoan nhất, thường áp dụng với các máy móc công nghiệp nguy hiểm.

Sử dụng Âm thanh

Designer thường tập trung vào các phản hồi bằng hình ảnh/nội dung, mà bỏ qua phản hồi âm thanh.

Lỗi người dùng? Không, Thiết kế Kém.

Một trong những phản ứng đầu tiên của engineer/designer khi người dùng gặp lỗi là: Tại sao không đọc hướng dẫn sử dụng?

Thay vì thế, designer nên tự hỏi: Tại sao có lỗi?

The Five Whys

Một trong những công cụ để phân tích nguyên nhân gốc (root cause analysis) của vấn đề, được phát minh bởi Sakichi Toyoda và được áp dụng trong quy trình chất lượng của Toyota. Nguyên tắc chung là tìm hiểu sâu hơn về nguyên nhân gây ra lỗi, không nhất thiết là chỉ 5 câu hỏi.

Errors: Slips & Mistakes

Để hiểu rõ về lỗi, cần có một cách phân loại vì mỗi loại lỗi sẽ có cách phòng ngừa khác nhau:

• Slips: những lỗi xảy ra do người dùng thao tác nhầm so với dự định. Xảy ra ở các bước thực hiện hành động, người thành thạo thường mắc lỗi này hơn người mới, vì các thao tác của họ đã thành thói quen, nên rất ít khi để ý đến hành động của mình.
  • Action-based: người dùng thực hiện một thao tác sai so với dự định.
    
    VD: lấy hộp sữa tươi rót ra ly, sau đó bỏ ly sữa vào tủ thay vì hộp sữa
    • Capture slips: khi hai quy trình tương tự nhau, chỉ khác nhau ở những bước cuối cùng.
      Đề phòng: nên tạo khác biệt ngay từ đầu.
    • Description-Similarity slips: các điều khiển khác nhau nên có hình dáng khác nhau, hoặc nhóm khác nhau.
    • Mode errors: đối với các thiết bị có nhiều mode khác nhau, mỗi mode có một cách điều khiển khác nhau.
      Đề phòng: nên tránh có nhiều mode khác nhau, hoặc thể hiện rõ ràng sự khác biệt giữa các mode.
  • Memory-lapse: người dùng quên thực hiện thao tác.
    Đề phòng: càng ít bước càng tốt; forcing function (rút thẻ ATM xong mới cho lấy tiền); luôn có thông tin rõ ràng về các bước trước đó.
    
    Quên bỏ hộp sữa tươi vào tủ
    Rút tiền ở ATM, sau đó quên thẻ
• Mistakes: là những lỗi xảy ra trong quá trình lên kế hoạch, các bước thực hiện đều chính xác, nhưng kế hoạch thì sai. Do không có hệ thống nào có thể dự đoán tất cả các tình huống xảy ra, do đó việc phòng ngừa lỗi triệt để rất khó.
  • Rule-based: chẩn đoán tình huống đúng, nhưng các bước thực hiện để khắc phục sai.
    Đề phòng: cung cấp đầy đủ các thông tin một cách trực quan về trạng thái hiện tại, nhằm giúp việc ra quyết định chính xác.
  • Knowledge-based: chẩn đoán sai tình huống, hoặc tình huống chưa từng xảy ra.
    Đề phòng: không có cách phòng ngừa, mà phụ thuộc hoàn toàn vào khả năng giải quyết vấn đề của người dùng.
  • Memory-lapse: quên trong các bước đặt mục tiêu, lên kế hoạch hoặc đánh giá.
    Đề phòng: luôn có thông tin rõ ràng về tình trạng hiện tại, hạn chế việc bắt người dùng phải nhớ thông tin ở các bước trước đó.

Checklist

Là công cụ tốt nhất trong việc giảm thiểu lỗi. Cách tốt nhất là một người đọc checklist, một người khác thực hiện.

Design for Errors

Như đã phân tích ở trên, “lỗi” trong quá trình sử dụng là không thể tránh khỏi. Do đó, thiết kế của sản phẩm/ứng dụng cần phải tính đến yếu tố này.

Thêm giới hạn (constraints)

Các nhóm chức năng khác nhau nên nằm xa nhau để hạn chế thao tác nhầm (slips). Các chức năng khác nhau cần phải trông khác nhau.

Cho phép undo

Đối với thiết kế web/ứng dụng, đây là phương pháp tốt nhất để giảm thiểu lỗi. Hoặc cho phép khôi phục lại sau khi xoá. VD: thùng rác.

Đối với các thao tác không thể undo, dùng forcing function để bắt người dùng xác nhận. VD: nhập tên ổ đĩa trước khi format.

Xác nhận và Thông báo lỗi

Về lý thuyết, xác nhận sẽ giảm thiểu lỗi. Nhưng trên thực tế, người dùng thường bỏ qua các thông báo xác nhận. Thay vì thông báo xác nhận, dùng các tính năng undo/khôi phục sẽ tốt hơn.

Design Thinking

Có rất nhiều công cụ của designer, nhưng có hai công cụ đặc biệt quan trọng: human-centered design và double-diamond design.

Mô hình double-diamond chia làm 4 bước, trong đó hai bước đầu tiên (discover/define) nhằm xác định đúng vấn đề, hai bước kế tiếp (develop/deliver) nhằm tìm đúng giải pháp.

Lồng bên trong mô hình này là mô hình HCD gồm 4 bước, có thể lặp lại khi kết thúc, tương ứng với 4 bước trong mô hình double-diamond:

• Research = Discover: quan sát người dùng trong môi trường của họ để hiểu rõ cách sử dụng sản phẩm.
• Insights = Define: xác định vấn đề.
• Ideation = Develop: đề ra càng nhiều giải pháp càng tốt, bất kể có điên đến mức nào đi nữa.
• Prototype = Deliver: phát triển prototype và thử nghiệm chúng.

Trong môi trường phức tạp ngày nay, để phát triển một sản phẩm tốt, cần sự kết hợp và góp ý từ tất cả các bên liên quan, từ nghiên cứu, thiết kế, cho đến chế tạo, sản xuất. Apple là một điển hình của mô hình này, tất cả các team có liên quan đều nằm chung một nhóm phát triển sản phẩm.