標記圖標_標記您的圖標

標記圖標

Not labeling your icons is the same as assuming that we are all fluent in ancient hieroglyphics. Are you? Can you just walk up to Cleopatra's needle and read it like you could read a children's book? Even emojis, our modern hieroglyphics don't mean the same thing to each person. If I send you an eggplant am I talking about my garden or something else? How about a goat? Am I talking about my trip to the farm or an athlete that I feel is the “greatest of all time?” How about a snake? or fire? But a smiley face is a smiley face, right? I urge you to overthink and debate that.

不標記您的圖標與假設我們都精通古代象形文字一樣。 你是? 您能走到克里奧帕特拉的針頭并像閱讀兒童讀物一樣閱讀嗎? 即使是表情符號,我們現代的象形文字對每個人也意味著不同的意思。 如果我給您送茄子,我是在談論我的花園還是其他? 山羊呢? 我是在談論我的農場之旅或我認為是“有史以來最偉大的運動員”嗎? 蛇呢? 還是火? 但是笑臉就是笑臉,對嗎? 我敦促您多考慮和辯論。

掙扎是真的。 (The Struggle Is Real.)

As a designer, I feel like we are all victims to the struggle of thinking there are conventional icons that everyone knows. But after lots of user testing over the years, I have found that this cannot be further from the truth. There is no convention for icons, there's no set of icons everyone knows. there's no standard. There are no “laws” per se when it comes to what icons anyone can use for anything. Due to this, people can use whatever they want for any meaning. That's right, no one is stopping you! Go make a cat on a horse your home icon!

作為一名設計師,我覺得我們所有人都在努力思考那些眾所周知的傳統圖標的斗爭。 但是經過多年的用戶測試,我發現事實并非如此。 圖標沒有約定,沒有眾所周知的圖標集。 沒有標準。 對于任何人都可以使用的圖標,本身就沒有“法律” 。 因此,人們可以將任何想要的東西用于任何意義。 沒錯,沒有人阻止您! 去把馬上的貓當做您的主頁圖標!

But that's just the tip of the ice burg when it comes to our icon struggles.

但這只是冰山一角,當涉及到我們的標志之爭時。

Another issue we run into is, as we design things, we tend to think about our brand when we think about icons. We try to match our brand’s look, giving us creative freedom to make icons that match the brand and look similar to some “commonly used icons.” (Which again, don’t really exist. They are just common to you.) We assume that people can understand that because we took the door off and made the outlines thinner of a house icon we found on google, that people will understand that it means ‘home’ or ‘menu’. But because Icons are not road signs that have standards, there is no real indicator that means that your icon means what you think it does. And there's also a good chance that your design style that matches your brand, has blurred any sort of familiarity a user might have with it, making it hard to understand or figure out.

我們遇到的另一個問題是,在設計事物時,我們在考慮圖標時往往會考慮品牌。 我們嘗試匹配品牌的外觀,從而賦予我們創造自由,以制作與品牌相匹配并看起來類似于某些“常用圖標”的圖標。 (再說一次,實際上并不存在。它們只是您的共同點。)我們假設人們可以理解,因為我們把門關上了,并且使在Google上找到的房屋圖標的輪廓變細了,所以人們會理解它的意思是“家”或“菜單”。 但是因為圖標不是具有標準的路標,所以沒有真正的指示符意味著您的圖標代表您的想法。 而且,與您的品牌相匹配的設計風格也很可能模糊了用戶對其的任何熟悉程度,從而使其難以理解或弄清楚。

How about the argument about space? As designers, our jobs revolve around solving problems. The most common one I have come across is wanting to fit as many things as possible in small amounts of space. Usually, this happens when a website or web app needs to be on a mobile platform. On a website, you have all this room to have full words. But *GASP* on phones we do not! The horror! So our first thought? Oh, make that title an icon. Problem solved. Don’t worry, everyone has said this same thing. I myself am a victim of the “just make it an icon” phrase. On some mobile apps, for example, Instagram, where they only have a few actions, this solution sorta works. (see example below) But what about apps with more than 5 things in their navigation menu? Or they have unique actions in their menu? Suddenly your icons do not translate.

關于空間的爭論怎么樣? 作為設計師,我們的工作圍繞解決問題展開。 我遇到的最常見的情況是希望在盡可能少的空間中容納盡可能多的東西。 通常,當網站或Web應用程序需要在移動平臺上時會發生這種情況。 在網站上,您需要所有這些房間來填寫完整的單詞。 但是手機上的* GASP *卻沒有! 驚恐的事件! 那么我們的第一個想法? 哦,把那個標題變成一個圖標。 問題解決了。 別擔心,每個人都說過同樣的話。 我本人是“只是使其成為一個圖標”短語的受害者。 在一些移動應用程序,例如Instagram,他們只有幾個動作,這種解決方案八九不離十作品。 (請參見下面的示例)但是導航菜單中包含超過5種內容的應用程序呢? 還是菜單中有獨特的動作? 突然,您的圖標無法翻譯。

