Những quy tắc “vàng” trong làng thiết kế UI/UX phần 1

Các Quy tắc vàng trong thiết kế giao diện người dùng

 

Hi Quincy again! Chẳng là trong quá trình làm việc của tớ đã gặp cơ số thể loai designer và vô số kiểu mẫu thiết kế khác nhau. Theo tớ mỗi designer có một phong cách thiết kế khác nhau và đặc trưng riêng của họ vì thế ít nhiều thì cái sự đăc trưng gọi là điểm nhấn đó được thêm, nêm nếm quá đà vào sản phẩm của họ tùy mức độ có tâm của họ. Có thể kể đến dự án gần đây nhất mà tớ tham gia với tư cách là một fontend dev. Tớ gặp 1 bà design úi trời vô cùng là ba chấm a. 🙁 . Chẳng là ít nhiều tớ cũng tự tin vào kiến thức được học của mình đi nên là mạnh dạn feedback lại những thứ được cho là thừa thãi, bất cập, gây confuse cho người dùng với khách hàng. Vào một ngày đẹp giời như bao ngày đẹp giời khác tớ vs lead goi đên với khách để mà giãi bày vì mấy cái lỗi trong thiết kế cho thỏa nỗi bức xúc dồn nén. Ừ thì thật ra là khách cũng là người ngoài giới –“ngoại đạo” nên tớ nghĩ những feedback của tớ sẽ đc chấp thuận ngay thôi hehe :D. Nhưng không! đời không như mơ khách “bế” ngay bà thiết kế vào để trả lời những thắc mắc của bọn tớ. Ừ thôi chả sao chắc cũng okela thôi. Nhưng lại không mọi người ạ!!! T.T Những thứ tớ cho là thừa hay bất hợp lí trong thiết kế của bà ấy thì bà ấy phán 1 câu xanh rờn, xanh còn hơn màu của bầu trời ngày hôm đó- một ngày đẹp trời của tớ ” em cho vào là vì muốn thiết kế có điểm nhấn ” ‘>.<.  Ôi thôi xong điểm nhấn như này thì chịu luôn ý các bác. Thế này có chết em không, nhấn chìm em chứ điểm nhấn gì. Rõ ràng 2 trang giống nhau thì một bên chị ấy thêm mấy cái kẻ kẻ vào một bên không cho vào, rồi mấy cái đường kẻ còn đứt đứt mà tớ phải zoom 77 49 lần lên mới nhìn thấy. Mà khổ một nỗi nó lại ko tái tạo được bằng css ý phải dùng toàn bộ là ảnh. Vậy nên mới có cái vụ khóc mếu đi feedback chứ mà để cái đống ảnh đấy vào web thì lương tâm tớ không cho phép =))). Sau vụ đấy tớ đã nhất định phải viết nên bài này để vừa là chia sẻ cho những ai chưa biết cũng là cơ hội ôn lại cho bản thân. Cụ thể có những quy tắc vàng trong thiết kế xây dựng giao diện người dùng mà chắc chắn phải tuân theo để người dùng có trải nghiệm tốt khi sử dụng sản phẩm của bạn.

Ben Shneerman là một nhà khoa học máy tính người Mỹ và trong cuốn sách nổi tiếng của mình Thiết kế giao diện người dùng: Chiến lược tương tác giữa người và máy tính hiệu quả, nói về 8 quy tắc vàng của thiết kế giao diện:
Thực hiện theo “Quy tắc vàng về thiết kế giao diện” của Ben Shneerman, nếu bạn muốn thiết kế giao diện người dùng tuyệt vời, năng hiệu quả và không gây thất vọng. Apple, Google và Microsoft là một trong số những công ty rất thành công có sản phẩm được thiết kế tốt phản ánh các quy tắc của Shneerman. Các đặc điểm bắt nguồn từ các quy tắc vàng của Shneerman, có thể được nhận ra trong các nguyên tắc giao diện người dùng khác nhau được tạo ra bởi các công ty khổng lồ như các công ty đã đề cập ở trên. Hiện thân trực quan của các quy tắc này thậm chí còn rõ ràng hơn trong các giao diện phổ biến mà chúng tạo ra. Bài viết này sẽ chỉ ra cách bạn cải thiện thiết kế của bạn bằng cách tích hợp 8 quy tắc vàng vào trong dự án của mình.

