it-swarm-vi.com

Các hộp kiểm và nút radio khó hiểu

Tôi có một vấn đề xây dựng một giao diện người dùng nhất định cho một trang web. Tôi sẽ trình bày vấn đề với một trang web đơn giản cho chuỗi nhà hàng:

Bối cảnh

trang web có nhiều người dùng và nhiều nhà hàng. Mỗi nhà hàng có một số người dùng nhất định được gán cho nó, trong đó người dùng có thể là người quản lý, đầu bếp hoặc người phục vụ.

người phục vụ có thể thấy địa chỉ của các đơn hàng đến, đầu bếp có thể thấy rằng nội dung của các đơn hàng (thực phẩm là gì) và người quản lý có thể thấy cả hai điều này có thể thay đổi vai trò của bất kỳ người dùng nào.

Chỉ có thể có một người quản lý cho mọi nhà hàng, nhưng có nhiều đầu bếp và người phục vụ như mong muốn. Đây là giao diện người dùng như bây giờ:

mockup

tải xuống nguồn bmml - Wireframes được tạo bằng Balsamiq Mockups

Vấn đề

Người dùng chỉ có thể có một vai trò vì mỗi vai trò có tất cả các đặc quyền của các vai trò trước đó cộng với một đặc quyền mới. Vì vậy, không ai có thể vừa là người phục vụ vừa là người nấu ăn, người nấu ăn và người quản lý, v.v. Điều đó không rõ ràng khi sử dụng UI ở trên, vì người ta có thể kiểm tra hai hộp kiểm cho cùng một người dùng hoặc thậm chí cả ba vai trò.

Câu hỏi

Làm thế nào để bạn thực hiện ý tưởng này rõ ràng thông qua giao diện người dùng? 'ý tưởng' chỉ có thể có một người quản lý cho một nhà hàng và mọi người dùng chỉ có thể có một vai trò.

Đây là bài viết đầu tiên của tôi ở đây, vì vậy tôi hy vọng tôi đang ở đúng nơi. Cảm ơn đã trả lời trước!

EDIT: Có những vai trò cao hơn có thể thay đổi cả ba vai trò được đề cập một cách tự do.

Trường hợp cuối cùng là những gì tôi đang cố gắng tránh (Mary).

Image .

70
H. Saleh

Trong một kịch bản như thế này, tôi sẽ làm cho UI phản ánh các trạng thái có thể có của ứng dụng. Bạn chỉ có thể có một người quản lý nên chỉ có một nơi để chọn người quản lý, mọi người khác có thể là đầu bếp hoặc máy chủ, vì vậy hãy cung cấp các widget UI loại trừ lẫn nhau cho các trạng thái đó. Đây là một ví dụ:

Mockup

Trong thực tế, bạn có thể muốn làm cho nó có chủ ý hơn một chút để thay đổi vai trò của mọi người, nhưng hy vọng rằng ít nhất là truyền đạt ý tưởng.

Chỉnh sửa: Như một số ý kiến ​​đã đề cập rằng có vấn đề về thiết kế với mockup này và tôi không khuyên bạn nên thực hiện trực tiếp. Xin lưu ý rằng mockup chỉ nhằm trả lời câu hỏi của OP và các nguyên tắc thiết kế khác vẫn được áp dụng ở đây.

Một số bài tập cho người đọc bao gồm:

  1. Loại bỏ sự mơ hồ trong đó vai trò hiện đang được chọn
  2. Hiển thị thông tin của người quản lý (điện thoại, email, ...)
  3. Làm cho các hoạt động thay đổi dữ liệu có chủ ý hơn là chỉ thay đổi thả xuống hoặc chuyển đổi
122
Tristan Shelton

Vì sự thay đổi của Trình quản lý hiện tại là một hành động làm mất hiệu lực các tùy chọn khác - tôi sẽ trình bày nó theo cách truyền đạt rõ ràng những gì sắp xảy ra.

Người phục vụ/Đầu bếp là Nút radio, vì vậy chỉ một trong số họ có thể hoạt động tại một thời điểm - và chỉ một người có thể là người quản lý và không có gì khác.

Example For Manager with Button

106
Falco

Điều này có vẻ như một nhiệm vụ nhóm người dùng.

Cả hai ví dụ này đều có thuộc tính Nice mà bạn có thể in ra một chế độ xem tương tự để hiển thị trong nhà bếp. Bạn cũng không có bất kỳ văn bản trùng lặp/dư thừa nào của Cook/Người phục vụ trên toàn bộ UI, vì vậy tôi nghĩ việc đọc và hiểu ai đang làm việc với ai sẽ dễ dàng hơn.

Kiểu thẻ

Tương tự như cách bạn thêm thẻ vào câu hỏi Stack Exchange.

enter image description here

Kiểu menu

Tôi lấy chỉnh sửa menu WordPress làm khái niệm cơ sở để mô phỏng hệ thống phân cấp.

enter image description here

21
icc97

Sử dụng cái này - Đây là một cái nhìn vai trò cao hơn.

Theo quan điểm của người quản lý, người quản lý sẽ không có hộp tổ hợp cho vai trò của anh ấy/cô ấy.
[.___.] Khung nhìn của hai cái khác sẽ là văn bản thuần túy - không có hộp tổ hợp.

mockup

tải xuống nguồn bmml - Wireframes được tạo bằng Balsamiq Mockups

13
DPS

Từ những gì tôi thấy, tất cả chúng phải là các nút radio (sử dụng khoảng cách tốt hơn để phân chia từng người dùng và các nút radio liên quan).
[.__.] Câu hỏi, trong đầu bạn, nên là:
[.__.] Alice là ai? Cô ấy có phải là (•) Manager, a () Cook hay a () waiter?
[.__.] Bob là ai? Anh ta là () Manager, a (•) Cook hay a () waiter?
Vân vân.

Chúng tôi đọc từ trái sang phải, vì vậy trước tiên bạn chú ý đến người dùng và chỉ sau đó là các vai trò. Và vì chỉ có thể có một vai trò cho mỗi người dùng, nên tất cả chúng phải là các nút radio

4
Armands

Tôi đã đưa ra giải pháp bằng cách sử dụng khái niệm phân khúc iOS cùng với trạng thái vô hiệu hóa. Tôi nghĩ rằng nó là dễ hiểu trực quan nhưng phục vụ mục đích.

enter image description here

0
Vadivel