Thiết kế hộp thoại

0
3162

Hộp thoại là một chức năng hữu ích của giao diện người dùng khi bạn thiết kế và sử dụng chúng hợp lý. Chúng có thể giúp người dùng hoàn toàn đạt được mục đích nhanh hơn và dễ dàng hơn. Ngược lại, nếu bị sử dụng sai cách hộp thoại có thể làm người dùng bối rối. Biết cách thiết kế hộp thoại sẽ cho phép bạn sử dụng chúng mà không khiến cho người dùng khó chịu.

Hộp thoại là gì?

Một hộp thoại là một phần overlay yêu cầu người dùng tương tác với nó, nó được thiết kế để gợi ra phản ứng từ người dùng. Hộp thoại thông báo cho người dùng về thông tin quan trọng buộc họ phải đưa ra quyết định, hoặc đòi hỏi nhiều thao tác. Trong các ứng dụng, trên website và thậm chí cả trên trên điện thoại, hộp thoại đang ngày càng được sử dụng để hướng sự chú ý của người dùng vào một công việc cụ thể, mà không cần thoát ra khỏi màn hình làm việc hiện tại.

Và bây giờ, hãy cùng nhìn qua những phương pháp thiết kế hộp thoại tốt nhất kèm với các ví dụ cụ thể về chúng nó

I.Giảm sự gián đoạn

Hãy hạn chế sử dụng hộp thoại vì tính chất của chúng là gây ra sự gián đoạn. Sự xuất hiện đột ngột của chúng buộc người dùng phải dừng công việc hiện tại của họ và tập trung vào nội dung của hộp thoại. Người dùng buộc phải giải quyết hộp thoại nếu muốn tiếp tục công việc và truy cập váo trang web bên dưới nó. Đôi khi đây là một điều tốt, chẳng hạn như khi người dùng phải xác nhận một thao tác quan trọng, nhưng phần lớn thời gian chúng không cần thiết và thường gây khó chịu.

Yêu cầu sự xác nhận

Một hộp thoại được sử dụng hiệu quả nhất trong trường hợp mà bạn cần người dùng tương tác trước khi tiếp tục, hoặc khi hậu quả của một sai sót là rất lớn.

Đừng mở hộp thoại một cách đột ngột

Đột ngột mở hộp thoại khi người dùng chưa kịp làm bất cứ điều gì là một ý kiến tồi. Nhiều trang web đang oanh tạc người dùng với hộp đăng ký như ví dụ dưới đây

Hộp thoại sẽ tạo ra vô số vấn đề cho người dùng không có bàn phím
Vì vậy hộp thoại nên luôn mở ra vào lúc người dùng đang (hoặc đã) thực hiện một thao tác nào đó. Thao tác đó có thể là click chuột vào nút, theo sau một liên kết hoặc thực hiện một sự chọn lựa nào đó.

Những điều cần lưu ý

  • Không phải mọi sự lựa chọn, cài đặt, hoặc chi tiết đều cần sự gián đoạn.
  • Có thể thay thế cho các hộp thoại bằng các menu hoặc inline expansion, cả 2 đều duy trì thuộc tính hiện tại.

Đừng chỉ làm hộp thoại xuất hiện đột ngột. Hãy để người dùng có thể dự đoán được khi nào chúng sẽ xuất hiện.

II.Hộp thoại vs Thế giới thực

Hộp thoại nên nói được ngôn ngữ của người dùng(sử dụng từ ngữ, câu và khái niệm quen thuộc với người dùng) chứ không phải là các thuật ngữ hệ thống chuyên ngành.

Câu hỏi và tùy chọn rõ ràng

Bạn nên sử dụng một câu hỏi hoặc câu lệnh rõ ràng với một lời giải thích trong phạm vi nội dung, chẳng hạn như “Xóa ổ đĩa của bạn?” hoặc “Xóa tài khoản của bạn?”. Nói chung, bạn nên tránh những câu xin lỗi, câu mơ hồ, hoặc câu hỏi, như “Cảnh báo!”,”Bạn có chắc không?”


Hộp thoại bên trái đặt ra một câu hỏi mơ hồ và không nêu rõ phạm vi ảnh hưởng của nó. Hộp thoại phải đặt ra một câu hỏi cụ thể, mô tả tác động của nó cho người sử dụng và cung cấp các hành động rõ ràng.

