How to implement a (UI-wise) button
I am designing (G) a program interface and stumbled upon a problem; The program converts the number to different units, and the unit layout converts to:
[Device name (information appears when pressed)] [Special status, if any] [Output in a text box that can also be used for input (for converting to other blocks)]
I want the user to be able to copy the pin number to the clipboard without getting confused with the highlight and find the right buttons to press. So, I thought I would make a button after the text input field by saying something like "C" or "Copy".
But yesterday I was reading joelonsoftware.com and found that users appear to be cursors. So what should I do?
I thought of several options:
- Click on the textbox to copy to clipboard - BUT: I want to use it to enter also
- By pressing a number on the keyboard to copy the corresponding one - BUT: There will probably be more than 10 and I need them for new input
- The Large Copy button, for example, actually says Copy. Hmm, will this work? I know I like to use the keyboard whenever I can, so a related solution would be nice.
- Each block will have its own space where everything (name, text box, etc.) fits in. What if it will copy to the clipboard when clicked anywhere in that space except for the name or textbox. - BUT: What if you miss what it means to click below one text box and click above another?
- But what about allocating a unit of space when I walked? - Maybe I still mean problems ...
What do you think? I think I can just choose # 3 - Large copy button.
source to share
There is nothing wrong with having a Copy button after each field if you think it will be a very common operation.
Two suggestions, however:
-
In terms of appearance, make sure the button is clearly associated with the field. For a text box, the best way to do this is to put the Copy button inside the text box (on the right side - but be prepared to handle RTL languages, switching its position as needed!).
-
To avoid being overly significant, don't use text, but use the Windows icon for copying (like this one:)
and put the text in your tooltip. If you do this, you can also get rid of the button border entirely, which will further reduce its size, although you still want the hover indicator to indicate that it is an active UI element. In fact, you may need a special copy of the Vista / Win7 Explorer interface (also seen in IE7 / 8) for the location and the reboot icon in it.
and put the text in your tooltip. If you do this, you can also get rid of the button border entirely, which will further reduce its size, although you still want the hover indicator to indicate that it is an active UI element. In fact, you may need a special copy of the Vista / Win7 Explorer interface (also seen in IE7 / 8) for the location and the reboot icon in it.source to share
If you accidentally click on the wrong area, you can simply click on the right area after that. If your problem is that the user doesn't know when they are clicking on the wrong area, just highlight the area with the last click.
Is there a problem with copying what is in the textbox when they click on it? So what if it's used for input? They are just going to copy the value they need after they type the values into.
The text box can also contain ctrl-click
or shift-click
.
Most people can copy text to their computer. Perhaps the best solution is to just automatically select all the text in the textbox when it gets focus, so they can just ctrl-c copy or start typing to start typing.
source to share
For sheer speed, the keyboard is the way to go. How about letters AZ to copy text boxes? Skip the "E" to enter scientific notation. Potential speed is high, but learning ability is low. The id expects users to find it difficult to define this interface even with explanatory text on the page / window, and if users have to read the explanatory text, the time it takes is likely to result in less time savings in the user interface unless the user is using the app all the time (Joel also correctly writes that users hate reading).
For an application that will only be used occasionally, a large button is the better choice, the more the better, Fittss Law predicts. And absolutely label it "Copy", not "C" and not a badge, to maximize learnability. Your other ideas have learning and tolerance issues without keyboard speed.
However, I think you are taking what Joel says too far. Of course you want to eliminate unnecessary clicks, but a typical design for this type of application would require one click on the text field (which should highlight the entire value by default) followed by one click on the Copy menu item, or better Alt-C or Ctrl-C from the keyboard. It's hard for me to imagine a task where saving one click or keystroke on your keyboard would be worth the mess of a bank of Copy buttons next to your text boxes. Will you also have buttons to insert and clear? At some point, the clutter will slow your users down more than an extra click.
How often will users copy? If it really is dozens of times per session, then you should rethink the entire design, because any copying and pasting one number at a time will be tedious. You might want to support batching, multiple numbers at once, and outputting the results to a form already suitable for the expected use. Perhaps it works in other applications, for example, as Enso does: the user highlights a number in any document or text field of any application, the Convert - Feet - Meters commands and its changes in the document or field.
source to share