Học hỏi từ các ví dụ thực tế về thiết kế không chỉ thú vị mà còn đem lại những kiến thức quý báu. Tăng khả năng biến những bản thiết kế trên giấy thành giải pháp hiệu quả trong thực tế. 

Nhà văn, nhà nghiên cứu và chuyên gia về tính khả dụng người Mỹ, Jared Spool, đã từng nói: “Khi được hoàn thành, một sản phẩm với thiết kế tốt sẽ trở nên vô hình. Nó sẽ chỉ bị chú ý khi được thiết kế không tốt.” Do đó, hãy cùng nhìn vào 5 ví dụ về thiết kế lỗi, và phiên bản tốt hơn của chúng sẽ có sự khác biệt như thế nào. Rút ra kinh nghiệm để tạo nên những trải nghiệm tuyệt vời và “vô hình” cho người dùng.

1. Quá tải thông tin

Bad: Biển báo đỗ xe tại Los Angeles

Biển báo đỗ xe tại Los Angeles (LA) là ví dụ điển hình của việc quá tải thông tin. Chúng được biết đến bởi việc gây khó hiểu cho người lái xe. Các quy tắc giao thông ở đây quá phức tạp. Chúng đòi hỏi nhu cầu truyền tải một lượng lớn thông tin trên các biển báo có khổ giới hạn.

Để thấy được sự khó hiểu đó, trước tiên hãy nhìn vào ví dụ từ những năm 2010: 

Author/Copyright holder: Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0

Biển báo “đi” là một ví dụ khá cơ bản.

Hãy tưởng tượng, bạn đang lái xe dọc theo con đường này vào buổi sáng thứ 3 lúc 9 giờ. Liệu bạn có thể đỗ xe tại đây không? Một câu hỏi tưởng như đơn giản nhưng lại tốn khá nhiều nơron để tìm ra câu trả lời.

Các biển báo ở LA có lẽ là một trường hợp đặc biệt, tuy nhiên nhiều khi thiết kế mobile apps cũng phải đối mặt với những vấn đề tương tự. Có quá nhiều thông tin cần phải được hiển thị trên màn hình cùng lúc. 

Good: Biển báo đỗ xe của Nikki Sylianteng

Nghe có vẻ bất khả thi khi phải thiết kế một biển báo có khả năng hiển thị tất cả thông tin một cách dễ hiểu. Tuy nhiên, đó chính xác là những gì nhà thiết kế Brooklyn Nikki Sylianteng đã làm được.

Author/Copyright holder: Nikki Sylianteng. Copyright terms and licence: CC BY-NC-SA 4.0

Đề xuất về biển bảo của Nikki cuối cùng cũng được sử dụng tại LA như một phần của quá trình thử nghiệm.

Yếu tố quan trọng khiến cho thiết kế này khả thi là nó tập trung vào người dùng. Nikki nhận ra rằng, các tài xế chỉ muốn biết liệu họ có thể đỗ xe tại điểm này hay không. Có hoặc không- đó là tất cả những gì người lái xe muốn biết. Đây chính xác là những gì mà biển báo nên hiển thị. 

Thiết kế của cô tối ưu về hình ảnh hơn là các con chữ để truyền tải thông tin. Kết quả đem lại vô cùng trực quan: màu xanh là được đỗ xe, đỏ là cấm đỗ. Thậm chí nó còn hỗ trợ cho người mù màu bằng các vạch kẻ. 

Khi nhìn vào tấm biển này, bạn biết rằng không được phép đỗ xe vào 9h sáng thứ 3. Thông tin được tiếp nhận chỉ trong nháy mắt.

Bài học kinh nghiệm: 

  • Hãy hiểu những gì người dùng cần và thiết kế dựa trên điều đó. Nó sẽ giúp giảm đi sự quá tải của thông tin.
  • Nếu bạn có quá nhiều thông tin cần truyền tải, hãy cố gắng biến nó thành hình ảnh thay vì chữ viết.

2. Mystery Meat Navigation (Định vị miếng thịt bí ẩn)

Bad: LazorOffice.com

Được tạo ra vào năm 1998 bởi Vincent Flanders, tác giả và nhà thiết kế của trang web That Sucks, Mystery Meat Navigation (MMN) đề cập đến các trường hợp không thể biết trước đích của một liên kết. Người dùng bắt buộc phải nhấp hoặc trỏ con chuột vào. Thuật ngữ “miếng thịt bí ẩn” muốn ám chỉ đến những miếng thịt được phục vụ tại các trường công ở Mỹ, chúng được chế biến đến nỗi không thể nhận ra là thịt được nữa.