Tránh trình bày cho người dùng các tùy chọn mơ hồ hoặc không rõ ràng. Bạn chỉ nên sử dụng tùy chọn rõ ràng. Trong hầu hết các trường hợp, người dùng nên hiểu được các sự lựa chọn chỉ bằng cách nhìn vào các tiêu đề và nút dạng chữ.

Ví dụ tồi: Nút văn bản gạt bỏ “No” đưa ra hướng giải quyết cho các câu hỏi, nhưng không cho thấy điều gì sẽ xảy ra sau đó.

Hệ thống hộp thoại Android. Nguồn: Material Design.

VD hay: Nút dạng chữ khẳng định “Discard” chỉ rõ kết quả của quyết định.


Hệ thống hộp thoại trên Android. Nguồn: Material Design.

Cung cấp thông tin quan trọng

Điều quan trọng là một hộp thoại không làm tối nghĩa các thông tin có thể hữu ích cho người dùng. Ví dụ, một hộp thoại yêu cầu người dùng xác nhận việc xóa một số mục thì nên liệt kê các mục bị xóa.


Hộp thoại này chi tiết hóa một cách súc tích về tác động của nó.

Ngoài ra, tránh sử dụng nút dạng chữ “Learn more” để truy cập vào tài liệu trợ giúp; thay vào đó nên dùng in-line expansion bên trong hộp thoại. Hãy cung cấp thêm các thông tin đầy đủ hơn nếu việc đó là cần thiết trước khi bắt đầu một hộp thoại.

Cung cấp thông tin phản hồi

Khi một quá trình được hoàn thành, hãy nhớ hiển thị một tin nhắn thông báo (hoặc một phản hồi trực quan). Hãy để cho người dùng biết rằng họ đã làm tất cả những gì cần thiết.

Ví dụ của việc thành công sau khi thực hiện các thao tác.

Những điều cần lưu ý

  • Sử dụng câu hỏi và tùy chọn rõ ràng trong hộp thoại
  • Thiết kế hộp thoại sao cho mọi thông tin đều nằm trong đó.
  • Thông báo cho người dùng sau mỗi thao tác

III. Cố gắng để đạt được sự tối giản

Bạn không nên cố gắng nhồi nhét quá nhiều vào một hộp thoại. Hãy làm nó trông sạch sẽ và đơn giản (theo nguyên tắc KISS). Nhưng tối giản không có nghĩa là hạn chế. Tất cả thông tin nên có giá trị và có liên quan.

Số lần lựa chọn

Hộp thoại không bao giờ xuất hiện chỉ một phần trên màn hình. Bạn không nên sử dụng một hộp thoại chứa các nội dung chỉ có thể xem được khi dùng thanh cuốn.

Ví dụ dở: hộp thoại xử lý thanh toán của Ngân hàng Barclays có rất nhiều lựa chọn và các nội dung, một phần của các tùy chọn chỉ có thể thấy được khi sử dụng thanh cuốn (đặc biệt là cho các thiết bị di động có màn hình tương đối nhỏ).

Ví dụ hay: Strip sử dụng một hộp thoại đơn giản và thông minh với chỉ các thông tin cần thiết, các thông tin này nhìn được tốt cả trên máy tính để bàn và trên màn hình điện thoại di động

Số lần thao tác

Hộp thoại không nên có nhiều hơn hai thao tác. Một thao tác thứ ba, chẳng hạn như “Learn more,” sẽ kéo sự chú ý của người dùng ra khỏi hộp thoại, và có khả năng làm cho công việc không được hoàn thành.


“Learn more” kéo công việc ra khỏi hộp thoại, khiến công việc ở trong trạng thái không hoàn thành

Đừng bao gồm nhiều bước trong hộp thoại

Ngắt một công việc phức tạp thành nhiều bước là một ý tưởng tuyệt vời, nhưng nó cũng thường là một dấu hiệu cho thấy việc đó là quá phức tạp để yêu cầu người dùng hoàn thành trong phạm vi của một hộp thoại.

Nếu sự tương tác là phức tạp và đòi hỏi nhiều bước (như trong ví dụ dưới đây), thì nên có một trang riêng cho nó.

