Apr 30, 2020
A complete experience designed for Uploading photos/ files
In your design career, you may encounter request from your PM or clients that sounds simple, but it actually does not, in real life.
Let’s me show you a typical example that you will definitely have to deal with it in your design life, this is Uploading Images/ Files.
Uploading files/ photos is a properly so-called daily activity. You do it in attaching a file in an email or posting a photo on Facebook.
Everyone wants to do the job in an efficient way and expect zero-mistake results. That’s why when designers are given the task of designing photo/file upload, they may not take it seriously.
So, here is what people normally see when they are uploading a photo:
Well, it is actually pretty easy as you see, isn't it?
Drop a photo -> Waiting for upload -> Done
How many screens do you need to create? 3 screens? Maybe 4 or files. All you need to create your own design pattern that looks nice and usable.
However, it is not what it is in reality. There are a lot of unforeseen factors and requirements from clients which can not make the process of uploading as smooth as in the Gif file above.
The truth is, you will deal with multiple uploads, take care the whole experience including happy and unhappy cases, how to deal with scaling, what will happen if the Internet suddenly shut down, or even what is the best practice for showing the error messages. When you are aware of all these possibilities, you are able to rock your design!
Here is the complete process of uploading multiple files
Let’s take a deep look at a certain step and tackle all the possible edge cases.
1. Select files from the file browser
Certainly, there will be some requirements depends on your project. For example, restriction on a number of files, extension format, or file size.
For extension format, the file browser can validate the allowed formats, in which the files with formats are not allowed will be disabled. This cannot be done for file size and limit the number of files.
But you cannot do that if users using drag and drop.
2. Processing the files
After users select the files, the next event that they expect is to see their files are ready to upload. And here are what you need to take care:
- How to scale the photos?
There are several options for you to decide which approach you would like to do. Based on my experience, here is my best practice that displays the photo perfectly without everything photo in just a square frame:
★ Scale fit height, the width should auto-scale in proportion
— Set a square frame with a specific height and weight that is suitable for your design.
— Set a background colour for the frame to deal with the case when either the or weight is scaled less than the default setting.
— Set max height and max weight for the frame. The max height should be equal to the default height. It is also up to you to set the maximum for weight to make it look nice and fit into your design.
This is the most important step that helps both you and the developers to define clearly the scaling size in the first place. So make sure you document it carefully in your design process.
It also helps to reduce your workload later on, when the file processing is done and uploaded successfully.
▹ Here is the example and the demonstration:
— Frame: 60x60px, square photo will be placed in the center with
— Max height: 60px
— Max width: 185px
- What happened if the connection is slow?
★ The slow Internet is a common issue, especially when uploading multiple files at the same time. Therefore, the design also needs to show the feedback from the system to not let users get bored and make sure their work is on progress.
It would be very clear to put an indicator, like a spinner to a specific file to indicate the process of each file.
3. Processing done
- Processing successfully and all your files are valid:
As I mentioned earlier in the part “How to scale the photos?”, you can re-use this at this step.
★ Make sure you offer users an option to remove the photo/ file that they do not want to upload. You can put a “remove” button when hovering to the photo, or it may display available.
For me, I prefer to the hovering option because it gives more aesthetic and users have no problems to recognize and find it.
★ Also, to make sure you handle with all the edge cases, you should prepare when there is no Internet connection, what is the feedback from the system?
It is easy, just make sure you have a proper message to let users what is happening and offer them a solution to resolve it and be able to continue. A refresh button will be a good choice in this case.
4. Files uploaded
- Uploaded successfully
Again, the Scaling photo rule here helps you also in this step. You can totally re-use this at this step.
★ Just a little change here is that you can set the default height and weight here bigger. In the processing period, you can set all the photos with the same height, and it may be small, about 60–80px.
However, the users already finish their task. So you can set the height differently for certain cases, and may make it bigger to give them the feeling of control and easier to see.
★ Internet connection, again! Even the processing is done beautifully, the Internet can still drop at the moment you press “Send”/ “Upload” button. Of course, users need to see feedback for this case. And you can utilize this:
★ Photos uploaded successfully, no rules violate and the Internet is good. This is perfect!
However, your file browser can only limit the extension, not the file size and number of files. And users make a mistake is just a normal thing. When the files are invalid, how we inform them and what to inform them?
There are 2 approaches to give system feedback to users: Modal box and Inline message.
Here is all that I want to share about Uploading files. This has been an interesting process and the experience I gained from that is worth to share!