1. Strive for consistency

Thời buổi 4.0 này một người một ngày có thể trải nghiệm hàng chục website nên mức độ tích lũy trải nghiệm càng lớn. Tức là đồi với cùng một kiểu thiết kế, hình dạng, vị trí thì người dùng có xu hướng quen với thao tác từng trải nghiệm.

Các chuỗi hành động nhất quán nên được yêu cầu trong các tình huống tương tự, nên sử dụng thuật ngữ giống hệt nhau trong các lời nhắc, menu và màn hình trợ giúp và các lệnh nhất quán nên được sử dụng xuyên suốt.

Tính nhất quán từ lâu đã là một yếu tố quan trọng trong việc xây dựng thương hiệu, nhưng nó cũng đóng góp rất nhiều vào trải nghiệm người dùng.

 

Não bộ được thiết kế để học các phím tắt tinh thần, cho đến khi chúng ta thậm chí không nhận ra mình đang làm điều đó. Khi đèn giao thông chuyển sang màu xanh, chúng tôi không phân tích tình huống và sau đó đưa ra quyết định có ý thức để tăng tốc, chúng tôi chỉ làm theo bản năng.

Bây giờ hãy tưởng tượng rằng một ngày, thiết lập màu xanh lá cây, vàng, đỏ điển hình đã được thay thế bằng Go, Get Ready và Stop. Bạn chắc chắn sẽ ngạc nhiên và thậm chí chỉ trong vài giây, bạn sẽ suy nghĩ về những gì đang xảy ra trước khi tăng tốc.

Vấn đề là, vài giây này rất quan trọng khi nói đến thiết kế. Người dùng chỉ đơn giản mong đợi mọi thứ có ý nghĩa và có thể nhanh chóng trở nên thất vọng khi họ không thấy quen thuộc và vô cùng lạ lẫm .

Trở lại màu sắc. Chúng tôi điền vào một biểu mẫu trực tuyến, sau đó gửi bằng cách nhấp vào, giả sử, một nút màu xanh. Sau đó, chúng tôi điền vào một hình thức khác, và nút gửi cũng có màu xanh. Cuối cùng, chúng tôi quyết định đăng ký và lời kêu gọi hành động có màu xanh da trời. Mỗi khi chúng ta tương tác, chúng ta trở nên tốt hơn, nhanh hơn và hiệu quả hơn bằng cách học cách mọi thứ hoạt động và nhận ra các mẫu thiết kế.

Thời gian cần thiết, được gọi là thời gian thực hiện nhiệm vụ, là một trong những số liệu được sử dụng để đo lường mức độ sử dụng, một lần nữa cho thấy lợi ích của việc kiểm tra khả năng sử dụng như đã đề cập trước đó.

Đương nhiên, tính nhất quán hạn chế sự đổi mới; tuy nhiên, sự đổi mới có thể là một yếu tố thay đổi cuộc chơi miễn là sự thiếu nhất quán là giá trị mà nó mang lại cho người dùng về lâu dài. Trong kịch bản này, một UX nội trú được cân nhắc kỹ lưỡng để giới thiệu cho người dùng ứng dụng (hoặc một số tính năng nhất định) có thể là một lựa chọn phù hợp.

Tóm lại, đừng đánh giá thấp sức mạnh của sự giống nhau!

2. Enable frequent users to use shortcuts

Với việc sử dụng tăng lên, nhu cầu về các phương pháp hoàn thành nhiệm vụ nhanh hơn và để giảm số lượng tương tác. Chữ viết tắt, phím chức năng, lệnh ẩn và tiện ích macro rất hữu ích cho người dùng chuyên gia.

3. Offer simple error handling.

Người dùng nên biết họ đang ở đâu và những gì đang diễn ra mọi lúc. Đối với mọi hành động nên có phản hồi phù hợp, có thể đọc được của con người trong một khoảng thời gian hợp lý. Đối với các hành động thường xuyên và nhỏ, phản hồi có thể khiêm tốn, trong khi đối với các hành động không thường xuyên và lớn, phản hồi nên đáng kể hơn.

4. Design dialogue to yield closure

Đừng để người dùng của bạn đoán. Nói với họ những gì hành động của họ đã dẫn họ đến.

