it-swarm-vi.tech

Khi nào nên sử dụng biểu tượng so với biểu tượng có văn bản so với chỉ liên kết văn bản?

Có quy định nào về thời điểm sử dụng biểu tượng so với biểu tượng với văn bản so với chỉ liên kết văn bản trong ứng dụng web không?

Ví dụ:

disk icon

vs.

disk icon 

vs.


Câu hỏi thêm: Là disk icon  -hoặc-  disk icon thích hơn?

172
jmb

Các biểu tượng nổi tiếng là không hiệu quả như nhãn, rất khó để giải thích chính xác mà không cần đào tạo hoặc kinh nghiệm. Đối với hầu hết các tình huống, người dùng tìm hiểu các diễn giải chính xác tốt hơn chỉ với văn bản so với chỉ các biểu tượng. Xem: Wiedenbeck, S (1999). Việc sử dụng các biểu tượng và nhãn trong chương trình ứng dụng người dùng cuối: Một nghiên cứu thực nghiệm về học tập và duy trì. Hành vi & Công nghệ thông tin, 18 (2), p68-82.

Các biểu tượng đặc biệt xấu đối với bất kỳ thứ gì trừu tượng, chẳng hạn như Hóa đơn hoặc Giá thầu, vì những thứ trừu tượng thường không có bất kỳ hình ảnh trực quan mạnh nào (cả Hóa đơn và Giá thầu có thể được thể hiện dưới dạng tài liệu giấy, nhưng bạn sẽ phân biệt chúng như thế nào?). Tương tự, các biểu tượng đặc biệt xấu cho các hành động (ví dụ: Lưu, Xuất bản); Nó khó có thể hiển thị rõ ràng một quá trình với một hình ảnh. Có, các biểu tượng được sử dụng mọi lúc trong thanh công cụ cho các hành động, nhưng thanh công cụ được dành cho các chuyên gia và dù sao người dùng thường bị nhầm lẫn với chúng (trung bình, người dùng chỉ biết sáu mục trên thanh công cụ Word sau khi thường xuyên sử dụng Word trong hai năm ).

Các biểu tượng có thể tiết kiệm không gian trên văn bản, nhưng với giá công nhận. Đối với các biểu tượng nhỏ, chẳng hạn như 16x16 pixel, người dùng rất khó có thể nhận ra những gì chúng được cho là hình ảnh, chứ đừng nói đến hình ảnh được cho là gì. Một người dùng mà tôi biết đã nghĩ rằng biểu tượng trên đĩa cứng của YouTube để lưu là hình ảnh của TV. (Cô ấy đã đủ lớn để biết đĩa mềm là gì.) Cá nhân tôi đã sử dụng Word trong nhiều năm với suy nghĩ biểu tượng Track Change là một loại Rosetta Stone cách điệu. Người dùng chuyên gia thấy dễ dàng hơn dựa vào vị trí vật lý được ghi nhớ của các điều khiển thanh công cụ thay vì nhãn biểu tượng để chọn điều khiển. Các biểu tượng lớn hơn (ví dụ: ít nhất 32 x 32 pixel) có thể giúp nhận dạng, nhưng chiếm quá nhiều không gian mà bạn nên sử dụng không gian cho nhãn văn bản rõ ràng. Nếu không gian bị giới hạn, thường thì bạn nên sử dụng văn bản viết tắt hơn là các biểu tượng.

Nó cực kỳ khó khăn để có được các biểu tượng đúng. Không cố gắng phát triển một biểu tượng mới mà không cần lặp lại quá trình kiểm tra người dùng. Thậm chí sau đó, bạn có thể thất bại. Các nhà thiết kế của Microsoft đã thử mọi cách để tạo các biểu tượng có thể hiểu được cho thanh công cụ Outlook trước khi từ bỏ và đi với nhãn văn bản trên các điều khiển chính.

Nhãn biểu tượng cũng làm cho việc hỗ trợ kỹ thuật trở nên khó khăn (ví dụ: Nhấp vào bảng màu vàng với dấu kiểm màu xanh lam, đối chiếu với nhấp chuột vào “Chấp nhận chú thích).

Theo nguyên tắc thông thường, chỉ nên cho phép các biểu tượng khi áp dụng ít nhất hai trong ba điều kiện sau:

  1. Không gian rất hạn chế (nghĩa là quá nhỏ cho văn bản một mình).

  2. Các biểu tượng được chuẩn hóa (ví dụ: hình ảnh đĩa mềm để lưu)

  3. Biểu tượng đại diện cho một đối tượng có thuộc tính tương tự vật lý mạnh hoặc thuộc tính trực quan (ví dụ: biểu tượng máy in để truy cập các thuộc tính máy in hoặc hình chữ nhật màu đỏ để đặt nền đỏ trang).

