- vừa được xem lúc

10 quy tắc vàng trong thiết kế UI (phần 1)

0 0 48

Người đăng: Nguyen Hoang Linh B

Theo Viblo Asia

Trong bài viết hôm nay, mình sẽ đề cập về 5 quy tắc đầu tiên trong 10 quy tắc vàng mà mọi UI Designer hay bắt kỳ vị trí liên quan đến phát triển sản phẩm công nghệ nào cũng cần nắm vững.

1. Visibility of system status (Hiển thị trạng thái của hệ thống)

Người dùng cần biết chuyện gì đang xảy ra

Người dùng luôn muốn kiểm soát tình hình, biết được điều gì đang diễn ra với hệ thống và không muốn có bất kỳ phản ứng "bất ngờ" nào từ hệ thống mà họ không lường trước được. Do vậy, hệ thống luôn phải cho người dùng biết được về chuyện gì đang xảy ra thông qua những phản hồi phù hợp và đúng thời điểm, để người dùng có thể nắm được tình hình và đưa ra những phán đoán.

Ví dụ:

Twitter cho người dùng biết trạng thái hiện tại (đang đăng tải) và có âm thanh báo hiệu khi đăng tải thành công

Hiển thị trạng thái hiện tại: đang chuẩn bị cài đặt, còn 25s nữa là hoàn thành. Thông báo về những gì sắp diễn ra: Máy tính sẽ tự động restart.

Đừng để user phải đoán già đoán non

Không nên chỉ hiển thị "hệ thống không đủ dung lượng trống" mà nên thay bằng cách có thể hiện thị số dung lượng còn lại trước khi thực hiện hành động chuyển file.

2. Match between system and the real world (Kết hợp hệ thống và thực tế)

Người dùng cần hiểu ngôn ngữ hiển thị của hệ thống

Hệ thống cần sử dụng ngôn ngữ gần gũi nhất với người dùng, thay vì sử dụng những thuật ngữ khó hiểu. Thông thường, có thể sử dụng những hình ảnh, quy trình giống như thực tế, đưa vào các quy trình trong hệ thống để người dùng có thể dễ dàng sử dụng và đi theo quy trình đúng.

Ví dụ:

Sử dụng cụm "How can we help you?" thay vì "FAQs" để người dùng dễ dàng hiểu được ý nghĩa của mục này.

Đồng hồ thông minh có thiết kế giống như đồng hồ truyền thống

Không nên sử dụng những thuật ngữ gây khó hiểu cho người dùng

3. User control and freedom (Cho phép người dùng đảo ngược hành động)

Người dùng cần "cửa thoát hiểm khẩn cấp"

Người dùng đôi khi sẽ có những hành động không may và họ sẽ cần một tính năng như "cửa thoát hiểm" - ngay lập tức đảo ngược hành động mà không cần thực hiện các quy trình nào khác. Vì vậy các chức năng tương tự undo, redo cần phải được ra đời.

Ví dụ:

Gmail cho phép người dùng Cancel quá trình gửi thư, hoặc thậm chí Undo (trong khoảng thời gian ngắn sau khi gửi)

Cho phép người dùng thay đổi hoặc xóa vật phẩm trong giỏ hàng trước khi thanh toán

Android: không cho phép người dùng undo khi typing (IOS thì có)

4. Consistency and standards (Tính nhất quán và đồng bộ)

Thiết kế nên phù hợp với thói quen người dùng, đáp ứng quy chuẩn chung

Có những quy chuẩn bất thành văn trong thiết kế web tạo thành thói quen sử dụng cho người dùng, UI designer cần nắm vững những quy chuẩn này để người dùng không cảm thấy bỡ ngỡ khi lần đầu sử dụng sản phẩm của bạn.

Ví dụ:

Button Đăng nhập luôn ở góc phải trên của bất kỳ web nào

Đừng để user nghi ngờ liệu những từ ngữ, hoàn cảnh, hay hành động khác nhau có mang cùng một ý nghĩa hay không?

Ví dụ:

Cùng tính năng nhưng có những phím tắt khác nhau trên các phiên bản của Adobe

5. Error prevention (Ngăn ngừa lỗi có thể xảy ra)

Phòng bệnh hơn chữa bệnh

Không ai muốn gặp phải lỗi trong quá trình sử dụng. Vì vậy nếu có thể, hệ thống nên loại bỏ tối đa những lỗi có thể xảy ra cho người dùng, bằng cách chặn hành động gây lỗi, hoặc thông báo cho họ trước khi họ xác nhận hành động.

Ví dụ:

Khi người dùng nhập budget cao hơn lần trước, Google Ads thông báo để confirm lại budget này trước khi bạn lưu thông tin

Facebook Ads không có tính năng chặn việc đăng tải quảng cáo không hợp lệ. Nếu bạn đăng quảng cáo không hợp lệ, Facebook sẽ xóa và thông báo sau khi quảng cáo được đăng tải.

Trên đây là 5/10 quy tắc vàng trong thiết kế UI. 5 quy tắc còn lại, mình sẽ đề cập trong phần tiếp theo nhé!

References:

  1. https://uxplanet.org/golden-rules-of-user-interface-design-19282aeb06b
  2. https://www.slideshare.net/crafted/10-usability-heuristics-explained

Bình luận

Bài viết tương tự

- vừa được xem lúc

UI UX là gì? UI, UX design là gì?

Công nghệ thiết kế UI, UX là một trong các công nghệ thiết kế web phổ biến được nhiều công ty, sử dụng để làm web cho các doanh nghiệp. Đây cũng là xu hướng thiết kế web được đánh giá sẽ tiếp tục được ưa chuộng và phát triển trong năm 2018.

0 0 172

- vừa được xem lúc

Ví dụ về UIActivityViewController

Trên iOS, UIActivityViewController cung cấp giao diện thống nhất để người dùng chia sẻ và thực hiện các hành động trên văn bản, hình ảnh, URL và các mục khác trong ứng dụng. let string = "Hello, world!". let url = URL(string: "https://nshipster.com").

0 0 58

- vừa được xem lúc

[CSS]: max(), min(), clamp(): when the size is no longer fixed

Chào mọi người, hôm nay mình xin phép được chia sẻ về 3 hàm tính toán đặc biệt trong CSS mà mình vừa mới được học, và có lẽ là 1 trong những hàm mà mình thích nhất . Là một Front-End dev, đặc biệt trong bối cảnh mobile first hiện tại, responsive không còn là 1 điều quá xa lạ, và hiển nhiên những sản

0 0 36

- vừa được xem lúc

UI Design - Các yếu tố cơ bản trong thiết kế giao diện

. UI components by Tran Mau Tri Tam. Nếu là một front-end developer, chắc hẳn bản thân bạn cũng sẽ ít nhiều hiểu được tầm quan trọng của UI đối với người dùng, cũng như việc một ứng dụng có giao diện đẹp, ưa nhìn sẽ giúp người dùng có cái nhìn tốt hơn và sẽ lựa chọn việc sử dụng ứng dụng của bạn nhi

0 0 35

- vừa được xem lúc

15 thư viện UI Components tốt nhất cho ReactJS

Giới thiệu:. .

0 0 50

- vừa được xem lúc

Optimistic UI update là cái gì?

Có thể bạn đã nghe từ Optimistic UI Update ở đâu đó rồi. Vậy nó là cái gì? Tại sao ta lại cần nó và cách mà nó được thực hiên.

0 0 38