Giải thích 5 UX Elements trong thiết kế trải nghiệm người dùng

UX Element là một khái niệm quan trọng trong thiết kế trải nghiệm người dùng. Như xương sống của cả quy trình phát triển sản phẩm, mô hình 5 thành tố UX được xem như kim chỉ nam của các đội nhóm thiết kế muốn tạo ra một sản phẩm thông minh, thỏa mãn nhu cầu của người dùng. Trong bài viết ngày hôm nay, hãy cùng TELOS tìm hiểu về khái niệm này. 

Bài viết liên quan: 

• 4 Yếu tố UI Element bạn cần biết trong thiết kế giao diện 
• Bật Mí Lộ Trình Của UI/UX DESIGNER
• Xây Dựng Một Đội Ngũ Thiết Kế Và Lập Trình Trong Tổ Chức Với Công Cụ Figma Làm Trung Tâm

UX Element – 5 thành tố trong thiết kế UX

1. UX Design là gì?

Dành cho bạn nào chưa hiểu về khái niệm UX Design, ở đây mình xin giải thích ngắn gọn khái niệm này trước khi tìm hiểu về UX Element. UX Design (user experience design) là trải nghiệm mà một con người có được khi họ tương tác với một sản phẩm, một sự vật trong cuộc sống. Ví dụ, mọi trải nghiệm từ ghế ngồi, thức ăn, ánh sáng, chất lượng hình ảnh trong rạp phim đều là User Experience. 

Để hiểu rõ hơn. Mời bạn đọc bài viết Hé lộ sự khác biệt giữa UI UX design, bạn đã biết?!

UX Design là gì?

2. UX Element là gì?

Là một khía cạnh quan trọng trong trải nghiệm người dùng. UX Element bao gồm năm thành tố được xem là khuôn khổ phổ biến nhất trong thiết kế UX, được sử dụng để tạo ra các thiết kế thành công. Năm thành tố này bao gồm Strategy, Scope, Structure, Skeleton, Surface. 

5 thành tố UX

2.1. Tại sao lại có khái niệm này?

Mục tiêu của bất kỳ dự án thiết kế sản phẩm luôn là đảm bảo người dùng có thể trải nghiệm sản phẩm với một thái độ tích cực. Tuy nhiên thì, con đường từ ý tưởng ban đầu đến thành phẩm cuối cùng luôn gặp rất nhiều khó khăn. Để hoàn thành dự án, yêu cầu các nhà thiết kế giao diện phải đưa ra rất nhiều các quyết định phức tạp và chúng đều tác động đến trải nghiệm người dùng theo nhiều cách khác nhau.  

Ví dụ nhé, khi bạn thiết kế một website bán hàng, bạn cần suy nghĩ xem người tiêu dùng cuối (end user) thật sự muốn gì. Để người tiêu dùng cuối đi từ bước nhấp vào xem sản phẩm đến bước thanh toán. Yêu cầu bạn phải đưa ra rất nhiều quyết định lớn nhỏ để khiến khách hàng thanh toán sản phẩm đó. Quá trình này rất phức tạp, để đảm bảo mỗi quyết định được đưa ra tại thời điểm là thích hợp –  5 thành tố trong thiết kế UX đóng vai trò là kim chỉ nam cho mọi nhà thiết kế. 

UX Element – mô hình giúp nhà thiết kế giải quyết vấn đề một cách trình tự & khoa học

2.2. Nguồn gốc

Khái niệm UX Element lần đầu tiên được giới thiệu bởi Jesse James Garrett (một UX/UI Designer), ông cũng là người viết cuốn sách The Elements of User Experience: User-Centered Design for the Web.  Trong đó, tác giả giải thích các bước mà dự án thiết kế sản phẩm phải trải qua. Cũng như các vấn đề mà các UX Designer nên xem xét ở mỗi bước.

Cuốn sách của ông được xuất bản vào năm 2002, rất lâu trước khi smartphone và giao diện mobile được phát hành. Vì thế mà những kiến thức mà Garrett truyền tải phù hợp hơn cho giao diện web. Tuy nhiên, 5 UX Element mà ông đề cập luôn là kim chỉ nam để tạo ra các giao diện thông minh. Cho đến thời điểm này, 5 thành tố này vẫn được sử dụng làm khuôn khổ cho bất kỳ dự án nào. 

Jesse James Garrett – người đưa ra khái niệm UX Element

2.3. Cách thức sử dụng

5 thành tố trong thiết kế UX không hoạt động riêng lẻ mà nó tác động lên nhau tạo thành một sơ đồ hoàn chỉnh như hình dưới đây: 

Sơ đồ 5 thành tố ux

