Sticky Tables

Yes, that’s a really simple table, but its crucial in highlighting how much we can affect a user’s experience.

Although it is not heavily used across the internet, Fixed or “Sticky” Navigation (a nav-bar that is fixed at the top of the site) seems to be viewed quite favorably. No one likes to have to scroll back to the top of the page to find a link. In fact, you are on a page that has such a feature (guess where?). Making the nav-bar Sticky (it sounds more fun) ensures that navigation links are clickable from any point on the page.

I recently started implementing this interaction when creating tables. Good old (unglamorous) tables can be very helpful for pages dealing with data entry or display. However, what happens when your table contains a significant amount of data?

Consider the scenario: you are scrolling down a table full of data and suddenly the headers are out of view. To decipher the table, you must now scroll back and forth between the headers and the data. Not knowing what each column represents, quickly cripples the benefits of such a table. This is potentially a much more frustrating scenario for a user than the nav menu bar (mentioned earlier).

There is a very simple solution to this problem: sticky table headers. Once your page hits a certain scrolling point, trigger the sticky headers and they will always be in view-drastically changing the user experience on that page. If you want to make it elegant, add some nice transitions on the headers-making them fade in and out.

If you like this post, subscribe to the publication (UI/UX examples and topics) and get involved in the conversation! Oh, and give this a clap 👏!