MMN không tốt bởi nó sẽ làm giảm khả năng xác định được các yếu tố điều hướng. Nó sẽ làm tăng tải trọng nhận thức cho người dùng. Giờ đây họ phải đoán xem làm thế nào để điều hướng hoặc nên click vào đâu. 

Mặc dù hầu hết MMN được tìm thấy trên những website cũ, nhưng chúng lại phổ biến một cách đáng ngạc nhiên ở những trang web hiện đại. Ví dụ như Lazor Office, một công ty thiết kế sáng tạo ra những ngôi nhà tiền chế.

Author/Copyright holder:Lazor Office, LLC. Copyright terms and licence: Fair Use

LazorOffice.com có một lưới các hình ảnh MMn trên trang chủ. Chúng gợi mở một chút thông tin về nơi sẽ đến. Tuy nhiên, sự tĩnh lặng của 9 bức hình lại đem đến cho chúng ta cảm giác tò mò về một điều bí ẩn thay vì tương tác với trang web.

Bên dưới trang chủ của họ, một lưới các hình ảnh thu nhỏ đang nằm chờ. Liệu chúng có thể click vào được không? Có thể, nếu bạn di chuyển con trỏ chuột vào bức ảnh, nó sẽ chuyển thành hình con trỏ khác. Tuy nhiên điều gì sẽ xảy ra nếu bạn click vào hình ảnh đó?

“Click to find out!” chưa bao giờ là một giải pháp UX tốt. Rất có thể, người dùng của bạn sẽ bỏ qua sự điều hướng này và tìm một giải pháp thay thể ở trang web của đối thủ.

Good: Các thẻ khóa học trên website của Interaction Design Foundation

Rất may những vấn đề MMN lại rất dễ để giải quyết. Điều quan trọng bạn cần chú ý là phải làm các label links trở nên rõ ràng. Đơn giản như chỉ cần thêm “View project” xuất hiện khi di chuột qua. Điều này có thể cải thiện được khả năng sử dụng của trang web Lazor Office trên.

Author/Copyright holder: Interaction Design Foundation ApS. Copyright terms and licence: Fair Use

Những thẻ khóa học hiển thị rõ ràng là những đường links.

Đối với các thẻ học của Interaction Design Foundation, chúng không chỉ được thêm “View Course” vào dưới mỗi thẻ để chỉ hành động tiếp theo xảy ra, mà còn xuất hiện thêm dòng chữ “Go to course” khi di con trỏ chuột qua. Rất nhiều trang web tuân thủ theo những quy ước tương tự. Bạn cũng nên làm như vậy để đối đa hóa tính khả dụng của website.

Bài học kinh nghiệm: 

Luôn luôn gắn nhãn link của bạn! Bạn không muốn ăn những miếng thịt bí ẩn. Tương tự như vậy, người dùng của bạn cũng không muốn click vào những link không rõ ràng.

3. Thêm Friction (sự cản trở) cho hành động của người dùng

Bad: iFly50.com

Là designer, bạn nên thêm friction vào hành động của người dùng một cách thận trọng. Trừ phi mục đích là ngăn cản người dùng thực hiện hành động đó. Thông thường, chúng ta sẽ vô tình thêm friction vào hành động người dùng. Mục đích chủ yếu là để tạo tính thẩm mỹ hoặc tính mới lạ.

Một ví dụ là website iFly50.com, được tạo ra cho lễ kỷ niệm của tạp chí iFly bởi KLM. iFly 50 là một trang web cuộn dọc, hiển thị 50 điểm đến du lịch. Ở một số điểm đến (ví dụ bên dưới), có một nút gần phía dưới yêu cầu người dùng nhấp và giữ trong vài giây để xem thêm ảnh.

Author/Copyright holder: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Copyright terms and licence: Fair Use

iFly 50 muốn người dùng click và giữ trong vài giây khi họ muốn xem thêm nhiều hình ảnh.

Thêm một vài giây friction vào mỗi thao tác có thể dẫn đến trải nghiệm UX kém hơn rất nhiều. Hãy tưởng tượng, nếu thay vì click để tải một trang ngay lập tức, giờ đây bạn phải nhấp và giữ trong 2 giây. Khả năng cao bạn sẽ từ bỏ tìm kiếm chỉ sau một vài cú click và giữ chuột.

Các designer thường có xu hướng bị cuốn theo các kiểu tương tác mới nhất. Do vậy bạn luôn luôn phải cẩn thận trong khi thiết kế vì có thể bạn sẽ thêm friction vào hành động của người dùng. Hầu hết trong mọi trường hợp, thử và kiểm tra cách tốt nhất để tránh được những lỗi này.

