Cake Admin profile image Cake Admin

The Elements of User Experience: User-Centered Design for the Web and Beyond

Cuốn sách là một hướng dẫn chi tiết về quá trình thiết kế trải nghiệm người dùng được chia thành 5 phần chính, từ việc định rõ chiến lược và mục tiêu kinh doanh ban đầu cho đến việc xây dựng giao diện người dùng cuối cùng.

The Elements of User Experience: User-Centered Design for the Web and Beyond

Bài học tâm đắc

Bạn được giới thiệu một quy trình chi tiết về cách thiết kế trải nghiệm người dùng (UX) cho sản phẩm, trang web hoặc ứng dụng. Quy trình này được chia thành 5 lớp: Chiến lược (Strategy), Phạm vi (Scope), Cấu trúc (Structure), Khung xương (Skeleton) và Bề mặt (Surface). Cuốn sách giúp bạn hiểu rõ quy trình thiết kế UX và cách các phần tử khác nhau trong mỗi phần hoàn thiện và tương tác với nhau để tạo ra trải nghiệm người dùng tốt nhất.

💡
Chiến lược (Strategy): Chiến lược UX là quá trình xác định mục tiêu của sản phẩm hoặc dịch vụ và cách nó sẽ đáp ứng nhu cầu của người dùng.
💡
Phạm vi (Scope): Phạm vi UX xác định những tính năng và chức năng nào sẽ được bao gồm trong sản phẩm hoặc dịch vụ.
💡
Cấu trúc (Structure): Cấu trúc UX là cách tổ chức thông tin và nội dung của sản phẩm hoặc dịch vụ để người dùng có thể dễ dàng tìm thấy và sử dụng những gì họ cần.
💡
Khung xương (Skeleton): Khung xương UX là bố cục của màn hình và các yếu tố giao diện người dùng khác.
💡
Bề mặt (Surface): Bề mặt UX là giao diện trực quan của sản phẩm hoặc dịch vụ, bao gồm đồ họa, màu sắc và kiểu chữ.

Khám phá

Hãy mở để xem thêm những nội dung trong quyển sách mà bạn quan tâm nhé!

💡 Chiến lược (Strategy) ⬇️


Chiến lược UX là quá trình xác định mục tiêu của sản phẩm hoặc dịch vụ và cách nó sẽ đáp ứng nhu cầu của người dùng. Đây là bước quan trọng nhất trong quá trình thiết kế UX, vì nó xác định hướng đi cho toàn bộ dự án.

Khi xây dựng chiến lược UX, cần cân nhắc các yếu tối sau:

1. Nhu cầu người dùng: Các nhà thiết kế UX cần hiểu nhu cầu và mong muốn của người dùng để tạo ra một sản phẩm hoặc dịch vụ đáp ứng nhu cầu của họ. Điều này có thể được thực hiện bằng cách sử dụng các phương pháp nghiên cứu như phỏng vấn, khảo sát và phân tích dữ liệu.

Amazon đã sử dụng nghiên cứu người dùng để hiểu nhu cầu của người mua sắm trực tuyến. Họ nhận thấy rằng người mua sắm muốn có thể tìm thấy sản phẩm họ đang tìm kiếm một cách dễ dàng, so sánh giá cả của các sản phẩm tương tự và mua hàng một cách an toàn. Amazon đã sử dụng thông tin này để phát triển các tính năng như tìm kiếm nâng cao, so sánh giá cả và thanh toán an toàn.

2. Phân tích bối cảnh: Các nhà thiết kế UX cần xem xét các sản phẩm và dịch vụ tương tự trên thị trường để hiểu những gì đang hoạt động và những gì cần cải thiện. Điều này bao gồm xem xét các yếu tố như thị trường mục tiêu, đối thủ cạnh tranh, và các xu hướng trong ngành.

Netflix đã sử dụng phân tích cạnh tranh để hiểu cách các dịch vụ phát trực tuyến khác hoạt động. Họ nhận thấy rằng các dịch vụ này cung cấp một thư viện phim và chương trình truyền hình rộng lớn, cũng như các tính năng như xếp hạng và đề xuất. Netflix đã sử dụng thông tin này để phát triển các tính năng tương tự, chẳng hạn như thư viện phim và chương trình truyền hình khổng lồ, xếp hạng và đề xuất.