To illustrate this issue, I have attached an example below. The images are of the bottom navigation menu for Instagram vs the bottom navigation menu of an app I worked on for Discount Tire. In the first example, there are no labels. See how many you can guess correctly before looking at the second image with the labels.

為了說明這個問題,我在下面附加了一個示例。 這些圖像分別是Instagram底部導航菜單和我為Discount Tire開發的應用程序底部導航菜單。 在第一個示例中,沒有標簽。 在查看帶有標簽的第二張圖像之前,請先查看可以正確猜到的數量。

Image for post
The top bar has four icons from the Discount Tire in-store app’s bottom navigation bar. The bottom bar has five icons from Instagram's bottom navigation bar.
頂部欄上有Discount Tire店內應用程序底部導航欄中的四個圖標。 底部的欄中有來自Instagram底部導航欄中的五個圖標。

知道每個圖標代表什么? 讓我們看看你的表現如何。 (Have a good idea of what each icon represents? Let’s see how you did.)

Image for post
The top bar has four icons from the Discount Tire in-store app’s bottom navigation bar with labels. The bottom bar has five icons from Instagram’s bottom navigation bar with labels.
頂部欄有來自Discount Tire店內應用程序底部導航欄中帶有標簽的四個圖標。 底部的欄中有來自Instagram底部導航欄中的五個帶有標簽的圖標。

You might think, well this example is really obscure. How would I ever know that the car meant ‘new car’? And my question to you would be, well if you can't understand it, what makes you think someone who works at Discount Tire would? This is the first time they have ever seen this app. It's new. You could have worked there for 20 years and you still wouldn't know that the car meant ‘new car’. And so you might say, well then it needs labels, but Instagram is super easy to understand, that's why they don’t have labels. And I would again say no, because, how many of you thought the heart meant ‘favorites’? For people that do not use the app often or ever, they didn't know that icon meant notifications. And if you showed these icons to people outside the context of knowing where they are located in the app, most Instagram users would not know that the heart meant notifications either. Even if I told the users that it was an icon used by Instagram, they would still get it wrong most of the time. The users are more likely to say the icon means ‘like’ or ‘favorite’ than they are to say it would be ‘notifications’.

您可能會認為, 這個示例確實很晦澀。 我怎么會知道這輛車的意思是“新車”? 我對您的問題是,如果您不理解,那會讓您覺得在Discount Tire工作的人會怎樣? 這是他們第一次看到這個應用程序。 是新的 您可能在那里工作了20年,但您仍然不知道這輛車的意思是“新車”。 因此,您可能會說, 那么就需要標簽了,但是Instagram非常易于理解,這就是為什么它們沒有標簽的原因 。 我會再次拒絕,因為你們當中有多少人認為心臟意味著“最愛” ? 對于不經常使用該應用程序的人,他們不知道該圖標表示通知。 而且,如果您向知道他們在應用程序中位置的上下文之外的人顯示這些圖標,則大多數Instagram用戶也不知道心臟也意味著通知。 即使我告訴用戶這是Instagram使用的圖標,他們在大多數情況下還是會把它弄錯。 用戶更傾向于說圖標的意思是“ 喜歡 ”還是“ 喜歡 ”,而不是說“ 通知 ”。

Finally, one of the biggest things I hear is from the business side.

最后,我聽到的最大的一件事是在業務方面。

The users have seen this icon everywhere. They will know what it means.”

用戶到處都可以看到此圖標。 他們會知道這意味著什么。”

We have all heard this before. We might have even said it ourselves. But saying that the users will know what it is because they have seen it everywhere is like saying that anyone can identify any kind of tree because they have seen a tree before. Just because I have seen a tree doesn't mean I can identify a maple tree. And for icons, this can be compared to seeing a hamburger icon and a house icon and they both mean “menu”. This “ they will know what it means” logic does not work. Not only does it not make sense, but following that logic is literally making an assumption for the user. We are not the users. What we assume they have seen is probably not what they have actually seen. We should never assume the users will understand things because we think its basic knowledge.

我們以前都聽說過。 我們甚至可能自己說過。 但是說用戶會因為在任何地方都看到它而知道它是什么,就像說任何人都可以識別任何種類的樹一樣,因為他們以前看過樹。 僅僅因為我看過一棵樹并不意味著我可以識別出一棵楓樹。 對于圖標,這可以與看到一個漢堡圖標和一個房屋圖標相比較,它們都表示“菜單” 。 這種“他們將知道含義”的邏輯不起作用。 不僅沒有意義,而且遵循該邏輯實際上是為用戶做出假設。 我們不是用戶。 我們認為他們所看到的可能不是他們實際所看到的。 我們永遠不要以為用戶會理解事物,因為我們認為它是基礎知識。

