Biểu tượng. Tốt hay xấu? Như mọi khi, nó phụ thuộc

Các biểu tượng ở khắp mọi nơi. Tải xuống một trong số hàng ngàn bộ dụng cụ biểu tượng vector miễn phí từ Internet ™ và bắt đầu ném các pixel theo hình hamburger, kebab và kính lúp trên các bản vẽ của bạn và bạn đã tự thiết kế. Nhưng bạn đã dừng lại để nghĩ khi nào nên sử dụng một biểu tượng và khi nào không sử dụng một biểu tượng? Khi nào nên sử dụng biểu tượng nào?

Tác phẩm này chia sẻ một số suy ngẫm, và một số nghiên cứu, từ nhóm XEMK UX liên quan đến hình tượng học, hy vọng bạn sẽ nhận thức rõ hơn về sự phức tạp của UX đằng sau những tác phẩm nghệ thuật 8 bit nhỏ này.

Biểu tượng như các yếu tố tĩnh

Các biểu tượng tĩnh là những biểu tượng được sử dụng làm yếu tố trang trí, để truyền đạt một mẩu thông tin rời rạc hoặc để giúp tìm đường. Giống như mọi thứ, chúng có thể là tốt và xấu.

Các biểu tượng là tốt

Được thiết kế tốt và dễ nhận biết, các biểu tượng có thể nhanh chóng truyền đạt thông tin mà người dùng có thể đang quét - ví dụ: quét trang kết quả tìm kiếm cho các khách sạn có WiFi hoặc số phòng ngủ trong một tài sản. Chúng ta thấy điều này trong biểu tượng cho các bãi đậu xe dễ tiếp cận, các dấu hiệu cho phòng tắm và biểu tượng phổ quát cho chất độc.

Biểu tượng Realestate.com.au cho số phòng ngủ, phòng tắm và không gian xe hơi cho danh sách tài sản

Các biểu tượng tiết kiệm không gian và giảm tải nhận thức bằng cách loại bỏ nhu cầu đọc lại cùng một thông tin đối với mọi danh sách, giảm ma sát.

Thiết kế REA không có biểu tượng làm tăng ma sát

Các biểu tượng có thể cải thiện giao diện của giao diện, thêm sự hấp dẫn trực quan được biết đến để tăng cường (nhận thức) UX và khả năng sử dụng của sản phẩm. Điều này được gọi là hiệu ứng thẩm mỹ-khả năng sử dụng và bạn có thể đọc về nó ở đây (NN / G).

Khi các biểu tượng được ghép nối với văn bản, nó có thể cải thiện khả năng truy cập bằng cách đưa ra một cơ chế thay thế để chuyển tiếp thông tin - văn bản có đầu mối trực quan - tốt cho những người có vấn đề về nhận thức, tầm nhìn thấp, người không thể nhìn thấy biểu tượng một cách chính xác, v.v.

Biểu tượng trò chuyện của NAB đã rõ ràng

Các biểu tượng cũng có thể giúp điều hướng cho những người nói (hoặc đọc) ngôn ngữ của giao diện là ngôn ngữ không chính (hoặc hoàn toàn không). Tôi có thể không đọc được văn bản trên giao diện, nhưng các biểu tượng có thể cho tôi hiểu về cách điều hướng xung quanh hoặc cách tìm thấy những gì tôi đã tìm kiếm. Điều này cũng đúng trong thế giới thực và là lý do tại sao chúng ta có các biểu tượng tiêu chuẩn cho phòng tắm, sân bay, thang máy, v.v.

Mặc dù người Catalan nghèo của tôi, tôi đã có thể giặt thành công quần áo ở Barcelona nhờ các biểu tượng

Các biểu tượng là xấu

Các biểu tượng được thiết kế xấu có thể gây nhầm lẫn khi chúng tôi không biết những gì chúng đang cố gắng thể hiện cho chúng tôi, đặc biệt là khi chúng không đi kèm với văn bản hoặc mẹo công cụ.