3. Xác định mục tiêu (Succes metrics): Các mục tiêu của tổ chức có thể bao gồm lợi nhuận, tăng trưởng thị phần hoặc cải thiện lòng trung thành của khách hàng. Chiến lược UX nên phù hợp với các mục tiêu này để đảm bảo rằng sản phẩm hoặc dịch vụ sẽ thành công. Mục tiêu này phải cụ thể, đo lường được, có thể đạt được, phù hợp và có thời hạn.

Ví dụ, một mục tiêu cho một trang web thương mại điện tử là tăng tỷ lệ chuyển đổi của trang web lên 20% trong vòng 12 tháng. Mục tiêu này cụ thể, đo lường được, có thể đạt được, phù hợp và có thời hạn.

💡 Phạm vi (Scope) ⬇️

Tác giả mô tả phạm vi UX là "một tuyên bố về những gì sẽ được bao gồm và những gì sẽ không được bao gồm trong sản phẩm hoặc dịch vụ.". Theo đó, phạm vi UX có thể được chia thành hai phần:

1. Xác định những gì có thể làm: bao gồm tính năng và chức năng đáp ứng nhu cầu của người dùng và phù hợp với mục tiêu của sản phẩm hoặc dịch vụ.

- Tính năng: Tính năng là những thứ mà sản phẩm hoặc dịch vụ có thể làm. Ví dụ, một trang web thương mại điện tử có thể có tính năng cho phép người dùng tìm kiếm sản phẩm, thêm sản phẩm vào giỏ hàng và thanh toán.

- Chức năng: Chức năng là cách thức hoạt động của các tính năng. Ví dụ, chức năng của tính năng tìm kiếm sản phẩm có thể là cho phép người dùng tìm kiếm sản phẩm theo danh mục, thương hiệu hoặc giá cả.

2. Xác định các giới hạn: bao gồm việc xác định các tính năng và chức năng nào sẽ không được bao gồm trong sản phẩm hoặc dịch vụ.

Phạm vi UX có thể bị hạn chế bởi các yếu tố như sự thay đổi của nhu cầu của người dùng, xu hướng công nghệ, hay các rào cản của doanh nghiệp như ngân sách, thời gian.

Một ứng dụng di động có thể có phạm vi UX bao gồm các tính năng như xem danh sách việc cần làm, tạo danh sách và nhắc nhở. Tuy nhiên, nếu ứng dụng được phát hành trên nhiều nền tảng di động, chẳng hạn như Android và iOS, thì phạm vi UX cần được điều chỉnh để phù hợp với các yêu cầu của từng nền tảng.

3. Đánh giá ưu tiên (Prioritization)

Prioritization là quá trình sắp xếp thứ tự ưu tiên cho các tính năng và chức năng của sản phẩm hoặc dịch vụ. Prioritization giúp tránh "scope creep", tình trạng phạm vi của sản phẩm hoặc dịch vụ bị mở rộng quá mức, dẫn đến việc vượt quá ngân sách và thời gian. Bằng cách ưu tiên các tính năng và chức năng quan trọng nhất, các nhà thiết kế có thể tránh được scope creep.

Ví dụ, một trang web thương mại điện tử có thể có phạm vi UX bao gồm các tính năng như tìm kiếm sản phẩm, thêm sản phẩm vào giỏ hàng và thanh toán trực tuyến. Tuy nhiên, nếu sử dụng phương pháp prioritization dựa trên giá trị, các nhà thiết kế có thể xác định rằng tính năng tìm kiếm sản phẩm là quan trọng nhất. Tính năng này sẽ được ưu tiên phát triển trước tiên.

💡 Cấu trúc (Structure) ⬇️

Cấu trúc UX là cách tổ chức thông tin và tương tác của sản phẩm hoặc dịch vụ để người dùng có thể dễ dàng tìm thấy và sử dụng những gì họ cần. Cấu trúc tốt sẽ giúp người dùng hiểu được sản phẩm hoặc dịch vụ và cách sử dụng nó.

Cấu trúc UX bao gồm hai thành phần chính: Thiết kế tương tác (Interaction Design) và Cấu trúc thông tin (Information Architecture).