為什么標簽很重要 (Why Labels Are Important)

A good user experience can be defined in many ways. One measure is the ability to reduce the user’s cognitive load. In other words, reduce the user’s need to think. The Nielson Norman Group defines this as the interaction cost.

可以通過多種方式定義良好的用戶體驗。 一種措施是減輕用戶認知負擔的能力。 換句話說,減少了用戶的思考需求。 Nielson Norman Group將其定義為交互成本 。

The interaction cost is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals.

交互成本是用戶在與站點進行交互以實現其目標時必須進行的所有工作(無論是精神還是物理)。

An important factor that contributes to the mental effort or cognitive load, is the ability to determine the meaning of something quickly and efficiently. This is called a sign. A ‘sign’ is made up of two parts: the Signifier and the Signified.

導致精神努力或認知負擔的重要因素是快速有效地確定事物含義的能力。 這稱為標志 。 “標志”由兩部分組成:指示符和指示符。

Image for post
A flower icon represents signified. The word ‘flower’ represents the signifier.
花圖標表示已表示。 “花”一詞代表含義。

A signifier illustrates or describes what an object is and what it can do. A signifier can be made of multiple things or just one simple thing, like a label. Colors and context are also often used to elevate the meaning of a signifier faster.

指示符說明或描述對象是什么以及對象可以做什么。 指示符可以由多個事物組成,也可以由一個簡單的事物(如標簽)組成。 顏色和上下文也經常用于更快地提高指稱符的含義。

For example, stop signs. You see the word “STOP” in upper case text on a big red sign. The signifiers are; the color red, the uppercase text, and the word “stop.” You can also say that the location of the stop sign gives background context to the meaning of the sign as well. If you saw a stop sign while driving you would know to stop at the line. As if you saw a stop sign on a door, you might think, “Oh, I can't go in there.”

例如,停車標志。 您會在大寫紅色標記的大寫字母中看到單詞“ STOP” 。 指示符是; 顏色為紅色,大寫文本和單詞“停止”。 您還可以說,停車標志的位置也為標志的含義提供了背景信息。 如果您在開車時看到停車標志,您將知道在該行停車。 好像您在門上看到停車標志一樣,您可能會想: “哦,我不能進去。”

All those things clearly define what you are supposed to do in this situation using color psychology (in western cultures, red means stop. Studies done on the color read have shown that it grabs your attention faster than any other color and elevates your heart rate upon viewing), typography psychology (uppercase text is often seen as more authoritative, loud and demanding), and of course, the word is giving you the direct meaning through written communication. A strong Signifier will make use of as many components as possible if it hopes to reduce the interaction cost and create an effortless user experience.

所有這些事情都使用顏色心理學清楚地定義了您在這種情況下應該做的事情(在西方文化中,紅色表示停止。對顏色讀數的研究表明,它比其他任何顏色都能更快地吸引您的注意力,并提高您的心率。查看),版式心理學(大寫文字通常被認為更權威,響亮且苛刻),當然,該詞通過書面交流為您提供直接含義。 一個強大的Signifier如果希望減少交互成本并創造輕松的用戶體驗,則將使用盡可能多的組件。

A signified is the meaning or idea expressed by a sign, as distinct from the physical form in which it is expressed. A signified is often called an affordance in user experience. An affordance is what an object can do. What an object can do can be revealed by the user interacting with the thing, or by the user’s prior knowledge in using something that they see as similar. This is called “empirical knowledge” or “a posteriori knowledge” which both refer to knowledge based on experience. In the stop sign example, the signified would be an abstract conceptual thought of stopping at the place where the stop sign is located. It may also be the octagon shape of the sign. We would know that we need to stop because of our previous knowledge on what this sign does.

符號指符號所表達的含義或概念,與符號所表達的物理形式不同。 表示通常被稱為用戶體驗中的可承受性。 承受能力是對象可以做什么。 可以通過用戶與事物進行交互來揭示對象可以做什么,或者可以通過用戶使用他們認為相似的事物的先驗知識來揭示。 這就是所謂的“ 經驗知識 ”或“ 后驗知識 ”,它們都是指基于經驗的知識。 在停車標志示例中,標志是停止在停車標志所在的地方停車的抽象概念思想。 它也可以是符號的八邊形形狀。 我們會知道我們需要停下來,因為我們先前對該標志的作用有所了解。

This concept comes into play in user interfaces when you see a red octagon icon next to something. We understand based on prior knowledge that this icon is a stop sign. But we don’t know why it is there or what we need to do without the signifier. The user would also not know this if they had no prior knowledge of stop signs. The icon would mean nothing to the user.

