Tiêu chuẩn trong thiết kế giao diện người dùng

5d93afdf9a2e23846ae2b87a674ff670

Học cách thiết kế với sự nhất quán và tiêu chuẩn trong đầu và hiểu lý do tại sao chúng quan trọng để kết hợp chúng vào công việc của bạn. Bắt nguồn từ Nguyên tắc Mười Giao diện Người dùng (UI) của Jakob Nielsen và Rolf Molich, ‘Tính nhất quán và Tiêu chuẩn’ thể hiện rõ trong nhiều sản phẩm được sử dụng rộng rãi do một số công ty thành công nhất tạo ra. Các sản phẩm như Adobe Photoshop, ban đầu được phát hành vào những năm 1990 và Google Gmail, được phát hành vào giữa những năm 2000, chỉ là một vài trong số các sản phẩm phổ biến rộng rãi thể hiện quy tắc ngón tay cái quan trọng này. Bài viết này sẽ dạy bạn cách nhận ra tính nhất quán và tiêu chuẩn cũng như giải thích tại sao chúng lại quan trọng trong thiết kế giao diện người dùng .

Hai lý do chính cho sự nhất quán và tiêu chuẩn trong thiết kế giao diện người dùng

Khi bạn thiết kế giao diện người dùng, điều quan trọng là phải ghi nhớ các tương tác diễn ra giữa nhận thức của con người và màn hình mà bạn đang thiết kế. Làm cho mọi thứ dễ dàng hơn cho người dùng của bạn có nghĩa là không buộc họ phải học các cách trình bày hoặc bộ công cụ mới cho mỗi tác vụ. Giảm thời lượng của quá trình suy nghĩ bằng cách loại bỏ sự nhầm lẫn cũng là một đặt cược chắc chắn khi nói đến việc cải thiện trải nghiệm người dùng .

1. Giảm học

Tính nhất quán giới hạn số lượng cách các hành động và hoạt động được biểu diễn, đảm bảo rằng người dùng không phải học các cách biểu diễn mới cho mỗi tác vụ. Hơn nữa, việc thiết lập các quy chuẩn thiết kế như tuân theo các quy ước nền tảng cho phép người dùng hoàn thành các nhiệm vụ mới mà không cần phải học một bộ công cụ hoàn toàn mới. Điều này nghe có vẻ như là một khái niệm đơn giản, nhưng có rất nhiều ví dụ cho thấy sự thiếu nhất quán trong thiết kế của họ. Một ví dụ điển hình cho vấn đề này là trang web cho Xfinity của Comcast Corporation, một công ty truyền thông đại chúng của Mỹ. Trong trang web của họ, không chỉ menu phụ không nhất quán hầu như mỗi khi người dùng nhấp vào một trang khác, mà còn không nhất quán đối với menu chính. Chúng ta hãy xem xét và so sánh ba trang khác nhau của trang web: Homepage, My Xfinity và TV.

5d93afdf9a2e23846ae2b87a674ff670Tác giả / Chủ bản quyền: Comcast Corporation. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.

Đây là trang chủ của trang web Xfinity. Lưu ý rằng khu vực được chú thích làm nổi bật cả thanh menu chính và phụ sẽ khác nhau như thế nào khi người dùng nhấp vào các trang khác.

aecd3a5ddcedd8d8f31339d555bf64e9Tác giả / Chủ bản quyền: Comcast Corporation. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.

Đây là trang TV của trang web Xfinity. Điều khiến người dùng khó hiểu là màu sắc, bố cục và kiểu phông chữ trông khác với trang chủ như thế nào.

23c1da1160aa3edbbe49f87d1e428f80Tác giả / Chủ bản quyền: Comcast Corporation. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.

Đây là trang My Xfinity của trang web Xfinity. Tất cả ba trang được kiểm tra ở trên có màu sắc, bố cục và kiểu phông chữ rất khác nhau trong menu điều hướng của chúng . Những khác biệt này làm cho người dùng khó hiểu và mất phương hướng vì không còn cảm thấy giống như một trang web, như thể họ là ba công ty khác nhau.

2. Loại bỏ sự nhầm lẫn