Chú giải công cụ được yêu cầu cho các biểu tượng khi chúng được sử dụng một mình, nhưng chúng là sự thay thế kém cho nhãn văn bản. Người dùng của bạn không nên sử dụng ứng dụng của bạn bằng cách mò mẫm tìm kiếm mọi thứ. Thực tế là nhãn văn bản không bao giờ cần chú giải công cụ đồ họa là một đầu mối khá tốt rằng văn bản tốt hơn biểu tượng.

Nếu không gian cho phép, các biểu tượng kết hợp với văn bản là tốt nhất. (Tôi nghĩ đã có nghiên cứu cho thấy điều này từ cuối những năm 1980 nhưng tôi có thể tìm thấy nó.) Việc sử dụng có chọn lọc các biểu tượng với văn bản làm cho các mục nhất định nổi bật hơn hoặc thêm sự quan tâm trực quan. Nó cũng có thể cải thiện khả năng quét của các mục, nhưng nhãn văn bản tốt cũng có thể làm điều này. Người dùng đã biết chủ quan nghĩ rằng một ứng dụng sẽ dễ dàng hơn nếu có các biểu tượng, ngay cả khi họ không thực sự cải thiện hiệu suất (xem Wiedenbeck, 1999 được trích dẫn ở trên), do đó, một lý do khác để kết hợp các biểu tượng và văn bản.

Tôi thường thấy biểu tượng ở trên hoặc bên trái của nhãn văn bản. Tôi không nghĩ rằng nó rất cần thiết so với các lựa chọn thay thế, nhưng đó cũng là một quy ước bạn nên tuân theo nếu bạn có các điều khiển cạnh nhau để người dùng có thể dựa vào kinh nghiệm để biết nhãn văn bản nào đi với biểu tượng nào.

232
Michael Zuschlag

Từ nhóm Neilson/Norman trên các biểu tượng :

Tóm tắt : Sự hiểu biết về biểu tượng của người dùng dựa trên kinh nghiệm trước đó. Do không có cách sử dụng tiêu chuẩn cho hầu hết các biểu tượng, nhãn văn bản là cần thiết để truyền đạt ý nghĩa và giảm sự mơ hồ.

Các biểu tượng cần một nhãn văn bản

Để giúp khắc phục sự mơ hồ mà hầu hết tất cả các biểu tượng phải đối mặt, nhãn văn bản phải có mặt cùng với biểu tượng để làm rõ ý nghĩa của nó trong ngữ cảnh cụ thể đó. (Và ngay cả khi bạn sử dụng một biểu tượng tiêu chuẩn, thì nó thường an toàn hơn khi bao gồm nhãn, đặc biệt nếu bạn thay đổi một chút biểu tượng để phù hợp với sở thích hoặc ràng buộc thẩm mỹ của bạn.)

Nhãn biểu tượng nên được hiển thị mọi lúc, mà không có bất kỳ tương tác nào từ người dùng. Đối với các biểu tượng điều hướng, nhãn đặc biệt quan trọng. Don Tiết dựa vào di chuột để hiển thị nhãn văn bản: nó không chỉ làm tăng chi phí tương tác , mà còn không dịch tốt trên các thiết bị cảm ứng.

Trang web sability.gov sử dụng các biểu tượng điều hướng cho Phương thức, Mẫu và Tài liệu và Nguyên tắc trên mỗi trang trong trang web [ ví dụ w/text & w/o văn bản ]. Nếu tôi yêu cầu mỗi người đọc bài viết này gửi cho tôi một biểu tượng đại diện cho Phương thức, tôi chắc chắn rằng tôi sẽ nhận được rất nhiều thiết kế. Như chúng tôi đã nói như một phần của hướng dẫn thiết kế về khả năng sử dụng trang chủ năm trước, nếu bạn thấy cần phải suy nghĩ để đưa ra một biểu tượng để điều hướng, rất có thể nó sẽ không dễ nhận ra hoặc trực quan cho người dùng. Mặc dù phiên bản di động của trang web nhận ra rằng nhãn văn bản cần phải đi kèm với các biểu tượng để truyền đạt ý nghĩa nào đó, phiên bản dành cho máy tính để bàn ẩn các nhãn này cho đến khi người dùng tò mò quyết định di chuột qua chúng. Sửa các mục điều hướng này ở bên trái của trang để duy trì khả dụng cho người dùng khi họ cuộn cho biết rằng tổ chức tin rằng chúng là quan trọng và hữu ích. Tuy nhiên, tước các biểu tượng của nhãn văn bản này làm cho chúng hoàn toàn vô nghĩa và phản tác dụng với mục tiêu cung cấp quyền truy cập dễ dàng vào nội dung.

18
KyleMit

