Nguyên lý đằng sau một Web design thành công

Trước khi người dùng tiếp xúc với design của chúng ta, ta cần hiểu rõ thứ mà người dùng muốn và cần (đây là hai phạm trù hoàn toàn khác nhau). Và khi người dùng tiếp xúc với design, trước hết họ phải cảm thấy an toàn và thoải mái. Điều này có vẻ xung đột với mong muốn cải tiến sáng tạo; vậy nên ta phải tìm cách lồng ghép mong muốn này với mục tiêu người dùng.

Để đạt được mục đích này, ta cần phải nắm được hướng suy nghĩ của người dùng – các mô hình tâm lý của não bộ giúp họ đều hướng trang Web. Những kiến thức này sẽ là nền tảng từ đó xây dựng nên một quá trình mang tên neurodesign (được giới thiệu từ năm 2012).

Photo credit: Allan Ajifo. Creative Commons

Thông qua việc thận trọng nghiên cứu và kiểm tra, ta có thể có cái nhìn rõ hơn về các hoạt động trong não bộ của người dùng khi họ tương tác mới một UI tốt (hoặc tệ). Từ đó, ta có thể khai thác các thông tin này để xây dựng UI ngày càng tốt hơn.

Trong phần này, tôi sẽ giải thích cách khai thác pattern để xây dựng Web design; khi nào cần phải phá vỡ các pattern đó và tạo ấn tượng nơi người dùng.

Nhận diện pattern: Lối tắt tiện dụng trong web design

Năng lực nhận diện pattern là một quá trình nhận thức diễn ra khi một người nhìn vào nhân tố kích thích, và kết nối chúng với một ấn tượng trong quá khứ.

Photo credit: Vinoth Chandar. Creative Commons.

Nếu gặp nhân tố kích thích mới, ta sẽ tìm kiếm trong vùng kiến thức thích ứng để xem thử trước kia ta đã gặp bất cứ thứ gì tương tự hay chưa.

Với cả vai trò designer và người dùng, trong quá trình tương tác với Web, ta đã học được vô số pattern. Và khi ta tiếp tục tương tác với Web, ta sẽ cố gắng liên tưởng tới những pattern mà ta đã học được. Ví dụ như, khi ta muốn mua hàng, theo kinh nghiệm, ta sẽ tự biết tìm kiêm chúng theo một cách cụ thể.

Photo credit: Ebay

Năng lực ghi nhận và nhận biết, công thêm một chút suy luận, sẽ giúp ta đều hướng Web nhanh và hiệu quả hơn, thay vì phải suy nghĩ tìm cách dùng lại từ đầu. Ta thường hay tận dụng các pattern tương tác (trong quá khứ) đã từng thành công trong việc giảm thiểu thời gian nhưng vẫn mang lại hiệu quả tối ưu. Nếu không tận dụng những pattern này, người dùng sẽ tìm chúng trên một trang khác nếu chúng có thể mang lại sự thân thuộc và khả dụng.

Khi đi đường tắt, bạn sẽ đến đích dễ dàng hơn, nhưng hãy cẩn thận đừng để đi lêch hướng. Và như đã đề cập trong Web UI Best Practices, bạn phải cực kỳ quen thuộc với những pattern và mong đợi của khác hàng nếu bạn muốn website của mình thành công.

Một số web design pattern thường gặp

Design pattern có thể được xem là một bản ghi chép lại cách giải quyết một vấn đề design.

Hiện có khá nhiều thư viện pattern chất lượng cao – UI Patterns, Yahoo’s Pattern Library, và PatternTap – tếp tục bài viết, tôi sẽ giới thiệu một số desgin cùng pattern thường gặp trong giao diện người dùng:

• The hamburger menu: đến tận bây giờ, mọi người vẫn tranh cãi nhau không biết đây thực sự là design pattern hay là bad design nữa. Mà dù được xếp vào nhóm nào đi nữa, nó vẫn rất phổ biến và tiếp kiệm không gian trên các thiết bị di động.

Photo credit: ETQ Studios

• Breadcrumbs: Giúp người dùng cảm thấy an toàn và cho phép họ biết được mình đang ở đâu trên các web đa cấp độ.

Photo credit: Newegg