Phản hồi thông tin khi hoàn thành một nhóm hành động mang lại cho người vận hành sự hài lòng về thành tựu, cảm giác nhẹ nhõm, tín hiệu để loại bỏ các kế hoạch dự phòng và các lựa chọn từ tâm trí của họ, và một dấu hiệu cho thấy cách rõ ràng để chuẩn bị cho nhóm tiếp theo của hành động.

5. Offer simple error handling.

Càng nhiều càng tốt, thiết kế hệ thống để người dùng không thể mắc lỗi nghiêm trọng. Nếu xảy ra lỗi, hệ thống sẽ có thể phát hiện lỗi và đưa ra các cơ chế đơn giản, dễ hiểu để xử lý lỗi.

6. Permit easy reversal of actions

Tính năng này làm giảm sự lo lắng, vì người dùng biết rằng các lỗi có thể được hoàn tác; do đó nó khuyến khích khám phá các lựa chọn không quen thuộc. Các đơn vị đảo ngược có thể là một hành động đơn lẻ, nhập dữ liệu hoặc một nhóm hành động hoàn chỉnh.

7. Support internal locus of control.

Các nhà khai thác có kinh nghiệm mong muốn mạnh mẽ rằng họ chịu trách nhiệm về hệ thống và hệ thống đáp ứng với hành động của họ. Thiết kế hệ thống để làm cho người dùng khởi xướng hành động chứ không phải người phản hồi.

8. Reduce short-term memory load.

Giới hạn xử lý thông tin của con người trong bộ nhớ ngắn hạn đòi hỏi các giao diện phải đơn giản nhất có thể với hệ thống phân cấp thông tin phù hợp và chọn nhận dạng qua thu hồi. Nhận biết một cái gì đó luôn dễ dàng hơn so với việc nhớ lại bởi vì sự công nhận liên quan đến việc nhận biết các tín hiệu giúp chúng ta tiếp cận với bộ nhớ rộng lớn của chúng ta và cho phép thông tin liên quan xuất hiện.

9.Use color to develop a hierarchy

Màu sắc là một trong nhiều cách người dùng tìm hiểu cách sử dụng và hiểu cách giao diện hoạt động. Trong đó bản chất của con người là nhận biết hơn là nhớ lại, màu sắc là một trong những khía cạnh dễ nhận biết nhất trong cuộc sống hàng ngày. Mỗi màu sắc có trọng lượng hình ảnh, có thể giúp chúng tôi phát triển hệ thống phân cấp giữa các nội dung của chúng tôi. Bằng cách sử dụng màu sắc nhẹ hơn, chúng ta có thể gán các mức độ quan trọng khác nhau cho các yếu tố.

Nguyên tắc nhỏ ở đây là nếu một yếu tố quan trọng hơn yếu tố khác, thì nó phải có trọng lượng hình ảnh cao hơn. Điều này giúp người dùng dễ dàng lướt nhanh trang và phân biệt giữa thông tin quan trọng và ít quan trọng hơn.

Thông tin lớn hơn, táo bạo hơn là những gì mắt người dùng sẽ được rút ra trước tiên, và sau đó họ sẽ chuyển sang thông tin hỗ trợ bên dưới thông tin đó.

Bạn muốn truyền đạt lỗi? Vâng, sự lựa chọn tốt nhất là sử dụng màu đỏ.

10.Optimise contrast

Sử dụng độ tương phản không chỉ thu hút ánh mắt của người dùng vào thông tin liên quan trên trang mà còn cải thiện khả năng truy cập của sản phẩm. Tương phản, trong ngắn hạn, giúp các yếu tố nổi bật. Chúng ta có thể tối ưu hóa độ tương phản với màu sắc, kích thước, độ sâu và hơn thế nữa, điều này giúp cải thiện sự rõ ràng bằng cách chuyển sự chú ý của người dùng. Đó là một cách phi ngôn ngữ để làm rõ những gì người dùng nên xem xét trên tất cả những thứ khác.

Thiết kế một sản phẩm tương tự như xây dựng một tòa nhà công cộng như thư viện hoặc trường học, nó cần phải bao gồm tất cả. Điều đó bao gồm người mù, mù màu và người dùng khiếm thị.

Nguyên tắc truy cập nội dung web (WCAG) yêu cầu độ tương phản tối thiểu 4,5: 1.

Tobe continue …
Phần 2