Theo nghiên cứu được trích dẫn bởi Don Norman, các biểu tượng một mình hoạt động kém nhất. Văn bản solo hoạt động tốt hơn các biểu tượng. Và văn bản + biểu tượng hoạt động tốt nhất.

8
Hisham

Ngoài các câu trả lời ở trên, tôi có một điểm để thực hiện.

Đây là loại trang web gì?

Nếu trang web sẽ được sử dụng không thường xuyên, bạn sẽ cần phải gắn nhãn cho các biểu tượng của mình. Hoặc người dùng mới khác có thể thấy UI cồng kềnh.

Nếu trang web sẽ được sử dụng thường xuyên, như Gmail, các biểu tượng tốt với các mẹo công cụ được đặt tốt sẽ tốt hơn so với đi cùng một cách tiếp cận chỉ văn bản hoặc biểu tượng. Tôi khá chắc chắn rằng Google đã vượt qua câu hỏi này, bởi vì trước đây họ thường sử dụng các nút chỉ có văn bản, nhưng bây giờ họ đang sử dụng các biểu tượng + mẹo công cụ trong Gmail. Cách tiếp cận mới này cung cấp một giao diện sạch mà không mất khả năng sử dụng. Ngay cả Photoshop và Notepad ++ cũng sử dụng một cách tiếp cận tương tự.

7
jackandjill

Hãy để người dùng chọn, mặc định là Cả hai.

Text + Icon giúp người dùng lần đầu tìm hiểu các biểu tượng; nhưng khi anh ta sử dụng ứng dụng nhiều hơn, người dùng sẽ quen với biểu tượng và không cần văn bản nữa. Khi anh ấy đã học được các biểu tượng nghĩa là gì, anh ấy thích không gian làm việc lớn hơn là Văn bản dư thừa.

5
Lie Ryan

Đầu tiên, khi bạn định thiết kế giao diện người dùng, bạn phải xem xét các nguyên tắc về tính khả dụng (tính nhất quán, khả năng chi trả, v.v.). Giá cả phải chăng là một trong những khái niệm chính và nó có nghĩa là giao diện của bạn phải trực quan. Ví dụ: các biểu tượng của bạn phải liên quan đến ý nghĩa của hành động sau giống như ví dụ được trích dẫn ở trên cho biểu tượng lưu của Michael. Một số biểu tượng cũng được chuẩn hóa và bạn có thể sử dụng lại ý nghĩa. Vấn đề là nếu bạn chỉ sử dụng các biểu tượng cho thanh công cụ, v.v. bạn phải sử dụng chú giải công cụ trong trường hợp biểu tượng đó không đủ tốt để diễn đạt ý nghĩa nhưng nếu biểu tượng của bạn đủ cho phép thì họ không cần nhãn và tooltip có thể là đủ.

Trong mọi trường hợp, rất khó để thiết kế các biểu tượng đặc biệt khi hệ thống của bạn dành cho một hệ thống cụ thể và bạn phải thiết kế các biểu tượng. Trong trường hợp này, bạn có thể đề xuất một số thiết kế và đánh giá nó với người dùng. Có thể hữu ích khi biết người dùng nghĩ gì về hệ thống, giao diện trực quan và biểu tượng của bạn. Ngoài ra, bạn có thể thực hiện một bài kiểm tra đáng nhớ một ngày sau khi thử nghiệm thực sự của bạn cố gắng đánh giá xem người dùng có thể nhớ biểu tượng của bạn, ý nghĩa hoặc biểu tượng của bạn hoặc các khu vực có thể mà họ có thể tìm thấy hành động mà bạn đang yêu cầu. Ngoài ra một bảng câu hỏi có thể giúp đỡ nếu bạn có nhiều hơn một thiết kế cho các biểu tượng.

Mặt khác, nếu bạn cần đặt nhãn tôi nghĩ rằng tốt hơn là nhãn bên dưới biểu tượng: [icon] [nhãn]

Hãy nhớ rằng, Khả năng chi trả là một khía cạnh của một đối tượng cho thấy rõ đối tượng được sử dụng như thế nào. Trong màn hình giao diện người dùng, các tính năng tạo ra khả năng chi trả thường là trực quan. .. "Rosson, M. B. & Carroll, J. M. (2002) Kỹ thuật sử dụng, Morgan Kaufmann.

Hoặc có thể nếu bạn có thời gian ... bạn có thể đọc cái này: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

Nếu trong quá trình thiết kế bạn đã xem xét khả năng chi trả, có thể các nhãn không cần thiết và bạn chỉ cần sử dụng chú giải công cụ nếu không bạn có thể xem xét các nhãn bên dưới các biểu tượng và đánh giá hoặc đề xuất nhiều thiết kế hơn để đánh giá với người dùng (không quá nhiều) chúng có thể là đồng nghiệp ngay từ đầu cho đến khi phiên bản có thể được thử nghiệm với người dùng cuối.