• Account registration: Cho phép ta thu thập thông tin người dùng (và cung cấp lại cho họ một sản phẩm/dịch vụ gì đó – như cơ hội mua hàng). Pattern này rất đa dạng, từ các đơn ngắn đến social sign-in.

Photo credit: Squarespace

Continuous scroll: Cho phép tiêu thụ lượng lớn nội dung (khó thể hiện được chỉ trong một trang). Cực kỳ thích hợp cho visual storytelling.

Photo credit: Fornasetti

• Availability (như Skype): biết được ngay tình trạng của một người: tiện, không tiện, hoặc đi vắng.

• The FAQ:  Một mục-dễ-tìm giúp người dùng tìm câu trả lời cho một số thắc mắc thường gặp.

Photo credit: Yelp

Bạn có thể tham khảo nhiều UI pattern khác trong Web UI Patterns, với lên đến 63 pattern hữu ích được thể hiện theo format vấn đề/giải pháp.

Web Design theo hướng Top-down hay Bottom-up

Tiếp đến, ta sẽ bắt đầu áp dụng thần kinh học để đơn giản hóa (hoặc phức tạp hóa, tùy cách bạn dùng) công việc. Người dùng sẽ nhận biết web theo một cách khác với người vết.

Trong quá trình build Web, ta sẽ dùng design pattern để giải quyết vấn đề phát sinh. Ta sẽ thường đi từ dưới lên (bottom up): bắt đầu với vấn đề trước mắt cùng các nhân tố liên qua, và rồi tìm cách xây dựng trải nghiệm gắn kết. Khi đã tách giao diện ra nhiều phần tử nhỏ, ta sẽ tuần tự giải quyết vấn đề nhỏ, mục tiêu, nhiệm vụ, cấu trúc thông tin và flow.

Photo credit: Narek Khachatryan.

Cũng chính vì vậy, sau một thời gian, ta sẽ quá để tâm vào vấn đề trước mắt mà quên đi cái nhìn tổng quan.

Nhưng như tôi đã giải thích trong Designing Better UX With Patterns, người dùng không tương tác với giao diện theo hướng này mà theo hướng từ trên xuống (top down).

Người dùng không để ý quá đến chi tiết, và sẽ liên tưởng đến trải nghiệm đã có để tương tác. Với các sản phẩm hay trang quen thuộc, họ sẽ tìm các pattern giống với những gì họ nhớ được để điều hướng nhanh hơn. Hướng xử lý này đúng là nhanh thật, nhưng lại sai –  đặc biệt nếu giao diện có đổi khác so với nguyên trạng.

Photo credit: Abduzeedo

Bởi vậy, ta phải đảm bảo giao diện nhất quán với kỳ vọng của người dùng. Ví dụ như, Nếu bạn chọn cards UI pattern (rất phổ biến), đa số người dùng sẽ biết cách điều hướng nội dung ngay. Ngoài ra, đễ tránh nhầm lẫn, các pattern trên trang cũng phải thật nhất quán.

Công việc của chúng ta là chỉ dẫn người dùng sao cho họ thấy hài lòng, giúp cho quá trình xử lý thông tin của họ trở nên nhanh chóng và dễ dàng hết mức có thể. Đồng thời, các pattern của ta cần đủ thân thuộc để tạo sự thoải mái nơi người dùng. External consistency (nhất quán bên ngoài, giống như trang của đối thủ, hoặc các trang tương tự) không phải lúc nào cũng quan trọng, nhưng internal consistency (sự nhất quán bên trong sản phẩm) phải được đặt lên hàng đầu.

Bạn từ đó sẽ xây dựng được lòng tin nơi người dùng.

Thiết kế đi theo nhận dạng và kích thích

Với mỗi giao diện, người dùng sẽ có các kỳ vọng riêng.

Mỗi cái đảo mắt, hay mỗi cú click chuột, mỗi cú nhấn nút – tất cả đều là kết quả của kinh nghiệm và tương tác đã gặp trước đấy, và người dùng sẽ mong đợi một kết quả cụ thể từ hành động của họ. Chúng ta ai cũng thích pattern cả – nhờ nó ta mới thấy an toàn và vui vẻ.

Sự vui vẻ này là kết quả của phản ứng hóa thần kinh. Mỗi khi ta nhận biết một pattern thành công, ta sẽ tăng tiết dopamine – một vi chất thần kinh ảnh hưởng lên khoái cảm và sự thỏa mãn. Và rồi, khi chính tương tác đó thành công, ta sẽ tăng tiết thêm một lần nữa.

