Lo-fi prototype & Hi-fi prototype trong thiết kế UI/UX

Ở bài trước chúng ta đã tìm hiểu về: Prototype là gì trong thiết kế UI/UX?

Với bài hôm nay, chúng ta sẽ tìm hiểu về khái niệm Lo-fi prototype & Hi-fi prototype trong UIUX. Mời bạn xem chi tiết bài viết ở các hình minh họa bên dưới nhé.

Dựa vào khả năng mô phỏng gần giống (fidelity) của prototype so với bản hoàn chỉnh cuối cùng, prototype được phân thành lo-fi prototype và hi-fi prototype theo các tiêu chí sau:

1. Interactivity – Khả năng tương tác

Trên hi-fi prototype, người dùng có thể bấm trực tiếp vào các link và menu và thường được thực hiện trên các phần mềm làm prototype như Figma, Protopie hay PowerPoint…

Trên lo-fi prototype thì sẽ cần một người đóng vai “máy tính” để phản hồi.

2. Visuals – Các yếu tố thị giác

Trên hi-fi prototype, phân cấp thị giác, thứ tự ưu tiên của các thành phần, kích thước màn hình, khoảng cách và bố cục sẽ nhìn giống như một giao diện đang hoạt động trên thực tế, ngay cả khi chúng ta thể hiện prototype trên giấy.

Trên lo-fi prototype thường chỉ thể hiện một vài yếu tố thị giác của giao diện thực tế. Chúng ta có thể sử dụng bản sketch hoặc wireframe, trình bày hình ảnh và đồ họa ở dạng sơ đồ, thể hiện nhiều màn hình với lượng thông tin khác nhau trên cùng 1 tờ giấy. Và chúng ta cũng không cần quan tâm đến khoảng cách và sự ưu tiên của các thành phần trên giao diện.

3. Content – Nội dung

Trên hi-fi prototype sẽ thể hiện đầy đủ tất cả các bài viết, hình ảnh và nội dung mô tả của các sản phẩm trên giao diện thực tế.

Trên lo-fi prototype sẽ chỉ ghi tóm tắt nội dung và thể hiện giản lược đối với hình ảnh của sản phẩm.

Lợi ích của Hi-fi prototype

Lợi ích 1:

Hi-fi prototype phản hồi nhanh và đúng với thực tế khi thử nghiệm. Khi chúng ta sử dụng người đóng vai “máy tính” để phản hồi người dùng thì thường sẽ mất nhiều thời gian để “máy tính” tìm ra màn hình tương ứng với tương tác của người dùng.

Thời gian gián đoạn quá lâu sẽ làm đứt mạch hoạt động của người dùng và làm họ quên mất họ đã thực hiện thao tác gì hoặc muốn làm gì tiếp theo. Phản hồi chậm trễ cũng tạo ra một khoảng thời gian để người dùng nghiền ngẫm giao diện hiện tại, khiến họ soi xét nhiều hơn đến các chi tiết thiết kế hoặc tiếp nhận nhiều nội dung hơn so với khi họ sử dụng giao diện trên thực tế.

Lợi ích 2:

Với hi-fi prototype đảm bảo tiêu chí về khả năng tương tác và yếu tố thị giác, chúng ta có thể tiến hành các thử nghiệm về trình tự thao tác của người dùng, hoạt động của các component và thành phần đồ họa cụ thể ví dụ như tính dễ hiểu khi dùng (affordance), phân cấp của giao diện, tính dễ đọc của văn bản, chất lượng hình ảnh và sự gắn kết giữa giao diện và người dùng.

Lợi ích 3:

 Người dùng xem hi-fi prototype giống như một phần mềm đã hoạt động chính thức và do đó họ sẽ có xu hướng thực hiện tương tác như trên giao diện thực tế, trong khi nếu chúng ta dùng lo-fi prototype thì người dùng sẽ không rõ phần nào trên giao diện có thể hoạt động được.

Lợi ích 4:

Khả năng phản hồi tự động với tương tác của người dùng của hi-fi prototype giúp người thiết kế có thể tập trung theo dõi quá trình thử nghiệm thay vì phải đóng vai “máy tính” và suy nghĩ tìm màn hình tương ứng để phản hồi người dùng.

Lợi ích 5:

