6

buttons

i am designing a UI for a web application, there are multiple card like entries in a list, each item in the list can be

  • uploaded in file type A
  • downloaded in file type A
  • downloaded in file type B

some caveats :

  • file type A upload/download is always available.
  • file type X has 3 states, unavailable, valid, invalid.

things i'm conflicting about :

  • whats a good way to differentiate between the file type A and B download button
  • should the word 'Download' appear in the 3rd button as well?
  • whats a good/accepted color pallet for download / upload buttons ?
  • should i use 'upload/download' icons (A and B having the same icon) or try and find something specific per file type if the latter, what should i do with the upload button ?
Improve this question

2 Answers 2

Reset to default
2

whats a good way to differentiate between the file type A and B download button

As a general principle of UX, you should show state in a clear and explicit way.

So if the user could download for example a .doc and a .pdf it should be clear for them. For example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

should the word 'Download' appear in the 3rd button as well?

If it's in one, it should be in the other, but anyway as the example above, I would choose to "extract" the word as common factor to reduce the clutter.

whats a good/accepted color pallet for download / upload buttons ?

It should rely on your general page design, not in a general rule. Just as a comment, people are more attracted to click on red than on green, but it's not something to take into account in this case, since these are functional buttons and not convertion ones.

should i use 'upload/download' icons (A and B having the same icon) or try and find something specific per file type if the latter, what should i do with the upload button ?

The action is the same, so it's okay if the icons are the same, as I stated in the first point, the important thing is to be ensure actions' results matches the users' expected results.

Improve this answer
3
  • Great feedback, however I disagree that people are more attracted to click on 'red' vs. 'green'. I do recall in usability studies we've done in the past that 'red' color usually implied 'danger', 'permanent removal', 'warning'. Given that perception, I'd hesitate to say that given the two choices, you may see people clicking more on green rather than red CTA's.
    – Igorek
    Nov 4, 2015 at 5:02
  • It depends of the purpouse. Take a look. blog.hubspot.com/blog/tabid/6307/bid/20566/…
    – Alejandro Veltri
    Nov 4, 2015 at 15:11
  • 1
    Learned something new today. Great article!
    – Igorek
    Nov 4, 2015 at 15:52
1

To save space what we have done on our website is create a download dropdown which opens up a list of different formats in which the file is available. In our case different languages but you could use different file formats.

Download dropdown

In terms of icons and distinguishing between upload and downloading I'd recommend two distinct icons, for example these.

UploadDownload

For colours I would suggest not to use red as it is often associated with deleting an item or errors. If there is one action that you prefer the users to do, make that action more prominent.

Accentuate primary actions

Improve this answer

Your Answer

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

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