Người dùng có xu hướng áp dụng các quy tắc mà họ đã trải qua bên ngoài trang web hoặc sản phẩm của bạn, mang lại một loạt các kỳ vọng của riêng họ. Biết được điều đó, chúng ta nên lưu ý đến việc liệu chúng ta có đang gây ra sự nhầm lẫn và xa lánh khi chúng ta đi lệch khỏi các tiêu chuẩn và quy ước thiết kế hay không. Hơn nữa, người dùng sẽ không phải mất thời gian tự hỏi liệu các từ ngữ, tương tác hoặc hành động khác nhau có thực sự có ý nghĩa giống nhau trong ngữ cảnh sản phẩm của bạn hay không. Sự nhầm lẫn xảy ra khi mọi người không thể ‘ghép’ thông tin lại với nhau và đôi khi, cản trở họ đạt được điều gì đó. Khi người dùng bị cản trở trong việc đạt được mục tiêu, họ có thể cảm thấy tức giận hoặc thất vọng là điều dễ hiểu. Không có gì bí mật khi sự nhầm lẫn thường gây ra sự thất vọng và sự thất vọng dẫn đến trải nghiệm người dùng kém. Vì vậy,

Năm cách bạn có thể đạt được sự nhất quán trong công việc của mình

Có nhiều khía cạnh để đạt được sự nhất quán trong giao diện người dùng của bạn. Dưới đây là 5 điều bạn có thể xem xét để cải thiện tính nhất quán trong thiết kế của mình:

1. Lựa chọn ngôn ngữ của bạn

Ngôn ngữ bạn sử dụng trong cả bản sao tiếp thị cũng như từ ngữ được sử dụng trong suốt luồng người dùng không chỉ có thể ảnh hưởng đến nhận thức của người dùng về sản phẩm của bạn mà còn là điểm gây nhầm lẫn khi bạn sử dụng các thuật ngữ khác nhau để đại diện cho cùng một thứ. Điều này không chỉ liên quan đến các thuật ngữ bạn chọn mà còn liên quan đến giọng điệu mà bạn truyền tải thông điệp của mình.

Ví dụ: khiến người dùng của bạn sợ hãi bằng một thông báo lỗi nghiêm trọng và đe dọa khi họ đang duyệt một trang web thương mại điện tử có giọng điệu thân thiện tổng thể chắc chắn sẽ giết chết một trải nghiệm người dùng tốt.

Khi mọi thứ có nghĩa giống nhau hoặc thực hiện cùng một thao tác, chúng phải được thể hiện theo cùng một cách, như trường hợp trong cơ sở email của Google, Gmail. Dựa trên phong cách tổ chức của các ứng dụng email khách, các thư mục của Gmail được gắn nhãn ‘Hộp thư đến’, ‘Thư nháp’, ‘Thư đã gửi’, v.v. Ngôn ngữ được sử dụng cho các thư mục này cho thấy sự quen thuộc và nhất quán đối với bất kỳ ai đã sử dụng ứng dụng email trước đây.

2d5e370588d4140624b7867d31a6bd4fTác giả / Chủ bản quyền: David Bruce Jr. 2011. Điều khoản bản quyền và giấy phép: CC BY 2.0

 

Các nhãn thư mục trong Gmail phiên bản 2011 hiển thị nhiều tùy chọn quen thuộc. Ngôn ngữ được sử dụng cho các thư mục này cho thấy tính nhất quán vì nó sử dụng các nhãn “Hộp thư đến”, “Thư nháp” và “Thư rác” – tất cả đều quen thuộc với bất kỳ ai đã sử dụng ứng dụng email trước đây.

2. Áp dụng các phần tử giao diện người dùng khi chúng được xác định ban đầu

Các phần tử giao diện người dùng thường được sử dụng, chẳng hạn như cửa sổ tin nhắn, thanh menu, biểu tượng, thanh cuộn và nút radio, là các phần tử đồ họa thường nhất quán và có các biểu diễn được người dùng hiểu rộng rãi. Ví dụ: các nút radio được sử dụng khi chỉ có một tùy chọn được phép. Mặt khác, hộp kiểm chỉ nên được sử dụng khi người dùng được phép nhiều hơn một tùy chọn. Theo nhiều cách, chúng ta có thể thấy HTML5 đánh bại công nghệ Flash như thế nào vào cuối năm 2014. Một trong những lý do được cho là tính dễ ứng dụng và dễ sử dụng mà các nhà phát triển, nhà thiết kế và người dùng có thể tận hưởng do tính nhất quán và tiêu chuẩn của HTML5 trong xác định các yếu tố giao diện người dùng của chúng.

