An image or pictogram used instead of or supplemental to textual information. Icon requests are off topic; please keep questions related to their use rather than asking what a good icon to represent a certain item/concept would be.

learn more… | top users | synonyms (2)

160
votes
21answers
15k views

Save icon, is the floppy disk icon dead?

This Twitter post sparked me to ask the question: totally! RT @damienguard: Dear UI designers everywhere. Stop using floppy disk icons for save. Too many people have no idea what it is now. ...
58
votes
5answers
9k views

When to use icons vs. icons with text vs. just text links?

Are there any rules on when to use icons vs. icons with text vs. just text links in a web application? For example: vs. save vs. save Extra question: Is save -or- save preferable?
24
votes
4answers
1k views

How do you create or select an icon for a feature?

How do you work out what icon type or image you need for a feature? There's been quite a lot of very small questions here in the form of "What is a good icon for feature X?". Instead we should be ...
98
votes
10answers
7k views

Do unique icon contours help people scan?

Many years ago, I ran across a good icon design tutorial. It said that having unique contours to icons help users scan for the item they're looking for. If this is true, why don't iPhone and Android ...
37
votes
22answers
4k views

What would be a good non-religious icon to represent that a person has died? [closed]

I have an application that displays information about people in an organization and their accomplishments in the organization. It is non-religious in nature and members can be of any or no religion. ...
15
votes
4answers
4k views

Which way should arrows point in a collapsible accordion? Left/down … down/up?

What is the best way to indicate that it's possible to open and close an element accordion-style? Arrow pointing left/arrow pointing down Arrow pointing down/arrow pointing up Plus sign/minus sign … ...
10
votes
1answer
595 views

What's a good alternative to flags for depicting internationalisation as an option?

Are flags a bad idea? In various comments on How to design a multi-language website?, several designers voiced their concern for the use of flags as a symbol to represent language switching on a ...
249
votes
17answers
16k views

What explains the current shift from glossy UIs to matte UIs?

I've noticed an interesting phenomenon in the user interfaces of many famous applications, they're moving away from the glossy complex to a more dull and bare minimum design. Why the sudden change? ...
35
votes
10answers
4k views

Has user testing found that the “three horizontal bars” for main menu on mobile is commonly understood?

"Three horizontal lines" aka "hamburger icon" seems to be becoming a convention for the "main menu" button, especially on mobile sites: Has anyone done any user testing of this convention, or got ...
22
votes
7answers
1k views

Most intuitive favorite icon [closed]

Similar to Stefan's most intuitive delete icon question. I'm designing a web app that allows users favorite pages. A lot of big sites use either a heart or star symbol -Which one is most intuitive? ...
23
votes
3answers
7k views

Is Apple's or Google's meaning of the three-horizontal-bar icon more popular?

Apple and Google are going head-to-head to define meaning of the three-horizontal-bars icon: In iOS this icon means "drag me to rearrange items in a list" while Google Chrome's version means "click ...
30
votes
4answers
2k views

Where should the GUI light source come from?

I know that historically the light source on GUIs is in the upper left, casting a shadow on the bottom-right of buttons and the upper left of fields. Now, I see some places (like Apple) use a top ...
15
votes
9answers
11k views

Symbol for “Swipe Left” [closed]

I'm working on an app that displays a list of ten items (text items) on the screen at a time. If there are more than ten items, the user should be able to "swipe" from right to left to see the next ...
12
votes
4answers
2k views

Why is everything becoming flatter? [duplicate]

Things in the design world seem to be getting flatter! I can produce infinite examples; iOS7, Windows 8 (and everything else in Windows 8), Pepsi, the Dropbox logo, even things outside the computer ...
16
votes
7answers
2k views

The psychology of everyday shapes

We know a lot about colours and how they affect people, but what do we know about shapes? When choosing icons or logos, how do the shapes in them affect their perception? Does anyone know of any ...
22
votes
12answers
3k views

Most intuitive delete icon [closed]