1. Information architecture: Information architecture là quá trình tổ chức thông tin trong một sản phẩm hoặc dịch vụ. Information architecture tập trung vào việc tạo ra một hệ thống thông tin dễ tìm kiếm, dễ hiểu và dễ sử dụng.

Kiến trúc thông tin bao gồm nhiều thành phần khác nhau, bao gồm:

- Phân loại thông tin: Phân loại thông tin là quá trình tổ chức thông tin theo các nhóm có liên quan.

- Tiêu đề và mô tả: Tiêu đề và mô tả giúp người dùng hiểu được nội dung của thông tin.

- Cấu trúc trang web: Cấu trúc trang web giúp người dùng điều hướng thông tin một cách dễ dàng.

Wikipedia là một trang web bách khoa toàn thư mở, với hàng triệu bài viết về các chủ đề khác nhau. Trang web được tổ chức theo một hệ thống phân cấp, với các trang tổng quan ở cấp cao nhất và các trang chi tiết hơn ở cấp thấp hơn. Các trang tổng quan được liên kết với nhau bằng các liên kết nội bộ, giúp người dùng dễ dàng điều hướng thông tin.

2. Interaction design: là quá trình thiết kế cách thức người dùng tương tác với sản phẩm hoặc dịch vụ. Interaction design tập trung vào việc tạo ra các trải nghiệm người dùng dễ hiểu, dễ sử dụng và hiệu quả. Ví dụ, cách thức người dùng tìm kiếm sản phẩm hay cách thức người dùng thêm sản phẩm vào giỏ hàng.

Thiết kế tương tác bao gồm nhiều thành phần khác nhau, bao gồm:

- Giao diện (Interface): Giao diện là cách thức sản phẩm hoặc dịch vụ hiển thị thông tin và chức năng cho người dùng. Giao diện cần rõ ràng, dễ hiểu và hấp dẫn.

- Tương tác (Interaction): Tương tác là cách thức người dùng tương tác với sản phẩm hoặc dịch vụ. Tương tác cần dễ sử dụng, phản hồi và hiệu quả.

- Luồng (Flow): Luồng là cách thức người dùng di chuyển qua sản phẩm hoặc dịch vụ. Luồng cần rõ ràng, mạch lạc và dễ hiểu.

- Hỗ trợ (Support): Hỗ trợ là cách thức người dùng nhận được trợ giúp khi cần thiết. Hỗ trợ cần dễ tìm, dễ hiểu và hiệu quả.

Giao diện tìm kiếm của Google đơn giản và dễ sử dụng, với một hộp tìm kiếm và một nút tìm kiếm. Người dùng dễ dàng tìm thấy thông tin họ cần mà không cần phải học cách sử dụng các tính năng phức tạp.

💡 Khung xương (Skeleton) ⬇️

Khung xương UX là một bản phác thảo thô của giao diện người dùng, bao gồm bố cục của các màn hình và các yếu tố giao diện người dùng khác.

1. Thiết kế giao diện (Interface Design): là cách các yếu tố giao diện người dùng được hiển thị và tương tác với nhau. Thiết kế giao diện bao gồm các yếu tố như bố cục (layout), màu sắc (color), phông chữ (font), hình ảnh (image) và hiệu ứng hình ảnh (animations).

Trang web Amazon sử dụng bố cục lưới để sắp xếp các sản phẩm trong một danh mục. Bố cục này giúp người dùng dễ dàng tìm thấy các sản phẩm họ đang tìm kiếm. Hay Ứng dụng TikTok sử dụng hiệu ứng hình ảnh để tạo ra các video thú vị. Hiệu ứng này giúp người dùng dễ dàng tương tác với các video.

2. Thiết kế điều hướng (Navigation Design): là cách người dùng di chuyển qua một sản phẩm hoặc dịch vụ. Thiết kế điều hướng bao gồm các yếu tố như menu, thanh điều hướng (navigation bar), liên kết và đường dẫn (links & breadcrumbs).

Trang web YouTube sử dụng menu để cung cấp cho người dùng quyền truy cập vào các tính năng như tìm kiếm, đăng ký và lịch sử phát lại. Còn ứng dụng Facebook sử dụng thanh điều hướng để cung cấp cho người dùng quyền truy cập vào các tính năng như tin tức, bạn bè và nhóm.