Không có văn bản, một bông hoa có đại diện cho ‘spa và trung tâm chăm sóc sức khỏe không?

Các biểu tượng cho các biểu tượng vì lợi ích cung cấp ít giá trị và thêm tiếng ồn cho giao diện.

Trong thiết kế bên trái, các biểu tượng không thêm bất kỳ giá trị nào nên chúng tôi đã loại bỏ chúng và giảm tiếng ồn

Các biểu tượng không có văn bản thay thế, gây nhầm lẫn cho người dùng trình đọc màn hình. Đặc biệt nếu nó chỉ đọc ra một cái gì đó như ‘Star, thay vì‘ Lưu công việc. Nhãn văn bản cũng giúp giảm sự nhầm lẫn này cho người dùng nhìn thấy.

Các biểu tượng là chủ quan. Cùng một biểu tượng có thể có nghĩa là những thứ khác nhau trên các trang web khác nhau (ví dụ: một ngôi sao để ‘tiết kiệm và một ngôi sao cho‘ xếp hạng xếp hạng). Cùng một biểu tượng có thể có nghĩa là những thứ khác nhau trong các bối cảnh khác nhau (ví dụ: một mũi tên để chia sẻ, trả lời, chuyển tiếp, tiếp theo). Các biểu tượng có thể không thể giải mã.

Tất cả các biểu tượng giặt khác nhau có nghĩa là gì? Nguồn

Mục đích biểu tượng có thể gây nhầm lẫn

Đây là một biểu tượng tĩnh hay một yếu tố tương tác? Đôi khi các biểu tượng có thể nhấp và thực hiện một hành động, điều này có thể đặc biệt khó hiểu khi các yếu tố có thể nhấp được trực tiếp bên cạnh các yếu tố không thể nhấp và trong thiết kế phẳng.

Ngôi sao dày hơn, vì vậy tôi biết nó có thể nhấp vào - nhưng người dùng trung bình? Nó tách biệt với các biểu tượng khác, không hành động - có nghĩa là có thể nhấp cho người dùng trung bình?

Chúng ta cần đảm bảo rằng rõ ràng yếu tố này có thể nhấp được, cái mà chúng ta gọi là khả năng chi trả - đặc biệt khi nó chỉ là một biểu tượng không có văn bản.

Các biểu tượng như các yếu tố tương tác

Nhìn thấy một mục bạn muốn dễ dàng tìm thấy lại trên một ứng dụng hoặc trang web? Chỉ cần nhấn biểu tượng tiện dụng ‘lưu biểu tượng! Nhưng chính xác thì biểu tượng lưu là gì?

Biểu tượng nào, khi nào?

Nó từng là một biểu tượng của một đĩa trong thời đại sai lệch - trong đó một đối tượng trong phần mềm được biểu diễn với đối tác trong thế giới thực của nó, trong trường hợp này là một đĩa mềm. Đĩa mềm không bao giờ có bản nâng cấp khi chúng tôi chuyển từ đĩa sang đĩa CD sang USB và lên đám mây, nhưng ý nghĩa của nó vẫn được biết đến. Bạn có lẽ đã nghe câu chuyện dân gian của đứa trẻ nói rằng Wow Wow, một người nào đó đã in Biểu tượng Lưu! Khi nhìn thấy một đĩa mềm 3 1/2 inch IRL.

Bạn vẫn sẽ thấy điều này trong các sản phẩm của Microsoft Office ngày hôm nay.

Biểu tượng Microsoft Save

Để dành một tài sản trên Airbnb, hãy nhấp vào trái tim

Airbnb Lưu một tài sản
Tôi yêu nơi này, có lẽ tôi sẽ ở lại đây!