28e90e57f8ce9814cdfb9de9910d47f2

Các nút radio chỉ cho phép một tùy chọn. Do đó, nó chỉ có ý nghĩa đối với các nút radio tích hợp của HTML cũng hoạt động theo cách đó về chức năng .

7114fe396ec6670356fbdfc13641cefd

Hộp kiểm cho phép nhiều hơn một tùy chọn. Do đó, nó chỉ có ý nghĩa đối với các hộp kiểm tích hợp của HTML cũng hoạt động theo cách đó về chức năng.

Một ví dụ tồi về sự nhất quán trong việc lựa chọn các yếu tố giao diện người dùng xuất hiện trong phần bình luận mà trang web tin tức của BBC từng có trong quá khứ. Nhận xét của người dùng được xếp hạng cao nhất được biểu thị bằng một mũi tên hướng về phía nam, tuy nhiên người dùng phải nhấp vào mũi tên hướng về phía bắc để tăng xếp hạng nhận xét. Sử dụng mũi tên quay về hướng nam để biểu thị các nhận xét được đánh giá cao nhất cũng không trực quan; số lượng ngày càng tăng đi lên chứ không phải đi xuống. Khi người dùng quét phần nhận xét của trang web, họ có thể chỉ hành động theo các mũi tên, không đọc nhãn hành động, điều này có thể tạo ra các lựa chọn không chính xác.

Không sử dụng các biểu diễn hình ảnh thường dùng sẽ buộc người dùng tương tác có ý thức với giao diện người dùng theo cách không thoải mái, điều này làm giảm tốc độ họ có thể điều hướng và thực hiện các tác vụ mong muốn.

afb3ec6fd44c2fd15c180d24805ab791

Tác giả / Người giữ bản quyền: BBC. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.

 

Phần Bình luận của BBC hiển thị mũi tên xuống cho ‘Xếp hạng cao nhất’ và mũi tên lên cho ‘Xếp hạng thấp nhất’. Cách trình bày này không nhất quán và gây nhầm lẫn cho người dùng của bạn, vì khái niệm “cao hơn” thường đồng nghĩa với mũi tên lên và “thấp hơn” đồng nghĩa với mũi tên xuống.

3. Xem xét các quy ước khác nhau được thiết lập tốt khi quyết định bố trí.

Chắc chắn còn tranh cãi về việc liệu một nhà thiết kế có nên “sao chép” cách người khác sắp xếp trang web hoặc ứng dụng của họ hay không. Tuy nhiên, khi bạn thiết kế với quan điểm và nhận thức của người dùng, điều quan trọng là phải hiểu rằng con người có trí nhớ mạnh mẽ về vị trí trực quan của mọi thứ trên màn hình. Bạn nên tận dụng đặc điểm này bằng cách dành các vị trí thường được sử dụng cho các yếu tố đồ họa khác nhau như có biểu trưng ở trên cùng bên trái, trường tìm kiếm ở trên cùng bên phải, biểu tượng thoát ở trên cùng bên phải, v.v.

262c53c13c14713682dd1e0700a35302Tác giả / Chủ bản quyền: Tập đoàn Microsoft. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.

d920a032ef379e110325e8b2c0002f30Tác giả / Chủ bản quyền: Apple Inc. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.

 

 

 

Cả Microsoft và Apple đều đặt logo của họ ở trên cùng bên trái và trường tìm kiếm ở trên cùng bên phải trang web của họ. Hình thức nhất quán trong bố cục này giúp người dùng ít cảm thấy mất phương hướng hơn khi họ duyệt qua một trang web mới và không quen thuộc.

4. Thiết kế cho kỳ vọng của người dùng của bạn

Đảm bảo rằng bạn có các tính năng và chức năng mà người dùng mong đợi sẽ thấy trên trang web của bạn. Ví dụ: một trang web hàng không nên có hệ thống đặt vé, trong khi một trang web chia sẻ âm nhạc nên có một trình phát đa phương tiện.

