How to Design an Upload Media CTA The Right Way ✅
Visual design and interaction tweaks that work really well.
Let’s fix our basics first.
- Your icon and type weight must be similar. Don’t use bold icons with light labels. You can’t have always have it identical but it can always be close.
2. You have equal spacing on all the four sides. This means you might have to add extra padding on left and right in your auto-layout settings because by default, most typeface line height is taller than the typeface itself.
3. You have to make sure that your icon and text is in alignment with the kind of files you expect from your user. Don’t shy away from using the appropriate iconography and label text. They help your users make less mistakes
But let’s get real. This approach is simply a bad shortcut.
Most people reuse their button components for making an ‘Upload Media’ button. This approach is the easiest but also the most ineffective.
These Upload CTAs usually come within forms that accept other media formats as well. Using the same button for uploading Documents, JPEGs and videos will confuse your users. Your upload prompt must clearly communicate its intent and the kind of file format it expects.
For example, if I needed an ‘Upload Background’ prompt, I’d rather go with something that reminds me of landscape images instead of a plain button.
This design not only allows me to drag and drop my file but also communicates the file type, maximum size and a subtle cue that makes it different from other CTAs.
Let’s understand why this prompt is designed this way
- The default state of this placeholder has to be an outline. The outline makes it feel like it’s expecting you to drop your file on it, like a missing piece of a puzzle. A filled rectangle would make it feel preoccupied and already filled.
But, you can use the fill for states when you are hovering your file over the upload prompt. That subtle interaction makes you feel like the prompt is eager to upload your file, as if it is aware of your file’s presence.
2. You have to consider what happens after you’ve dropped your file. This is a state many designers miss. You can get a little creative with your status copy as well. Oh and don’t forget to add a delete icon on your end state. Otherwise how will people replace the uploaded image?
3. You also have to consider what happens when the connection gets terminated in the middle or the user uploads an incompatible file. You can either design an error state within the same boundary or display the error through a pop-up or a floating window at the corner of your screen.
Notice how each error is suffixed by a “Try Again” prompt. This is crucial because you need to make it easy for your user to try again without refreshing or losing out on the data she has already filled on the form.
Finally, you need to make sure you handoff this entire component set for Upload Image in the form of well organised variants.
and in all honesty, we’ve just scratched the surface. This blog was simply to draw attention towards subtle transitionary states that most new designers ignore while building their components. I was one of them but now that you’ve read this article, you can simply get a head start 🚀
Needless to say, the treatment for other formats (videos, PDFs and audios) would be different. You can learn faster by being aware every time you upload a file on other platforms. Observing can teach you a lot.
Hi! My name is Ansh Mehra and I’m a UX Designer & Storyteller at Zuddl.com, which is a virtual events hosting platform backed by YCombinator. This article is a part of my Foundations for UX Design Series. You can watch one of the episodes here! 📺
Follow me on Instagram for stuff on Life, Design and the Beyond. Take care!