當您在某物旁邊看到一個紅色的八角形圖標時,該概念就會在用戶界面中發揮作用。 根據先前的知識,我們知道此圖標是一個停車標志。 但是我們不知道為什么會出現它,或者在沒有指示符的情況下我們需要做什么。 如果用戶沒有停車標志的先驗知識,用戶也不會知道這一點。 該圖標對用戶沒有任何意義。

Both the signifier and the signified elements make up the ‘sign’ and together they create meaning that can be interpreted by the user. By removing either the signifier or the signified, the other remaining elements are weakened and the meaning becomes blurred.

指示符和被指示元素都構成“符號”,它們共同創建了可以由用戶解釋的含義。 通過刪除一個或多個指示符,其余的其他元素將被削弱并且含義變得模糊。

So in other words, adding a label to your icon greatly decreases the cognitive load a user has to take on to determine what they need to do and how to do it. As a rule, the lower the cognitive load, the better experience a user will have with your product. This is important.

因此,換句話說,在您的圖標上添加標簽可以大大減少用戶確定他們需要做什么以及如何做的認知負擔。 通常,認知負擔越低,用戶使用產品的體驗就越好。 這個很重要。

Users are not trying to understand your site, they are trying to use it.

用戶不是在試圖了解您的網站, 而是在嘗試使用它。

Users are not looking for puzzles or guessing games. They are looking to easily complete a task.

用戶不是在尋找謎題或猜謎游戲。 他們希望輕松完成任務。

Adding labels to your icons will immensely help your users use and complete tasks. Again, this is important.

在圖標上添加標簽將極大地幫助用戶使用和完成任務。 同樣,這很重要。

測試您的圖標知識 (Test Your Icon Knowledge)

I can write all I want about how labeling icons improves the user experience and decreases cognitive load. But for some, that might not be enough. The easiest way to prove my point is to try it yourself. Below I have compiled icons. The goal is to go through each set of icons and determine which icon represents the word. Try to do this as quickly as possible. If it helps, time yourself for 5 seconds per set. Make sure you write down your answers as you go so you do not forget your initial assumption.

我可以寫所有我想寫的關于標簽圖標如何改善用戶體驗并減少認知負擔的內容。 但是對于某些人來說,這可能還不夠。 證明我觀點的最簡單方法是自己嘗試。 下面我已編譯圖標。 目標是瀏覽每組圖標并確定哪個圖標代表單詞。 嘗試盡快執行此操作。 如果有幫助,請每套計時5秒鐘。 確保隨手寫下答案,以免忘記最初的假設。

Group One: Which icon means: Lists

第一組:哪個圖標表示: 列表

Image for post
A heart icon on the left, a stacked line icon on the right.
左側為心臟圖標,右側為堆積線圖標。

Group Two: Which icon means: Discover / Explore

第二組:哪個圖標表示: 發現/探索

Image for post
A globe icon on the left, a compass icon on the right.
左側是地球儀圖標,右側是指南針圖標。

Group Three: Which icon means: Refresh

第三組:哪個圖標表示: 刷新

Image for post
An arrow in a circle going counter-clockwise on the left, an arrow in a circle going clockwise on the right.
圓圈中的箭頭在左側為逆時針方向,圓圈中的箭頭在右側為順時針方向。

Extra Credit: Which icon means: Rotate

額外信用:該圖標表示: 旋轉

Image for post
both sets of icons have two arrows making a circle motion
兩組圖標都有兩個箭頭做圓周運動

Notice, a lot of these icons look similar or could maybe both mean the same thing.

請注意,這些圖標中的許多看起來很相似,或者可能含義相同。

Was choosing which icon represented the word easy or hard?

選擇哪個圖標代表單詞easy還是hard?

Did it take you longer than 5 seconds to decide?

您是否花了超過5秒鐘的時間做出決定?

If it did this is important to note because most users won't even try to figure it out for a full 5 seconds. They will glance at something and either read the label and determine its meaning, or assume the icon means something, or do nothing at all. They may even leave the site or page if they cannot figure out the tool they need to complete their task. If you couldn't figure out what these icons meant in 5 seconds without context, think about how your user is feeling.

如果這樣做了,那么要注意這一點很重要,因為大多數用戶甚至都不會嘗試整整5秒鐘。 他們會看一眼,然后閱讀標簽并確定其含義,或者假設該圖標意味著某件事,或者什么也不做。 如果他們無法弄清完成任務所需的工具,他們甚至可能會離開網站或頁面。 如果您在沒有上下文的情況下無法在5秒內弄清楚這些圖標的含義,請考慮一下用戶的感受。

您認為其中有多少對? 多少讓你難過? 讓我們回顧一下每個圖標的含義。 (How many of those do you think you got right? How many stumped you? Let’s review what each icon means.)

Group One: A. The heart icon is the ‘lists’ icon for Wayfair. The three-line icon is the ‘menu’ icon for CNN.

第一組:心臟圖標是Wayfair的“ 列表”圖標。 三行圖標是CNN的“ 菜單”圖標。

