Using cards as navigation to other cards

Question

I am trying to become good at web design, but feel I am missing that 'visual eye' that so many of you have.

The general flow of what I'm trying to make is a top-level subject (ex. Math), will bring you to a page of its categories (ex, Linear Algebra, Calculus, Discrete Math... and so on). You can then click on one of those categories to bring you to the actual content/tutorial/blog page itself (which will have a left side nav for different parts of the category). Some example on the side-left nav might if you click on Calculus might be .. integrals, etc etc).

I want to make a page where I will have multiple top-level subjects, all in their own card with an icon (and maybe a description). I've been stuck on this for a long time.

https://imgur.com/a/eT4KskI

1. What comes next when you click on a major subject (ex. Math)? Another page with 5-15 minor-subject (Calculus, Linear algebra, etc..). Can they go in cards? Surely they must look a little bit different. I feel like clicking on a page with 4 cards, and going to a page with 10-15 cards would look repetitive and bad.

2. I only have 4 "Main subjects" so there is a lot of white space below. Maybe I need a light gray/blue background image on part of the page?

I am thinking about making those 4 cards a little bit bigger... and the next page they lead to have 10-15 cards about the original size of the 4 cards. Any feedback would be greatly appreciated!

Answer 1

The way you have designed and defined the use case for 'cards' seem to indicate that they are purely navigational components that don't provide any additional information to the user.

The best way to move away from detailed design upfront and take into consideration the overall information architecture of your site/application is to understand the relationship between the underlying data and how a user will access/interact with them. The depth and breadth between all the elements that you are trying to connect will inform the navigation strategy you need to take to ensure that all the content can be accessed easily and match with the user's mental model.

To see how this mindset helps to address your concerns:

1. If there are only four cards on the page (and you have lots of spaces), can you use something else to show the content of the cards instead of taking the user to an additional page?
2. Even though you might have lots of spaces now, what happens when you decide to add additional subjects to the page?

Just to help you understand the underlying structure of the information you are presenting, I would suggest documenting the following:

• number of subjects in total (provide some buffers for additional ones that will be added in the future).
• number of levels / groupings you need to traverse every item.
• other ways that the information can be grouped or accessed
• different types of users that you need to cater for
• different use cases that the person might be accessing the subjects

And as we like to say on UXSE, test all your assumptions with the end users!