5a5f3d93b6ea857c97c44b7db3358be3Tác giả / Chủ bản quyền: Youtube. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.

 

Một trang web chia sẻ video như YouTube rõ ràng là phải có trình phát video. Đây là một ví dụ tuyệt vời về tính nhất quán trong đó các tính năng và chức năng của trang web hỗ trợ những gì người dùng mong đợi.

5. Tạo các yếu tố hình ảnh nhất quán trên toàn bộ trang web của bạn

Đảm bảo các yếu tố hình ảnh nhất quán trên toàn bộ trang web của bạn. Nội dung, các yếu tố giao diện người dùng, phông chữ, hình nền và màu sắc phải hài hòa và tạo cảm giác nhất quán ở mọi điểm tiếp xúc. Như đã đề cập ở trên, tuân thủ các quy ước kỹ thuật tồn tại dưới dạng HTML5 và CSS3 là một cách để giữ tính nhất quán. Trong khi đó, có một hướng dẫn về thương hiệu và phong cách để tuân theo sẽ giúp ích khi đối mặt với các quyết định về thiết kế như màu sắc và phông chữ.

f6193b4e6a9c8ac399d8c6c8e5dc2fe2Tác giả / Người giữ bản quyền: Jan-Alfred Barclay. Behance. Điều khoản bản quyền và giấy phép: CC BY-NC 4.0

 

Một ví dụ về hướng dẫn phong cách và hướng dẫn xây dựng thương hiệu được thiết kế cho công ty, ‘Goodnyt’. Có một hướng dẫn về phong cách và thương hiệu có thể giúp bạn đảm bảo các yếu tố hình ảnh nhất quán trên toàn bộ trang web của mình.

Một ví dụ tồi về sự nhất quán trong lựa chọn màu sắc và phông chữ có thể được nhìn thấy trong phiên bản 2013 của giao diện người dùng Gmail dành cho thiết bị di động của Google. Mặc dù có thể lập luận rằng ‘ý nghĩa’ không bị ảnh hưởng trong trường hợp này, nhưng không thể phủ nhận rằng trải nghiệm người dùng hầu như luôn xấu đi do bất kỳ sự khác biệt kỳ lạ nào trong các yếu tố hình ảnh giữa các màn hình.

6dee15ec39ed5bf043e8cf64e17c2cb7

Tác giả / Chủ bản quyền: Google Inc. Điều khoản bản quyền và giấy phép: Sử dụng hợp pháp.

Ảnh chụp màn hình giao diện người dùng dành cho thiết bị di động của ứng dụng Gmail khi nó được triển khai lần đầu tiên vào năm 2013 cho thấy sự không nhất quán trong việc lựa chọn các hộp màu và kiểu phông chữ.

Mang đi

Tính nhất quán và tiêu chuẩn được thừa nhận như một nguyên tắc thiết kế thiết yếu và cần được áp dụng xuyên suốt nội dung và các tương tác trong sản phẩm của bạn. Có một số khía cạnh về tính nhất quán mà chúng ta có thể xem xét khi cải thiện thiết kế của mình, điều này bao gồm ngôn ngữ chúng ta sử dụng, các yếu tố giao diện người dùng mà chúng ta chọn, cách chúng ta bố trí trang web của mình, các chức năng và tính năng chúng ta đưa vào cũng như các thành phần trực quan chúng tôi quyết định về màu sắc và phông chữ.

Mặc dù tính nhất quán giúp cải thiện trải nghiệm người dùng bằng cách loại bỏ sự học hỏi và nhầm lẫn không cần thiết cho người dùng của bạn, nhưng điều quan trọng cần lưu ý là bạn nên sử dụng nó khi cần thiết nhưng không để nó hạn chế bạn đổi mới ý tưởng thiết kế khi nó có ý nghĩa.

Tuân theo các tiêu chuẩn và quy ước và nhất quán phải là điều mà bạn có thể sử dụng để có lợi cho mình. Nó sẽ giải phóng bạn khỏi những quyết định thiết kế tương đối tầm thường. Điều này sẽ giúp bạn tiết kiệm thời gian và giải phóng tâm trí để bạn có thể cải thiện hơn nữa thiết kế của mình và trải nghiệm người dùng của nó cho người dùng của bạn.

Start typing and press Enter to search

Shopping Cart