Image for post
A heart icon on the left, a stacked line icon on the right. Images below displayed where they are located on each company's website.
左側為心臟圖標,右側為堆積線圖標。 下面的圖像顯示了它們在每個公司網站上的位置。

Group Two: B. The compass icon is used as the ‘explore’ or ‘discover’ icon for the Instagram web page. This icon is not used on their mobile app. The globe icon is used by Amazon for their language setting.

第二組:B .指南針圖標用作Instagram網頁的“ 瀏覽”或“ 發現”圖標。 他們的移動應用程序上使用此圖標。 地球圖標由亞馬遜用于其語言設置。

Image for post
A globe icon on the left, a compass icon on the right. Images below displayed where they are located on each company’s website.
左側是地球儀圖標,右側是指南針圖標。 下面的圖像顯示了它們在每個公司網站上的位置。

Group Three: B. The arrow looping towards the right or forward, in a circle is the ‘refresh’ icon for Google Chrome. The looping arrow going towards the left, or backward, in a circle around a clock, is the ‘recent’ icon in Confluence.

第三組: B .箭頭向右或向前循環成一個圓圈,是Google Chrome瀏覽器的“ 刷新”圖標。 環繞箭頭向左或向后繞一圈的循環箭頭是Confluence中的“ 最近”圖標。

Image for post
An arrow in a circle going counter-clockwise on the left, an arrow in a circle going clockwise on the right. Images below displayed where they are located on each company’s website.
圓圈中的箭頭在左邊逆時針旋轉,圓圈中的箭頭在右邊順時針旋轉。 下面的圖像顯示了它們在每個公司網站上的位置。

Extra Credit: A. The first set of arrows moving in a circle is the ‘rotate’ icon in the design program, Sketch. The second set of arrows is also in the Sketch program, in the same menu bar in fact but, that icon means ‘create symbol’.

額外的功勞: A .在圓周上移動的第一組箭頭是設計程序“草圖中的“ 旋轉”圖標。 第二組箭頭也位于Sketch程序中,實際上在同一菜單欄中,但該圖標表示“ 創建符號”。

Image for post
Both sets of icons have two arrows making a circle motion. Images below displayed where they are located on each company’s website.
兩組圖標都有兩個箭頭進行圓周運動。 下面的圖像顯示了它們在每個公司網站上的位置。

Note how many of these icons you did not guess correctly. Again think about the users, trying to make the same choices. For example, the last bonus questions about ‘rotate’ and ‘create symbol’ seems crazy confusing. But, the system offers labels that make finding what the user needs easier and clearer. The icons are more of a nod to other design programs like Adobe Photoshop and Adobe Illustrator than actual identifiers. The labels are what make the program usable.

請注意您沒有正確猜到的這些圖標有多少。 再次考慮用戶,嘗試做出相同的選擇。 例如,關于“旋轉”“創建符號”的最后一個獎勵問題似乎令人困惑。 但是,該系統提供的標簽使查找用戶所需的內容更加容易和清楚。 這些圖標更像是其他設計程序,例如Adobe Photoshop和Adobe Illustrator,而不是實際的標識符。 標簽是使程序可用的要素。

現在讓我們升級到更大的分組。 本輪規則有所不同。 (Let’s level up to bigger groupings now. The rules are a little different for this round.)

Rules: All the icons below all represent the same action. The goal is to go through the group of icons and determine what that icon group means. Try to do this as quickly as possible. If it helps, time yourself for 10 seconds per set. Make sure you write down your answers as you go so you do not forget your initial assumption.

規則: 所有下面的所有圖標都表示相同的操作。 目的是瀏覽圖標組并確定該圖標組的含義。 嘗試盡快執行此操作。 如果有幫助,請每套計時10秒鐘。 確保隨手寫下答案,以免忘記最初的假設。

Group One:

第一組:

Image for post
a group of icons
一組圖標

Group Two:

第二組:

Image for post
a group of icons
一組圖標

Group Three:

第三組:

Image for post
a group of icons
一組圖標

Group Four:

第四組:

Image for post
a group of icons
一組圖標

您認為其中有多少對? 多少讓你難過? 讓我們回顧一下這些分組所代表的動作。 (How many of those do you think you got right? How many stumped you? Let’s review the action that these groupings represent.)

Group One: Save

第一組: 保存

Group Two: Menu

第二組: 菜單

Group Three: Edit

第三組: 編輯

Group Four: Download

第四組: 下載

Kinda crazy to see how many different icons mean the same thing, right?

Kinda瘋狂地看到有多少不同的圖標表示同一件事,對不對?

How did you do? Did you find it super easy to figure out these icons? Or did you find it difficult?

你是怎么做的? 您發現找出這些圖標超級容易嗎? 還是覺得困難?

