3

I'm currently grappling with a design decision and would love to gather some collective wisdom on the matter. The question at hand is about the placement of copy/paste buttons in relation to an input box within a user interface.

In many applications, users frequently need to copy information from or paste information into input fields. To facilitate this, a UI pattern often used is providing copy/paste buttons. However, there seems to be a divide on whether these buttons should be placed inside or outside the input box.

Inside the Input Box: Some argue that placing the copy/paste buttons inside the input box (typically at the end of the field) creates a cleaner look and directly associates the action with the field itself. It can also save space and reduce visual clutter.

Outside the Input Box: Others advocate for placing the buttons outside the input box, arguing that it prevents the buttons from obscuring the view of the text when the field is focused or when the text overflows. This can also make the buttons more accessible for larger hit areas and potentially improve mobile responsiveness.

Discussion Points:

What are the pros and cons of each approach from a usability and accessibility standpoint?

How does the context of use (e.g., form-heavy enterprise applications vs. consumer-facing mobile apps) influence the decision?

Are there any established best practices or research findings that could guide this decision?

Could the nature of the content being copied/pasted (e.g., sensitive data vs. generic information) affect the placement choice?

How do different design systems (like Material Design, Ant Design, etc.) handle this pattern?

I'm eager to hear about your experiences, preferences, and any insights you might have based on user testing or research. If you have examples or case studies to share, that would be incredibly helpful as well.

Option1

Option 2

3
  • What results has your research efforts yielded? What have you found out about what design systems say about the matter? Nov 3, 2023 at 9:56
  • The design system supports both options. On the research front, we do not have anything concrete.
    – Praasshant
    Nov 3, 2023 at 13:05
  • 1
    Did you conduct usability testing? I doubt option 2 will satisfy the W parameter of Fitt's Law, not to mention the cognitive load from two actions within an element that has its own action (to input data). Also, if data can be hidden, which I assume from the eye icon, why is there a copy feature? That goes against security principles; one wouldn’t even need to see the password, just copy it.
    – Devin
    Nov 3, 2023 at 17:42

1 Answer 1

1

Are there really any use cases when you just need to look at the password? Why watch when you can copy? If you still need to watch, I would make this action secondary and take it out rather than “copy”enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.