Good: Elastic Scroll (Cuộn đàn hồi) trên iOS

Mặc dù khó sử dụng nhưng có một điều thú vị rằng, việc thêm friction có thể dẫn đến những trải nghiệm tuyệt vời. Trong hệ điều hành iOS, Apple đã tạo ra một tương tác vô cùng sáng tạo. Họ khiến việc cuộn trở nên khó khăn hơn khi đến cuối trang nhờ hiệu ứng elastic scroll.

Trong trường hợp này, friction được thêm vào một cách có chủ đích. Friction được thêm vào để báo hiệu việc cuộn không còn được cho phép. Hiệu ứng này mang đến một trải nghiệm trực quan cho khách hàng.

Bài học kinh nghiệm: 

Tránh thêm bất kỳ hành động friction nào vào hành động của người dùng tối đa nhất có thể, và sử dụng nó cẩn thận nếu bạn không còn sự lựa chọn nào khác.

4. Thiết kế sáng tạo nhưng bỏ qua tính khả dụng

Bad: Bolden.nl

Đôi khi, sáng tạo trong thiết kế có thể gây ra bất lợi cho UX. Càng nghiêm trọng hơn khi các nhà thiết kế lại thích những thiết kế mang tính sáng tạo. Chúng là những điểm nhấn mang lại sự thỏa mãn khi thiết kế.

Nhưng đáng buồn thay, phần lớn nhân loại lại không phải là nhà thiết kế để cảm thấy điều đó. Mà những sản phẩm được thiết kế sáng tạo lại chưa chắc đã là những sản phẩm tốt. Chúng có thể tạo ra các vấn đề về khả năng tiếp cận, khám phá hoặc khả năng sử dụng.

Lấy trang web thiết kế và phát triển chiến lược của Hà Lan, Bolden, làm ví dụ:

Bạn có thể nói được những gì trang chủ của họ đang muốn truyền tải không? Không, đó là vì bạn phải di chuyển chuột đến góc của trang web để nhìn thấy nội dung đúng cách.

Author/Copyright holder: Bolden. Copyright terms and licence: Fair Use

Đây có phải là một thiết kế sáng tạo? Chắc chắn là có. Tuy nhiên nó lại là một thiết kế tồi!

Đây là một ví dụ tuyệt vời về sản phẩm được thiết kế cho nhà thiết kế thay vì người dùng. Website này làm giảm nghiêm trọng khả năng đọc được của tiêu đề, mặc dù đây là chủ đích muốn tạo ra một sự mới lạ của designer.

Người thiết kế trang web này đã bỏ quên không thông báo với người dùng rằng họ cần phải di chuyển con chuột đến góc màn hình để đọc được headline. Điều này có nghĩa rằng khả năng đọc được headline hoàn toàn phụ thuộc vào sự ngẫu nhiên. Hơn thế nữa, ngay cả khi headline xuất hiện thì sự tương phản giữa text và nền vẫn không đem lại sự nổi bật, bởi người dùng vẫn có thể nhìn thấy sự chồng chéo giữa các chữ. Tất cả đã góp phần tạo nên một website không thân thiện với người dùng.

Good: CultivatedWit.com

Cultivated Wit’s website là một ví dụ tuyệt vời về cách thiết kế thông minh mà không lo ngại về khả năng khả dụng.

Author/Copyright holder: Cultivated Wit. Copyright terms and licence: Fair Use

Trang chủ Cultivated Wit hiển thị hình ảnh thiết kế của một con cú, nó sẽ nháy mắt khi con chuột di chuyển qua:

Author/Copyright holder: Cultivated Wit. Copyright terms and licence: Fair Use

Ngạc nhiên chưa! Con cú nháy mắt với bạn khi bạn chỉ con chuột vào nó. 

Ở đây, sự khác biệt chính là: hiệu ứng nháy mắt của con cú không phải một phần quan trọng của website. Vì vậy nó không làm giảm đi tính khả dụng ngay cả khi người dùng không phát hiện ra yếu tố thiết kế sáng tạo này.

Ngoài ra, họ cũng thiết kế một mũi tên hướng xuống để gợi ý rằng có thông tin ở phía dưới. Và khi cuộn xuống, bạn sẽ thấy điều này:

Author/Copyright holder: Cultivated Wit. Copyright terms and licence: Fair Use

Và các website có thể trở nên thú vị hơn mà không làm cản trở đến UX.