Did you think you had an answer and then as you looked through the other icons you realized that you might not be right? If you felt that sense of confusion or second-guessing, think about how your user feels when you use similar icons. Especially since you are now armed with the knowledge that all of these icons are commonly used for these actions across the web. There is no standard. So your user might be used to seeing one icon on another site they frequent, but your new site does not have that same icon. And now the user is questioning what that icon means and where to go to complete the task they want to do.

您是否認為自己有答案,然后瀏覽其他圖標時就意識到自己可能不對? 如果您感到困惑或困惑,請考慮使用類似圖標時用戶的感受。 尤其是因為您現在已經掌握了所有這些圖標在網絡上通常用于這些操作的知識。 沒有標準。 因此,您的用戶可能習慣于在他們經常光顧的另一個站點上看到一個圖標,但是您的新站點沒有相同的圖標。 現在,用戶正在質疑該圖標的含義以及在何處完成他們想要完成的任務。

Did you find a few you recognized and used context clues to determine which grouping meant what? If you did use context clues, are you going to put all these icons next to each other on your app too? Or maybe we can use the best context clue of all: a label.

您是否發現了一些您已識別并使用上下文線索來確定哪個分組意味著什么? 如果您確實使用了上下文線索,是否還會在應用程序中將所有這些圖標并排放置? 或者,也許我們可以使用最好的上下文線索:標簽。

I hope these exercises helped illuminate the issues users are facing with icons. I sincerely hope that you try this exercise with your peers and coworkers to see why labeling icons is so important. You can also do this exercise with your users to determine which icons you should and should not use in your app to go along with your label.

我希望這些練習有助于闡明用戶使用圖標時面臨的問題。 我衷心希望您與同事和同事一起嘗試此練習,以了解為什么標記圖標如此重要。 您還可以與用戶一起進行此練習,以確定您應該和不應該在應用程序中使用哪些圖標來與標簽一起使用。

流行的例外-沒有優點。 (Popular Exceptions — That Don’t Have Merit.)

I have heard arguments about progressive reduction, but as much as it makes the pages look cleaner, it does not help new users. Progressive reduction assumes that all the users on the platform have been using the product since the icons introduced with labels were released. This theory also assumes that this person might be using this app multiple times a day or a week so that they become familiar with the icons. However, this theory does not account for a good share of the use case of new users. How are they supposed to know what those icons mean without the background knowledge that all the power users know?

我聽說過有關逐步減少的爭論,但是盡管它使頁面看起來更整潔,但對新用戶沒有幫助。 逐步減少假定自發布帶有標簽的圖標以來,平臺上的所有用戶都在使用該產品。 該理論還假設此人每天或每周可能多次使用此應用程序,以便他們熟悉圖標。 但是,這種理論不能說明新用戶使用情況的良好份額。 沒有所有高級用戶的背景知識,他們應該如何知道這些圖標的含義?

I have also heard arguments for the click and explore methods of finding out what things do. This is specific to particular age groups, and technology use, making it a big assumption about large user bases. I have personally found in user studies that people that are younger millennials to toddlers are more likely to click around sites and apps and discover what things do without fear of repercussions. They will tap and click things until they figure out what they need. That is if they are interested enough to try to find what they want before leaving the site completely to run a google search for it.

我也聽到了有關單擊的爭論,并探討了找出問題所在的方法。 這是特定于特定年齡段和技術使用的,這使它成為有關龐大用戶群的重要假設。 在用戶研究中,我個人發現,千禧一代到學步年齡較小的人更有可能點擊網站和應用程序,發現事情在做什么而不必擔心會受到影響。 他們將點擊并單擊事物,直到他們確定需要什么為止。 就是說,如果他們有足夠的興趣嘗試在完全離開網站之前對其進行搜索,然后找到他們想要的東西,則對它進行Google搜索。

Older millennials and older generations are less likely to click around sites due to what I call “CLICK HERE! PTSD.” In the age of the internet in the 90s and early 2000s, it was so easy to click something that seemed like it must be the correct button, only to download a crazy virus and lose all your files in moments. Buttons that seemed harmless and like the right thing to do, started feeling like huge decisions. Users started second-guessing every click. On top of getting computer wiping viruses, computers would also end up on webpages that would lock the users on a page so that they could not go back. It seemed like there was no safety net for users. So why when most clickbait only lives on Facebook and bad news blogs, would users still not trust the click here buttons? I mean common. If you had to keep replacing your virus-induced computers, would you trust buttons easily? No.

由于我稱之為“點擊此處! PTSD。” 在90年代和2000年代初期的互聯網時代,單擊似乎必須正確的按鈕是如此簡單,只是下載了瘋狂的病毒并瞬間丟失了所有文件。 看起來無害且喜歡正確的事情的按鈕開始感覺像是一個巨大的決定。 用戶開始猜測每次點擊。 除了獲得清除計算機病毒的能力之外,計算機還將最終出現在將用戶鎖定在頁面上的網頁上,從而使他們無法返回。 用戶似乎沒有安全網。 那么,為什么當大多數clickbait只生活在Facebook和壞消息博客上時,用戶仍會不信任click here按鈕嗎? 我的意思是普通。 如果您必須繼續更換病毒引起的計算機,您會輕易相信按鈕嗎? 沒有。

