Best way to display page full of links?

Question

I have a page that looks like below.

I shrunk it in dimensions to give a broad idea of the page. So it has categories and under them there are links. What would be some of the options in terms of designing this page? I was thinking when user clicks on any link, If the link is a pdf, I could load it on the right side and show preview like below:

I am not sure if it's a good idea in terms of user experience. A lot of these links are either word or pdf files to be downloaded or viewed for the user. Some will take user to an another website.

Answer 1

The attached image is so small it's not clear what you have done for the page. From what you have described, it seems to me that you want to provide a better context for users on what a link is for when they scan the page.

A quick improvement would be to add icons after the links to indicate what type of file they are, and if the user will be redirected to an external site. For example, on a Google SERP, it is easily identifiable that the 2nd item links to a PDF file due to the extra icon:

Here are links to fontawesome.com icons that you can use:

PDF

Word

External Redirect

As for image previews, I feel that is unnecessary and too much work. Image previews are better if your files have distinct cover pages which will aid users in quickly scanning and identifying them. Not so if your files: 1) don't have cover pages, 2) have covers that are pretty generic, or 3) just internal, formal documentation such as Word files (you didn't mention what kind of files they are). Besides, if your users still have to decide to click the link in order to see the preview, this seems to me that the preview is not essential anymore as the user has already read the link by that time.

In addition, how does the download occur if the click action opens a thumbnail preview, but does not open the file? How will your preview work in mobile devices where you don't have right-click and on hover events?

---

Some specific design improvements you may consider:

1. If you just want to publish a list of links/resources, then you may opt for a cleaner, single-column, list-item layout similar to this:

https://www.idsociety.org/public-health/COVID-19-Resource-Center/covid19-expanded-resource-center/

The divider lines seem unnecessary visual noise and actually hinders scanning

2. If you have a lot of resources to list, you may include a Table of Contents (TOC) section at the top of the page similar to Wikipedia which will move the page to specific categories:

3. You may opt to include "Back to top" links per category going back to the TOC as the example in 1)

Answer 2

While describing the questions "what are these links for, you also answer your question because this is also what a user would think if they'd see such a page. So, your main objective should be organizing in a way that the user percept it without thinking too much.

Since I don't know the nature of links, I can say that you should split them by some main categories (if there are multiple categories possible, you can also let user select it) and in each category you can sum up them eventually in a table with some details or description so user can percept their difference better (eventually with functions for sorting and colors for sub categories).

Answer 3

How many links are there ? What is the user searching for ? How are the links differentiated ? What are we expecting user to differentiate them by ? ( quality of the link, content found there, attractive description, upload date of the file etc. )

After answering these question try to determine some information architecture. A way to sort and filter is recommended if the list of links is big.

Will the users return to the list regulary ? Is the list updated frequently ?

Take a look at two examples.

https://all3dp.com/1/free-3d-models-download-best-sites-3d-archive-3d/

This shows the list in a table that you can sort by free or paid or by model type.

http://www.proglobalbusinesssolutions.com/free-3d-models/3d-character-models/

This is a list built mainly for SEO. It is not optimized for a user who would like to easy identify sites that offers free files or filter them in any way.

So you can answer your question after you have an answer for these questions.