Mặc dù có lẽ tôi không thích nơi này, nhưng có lẽ nó chỉ là thứ tôi muốn để qua một bên để đánh giá thêm, vì nó có thể đáp ứng nhu cầu của tôi như một du khách. Airbnb có thể đã chọn biểu tượng ngôi sao vì nó đã được sử dụng để xếp hạng và có lẽ chúng tôi muốn tiết kiệm 'tình yêu', đặc biệt trong trường hợp đó không phải là thứ mà người dùng sẽ thích làm (một điều cần thiết, không phải là một kỳ nghỉ vui vẻ ).

Các sản phẩm như Twitter làm mờ dòng này - tôi có thể đánh vào trái tim là xác thực xã hội (như Instagram và Facebook) hoặc tôi có thể sử dụng nó để lưu nó cho chính mình để lấy lại sau này. Không muốn sử dụng một trái tim là đặc biệt đúng khi nó đã có nghĩa là một thứ khác - một lượt thích hoặc phản ứng - chẳng hạn như trên Instagram và Facebook, những người đã quay lại thiết kế sai lệch và quyết định chọn một dấu trang để thể hiện ‘lưu lại . Tìm vị trí của bạn với một đối tượng vật lý như bạn đã làm trong một cuốn sách (hoặc làm trên Kindle của bạn).

Trung bình đánh dấu một câu chuyện cho sau này

Một ngôi sao thì sao? ️ Nếu tôi sao star một cái gì đó để tiết kiệm, điều này có nghĩa là nó là sở thích của tôi? Nếu người dùng quay lại và thấy một mục trong danh sách có một ngôi sao thì có nghĩa là chúng tôi đang giới thiệu nó cho họ như một kết hợp tốt? Hay họ đã cứu nó?

Sao một tin nhắn trên Slack

Amazon đã tránh tất cả các vấn đề này cùng nhau, chỉ bằng cách có một nút có văn bản ‘Thêm vào danh sách, biểu tượng sans.

Amazon - Thêm vào danh sách

Các biểu tượng với văn bản và khả năng chi trả phù hợp, có hành động rõ ràng và có thể sử dụng nhiều hơn. Nó cũng làm cho các hành động dễ tiếp cận hơn nhiều đối với những người sử dụng trình đọc màn hình, những người có nhận thức thấp, v.v.

Nhãn thêm ngữ cảnh vào biểu tượng

Hiểu biết về các biểu tượng

Ngoài các hành động biểu tượng gây nhầm lẫn, có rất ít biểu tượng được hiểu toàn cầu.

Tại SEEK, chúng tôi đã tiến hành một phần nghiên cứu liên quan đến sự hiểu biết về biểu tượng học.

Trước tiên, chúng tôi đã hỏi những người tham gia biểu tượng nào họ sẽ nhấp vào để đặt công việc sang một bên để sau này (chúng tôi đã tránh từ ‘lưu lại vì chúng tôi không muốn chọn họ). Đây là một câu trả lời bằng văn bản miễn phí nơi họ có thể giải thích biểu tượng nào họ sẽ thấy.

Hãy tưởng tượng có một biểu tượng (biểu tượng hoặc hình ảnh) được ẩn bởi hình vuông màu đen trong hình trên và biểu tượng này là những gì bạn sẽ nhấp để đặt công việc sang một bên cho sau này. Biểu tượng hoặc hình ảnh nào bạn mong đợi?

Câu trả lời phổ biến nhất là:

  1. Biểu tượng ngôi sao (24%)
  2. Tiết kiệm lưu trữ như một câu trả lời chung chung (15%) *
  3. Đĩa mềm (11%)
  4. Tủ hồ sơ / hồ sơ (6%)

* Không rõ người trả lời có nghĩa là gì khi cứu Save, vì nhiều người không nói rõ. Một số câu trả lời đã được viết như là đĩa Biểu tượng lưu đĩa mềm, hay biểu tượng lưu đĩa, ví dụ như đĩa đĩa, tuy nhiên không rõ liệu tất cả những người trả lời lưu lại có nghĩa là điều này.