Như bạn thấy trên hình, 5 UX ELement nằm trên 1 mặt phẳng riêng biệt, tạo thành một mạng lưới các yếu tố xếp chồng lên nhau tạo ra một quy trình mà các nhà thiết kế giao diện có thể tuân theo. Nếu bạn là một Designer thì có lẽ không xa lạ gì với khái niệm Layer. 5 thành tố này hoạt động cũng tương tự như các layer. Thành tố strategy là lớp dưới cùng, sau đó tới scope, structure, skeleton, và lớp trên cùng là surface.

Sự sắp xếp này không hề ngẫu nhiên mà nó đi theo một trình tự “từ trừu tượng cho tới cụ thể”. Nghĩa là từ những yếu tố trừu tượng như mục tiêu, kế hoạch kinh doanh cho đến thứ cụ thể nhất như trải nghiệm trên giao diện, hình ảnh, màu sắc, câu từ…

Ở mỗi mặt phẳng UX element, yêu cầu nhà thiết kế phải đáp ứng được các mục tiêu khác nhau hoặc hoàn thành các nhiệm vụ khác nhau. 

2. 5 thành tố UX và nhiệm vụ của chúng

Được rồi, bây giờ chúng ta sẽ đào sâu vào từng thành tố cụ thể. Đầu tiên là: 

2.1. Strategy

Mặt phẳng dưới cùng của mô hình là Strategy (chiến lược). Là phần trừu tượng nhất của một dự án. Đây là nơi cần đưa ra các quyết định về những mục tiêu mà sản phẩm đem lại cho người tiêu dùng cuối cùng. Giai đoạn này liên quan nhiều đến UX Research. 

Các nhà thiết kế trải nghiệm cần tổ chức các bước nghiên cứu người dùng, rút ra được điểm đau của họ cũng như cung cấp cho họ một giải pháp kịp thời. Ngoài ra, những giải pháp mà quá trình research đưa ra phải phù hợp với mục tiêu kinh doanh của doanh nghiệp. Đây là kiến thức quan trọng khi học thiết kế ux mà bạn cần nắm.

Ví dụ, bạn được thuê để thiết kế một ứng dụng mua bán quần áo. Bạn phải xây dựng sao cho đáp ứng được các mục tiêu của sản phẩm. Các mục tiêu ở đây như “thông tin quần áo, hình thức thanh toán… Mặt khác, bạn phải đáp ứng cả các mục tiêu kinh doanh của doanh nghiệp, như vấn đề hàng tồn kho, giá bán sản phẩm, size, màu sắc…

UX strategy là sự giao thoa giữa: Mục tiêu doanh nghiệp – nhu cầu người dùng và công nghệ

2.2. Scope (phạm vi)

Sau khi đã hoạch định chiến lược, scope là ux element tiếp theo. Tại đây, tất cả các tính năng của sản phẩm sẽ được quyết định, bao gồm thông tin mà người dùng có thể tìm thấy và chức năng mà người dùng có thể tương tác.  

Tại giai đoạn này, các UX Designer sẽ tạo một tập hợp các thông số kỹ thuật chức năng và mô tả từng tính năng của sản phẩm cũng như danh sách các yêu cầu từng phần nội dung sẽ được đưa vào. 

Ví dụ: ứng dụng mua bán quần áo. Khách hàng của bạn muốn thêm một chức năng cho phép người dùng nhập cân nặng chiều cao của họ từ đó sẽ cho ra kết quả size phù hợp với người dùng. Mục tiêu là giúp người dùng biết chính xác size quần áo mà họ muốn lựa chọn. 

Scope là giai đoạn mà nhà thiết kế nhìn nhận tổng quan về các tính năng của sản phẩm

2.3. Structure

Sau khi đã liệt kê được các tính năng, chức năng và thông tin muốn thể hiện với người dùng trên sản phẩm. Đã đến lúc bắt đầu xây dựng cấu trúc. Đây là UX Element mà các yếu tố điều hướng sẽ được quyết định, bao gồm cả vị trí mà người dùng đang đứng cũng như nơi người dùng có thể truy cập sau khi đến một trang nhất định. Điều này liên quan nhiều đến thiết kế tương tác và cấu trúc thông tin của sản phẩm. 

Về mặt thiết kế tương tác, cần quyết định cách người dùng sẽ tương tác với trang web và cách hệ thống sẽ phản hồi, bao gồm cả điều gì sẽ xảy ra nếu hệ thống lỗi. Đây là quá trình cần nghiên cứu để xác định xem những gì người dùng có thể làm và cách sản phẩm sẽ phản ứng với từng lựa chọn mà người dùng đưa ra. 