Thử nghiệm với prototype gắn sẵn các lệnh tương tác sẽ tránh được các lỗi, sai sót của kiểu prototype điều khiển bởi con người. Khi điều khiển static prototype, người đóng vai “máy tính” sẽ gặp rất nhiều áp lực do luôn phải lo lắng, căng thẳng, tập trung vào tương tác của người dùng để tìm và đưa ra phản hồi tương ứng nên khả năng mắc sai lầm là rất lớn.

Lợi ích của Lo-fi prototype

Lợi ích 1:

Làm static prototype nhanh hơn làm clickable prototype, nhờ vậy chúng ta có thêm thời gian để tập trung cho việc thiết kế thay vì chăm chút cho prototype.

Lợi ích 2:

Người thiết kế có thể dễ dàng vẽ nhanh một phương án phản hồi hoặc xóa hay thay đổi một phần của thiết kế trong lúc thử nghiệm mà không cần suy nghĩ đến chuyện kết nối lại các màn hình như khi làm trên interactive prototype.

Lợi ích 3:

Người dùng cảm thấy ít áp lực hơn khi thử nghiệm với lo-fi prototype. Khi nhìn thấy thiết kế còn chưa hoàn chỉnh, người dùng sẽ hiểu rằng quá trình thiết kế vẫn đang tiến hành và đối tượng chính của buổi thử nghiệm là mẫu thiết kế chứ không phải người dùng, do đó họ sẽ không cảm thấy có áp lực với bản thân, thoải mái thể hiện các cảm xúc tiêu cực nếu có trong lúc thử nghiệm.

Lợi ích 4:

Designer sẽ không quá đắm đuối với lo-fi prototype. Designer thường cảm thấy dễ chịu khi thay đổi một bản thiết kế chưa hoàn thiện hơn là thay đổi một thiết kế đã được đặt đầy đủ các tương tác và yếu tố thẩm mỹ. Khi chúng ta đã bỏ thời gian, công sức vào một bản thiết kế thì rất khó để từ bỏ nó cho dù nó hoạt động không tốt.

Lợi ích 5:

Những người có quyền quyết định sẽ hiểu rõ rằng công việc thiết kế vẫn chưa hoàn thành khi họ nhìn thấy một bản prototype thô sơ. Họ sẽ không nghĩ đến chuyện đem thiết kế đi triển khai ngay, mà sẽ mong muốn chỉnh sửa thêm cho đến khi bản thiết kế trở nên hoàn thiện. Ngược lại, khi thiết kế trông quá lung linh, bóng bẩy thì rất dễ gặp phải những quyết định nóng vội kiểu như là “Đẹp quá, bàn giao cho code luôn đi em”.

Mối liên hệ giữa Wireframe và Prototype

• Wireframe là một cách thể hiện giản lược của giao diện chỉ bằng chữ, những đường thẳng và các hình vẽ đơn giản.
• Wireframe thường không thể hiện các yếu tố thị giác và màu sắc mà sẽ tập trung vào cấu trúc, mức độ ưu tiên của các thành phần trên giao diện.
• Prototype thể hiện được nhiều thứ hơn như nội dung hay hình ảnh cụ thể và người dùng cũng có thể tương tác được.
• Như vậy, tất cả wireframe đều có thể dùng làm prototype, và dĩ nhiên chỉ là lo-fi prototype. Nhưng ngược lại thì không phải prototype nào cũng là wireframe. Hi-fi prototype thì chắc chắc chắn không thể là wireframe.

Học làm UIUX prototype ở đâu?

Nếu bạn muốn tự mình thực hiện Clickable Prototype thì có thể tham gia khóa học Figma UI Design do Anh Lê Minh Quang giảng dạy tại Keyframe, khóa học sẽ giúp bạn xử lý và tạo ra những Clickable Prototypes ngay trên phần mềm Figma. Xem chi tiết khóa học tại đây: https://bit.ly/2W7UyCd

Để nâng cao hơn, có thể làm ra các loại concept prototype bằng After Effects hoặc các Interactive Prototype kết hợp với Json trên Protopie… bạn có thể tham gia khóa học Prototype 101 UX/UI Motion Design này nhé:
 https://bit.ly/3iU5QCI

Cả 2 khóa học đều có hình thức học Remote Teaching, dù bạn có đang ở nơi đâu thì cũng có thể học và nhận được hỗ trợ từ giảng viên bên mình.