We live in an increasingly mobile world but most elements and interactions on the web are still predominantly designed for desktop. One such interaction is clicking to download.
Using an anchor or button to click to download works great on the desktop. It’s easy to quickly target the area with your mouse and click and you need to be fairly deliberate about it in order to actually download.
When you’re swiping on mobile, on the other hand, it’s easy to accidentally download something just because your finger is on the screen for the majority of the time and instead of scrolling or swiping on the page you might find you have a bunch of unnecessary (and sometimes dangerous) downloads.
One idea I had to solve this is to, on mobile, change download anchors or buttons into sliders. This forces users to be more deliberate and provides a better user interface that’s easier to interact with on mobile.
Basically you would run this based on the window’s width or another requirement the specific use case calls for. When the requirement is met, it finds all elements with the class ‘download’ and turns them into sliders that you can then style to match the theme of your site. If a user pulls the slider to the far right it triggers a download.
Note: The demo won’t actually download anything.
[codepen_embed height=”364″ theme_id=”0″ slug_hash=”vIwGi” default_tab=”result” user=”aicarlson”]See the Pen <a href=’http://codepen.io/aicarlson/pen/vIwGi/’>Slide To Download Demo UI</a> by Andrew Carlson (<a href=’http://codepen.io/aicarlson’>@aicarlson</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Pros:
- Easy to install.
- Makes downloading a decision instead of an accident.
- Prevents unnecessary bandwidth usage by eliminating accidental downloads.
- Potentially better UI for mobile.
Cons:
- Requires JavaScript to provide the interaction
- Untested, this might actually not help with interaction.
As I mentioned above. This is just an idea. I haven’t tested this on a live site and I don’t have data to support the argument one way or the other. That said I do think it might be worth running some analytics on.