So I have a pretty regular table with data in it and I also have a download button that, when clicked, downloads the contents of the table to the browser as a csv file. My question is where should I put that download button in relation to the table? Above the table? Below the table? The top right corner of the table? Is there any rule here for the correct placement of a download button?
-
Can you provide more details such as are there other action that are part of the table and/or rows? Is there a search/filter functionality that navigates the user to the table data?– BhupiCommented Dec 25, 2018 at 9:32
-
@Bhupi no other actions except for table pagination– user1893354Commented Dec 26, 2018 at 21:59
-
How many rows does this table have? Is there a limited number of rows? Does the content go below the fold where users need to scroll to get to all the results within each page of the results? Can you provide a screenshot with what the worst looks like?– BhupiCommented Dec 27, 2018 at 23:34
2 Answers
There is no 'correct' answer here, and in fact you will even find some people who put buttons above and below the table.
There are some potential reasons for each of these decisions, and these are based on potential use cases.
Putting the button above the table potentially means that this user already knows that he/she wants to download the content (e.g. return user), which means that having the button above the table means that they don't have to scroll through all the content to find it (in case it is a long table).
Putting the button at the bottom potentially means that this user needs to look through before confirming that he/she wants to download the content, which means that they don't have to scroll back up to the top to click it.
Alternatively you can put them at both locations to cater for both potential use cases.
Also, in case you want to introduce more complexity in the interactions (e.g. filtering, sorting) then putting the button on the side allows room for extra buttons to go in.
So as you can see it really depends on what you want to cater to the users, and finding out how they use the information and the content. Also keep in mind that this will set a precedence for how the other pages/table should look like or behave.
I prefer to put it on the top right hand side of the table and then fix the table headers and the button so that they will always remain on top even if the user scrolls down to view the required data.
As explained by Michael Lai, there is no set rule to follow, you should decide based on what you feel will help the user in the min. number of actions possible.