Người dùng nhớ gì nhất, vị trí hoặc màu sắc của các yếu tố?


11

Tôi có một menu điều hướng với một số nút, trông hơi giống thế này (LƯU Ý: Mỗi nút có một biểu tượng riêng biệt để phân biệt với phần còn lại, tôi đã không thêm chúng vào mockup nhưng chúng tương tự như biểu tượng Wins8):

nhập mô tả hình ảnh ở đây

Một số người dùng đã báo cáo vô tình nhấp vào Đăng nhập thay vì Gửi, một cái gì đó không thể chấp nhận được. Bây giờ tôi đang xem xét các cách để phân biệt các nút nhiều hơn. Một lựa chọn là di chuyển Sign sang bên phải. Mặt khác, (có thể thêm vào để di chuyển nó) để thay đổi màu sắc của nó:

nhập mô tả hình ảnh ở đây

Là vị trí đủ tốt khác biệt? Hoặc tôi nên xem xét sử dụng màu sắc là tốt? Thêm một màu mới vào điều hướng này có một số tác động trong bảng màu tổng thể và giao diện, vì vậy nó có một cái giá tôi phải trả.


2
Tôi sẽ không gọi đây là 'lạc đề' nhưng điều này có thể có ý nghĩa hơn khi chuyển sang UX.
DA01

@ DA01 Vâng, tôi đã xem xét nó. Phần màu của mọi thứ khiến tôi tự hỏi, và cuối cùng nghĩ: Có thể thuộc về cả hai? Tôi không ngại di chuyển nó, mặc dù!
Yisela

Một số người dùng của bạn sẽ bị mù màu xanh / vàng. Hãy chắc chắn rằng những màu sắc này là khác biệt cho họ!
keshlam

@keshlam Chắc chắn! Tôi có một ứng dụng mù màu trên thanh tác vụ để thử các bảng màu :)
Yisela

Tôi cũng không nói. Mùi là đáng nhớ hơn :)
Scott

Câu trả lời:


5

Điều đó cũng không giúp ích gì cho việc bạn đang làm việc với ba từ có bốn chữ cái bắt đầu bằng chữ 'S'. :)

Màu sắc là một chỉ báo ngay lập tức rằng một cái gì đó là khác nhau. Trong ví dụ đầu tiên của bạn, bạn thực sự không biết bất kỳ nút nào trong số đó làm gì trừ khi bạn thực sự dành thời gian để chú ý và đọc chúng, trong nháy mắt, chúng rất giống với sự khác biệt. Một mô hình chúng tôi sử dụng ở nơi tôi làm việc là chúng tôi làm cho hành động chính của chúng tôi có màu riêng biệt với bất kỳ hành động ít quan trọng hoặc ít lâu dài / ít hoàn thiện hơn.

Nhưng màu sắc không nhất thiết là làm cho nó hoặc phá vỡ nó. Một chiến lược hợp lệ khác sẽ là liên kết một biểu tượng với mọi nút (không chỉ với hai nút cuối cùng). Bằng cách đó, bạn đang tạo ra một sự khác biệt dễ dàng phân biệt trong các yếu tố.

Đối với câu hỏi thực tế của bạn, nếu vị trí đủ khác biệt, tôi nghĩ rằng nó chắc chắn sẽ giúp ích vì mô hình các nút bị phá vỡ bởi hai nút nhỏ hơn buộc bạn phải thực sự nhìn vào sự khác biệt trong các nút thay vì bỏ qua chúng. Màu được thêm vào chỉ giúp làm nổi bật điều này hơn nữa, và cá nhân tôi, nếu có thể tôi cũng sẽ thêm màu đó, vì điều đó sẽ giúp chứng minh nó trong tương lai trong trường hợp có nhiều tùy chọn được thêm vào sau và nút có thể bị bỏ lỡ thường xuyên hơn. Mặc dù, với điều kiện là việc thay đổi màu sắc rất khó thực hiện, tôi sẽ thấy định vị mới là đủ.

Tuy nhiên, những gì tôi nghĩ có lẽ ít liên quan hơn nhiều so với những gì người dùng của bạn nghĩ hoặc làm, và nếu bạn có tài nguyên, tôi sẽ thử một số thiết kế khác nhau và thử nghiệm nó với người dùng để xem họ thích gì và vì lý do gì.


Cảm ơn! Chỉ cần một lưu ý: Các nút có biểu tượng khá khác biệt, tôi không thể tiết lộ ảnh chụp màn hình thực tế và tôi đã không thêm chúng vào mockup ... nhưng dù sao mọi người cũng nhầm lẫn chúng!
Yisela

Tôi cho rằng chúng không đúng với cuộc sống, mặc dù tôi không thể suy luận nếu chúng có hoặc không có biểu tượng, cảm ơn vì đã làm rõ điều đó.
Hanna

6