Ngoài ra, một ngôi sao được sử dụng trên trang web XEMK, do đó, có thể điều này bị sai lệch khi người trả lời trả lời những gì họ biết đằng sau quảng trường đen.

Chúng tôi đã hỏi cùng một câu hỏi như một cuộc thăm dò trên Twitter, với 4 tùy chọn và phần lớn đĩa mềm được trả lời có nghĩa là tiết kiệm!

Thăm dò ý kiến ​​Twitter - biểu tượng nào có nghĩa là lưu?

Một đĩa mềm có thể vẫn được hiểu một cách phổ biến, nhưng vì các nhà thiết kế chúng tôi không muốn công nghệ cổ xưa làm lộn xộn các giao diện của chúng tôi, vì vậy chúng tôi đã chuyển sang một ngôi sao hoặc một trái tim. Chúng ta có cần một biểu tượng không? Tại sao không chỉ đơn giản là một nút ‘Lưu trên mạng?

Tiếp theo, chúng tôi đã cho người tham gia thấy 4 biểu tượng được phân lập từ giao diện và không có nhãn và hỏi những từ hoặc cụm từ hoặc hành động mà họ liên kết với biểu tượng.

Những từ, cụm từ hoặc hành động nào bạn liên kết với biểu tượng này?

Không có biểu tượng nào được hiểu toàn cầu và được mở để giải thích dựa trên những người tham gia, những kinh nghiệm trước đây và sự hiểu biết về công nghệ. Điều này cho thấy giữ nhãn bên cạnh các biểu tượng sẽ tăng khả năng sử dụng và dễ sử dụng. Nó cũng tuân theo các nguyên tắc tiếp cận mà chúng ta không nên chỉ dựa vào các đầu mối trực quan để mô tả một hành động - bối cảnh + tín hiệu thị giác = có thể sử dụng

Những người được hỏi đã lặp lại tình cảm này trong các phản hồi bằng văn bản của họ:

Hầu hết mọi thứ trực tuyến làm tôi bối rối, tại sao có thể, mọi người có thể sử dụng các hình dạng giống nhau để làm điều tương tự?
Các biểu tượng có thể hơi khó hiểu vì chúng khá chủ quan đối với người dùng và tình huống chúng được sử dụng trong
Tôi thích giữ mọi thứ đơn giản - tìm kiếm công việc đủ căng thẳng mà không cần một trang web phức tạp để điều hướng trong quy trình.

Biểu tượng dấu trang có khả năng cao nhất cho những người tham gia nói rằng họ không biết nó đã làm gì, tuy nhiên nhiều người đã hiểu rằng nó sẽ đặt công việc sang một bên để sau này. Một số người nghĩ rằng nó có nghĩa là công việc / công ty đã giành được giải thưởng hoặc một trận đấu tốt cho họ. Nhìn chung, nó được hiểu là:

  • Đánh dấu trang (38%)
  • Don Tiết biết / không chắc chắn (11%)
  • Tiết kiệm (11%)
  • Cờ (9%)

Biểu tượng Trái tim được liên kết với tình yêu và nhận ra các bài đăng trên phương tiện truyền thông xã hội (kiến thức trước từ Instagram hoặc Twitter). Những người trả lời quen thuộc với XEMK đã trả lời rằng nó được sử dụng cho Tìm kiếm đã lưu. Tuy nhiên, nhìn chung, những người được hỏi không liên kết điều này mạnh mẽ với việc để lại một cái gì đó cho sau này. Nó gắn liền với những cảm xúc tích cực (tình yêu, thích, hạnh phúc). Biểu tượng trái tim được hiểu là:

  • Tình yêu (54%)
  • Thích (35%)
  • Yêu thích (21%)

Một số người thực sự không thích ý tưởng về một trái tim đang được sử dụng:

Tình yêu, không áp dụng cho quảng cáo việc làm

Ngôi sao được hiểu là đánh dấu một cái gì đó cho sau này hoặc là quan trọng. Tuy nhiên, nó cũng được cho là một chỉ báo cho thấy một công việc phù hợp với họ, hoặc đánh giá của công ty. Ngôi sao được xem là:

  • Yêu thích (37%)
  • Tiết kiệm (20%)
  • Sao (17%)
  • Quan trọng (10%)
  • Đánh giá (8%)

Mũi tên chia sẻ đã bị hiểu sai một cách quá mức có nghĩa là chuyển tiếp trực tiếp sang hướng tiếp theo, và được đưa ra khỏi bối cảnh:

  • Chuyển tiếp (hoặc chuyển tiếp email?), Tiếp theo hoặc đến trang tiếp theo (81%)
  • Trả lời email (10%)
  • Chia sẻ (8%)

Kiến thức ưu tiên ảnh hưởng đến sự hiểu biết

Giống như bất cứ điều gì chúng tôi thiết kế, chúng tôi cần kiểm tra sự hiểu biết về các biểu tượng của chúng tôi với người dùng mục tiêu của chúng tôi. Một hình tam giác với một người có thể chỉ là một hình tam giác, nhưng với một nhà vật lý hoặc nhà toán học thì có thể rõ ràng rằng nó có nghĩa là ‘thay đổi.

Tôi đã từng thắng một trò chơi Pixi với cách viết nguệch ngoạc dưới đây trong 3 giây. Điều đó có nghĩa là gì? Đối với bạn, có lẽ không có gì. Nhưng với tôi, và đối tác Pixi của tôi, nó Poodle Poodle của tôi. Cuộc thi của chúng tôi không vui

Điều này có nghĩa là Penny với bạn?

Các vấn đề bối cảnh

Một mũi tên bên cạnh một mũi tên khác đối diện theo cách khác có thể có nghĩa là ’tiếp theo, trong khi nếu nó nằm cạnh một trái tim thì có thể rõ ràng rằng nó có nghĩa là‘ chia sẻ. Biểu tượng thử nghiệm trong bối cảnh.

Nếu bạn thích nó, thì bạn nên đặt một nhãn trên nó

Nếu bạn muốn hầu hết người dùng có thể hiểu biểu tượng nào, hãy sử dụng nhãn. Kiểm tra người dùng nhận thấy người dùng có thể dự đoán chính xác điều gì sẽ xảy ra khi họ gõ một biểu tượng với nhãn 88% thời gian. Đối với các biểu tượng không có nhãn, con số này giảm xuống 60%. Đối với các biểu tượng không ghi nhãn bespoke, điều này giảm xuống chỉ còn 34%. Tìm hiểu thêm về nghiên cứu của họ ở đây.

TL; DR- Tôi có nên sử dụng biểu tượng không? Những biểu tượng nào?

Nó phụ thuộc.

Hãy tự hỏi mình, có sử dụng các biểu tượng ở đây không:

  • Hỗ trợ người dùng trong việc tìm kiếm những gì họ đang tìm kiếm?
  • Giảm tải nhận thức?
  • Thêm vào sự hấp dẫn trực quan của sản phẩm?

Là biểu tượng được chọn:

  • Có thể hiểu cho người dùng, trong bối cảnh nhất định? Nó đã được thử nghiệm với nhóm mục tiêu để hiểu?
  • Rõ ràng có thể nhấp?
  • Đi kèm với văn bản để tăng khả năng sử dụng và dễ hiểu?

Nếu bạn trả lời có cho câu hỏi trên, có lẽ bạn có thể sử dụng một biểu tượng.

Don lồng sử dụng các biểu tượng khi chúng:

  • Xuất hiện để cung cấp không có giá trị;
  • Làm lộn xộn giao diện;
  • Được mở để giải thích.