If the user doesn't fall into the “Click Here! PTSD” boat, they might just not be that tech-savvy and are afraid of getting lost or stuck without any clear breadcrumbs to follow. I have plenty of non-tech-savvy younger millennial friends in this boat. They will often open multiple tabs of the same webpage to keep their spots just in case they cannot figure out how to navigate back to that place. These people are also hesitant about clicking around. They do not want to lose any of the things they had just worked on or, any of the things they had found. They are afraid that one click will lose all their hard work. This fear of losing what they have will prevent them from exploring. This is most common in online school portals, workspace pages like Confluence or Jira, or other work apps like Google docs, Service Titan, slides, or even email apps. Because these apps are work or school-related, users navigate with an abundance of cautiousness to make sure they do not click the wrong thing and break the whole system for the whole class, school, company, office, etc. Why would you click a bunch of buttons in your email to try to figure out how to write a new email, if you were afraid you would delete all email addresses in the companies system? You wouldn’t. And although to someone more tech-savvy that concept may seem irrational, just like the “Click-Here! PTSD”, but for some users, it’s a real fear that prevents them from trying to understand what your icons mean.

如果用戶不屬于“單擊此處! PTSD”船,他們可能不是那么精通技術,并且害怕迷路或卡死而沒有任何明顯的面包屑。 我在這條船上有很多不懂技術的年輕千禧一代朋友。 他們經常會打開同一網頁的多個標簽,以保留自己的位置,以防萬一他們無法弄清楚如何導航回該位置。 這些人也對點擊周圍的內容不滿意。 他們不想丟失他們剛剛從事的工作或發現的任何事情。 他們擔心單擊一次會失去所有的辛苦工作。 害怕失去他們擁有的東西會阻止他們進行探索。 這在在線學校門戶網站,Confluence或Jira等工作區頁面或Google文檔,Service Titan,幻燈片甚至電子郵件應用程序等其他工作應用程序中最常見。 由于這些應用程序是與工作或學校相關的,因此用戶在導航時要格外小心,以確保他們不會單擊錯誤的內容并破壞整個班級,學校,公司,辦公室等的整個系統。為什么要單擊如果您擔心會刪除公司系統中的所有電子郵件地址,則在電子郵件中使用一堆按鈕來嘗試找出如何編寫新電子郵件? 你不會的 而且,盡管對于精通技術的人來說,這個概念似乎不合理,就像“點擊此處! PTSD”,但對于某些用戶而言,這確實是一種恐懼,使他們無法嘗試理解您的圖標的含義。

In conclusion, please label your icons. Your users will thank you.

最后,請標記您的圖標。 您的用戶將感謝您。

翻譯自: https://uxdesign.cc/label-your-icons-e2bd57366d37

標記圖標

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275285.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275285.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275285.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

找出無序數組中最小的k個數(top k問題)

2019獨角獸企業重金招聘Python工程師標準>>> 給定一個無序的整型數組arr,找到其中最小的k個數 該題是互聯網面試中十分高頻的一道題,如果用普通的排序算法,排序之后自然可以得到最小的k個數,但時間復雜度高達O(NlogN)&…

你應該知道的 Node 基礎知識

大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以加我微信 ruochuan12 參與,已進行兩個多月,大家一起交流學習,共同進步。源碼共讀學的多數是 Node.js ,今天分享一篇 Node.js 基礎知識的文章。一. N…

C# 中數據緩存總結

在C#嘗試了5種方法進行數據緩存,具體如下:(如有遺漏,錯誤歡迎大家指正,歡迎提建議。)1:Session方法:此方法是針對于每個用戶來的,如果用戶量比較大,那么建議不要采用此方法&#xff…

react 引入 mobx @babel/core: 7.2.2

