I'm new as a UX mobile designer and I have some trouble to represent an Add Attachment button to a form? How should I do that? I can't find any good examples.

Firstly, I designed a classic button inside my form but I don't know if this is the correct way... I also checked the material design chart from google but there is no example either.

Screenshot of Add Attachment button

  • could you provide a mock-up? – Mayo Nov 25 '16 at 13:38
  • Sure, it's done! – ChicNStu Nov 25 '16 at 13:50
  • I don't see a problem with what you have. – bloodyKnuckles Nov 25 '16 at 14:27

There isn't necessarily a "correct" way.

  1. The user needs to understand what he needs to do.
  2. The CTA must be in a place that is easily seen and follows the user's train of thought as he's completing the form. Therefore the CTA can be anyplace in the form.
  3. The label (and icon if included) must be informative.

Often times companies ask for attachments at the end of the form but that isn't "necessary", it's convention.

The best answer is to ask your users. A/B test your designs. Show variations to as many appropriate people as possible: receptionists in your office and others, people in the coffee shop. The creation of mock-ups is fast and easy and the time and cost for asking is a minimal.

Feedback: I for one find the folder less intuitive than an icon of a file. (But that's me.)

| improve this answer | |
  • +1 for the less intuitive folder, a file icon would seem to be more natural. – Greenonline Nov 25 '16 at 20:32

I would recommend using a raised button at the bottom of the form. It will be easy to see and will attract the viewer's attention.

enter image description here

In terms of the icon, use either an attachment icon or a file upload icon, both of which are shown below.

enter image description here enter image description here

You could also use a normal flat button but that will be less eye-catching so decide by yourself which style you prefer to use.

| improve this answer | |

Without seeing the whole form, maybe a raised button (which only contains text) would be useful in your case:

Raised buttons stand out more than flat buttons.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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