I'm redesigning the products admin panel for a marketplace web-app where the user can add/edit/delete products. There isn't to much space available so I need to use icons for edit and delete. What do ...
13
votes
5answers
2k views

How to represent level of difficulty while selecting a game?

I am working on a menu to select from various (3) game variants shown from top to bottom, each variant offering different difficulty levels. The difficulty will be selected by swiping (touch input ...
5
votes
2answers
362 views

I want to let the user toggle a column heading to sort a grid by a date field. How can I make ASC/DSC intuitive?

I want to let the user toggle a column heading to sort a grid by a date field. How can I make the ascending/descending dichotomy intuitive? EDIT: I was looking for date-column specific solutions.
11
votes
4answers
491 views

How to tell the user that an input box is autocomplete-enabled?

Is there a good graphical sign which tells the user that a particular field on the page is autocomplete enabled? For instance, the field name says "Document author". When you start typing in that ...
7
votes
5answers
413 views

How to indicate AND and OR in a search form

I am designing a search form where the user has to indicate if the field is required or optional, this will affect the way the query is built. For example if the user marks the field as required, in ...
4
votes
4answers
554 views

An icon indicating something has changed or been edited? [closed]

Any suggestions besides the obvious pencil or highlighting with colours? I am stumped, this was trickier than I thought. It is for a search function/filter if that helps but a universal symbol would ...
42
votes
7answers
2k views

How should you show that an accordion is expanded?

When you have an accordion, you need some way of showing the current state is expanded. There are a number of different ways of handling this, and each is used by a number of respected websites and ...
19
votes
7answers
1k views

Are grayscale buttons with icons usable and effective?

The image here is old gmail new gmail, when no mail is selected new gmail, when mail is selected new delicious To me, the buttons are unlabeled and tough to discover. I don't believe the ...
35
votes
8answers
1k views

What would be a good way to thumbnail audio?

I want to represent an audio file in an image with a maximum size of 180×180 pixels. I have been thinking about something similar to what Soundcloud does, although it will require some chopping and ...
19
votes
6answers
6k views

How to best indicate navigation menu on mobile

What's the best way to indicate the navigation menu on mobile devices? I see this three-bar icon being used a lot, but do users really understand what it means? Wouldn't a button simply saying ...
19
votes
14answers
3k views

What's a good icon to represent how difficult a task is to do? [closed]

I am working on an application where users get to rate various things. In one category, they are rating how "good" something is, and so I put together a little 1-5 rating system with star icons, like ...
7
votes
3answers
4k views

The Hamburger Icon - menu or drag affordance?

There seems to be a difference in meaning for this icon emerging: For some it means 'menu', for others it represents 'draggable item' (in preference to the small dots used in GMail for instance). ...
6
votes
2answers
5k views

List icon vs menu icon

As of Ice Cream Sandwich, the new standard icon for menus is three vertically aligned squares as such: Before that, the menu expansion was three horizontal lines like this, but without the ...
11
votes
1answer
1k views

Microsoft Visual Studio 11 - why would they use uppercase in UI?

Microsoft has been very transparent with their updates to Visual Studio 11. It includes a huge change to the UI design of the entire IDE, most notably colour themes, icons and capitlization. In their ...
15
votes
8answers
2k views

Icon for “factory reset” [closed]

I'm having a hard time finding an appropriate icon for "factory reset". At the moment, I have a "warning" icon, but I am looking for something less aggressive and more to the point.
15
votes
6answers
730 views

Consistent UI experience

Shouldn't a user interface be as consistent as possible? I believe when a user uses an interface, he experiences certain behavior from the interface, and tries to couple those experiences to the rest ...
11
votes
6answers
1k views

Multiple choice with Yes, No and 'No answer'

I am working on a Quiz Application for Multiple Choice question. Instead of normal Multiple Choice Questions with the two answers yes and no. I am working on one that allows a user to abstain to a ...
8
votes
7answers
1k views

Search Icon vs Search Input Box - Both Require One Click/Touch: Which to use?

I'm working on a mobile site of a rather large site. There are quite a few iA and navigation hurdles already, so I'm pushing to use a search icon instead of a traditional search input box. My ...
4
votes
5answers
309 views

Communicating a three stage grade of alert

In our web application there's a view where we display the stress on a hardware component. This will be displayed with a percentage value in different colour codes combined with an icon where 100% ...
4
votes
2answers
552 views

Votes (star rating) usage - stars or smiles?

I need to make a voting field for my feedback form. I make an assumption then when you use stars images user easily will use lower ratings, and when you use smiles(faces) with :) for good vote(5) and ...
3
votes
4answers
771 views