為什么80%的碼農都做不了架構師?>>> yarn add babel/plugin-proposal-class-propertiesyarn add babel/plugin-proposal-decorators"babel": {"plugins": [["babel/plugin-proposal-decorators", {"legacy": …

面試官問:怎么自動檢測你使用的組件庫有更新

大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以加我微信 ruochuan12本文來自V同學投稿的源碼共讀第六期筆記,寫得很有趣。現在已經進行到第十期了。你或許經常看見 npm 更新的提示。npm 更新提示面試官可能也會問你,組件庫…

設計模式完整備忘錄

小言:這不是設計模式講解型博文,以下將設計模式的概述、類圖,代碼示例,總結分每篇博文單獨展示,現將其歸類,便于以后翻閱,設計模式也不是一兩個月學完了就能完全領悟,它只告訴我們幾…

使用Microsoft Web Application Stress Tool對web進行壓力測試

你的Web服務器和應用到底能夠支持多少并發用戶訪問?在出現大量并發請求的情況下,軟件會出現問題嗎?這些問題靠通常的測試手段是無法解答的。本文介紹 了Microsoft為這個目的而提供的免費工具WAS及其用法。另外,本文介紹了一種Web應…

2021前端高頻面試題整理,附答案

大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以加我微信 ruochuan12若川視野原意是若川的前端視野。但太長了就留下了四個字,不知道的以為關注的不是技術公眾號。今天分享一篇慕課網精英講師河畔一角的好文章~廢話不多說,…

OO第二單元作業小結

總結性博客作業 第一次作業 (1)從多線程的協同和同步控制方面,分析和總結自己三次作業的設計策略。 第一次作業為單電梯傻瓜調度,可以采用生產者——消費者模型,是一個有一個生產者(標準輸入電梯請求),一個…

dribbble加速vpn_關于Dribbble設計的幾點思考

dribbble加速vpn重點 (Top highlight)I’d like to start with the following quote from Paul Adam’s “The Dribbbilisation of Design,” a powerful read that examines the superficiality of modern product design portfolios, often containing Dribbble posts that l…

JS Compress and Decompress

<html><head><title>JavaScript字符串之壓縮與還原</title><meta http-equiv"Content-Type"content"text/html; charsetutf-8"/><script type"text/javascript"><!--/** * 壓縮 */functionCompress(strN…

尤雨溪推薦神器 ni ,能替代 npm/yarn/pnpm ?簡單好用!源碼揭秘!

1. 前言大家好&#xff0c;我是若川。最近組織了源碼共讀活動&#xff0c;感興趣的可以加我微信 ruochuan12想學源碼&#xff0c;極力推薦之前我寫的《學習源碼整體架構系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、…

如何了解自己的認知偏差_了解吸引力偏差

如何了解自己的認知偏差Let me introduce you the attractiveness bias theory known as cognitive bias.讓我向您介紹稱為認知偏差的吸引力偏差理論。 Think about a person with outstanding fashion. It will draw our attention, and maybe encourage us to interact with…

隱馬爾可夫模型(HMM)及Viterbi算法

HMM簡介 對于算法愛好者來說&#xff0c;隱馬爾可夫模型的大名那是如雷貫耳。那么&#xff0c;這個模型到底長什么樣&#xff1f;具體的原理又是什么呢&#xff1f;有什么具體的應用場景呢&#xff1f;本文將會解答這些疑惑。  本文將通過具體形象的例子來引入該模型&#xf…

尤大直播分享:vue3生態進展和展望

大家好&#xff0c;我是若川。最近組織了源碼共讀活動&#xff0c;感興趣的可以加我微信 ruochuan12前言10月23日&#xff0c;參加了前端早早聊組織的【vue生態專場】&#xff0c;準備寫一波分享方便大家學習。早上有4個話題&#xff1a;volar開發&#xff0c;搭建平臺組件開發…

利用Python查看微信共同好友

思路 首先通過itchat這個微信個人號接口掃碼登錄個人微信網頁版&#xff0c;獲取可以識別好友身份的數據。這里是需要分別登錄兩人微信的&#xff0c;拿到兩人各自的好友信息存到列表中。 這樣一來&#xff0c;查共同好友就轉化成了查兩個列表中相同元素的問題。獲取到共同好友…

女生適合學ux嗎_UX設計色彩心理學,理論與可訪問性

女生適合學ux嗎Colour is an interesting topic, which I feel is often overlooked and sometimes under-appreciated. One of the first things I was taught was the power of colour, how it can have an impact on human emotion, and that there should be purpose behin…

初學者也能看懂的 Vue2 源碼中那些實用的基礎工具函數

1. 前言大家好&#xff0c;我是若川。最近組織了源碼共讀活動&#xff0c;感興趣的可以加我微信 ruochuan12想學源碼&#xff0c;極力推薦之前我寫的《學習源碼整體架構系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、…

清除浮動mini版

1&#xff09; 清除浮動mini版(簡約而不簡單).clr:after { content:"";display:table;clear:both;}.clr{zoom:1;} 轉載于:https://www.cnblogs.com/jinbiao/archive/2011/09/26/2191170.html

Fiddler 十分鐘最全使用介紹

Wireshark 、HTTPWatch、Fiddler的介紹 Firebug雖然可以抓包&#xff0c;但是對于分析http請求的詳細信息&#xff0c;不夠強大。模擬http請求的功能也不夠&#xff0c;且firebug常常是需要“無刷新修改”&#xff0c;如果刷新了頁面&#xff0c;所有的修改都不會保存。Wiresha…