Những thứ có thể được sử dụng để phân biệt các nút:

  • các nhãn (rõ ràng)
  • màu sắc
  • kích thước
  • đặt hàng
  • vị trí
  • gần
  • hình dạng / phong cách

Một hành động càng gây ra thiệt hại ngoài ý muốn, bạn càng có nhiều khả năng muốn chọn từ nhiều hơn một trong những lựa chọn ở trên.

Không biết luồng người dùng cho các lệnh này, tôi không biết liệu đề xuất của bạn đã đủ chưa, nhưng chắc chắn đây là một cải tiến so với trước đây vì bây giờ bạn đã chuyển hành động 'uh oh', gửi, ra khỏi hai lệnh kia.

Tôi có thể tiến thêm một bước và sử dụng sự khác biệt gần gũi hợp lý. Có lẽ một cái gì đó quyết liệt như thế này:

--------  --------
| SAVE |  | SIGN |                                               DELIVER -->
--------  --------   

Tôi đã sử dụng một số yếu tố khác biệt ở đây ... độ gần, kiểu / loại nút và đổi tên thành 'gửi' thành 'phân phối' (xem bên dưới).

Một thách thức khác mà bạn dường như có là một trường hợp lớn về sự ám chỉ. Điều đó có thể mất một số sáng tạo để vượt qua điều đó. Ví dụ: bạn có thể không bao giờ muốn có hai nút cạnh nhau với nhãn "xóa" và "phân phối" :)


3

Tôi đồng ý với cả Johannes và DA01, cả hai đều nêu ra những điểm mà tôi sẽ liên quan đến định vị, phân bổ, v.v.

Nhưng những gì tôi muốn thêm.

Với việc đã có các biểu tượng để lưu và gửi ký hiệu, thì việc định vị lại một mình nút gửi sẽ rất nhiều. Tôi sẽ đề nghị không thay đổi màu sắc vì không có nhu cầu và đó cũng là một sự thay đổi mạnh mẽ hơn cho người dùng. (Đừng hiểu lầm tôi biết họ có thể đối phó nhưng tôi không nghĩ là cần thiết).

Nếu các biểu tượng đủ nhận biết cho mọi người thì việc tách nút gửi sẽ đủ.

Nếu các biểu tượng của bạn ít nhận ra ngay lập tức tức là bạn có thể có đĩa hoặc usb thay vì đĩa mềm truyền thống cho biểu tượng lưu, thì tôi khuyên bạn nên thay đổi màu sắc như bạn đã đề xuất, mọi người hiểu rằng màu xanh lá cây có nghĩa là đi.

Hy vọng người dùng cuối cùng hạnh phúc;)


1

Người dùng nhớ gì nhất, vị trí hoặc màu sắc của các yếu tố?

Tôi sẽ không đưa ra những gợi ý cụ thể, nhưng một nhận xét ngắn về tiêu đề: nó mang tính cá nhân cao. Giống như một số người sẽ nói "Tôi hiểu ý của bạn" và những người khác sẽ nói "Tôi nghe thấy bạn" hoặc một cái gì đó tương tự. Một số người được điều chỉnh theo hình ảnh, một số người được điều chỉnh nhiều hơn về âm thanh.

Một số người thích hợp hơn với hình dạng, những người khác về màu sắc. Cũng như bạn cần phải đáp ứng sắc manh, bạn cần phải đưa vào tài khoản mà không phải tất cả mọi người nhìn thấy shape- -colours là những đầu mối chính của họ để chuyển hướng (một số người sẽ xác định một cái cây, một con vật, một ngôi nhà bởi hình dạng hoặc màu sắc, một số ý xác định một chiếc xe lái xe bằng âm thanh chứ không phải hình dạng và / hoặc màu sắc vv).

Trong trường hợp này, tất nhiên là có sự cân bằng giữa hai điều này (sẽ rất vui khi tìm ra loại người dùng nào nhầm vào nút sai. Có thể có một mô hình ở đó. Ngoài ra, tôi nghĩ rằng người dùng có kỹ năng máy tính tuyệt vời sẽ nhanh hơn giả sử nơi tìm đúng nút.).

Vì bạn không thể hiển thị cho chúng tôi các nút thực tế với các biểu tượng, nên việc đề xuất trở nên khó khăn. Một cách đơn giản có thể chỉ đơn giản là làm cho khoảng cách lớn hơn so với "ra", như @ DA01 gợi ý. Sắp xếp giống như MailApp:

nhập mô tả hình ảnh ở đây

Chỉ là một ý nghĩ.


Biên tập

Một thử nghiệm thú vị là trình bày cho một số ít người một mockup nguyên thủy (Càng đơn giản càng tốt: vẽ, dán lên tường, phác thảo lật, bảng trắng, v.v.) với các nút được đặt nhưng không được đánh dấu và nhận dạng. Sau đó hỏi mọi người những gì họ mong đợi các nút ẩn danh sẽ làm gì. Đôi khi, điều này có thể mang lại kết quả thông tin và rất thú vị.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.