Photo credit: UXPin

Nếu đã gọi là “trực giác”, có nghĩa là người dùng đã vô thức đi theo pattern, kỳ vọng người dùng đã được đáp ứng – và họ sẽ thấy vui khi nhìn thấy một pattern, và vui hơn nữa khi pattern phản ứng đúng như kỳ vọng. Tuy nhiên, nếu pattern bị phá vỡ, ta sẽ chả tiết được chút dopamine nào và sẽ không thấy thảo mãn. Tất nhiên. người dùng sẽ gắn sự không thảo mãn này cho cả trang web hay sản phẩm.

Bên cạnh pattern, ta cần hiểu rõ kỳ vọng người dùng (trong mối quan hệ với pattern tương ứng) để tối tăng đa lượng dopamine (nói cách khách, tăng tối đa sự thỏa mãn). Hay cho người dùng những thứ mà họ muốn.

Nhưng đồng thời, ta cũng muốn sáng tạo và đi tiên phong – Dù gì thì, có rất ít khách hàng tìm đến ta yêu cầu một trang web “đạt kỳ vọng,” hoặc nhìn giống y như của đối thủ. Không dễ cân bằng cán cân, nhưng ta vẫn chưa hết cách – Chỉ cần đào sâu thêm một chút nữa thôi.

Nguy cơ phá vỡ web pattern

Với mong muốn sáng kiến và đi đầu, ta sẽ cần phải phải triển các cách thức làm việc mới lạ. Tuy vậy, mong muốn này của ta có thể khiến người dùng khó chịu.

Ví dụ như, phải thiết kế làm sao để người dùng nhìn vào biết được đó là một nút bấm. Nếu không làm như vậy, bạn phải có một lý do thật là hay đấy (và cách khiến người dùng phải tiếp nhận nó). Mỗi khi ta phá vỡ một pattern, ta phải trả lời được:

• Vì sao ta phá vỡ pattern đó?
• Ta đã tạo được pattern mới chưa – và có tốt hơn không?
• Liệu người dùng có thể (hoặc có chấp nhận) làm quen với pattern mới hay không? Nhanh hay chậm?

Những câu hỏi này không dễ trả lời, hãy suy nghĩ kỹ trước khi phá vỡ một pattern đã quá quen thuộc – Có đáng không?

Phá vỡ pattern để tìm sự thích thú

Tất nhiên, ta cũng không nên đi theo những gì ta đã biết mà bỏ qua sự sáng tạo. Design chỉ đơn thuần là một cái khung, để từ đó ta thể hiện sự sáng tạo của mình. Hơn nữa, người dùng hoàn toàn có thể làm quen và nhận biết được pattern mới, đặc biệt là các pattern mang lại kết quả mà họ muốn.

Ví dụ như hệ thống dopamine mà ta đã bàn đến. Ta đã đề cập rằng nếu người dùng kỳ vọng và đạt được kết quả nào đó, ta đã đạt kỳ vọng của họ. Nếu họ kỳ vọng một kết quả mà không đạt được, sẽ nảy sinh sự khó chịu.

Photo credit: Interaction Design Best Practices

Tuy nhiên, nếu họ không trông chờ kết quả thì sao? Còn tốt hơn nữa, nếu họ không trông chờ kết quả nào, mà ta vẫn cho họ kết quả đó thì sao?

Đúng, ta cần phải phá vỡ pattern, nhưng ta chỉ có thể làm điều đó ở những nơi mà người dùng không mong chờ gì cả, và rồi ta có thể nhảy vào và lấy lòng họ. Ta có thể làm pattern mới quen thuộc hơn bằng cách “thưởng” cho người dùng khi họ không ngờ tới, từ đó cũng cố phương pháp tương tác mới. Theo tôi nghĩ, phút giây thích thú này là chìa khóa đi đến sáng kiến thoát khỏi những pattern cũ kỹ.

Photo credit: MailChimp

Tất nhiên, rất khó tìm được những tình huống, cơ hội “kích thích” người dùng khi họ không ngờ đến – Suy cho cùng, làm sao ta biết được khi nào người dùng sẽ cảm thấy hài lòng trước một sự thay đổi mà họ chưa biết? Thử nghiệm chính là lời giải bạn đang tìm kiếm.