Cách thiết kế này tạo nên cảm giác dí dỏm mà không làm giảm đi UX của website, trái ngược với Bolden. Chỉ có một vấn đề nhỏ là dòng chữ “Join our email club” nên được làm rõ hơn. Tuy nhiên nhìn vào tổng thể, trang web Cultivated Wit là một ví dụ tuyệt vời của việc sáng tạo mà không làm giảm đi trải nghiệm UX.

Bài học kinh nghiệm

Thiết kế sáng tạo phải luôn luôn được làm dễ hiểu nhất có thể, và/ hoặc được test thử bởi người dùng thực tế. Thỉnh thoảng, sáng tạo có thể làm phản tác dụng và ảnh hưởng đến tính khả dụng của website.

5. Animation (Ảnh động) thừa thãi

Bad: Hóa đơn PayPal trên Dribbble

Animation là một yếu tố quan trọng trong thiết kế tương tác. Tuy nhiên chúng luôn cần phải đáp ứng mục đích gì đó. Trên thực tế, các nhà thiết kế lại có xu hướng thích animations, một phần bởi vì làm animation rất thú vị với khả năng sáng tạo vô bờ bến.

Ví dụ về animation của Vladyslav Tyzun cho một email hóa đơn của Paypal, được đăng trên Dribbble, là một ví dụ về sử dụng animation sai:

Author/Copyright holder: Vladyslav Tyzun. Copyright terms and licence: Fair Use.

Animation chuyển động rất đẹp nhưng lại thừa thãi. Trên tổng thể, nó chiếm tận 3.5 giây để xem được toàn bộ giao dịch. Trong khí đó, chỉ cần làm mờ hóa đơn là đã có thể tăng tính thanh lịch và tốn ít thời gian hơn cho người dùng.

Good: Stripe Checkout Animation

 Animation khi được làm có mục đích sẽ đem lại kết quả rất tuyệt. Nhìn vào Stripe Checkout animation, khi người dùng nhận được mã xác minh:

Author/Copyright holder: Stripe, Inc. Copyright terms and licence: Fair Use.

Stripe sử dụng animation để làm mọi thứ dường như nhanh hơn: Nó cung cấp người dùng những bản update ngay cả khi họ chưa nhận được SMS. Điều này làm giảm cảm giác thất vọng của khách hàng khi phải chờ đợi, đảm bảo rằng SMS đã được gửi.

Rachel Nabors, một chuyên gia về web animation, gợi ý năm nguyên tắc cần ghi nhớ khi thiết kế animation:

  1. Animation có chủ ý: suy nghĩ qua từng animation trước khi bạn tạo ra chúng.
  2. Phải mất nhiều hơn 12 nguyên tắc: 12 nguyên tắc về animation của Disney áp dụng hoàn hảo cho phim, nhưng nó không cần thiết cho websites hoặc apps.
  3. Chú ý tính hữu ích, cần thiết và sau đó mới là đẹp: thẩm mỹ chỉ nên đi sau UX.
  4. Nhanh: Animation tốt là không quá phô trương và phải nhanh chóng.
  5. Cài đặt chế độ bỏ qua: Đối với các animation lớn như hiệu ứng parallex, bạn nên tạo nút bỏ qua.

Bài học kinh nghiệm:

Luôn luôn làm animation có mục đích: quá nhiều animation có thể làm tiêu tan UX của một sản phẩm. Đẹp nhưng phải có chức năng.

Tóm lại

Thật thú vị khi nhìn thấy những lỗi của một thiết kế? Chúng giúp đưa ra những bài học đáng ghi nhớ. Dưới đây là những lưu ý chính và bài học rút ra từ năm ví dụ trên:

  1. Hiểu những gì người dùng cần và cung cấp chính những thông tin đó.
  2. Nếu bạn có rất nhiều thông tin cần truyền tải, hãy cố gắng sử dụng hình ảnh thay vì text.
  3. Luôn luôn gắn nhãn cho links! Người dùng không thích những đường link bí ẩn.
  4. Tránh thêm bất kỳ friction cản trở nào vào hành động của người dùng, trừ khi nó có chủ đích ngăn người dùng hành động tiếp. 
  5. Kiểm tra những chi tiết sáng tạo trong thiết kế của bạn và hãy cẩn thận khi thêm chúng.
  6. Animation giống như chửi thề. Nếu quá lạm dụng, nó sẽ hoàn toàn phản tác dụng.

Lần tới nếu gặp phải một thiết kế không ưng ý, bạn hãy cố tìm ra lý do, suy nghĩ rồi rút ra bài học. Và hãy chia sẻ với chúng mình tại cộng đồng UI.UX Sharing nhé.

Tác giả: YU SIANG TEO

Link: https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706

Tags:

Trả lời