Những điều cần lưu ý:

  • Nếu bạn đang cố gắng nhồi nhét nhiều phần tử vào một hộp thoại thì có nghĩa là một hộp thoại không phải là giải pháp thiết kế tốt nhất).
  • Đơn giản hóa các hộp thoại bằng cách loại bỏ các yếu tố hoặc nội dung không cần thiết, không hỗ trợ công việc của người dùng.
  • Cố gắng tránh hộp thoại với nhiều bước.

IV. Lựa chọn loại hộp thoại phù hợp

Hộp thoại này có hai loại chính. Loại đầu tiên là hộp thoại Modal, buộc người dùng tương tác với chúng trước khi tiếp tục. Hộp thoại modal thường được sử dụng cho các quá trình riêng rẽ, kết khối, mà ở đó:

  • Mọi thứ xung quanh không đóng vai trò trong việc quyết định lựa chọn hành động
  • Việc thực hiện các hành động như là ‘accept’ hoặc ‘cancel’ sẽ đóng hộp thoại. Nó sẽ không đóng khi ta click vào các khu vực bên ngoài
  • Việc người dùng chỉ hoàn tất một phần của hộp thoại là không được.

Loại thứ hai là hộp thoại non-modal cho phép người dùng click chuột hoặc click vào bên ngoài hộp thoại để đóng chúng.

Bạn nên sử dụng các hộp thoại modal (loại đầu tiên) chỉ đối với các tương tác rất quan trọng (ví dụ: xóa tài khoản, đồng ý với các điều khoản và điều kiện).

Modal dialog: người dùng phải xác nhận thao tác xóa bằng cách gõ chữ ‘delete’

Ngoài ra các hộp thoại trên hệ thống điện thoại di động là dạng modal và thường có các yếu tố cơ bản sau- nội dung, hành động, và tiêu đề.

Cửa số hộp thoại modal Android.


Cửa số hộp thoại modal Android

V.Tính nhất quán thị giác

Trang nền phía sau hộp thoại

Điều quan trọng khi một hộp thoại được mở ra là trang phía sau nó hơi tối màu. Điều này thực hiện hai nhiệm vụ. Thứ nhất nó thu hút sự chú ý đến overlay và thứ hai là nó khiến người dùng biết rằng trang này hiện đang không hoạt động.


Hộp thoại modal trên Android.

Hãy cẩn thận với việc phối màu. Nếu màu sắc quá tối, người dùng sẽ không còn có thể nhìn thấy trang nền. Nếu màu sắc quá sáng, người dùng có thể nghĩ rằng trang web vẫn còn hoạt động và có thể thậm chí không để ý hộp thoại ngay từ đầu.

Tùy chọn đóng hoàn toàn

Nên có một tùy chọn close cho một hộp thoại ở góc trên bên phải. Nhiều hộp thoại có nút “x” ở góc cửa sổ mà người dùng sử dụng để thoát khỏi cửa sổ đó. Tuy nhiên, nút ‘x’ này không phải là một lối thoát dễ dàng cho người dùng bình thường. Nó thường mất nhiều thời gian và công sức để click vào ‘x’ bởi vì nó có kích thước nhỏ và người dùng phải xác định và click vào nó.

Tốt nhất là bạn cho phép người dùng thoát khỏi cửa sổ non- modal khi họ click vào vùng nền bên ngoài của nó.

Twitter sử dụng cả nút ‘x’ và click vào nền ngoài để thoát ra.

Tránh việc dùng hộp thoại này mở hộp thoại kia

Nên tránh việc dùng hộp thoại này mở ra thêm một hộp thoại đơn khác, vì chúng làm tăng thêm cảm nhận chiều sâu của các trang web hoặc các ứng dụng và tạo thêm sự phức tạp thị giác.


Ví dụ: Hộp thoại ở bên trong hộp thoại

Những điều cần lưu ý:

  • Cho phép người dùng click chuột ra phía ngoài để đóng hộp thoại trong hầu hết các trường hợp (trừ các hộp thoại modal).
  • Hộp thoại nên tránh mở thêm ra các hộp thoại đơn khác.

Kết luận

Tôi hy vọng những phương pháp này thú vị và sẽ có ích trong việc tạo mẫu. Hãy nhớ rằng, Trải Nghiệm Người Dùng là về con người, không phải về công nghệ. Thật dễ dàng để tìm ra những gì là tốt nhất cho người dùng của bạn và công việc của họ: thiết lập các hộp thoại mới nhất, và thử nghiệm chúng với một số ít người dùng.

Techtalk via UXplanet