I am designing a product that uses a standard Navi pad - up, down, left, right around an enter button. The enter button originally had a single line circle printed on it as a graphic. The client thought it was to ambiguous and suggested using the traditional keyboard left pointing arrow. I am not keen on using the arrow as it gives a dated look to a tech driven product. I have looked at various enter buttons across all genres and there doesn’t seem to be a standard. Does any one know if there is a standard enter graphic that I should be using?
The “carriage return” symbol you mentioned (down and to the left arrrow) is definitely the standard since the days of the typewriter.
I think SONOS did a good job. They use symbols everywhere EXCEPT the select key (like iPod) but the affordance is so strong it’s unnecessary. Plus, all other labeled keys have a dedicated function, where the select key is modal.
Likewise mobile phones frequently just use a “dot” to indicate the select, and will frequently use an on-screen representation to show you the mode functions of the unlabeled keys (note the screen UI in the example below:)
maybe for keyboards (although macs dont have this), and in fact the hard return and enter functions are actually different in most text editing programs.
for other applications however, i wouldnt suggest it. esp. for a media device where the symbol could be confused with a rewind or “back to main menu”/reload function (as in the sonos below, which has a similar graphic on one of the buttons, but i dont really know what it is, as ive never used the device).
i’d suggest either nothing (the button layout itself should be lacking in ambigiousness (is that a word) enough so you know what enter is (ie. ipod), or perhaps a dot as suggested, “OK” or “enter” text. without knowing the context and design of the rest of the UI, its sorta difficult to give more appropriate suggestions. in general, remember the best UI is one that doesnt need labels/instructions…
Thanks guys for the quick feedback, I think I have enough to convince them to use the circle or dot.
I have attached a picture of the keypad. We wanted to refrain from using any text so we wouldn’t have to change for markets outside the U.S.
With the increasing popularity of IxD, do you think a new set of (useful) standards will appear? I know there are thousands of IEC icon standards but they seem dated and un-designed.
one quick bit of criticism…
why do the upper three buttons have radius edges when the lower buttons do not?
I’d imagine the design would be a better success if there were uniformity there.
just a suggestion, take care.
good eye! the final buttons share equal radii, i just put this together quick in illustrator
Two more comments:
What is the top button with the lines? Right now, that’s the most ambiguous.
For every “enter” there should also be an “exit” (ie. a back or menu button.)
The top button is the menu button. I agree its not intuitive as a menu button, the graphic is representing the items in the menu. I could change the line weights so it looks less like fake grip added to the top of the key.
Some other thoughts were the companys logo, or a house.
Here are the three options I’d consider for that key:
A House if it really is “Home” and not “Back.” …But if you only have a “home” key, how do you “back” out of a menu?
A curly back arrow (like the SONOS above) if it’s actually a “Back.” This is the way I’d go.
The word MENU as in the Apple iPod (which is actually a “back”)
CG - originally the center button would take you to the main menu from any screen. This worked fine for all menu items except the options, so now i am considering using it as a back button (much like the ipod).
aside from the button graphics (my only note is that the filled in light bulb symbol doesnt really match the more line-art abstract design of the others, perhaps something like a stylized astrix shape like the mac symbol would be good), is the general design/layout of the UI itself.
i would suggest that the power button really shouldnt go in the same cluster as the menu and light function, and might even be accidently pressed when going for the menu key. i also find the shape of the top cluster doesnt really fit with the shape of the scroll pad. they are both somewhat rounded, yes, but the spaces in the top cluster of buttons could perhaps be tweaked to line up with the spaces in the directional buttons for a cleaner aesthetic, or altogether changed into a different arrangement.
overall, it seems like you are going for an apple simplicity of UI, but i dont find the design really works in the same way. somewhat similar shapes and graphics, yes, but the founding principles of design (function hierarchy, logical/intuitive placement of buttons, graphics, etc.) i think are off.
I agree about the light bulb comment, what is that suppose to do on the device. Also The navi buttons seem rather small compared to the enter button, I wonder if people will find themselves hitting enter instead of up down.
The light bulb button turns on and off the lcd back light. We wanted a dedicated button for that as opposed to putting it in a on screen menu that you might not be able to see when you need it.
I originally thought the same thing in regards to the power button being bumped by accident, but due to underlying hardware layouts it became difficult to move it away from the others. To get around this we are planning on requiring the user to hold it in for 2sec to turn it off. Is this a band-aid solution or is it acceptable?
As far as the functional hierarchy, my goal was to make the navi pad the first point of contact and the 3 upper buttons secondary(with emphasis on the menu button). Maybe making them smaller and further apart from the navi would solve this?
I did intend to make the UI simple - a feature that was lacking among competitors. I didnt intend for it to come off like an ipod, but it appears it has. I just want the users to be able to select the item quickly and intuitively. This might be another post but, is a simple UI possible without being referred to as an ipod?
My eye is pulled to the enter button first because of the color difference and it being the largest button. But what I was saying is maybe the enter button is too big compared to the directional arrows. It might not really be an issue just something to consider.
Side note: What firm / design group do you work for? I live in Maryland but go to school in Georgia.
interesting, these conversations take place all over the world on practically all types of devices. Also, interstingly, comments so far mirror what I’ve heard and read over and over again.
There are almost no certified standards (i.e. ISO) for button legends, the 1/0 digital on/off being an exception. There are commonly used legends that have become standard: forward, back, fast forward, etc. There are lots for electrical and hazard warning icons.
Every icon has element of misunderstanding. Your statement: “I know there are thousands of IEC icon standards but they seem dated and un-designed.” is improperly leading you, a designer, into designing ambiguity.
From many projects and research, as general guidelines to first try to solve these seemingly simple yet complex UI issues, what I’ve learned includes:
Seriously consider using words. Fact is simple, common English words (enter, exit, start, menu, etc.) are almost universally understood and accepted. I have received this advice from Japanese, German and Danish product managers, as well as read it in several information design publications.
Use single level meaning: a word, an icon, a colour, size or shape, location.
Every icon is ambiguous to somebody. Chances are a similar designed icon is used elswhere to mean something else.