Icon for “More”, like more results [closed]

I need an intuitive icon which represents "more" ITEMS (or "more items like this") (or other "similar" items to this item). I have space constraints on the screen, so I can't exactly use a label.
3
votes
8answers
656 views

Most appropriate icon for user responsibilities? [closed]

What is the most appropriate icon for user responsibilities/roles (a.k.a. 'charges')?
2
votes
4answers
883 views

Icon for ascending-descending sort [closed]

I'm trying to come up with two icons to represent ascending-descending sort order which would allow the user to sort the members ('bars') of a chart/visualization. The control will be a toggle ...
10
votes
11answers
571 views

Showing which direction a value should go towards

I have an interesting UI challenge. I have a ratio that I am showing in two ways: one using a percentage surrounded by a circumference pie chart, and the other showing a status bar. In some cases a ...
9
votes
5answers
2k views

What symbol to use to represent feedback

When reading Which "Like" symbol is best to use I suddenly realised that the UX community may be able to help me solve a little problem: I'm working on a site which has just gone in to Beta and as ...
9
votes
6answers
1k views

Floppy disk icon for “Save” [closed]

It's funny that we still use floppy disks icon for save operation association while floppies have long been outdated, unused and many computer users nowadays don't even know how floppy disks actually ...
6
votes
3answers
2k views

What unicode symbol should I use for EDIT?

I'm trying to keep a very light payload on a wordpress plugin I'm writing. Users will be able to: add - + refresh - ⟳ edit I'm thinking of using the pencil glyph: ✎, but I'm not sure about it. ...
5
votes
2answers
2k views

How should I mark “Mandatory” and “Optional” fields in a form?

I'm making a web app and in the admin panel there is in one place a list of items where (among other things) the administrator can select which items will be mandatory for the users, and which will be ...
4
votes
2answers
198 views

Symbol for additional content present in a passive display

I have a digital signage application in which a portion/row can show a max of 3 blocks of information at a time. The number of total blocks vary from 2 to 6, in which 90% will only contain 2 or 3. On ...
4
votes
3answers
532 views

Best icon to represent transparency? [closed]

What would be the best image/icon to represent transparency? It should be as compact as possible and fit in a 13x11 area. I see that I should add more information. I need this image/icon to be ...
3
votes
1answer
392 views

Internal Consistency vs. Consistency across the Industry

Does anyone have any recommendations on how to balance having styles/patterns/icons being consistent to a single website vs following recommended practices/patterns/icons that are popping up across ...
1
vote
3answers
118 views

Icon for unmasking passwords (open or closed to begin with)? [duplicate]

What is the convention for showing toggle icons to a user? This question is specific to password unmasking, but it can easily be used in "on / off" icons et al. In our situation, we have an unmask ...
1
vote
2answers
359 views

Is using a partialy shaded sandwich icon more effective the solid sandwich icons

After a sudden realization my mobile banking app that I had been using for 2 weeks had a side menu I started to think about how the sandwich icon is used to indicate a side menus existence. At ...
0
votes
1answer
144 views

What's a good metaphor for code? [closed]

I'm playing with a user interface, with options like "preview", "view code", "drag and drop" and the such, and am creating icons for them. What would have the meaning of "code"? I was thinking ...
-1
votes
1answer
412 views

Non-Archaic Symbol for “Save” [closed]

Scott Hanselman blogged about "14 icons that the younger generation hasn't seen to understand," like Save being a floppy disk. I did live through the floppy era, and I find that the symbol itself ...