3. Thiết kế thông tin (Information Design): là cách thông tin được trình bày và tổ chức. Thiết kế thông tin bao gồm các yếu tố như cấu trúc (structure), nhãn chú thích (labels), biểu tượng (icons) và đồ họa (graphics).

Ứng dụng Google Maps sử dụng nhãn chú thích rõ ràng để giải thích các tính năng của ứng dụng, hoặc đồ họa để hiển thị vị trí của người dùng trên bản đồ.

💡 Bề mặt (Surface) ⬇️

Bề mặt UX đề cập đến những gì người dùng nhìn thấy và tương tác khi sử dụng một sản phẩm hoặc dịch vụ.

1. Bố cục: Bố cục là cách các yếu tố của bề mặt UX được sắp xếp trên màn hình. Một bố cục tốt sẽ giúp người dùng dễ dàng nhìn thấy và hiểu thông tin.

Các yếu tố cụ thể cần xem xét khi thiết kế bố cục bao gồm sự tương phản, khoảng trống, sự nhấn mạnh.

Ví dụ minh họa là trang web Amazon sử dụng bố cục lưới để sắp xếp các sản phẩm trong một danh mục. Bố cục này giúp người dùng dễ dàng tìm thấy các sản phẩm họ đang tìm kiếm.

2. Màu sắc: Màu sắc có thể được sử dụng để tạo ra cảm xúc và thu hút sự chú ý. Các nhà thiết kế UX nên sử dụng màu sắc một cách thận trọng để đảm bảo rằng chúng phù hợp với mục tiêu của sản phẩm hoặc dịch vụ.

Khi sử dụng màu sắc, cần xem xét các yếu tố như ý nghĩa màu sắc theo vắn hóa, sự tương phản của màu sắc và trải nghiệm đọc khi kết hợp các màu sắc khác nhau.

Ví dụ, trang web Airbnb sử dụng màu sắc tươi sáng để tạo ra một trải nghiệm thú vị, hay ứng dụng Spotify sử dụng màu sắc để đại diện cho các thể loại âm nhạc khác nhau.

3. Kiểu chữ: là cách văn bản được hiển thị trên màn hình. Các nhà thiết kế UX nên sử dụng kiểu chữ dễ đọc và dễ hiểu. Các yếu tố về kiểu chữ cần cân nhắc như kiểu chữ có dễ đọc không, tạo ra sự tương phản đủ để người dùng dễ dàng phân biệt các chữ cái và từ, hay các kiểu chữ nên được sử dụng nhất quán trong suốt sản phẩm không.

Trang web Wikipedia sử dụng phông chữ serif để tạo ra một cảm giác trang trọng. Trong khi đó, ứng dụng Duolingo sử dụng phông chữ lớn và dễ đọc để giúp người dùng học ngôn ngữ mới.

Tóm lại là

Cuốn sách "The Elements of User Experience: User-Centered Design for the Web and Beyond" là một hướng dẫn về quy trình thiết kế trải nghiệm người dùng (UX) được chia thành 5 tầng:

  1. Chiến Lược (Strategy): Xác định mục tiêu kinh doanh và nhu cầu của người dùng.
  2. Phạm Vi (Scope): Định rõ phạm vi sản phẩm và luồng công việc của người dùng.
  3. Cấu Trúc (Structure): Xây dựng cấu trúc tổng thể của sản phẩm và cách tổ chức thông tin.
  4. Khung xương (Skeleton): Thiết kế giao diện người dùng cuối cùng, bao gồm bố cục, màu sắc và hình ảnh.
  5. Bề ngoài (Surface): Tối ưu hóa giao diện và đảm bảo tính đáp ứng trên các thiết bị khác nhau.

Sách cung cấp hướng dẫn chi tiết về cách kết hợp chiến lược và thiết kế để tạo ra sản phẩm hoặc trang web hấp dẫn và hiệu quả cho người dùng.

Về tác giả

Jesse James Garrett là một chuyên gia hàng đầu trong lĩnh vực UX. Ông nổi tiếng với việc định nghĩa rõ ràng và cụ thể về quá trình thiết kế trải nghiệm người dùng và các yếu tố cơ bản liên quan. Ông đã có những đóng góp đáng kể vào lĩnh vực này và được ngưỡng mộ với sự hiểu biết sâu sắc và kiến thức phong phú về UX.

Cake Admin profile image Cake Admin