Sức mạnh của mẫu thử khi thử nghiệm Patterns

Để tìm ra được pattern nào cần phá vỡ, và phá vỡ khi nào, ta cần phải thử nghiệm và xem thử kết quả.

Những thử nghiệm này được thực hiện dưới dạng các bài test người dùng được thiết kế cầu kỳ, kỹ lưỡng. Ta cần hiểu rõ pattern sắp sửa được phá vỡ và cách người dùng tiếp nhận quá trình đó như thế nào; tại sao phải phá vỡ nó và phá vỡ như thế nào. Với mẫu thử, ta có thể kiểm soát chặt chẻ pattern, và thậm chí thử nghiệm, ngay cả khi người dùng không nhận thức được sự kiểm soát này.

Photo credit: Rapid prototype via UXPin

Ví dụ như, trong UXPin, ta có thể tạo nhanh một mẫu thử với thư viện UI hiện có. Và rồi ta có thể xác nhận độ hiểu quả của các pattern đó (và chức năng tổng quan của design) sau khi đã đưa vào thử nghiệm.

Người ta thường không đoán trước được họ cần gì. Vì vậy, mẫu thử (và thử nghiệm nói chung) là một công hữu ích. Thử nghiệm tạo điều kiện để người dùng cho ta thấy điều này. Người dùng sẽ sử dụng như thường, trong khi chúng ta sẽ quan sát các phản ứng của họ.

Đây là một ví dụ cải thiện web pattern sẵn có:

• Xác định vấn đề của design – Nghiên cứu người dùng (chủng tộc học, phỏng vấn, khảo sát,…) để xác định được vấn đề
• Nghiên cứu các pattern đã có –  Một khi đã xác định được vấn đề cần giải quyết, hãy tìm hiểu các pattern tương tự.
• Tạo mẫu thử – Sử dụng các pattern đã có làm cơ sở, từ đó thay đổi chúng hoàn toàn. Dù bạn đang làm gì, hãy đảm bảo rằng giải định của bạn thật rõ ràng ngay từ ban đầu. Hãy tạo một mẫu thử khác với nguyên mẫu và thêm vào các sắc thái riêng.
• Hãy thử nghiệm với ít nhất 5 người dùng – Dựa theo vốn thời gian và ngân sách, hãy chọn phương pháp phù hợp nhất. Bài viết Rocket Surgery Made Easy của Steve Krug là khởi điểm tuyệt vời.
• Học tập từ kết quả và làm đi làm lại – Bởi vì bạn bắt đầu với độ chính xác thấp, hãy kết hợp những kiến thức mới thu được đồng thời với gia tăng độ chính xác. Hãy thỏa thích thêm vào các yếu tố “kích thích”  để gia tăng độ thú vị cho pattern. Tiết tục thử nghiệm và làm đi làm lại cho đến khi design được hoàn thành.

Không cần phải cố quá – chỗ nào mà người dùng mong đợi kết quả, hãy thêm ngay chỗ đó. Tuy nhiên, ta cũng có thể tìm cơ hội phá vỡ pattern và tạo “tương tác kích thích” mới lạ.

Lời kết

Khi muốn cải thiện các pattern cũ, hãy xác định vấn đề tìm ẩn và tự hỏi vì sao pattern lại hữu ích như vậy. Theo như designer nổi danh Jeffrey Zeldman từng nói “consideration beats pattern”. Nếu áp dụng những những pattern (đã từng thành công) mà không có sự cân nhắc, sẽ chỉ gây hại cho web của bạn mà thôi.

Còn có một câu rất đúng của Henry Ford (mà có lẽ bạn đã nghe đến nhàm tai luôn rồi): “nếu tôi hỏi khách hàng xem họ muốn gì, họ sẽ nói là một con ngựa nhanh hơn.”

Với web design, ta có thể và sẽ đi theo pattern một cách cẩn trọng. Nhưng nếu ta không chịu đổi mới mà chỉ đi theo pattern, tất cả ta làm được chỉ là một con ngựa nhanh hơn.

E-book (miễn phí) Web UI Design Best Practices có nhiều lời khuyên sử dụng pattern và các kỹ thuật khác.

Techtalk via thenextweb