Về mặt kiến ​​trúc thông tin, chúng ta cần cấu trúc nội dung mà sản phẩm cung cấp theo cách giúp người dùng dễ dàng tìm thấy những gì họ đang tìm kiếm. Điều này có thể được chuyển tải thông qua các tài liệu hướng dẫn như bản đồ, trang hướng dẫn, hệ thống phân cấp và ví dụ mẫu. 

Bạn nên đọc qua 10 Usability Heuristics trong thiết kế tương tác để hiểu rõ hơn về 2 khái niệm thiết kế tương tác và kiến trúc thông tin. Link đọc: Tại đây

Structure liên quan đến hệ thống mạng lưới và xây dựng Flow người dùng

2.4. Skeleton (khung xương)

UX Element tiếp theo đề cập đến việc xây dựng bộ khung cho sản phẩm. Tại đây, các nhà thiết kế UX sẽ đưa ra quyết định về thiết kế thông tin của sản phẩm, tạo wireframes và prototype để sắp xếp từng phần của sản phẩm, bao gồm các button, link, hình ảnh và văn bản. Chúng được trình bày theo cách đảm bảo rằng người dùng có thể dễ dàng tương tác qua lại giữa từng trang để tìm thông tin họ cần, đồng thời hiểu được yếu tố nào của mỗi trang là tương tác và yếu tố nào là không.

Tất cả kiến thức này đều có trong khóa học nhập môn về UX Design. Bạn sẽ được hiểu về khái niệm UX Element rõ hơn và cách thức tạo wireframe cũng như prototype. 

Xây dựng khung xương của sản phẩm

2.5. Surface (bề mặt)

Ví dụ về cơ thể sinh học, phía trên bộ xương chính là bộ da (bỏ qua các lớp mỡ, biểu bì gì đi nhé vì đây không phải là lớp sinh học). Cấu trúc xương của mỗi người là như nhau nhưng vẻ ngoài của mỗi người lại khác nhau. Nói đơn giản thì giai đoạn này bạn cần xây dựng vẻ ngoài “đẹp đẽ” của sản phẩm. 

Yếu tố mà bạn quan tâm là trải nghiệm giác quan của người dùng. Điều này bao gồm cách màu sắc và kết cấu được sử dụng trong thiết kế trực quan giúp họ hiểu cách điều hướng và tương tác với trang web cũng như cách trình bày nội dung thu hút sự chú ý của họ đến thông tin chính. 

Surface là thứ mà người dùng nhìn thấy và tương tác

3. Khóa học UX Design tại TELOS

Kiến thức về thành tố UX không phải dễ tiếp thu. Để có thể thực hành và vận dụng một cách triệt để, bạn hãy tham khảo qua khóa học UX Design tại TELOS. Với 9 năm kinh nghiệm trong thiết kế UX, Annie Lương – giảng viên của khóa sẽ dẫn dắt bạn đi từ lý thuyết đến thực thi. 

3.1. Khóa học dành cho ai? 

• UI Designer muốn bổ sung thêm kiến thức về UX
• Coder, người làm việc cùng với đội ngũ UX để hiểu rõ hơn về quy trình và làm việc nhóm hiệu quả.
• Cá nhân đang muốn chuyển ngành sang lĩnh vực UX Design
• Doanh nghiệp mong muốn tối ưu hóa quy trình làm việc 

Khóa học UX Design tại TELOS

3.2. Nhận được gì sau khi học? 

• Nắm vững các yếu tố “cốt lõi” để thiết kế lên một trải nghiệm người dùng (UX Design).
• Có khả năng phân tích và đánh giá được UX từ nhiều sản phẩm khác. Khả năng tự học ux design để phát triển thêm.
• Hiểu được quy trình thiết kế trải nghiệm cần phải qua các bước gì và nên bắt đầu từ đâu.
• Tự tạo ra quy trình UX Design riêng ngay từ bước nhận yêu cầu đến khi hoàn thiện thiết kế.
• Tự mình thiết kế một ứng dụng mobile/web platform hoàn chỉnh để bổ sung vào Portfolio.

4. Kết luận

Giống như bề nổi của tảng băng chìm, kiến thức về UX Element rất rộng và mỗi thành tố trong đó điều có những yếu tố nhỏ bên trong cần được giải quyết. Hi vọng rằng bài viết giúp ích cho bạn trong quá trình làm việc cũng như học tập. Hãy theo dõi TELOS để cập nhật thêm nhiều bài viết về kiến thức mà chúng mình sẽ ra mắt trong tương lai. 

Bài viết và hình ảnh được tổng hợp bởi TELOS.