5
user1982

Trong xu hướng hiện tại Hệ thống nên nói ngôn ngữ của người dùng, với các từ, cụm từ và khái niệm quen thuộc với người dùng, thay vì các thuật ngữ hướng hệ thống. Thực hiện theo các quy ước trong thế giới thực, làm cho thông tin xuất hiện theo thứ tự tự nhiên và hợp lý. và khi bạn sử dụng tiếng Anh, hãy luôn giữ các chữ cái ở bên phải. bởi vì rõ ràng các biểu tượng sẽ là điểm thu hút chính. Do đó, người dùng có thể bỏ qua các chữ cái ở phía trước.

ví dụ iTunes- Được tổ chức dưới dạng thư viện chứa thư viện phương tiện của bạn: nhạc, phim, chương trình, audibook. Bên dưới Thư viện là Cửa hàng nơi bạn có thể mua thêm phương tiện để đặt vào Thư viện của mình.

enter image description here

và đối với các xu hướng gần đây như thiết kế pallet của Google và các ô cửa sổ 2D gợi ý các biểu tượng. nhưng tốt hơn để có các biểu tượng với một công cụ di chuột nhanh. chúc may mắn.

4
Miller

Sau khi đọc tất cả các câu hỏi và đồng ý với tất cả, tôi muốn thêm một quan điểm bổ sung.

Trước khi quyết định hiển thị biểu tượng, không hiển thị biểu tượng, thêm văn bản xung quanh văn bản, không thêm bất kỳ văn bản nào bạn nên trả lời một số câu hỏi:

  • Nơi bạn có ý định thêm các biểu tượng?
  • Tại sao bạn cần biểu tượng?
  • Ai sẽ sử dụng các biểu tượng này?
  • Những kiến ​​thức về các biểu tượng/nội dung/hành động của người dùng là gì?
  • Có phổ biến để sử dụng các biểu tượng cho nó?
  • Bạn sẽ làm cho tương tác người dùng dễ dàng hơn?

Và để trả lời những câu hỏi này, bạn phải xem xét một số điểm:

  • Mọi người sử dụng điện thoại thông minh mỗi ngày, mọi lúc và các biểu tượng nổi tiếng nhất như Facebook, Youtube, Google, What App, Instagram và những người khác cần hiển thị nhãn để đảm bảo mọi người sẽ biết.

enter image description here

  • Word/Google Docs đang sử dụng các biểu tượng thành công mà không có văn bản vì giống nhau trong nhiều năm và mọi người đều biết đó là gì nhưng ngay cả khi di chuột qua họ cũng hiển thị một văn bản để giải thích biểu tượng.

enter image description here

  • Các khu vực địa lý khác nhau có thể hiểu biểu tượng của bạn khác nhau. Ví dụ ở Anh là phổ biến hơn để sử dụng giỏ hàng cho thương mại điện tử và mặt khác ở de USA là giỏ hàng. Nó xảy ra vì ảnh hưởng ngôn ngữ khu vực.

  • Các biểu tượng phức tạp có thể dừng chuyển đổi của bạn vì hiểu lầm.

enter image description here

Và bạn có thể có một cái nhìn tốt về một so sánh mà tôi đã mượn từ Tạp chí Smashing .

enter image description here

Xem xét tất cả các câu trả lời tôi sẽ sử dụng văn bản có biểu tượng trên 90% trường hợp và vị trí của văn bản phụ thuộc vào khái niệm thiết kế của bạn và liệu người dùng có dễ dàng kết nối chúng không.

Và như tôi luôn nói về nhận xét của mình, không có gì ở đây hoàn toàn là sự thật, bạn nên kiểm tra, so sánh cho người dùng CỦA BẠN trên trang web/ứng dụng CỦA BẠN.

2
Rafael Perozin

Điều này sẽ phụ thuộc vào người dùng. Từ quan điểm khả năng sử dụng, có cả biểu tượng và văn bản mang lại kết quả tốt hơn bởi vì tuân theo sự ghi nhận qua thu hồi, miễn là các biểu tượng được chấp nhận bởi một dân số hợp lý. Chỉ có biểu tượng được áp dụng cho glyphs tượng trưng - những biểu tượng có thể hiểu được trên toàn cầu. Văn bản chỉ thích hợp nhất khi các mục là tùy ý và không có bất kỳ glyphs nào có thể nhận ra để đại diện cho chúng. Đối với các mục như vậy, chỉ có văn bản có lẽ là tốt nhất. Tuy nhiên, danh pháp được sử dụng nên được kiểm tra để sử dụng phù hợp.

2
Kernan Kobaya