Visual update for site navigation

Introduction?

As one of the key elements on the website, the Navbar allows users to access categories, settings, and other content on the Glimesh platform. It’s current implementation works, however, some changes I’m proposing would benefit the user experience* for mobile and tablet users (as well as desktop users).


Current Glimesh Navbar.

Proposed Changes

Phase 1

The first phase of changes involves a visual update to the navbar (shorter height, background color, shadow), as well as fixing the navbar to the top of the page when a user scrolls. The images below are real code: reduces the height/padding on nav-item elements to shorten height, adds “shadow-sm” to create depth on page, “sticky-top” to fix the navbar to top of page on scroll, and one custom class for background effects.


Proposed Phase 1 changes.


Fixed navbar, on stream page.


Example of background blur effect on navbar

Phase 2

The second phase involves changes to the layout of nav-items depending on breakpoints. These changes may require custom CSS to implement, or more usage of Bootstrap utility classes. Below are design mockups of phase two (Note: the Desktop breakpoint is nearly identical to phase 1 at this moment.)

Notable changes here include: “shortened” Glimesh branding for tablet/mobile navbar, promoting placement of Followed Streams “Following” to top of navbar on tablet/mobile, and breakpoint specific layouts for expanded “collapsed” nav-items.


Desktop mockup


Tablet mockups


Mobile mockup

Closing thoughts

The fixed navbar has been part of an upcoming “sticky chat” feature, but it was suggested that it could be it’s own standalone improvement to the website. As always, glad to hear feedback on proposal, or suggestions to improve UX/UI.

[This is my first post on the Building Glimesh Discourse, be nice. Also, sorry mods if it’s not categorized properly.] :sweat_smile:
3 Likes

Initial for Phase 1 (and some “feature creep” from phase 2) has begun. View code here (github.com).

1 Like

I really like the approach here, and I think they will be nice additions to the website. Let me know if you need any help from me!

Is this an opportunity to also review what’s in the nav. Given the number of streams & the disparity between gaming streams and the rest, is it worth simplifying the nav?

For example switching to something like: Following/Live channels/Support/More

Potentially making the site feel a little less empty when you click on one the options which has no streams, as well as reducing bounce and exit rate. This could then be reviewed once the site grows to see if the nav needs to revert back to the split/change again.

It would be interesting to see what the unique page views, page time, bounce rate and exit rate are for each of the nav items as that would help influence the decision.

1 Like

Honestly to me this is less a design question and more of a core philosophical decision. If we remove the biggest indicator that we’re more than just gaming I would be concerned that those who stream in the other categories would feel less welcome. Design for what is possible is the approach I normally take.

You should be able to browse most of those stats here: Plausible · glimesh.tv

I’m not 100% confident all of the clicks show up however, but it should be a good enough comparison.

I agree with the design approach, and not wanting to make others less welcome, however by moving everyone to a centralised streaming page you’re potentially giving them more visibility.

Last month, streams/gaming had 7.5K visitors 24.5K page views, compared to music with 1.7K/2.7K or 1.9K/3K. Plus on the non-gaming landing pages, visitors stayed between 9 and 26 seconds. Compare that with gaming’s 2m 26s and that’s a huge difference.

I don’t know if you could test or get user feedback from those who do use the other landing pages, but there’s a big potential upside if it was moved to a centralised page.

Plus you could use something like the widgets on the home page to enable visitors to filter the categories if they wanted.

by moving everyone to a centralised streaming page you’re potentially giving them more visibility.

We still have 6 randomly selected streams on the homepage, from all categories. This may be true (or may not be :man_shrugging: ) while we are small, but we hope to grow tremendously in the future - a redesign at that point would confuse existing users

on the non-gaming landing pages, visitors stayed between 9 and 26 seconds. Compare that with gaming’s 2m 26s and that’s a huge difference.

i wouldn’t read too much into that - people likely leave the tab open in their browser, since that is where most of the streams are, which would skew the results. Once there is more content on those pages, users will spend more time browsing it. i would actually argue that by setting them apart, we are giving them attention, whereas they would have got lost in the gaming section

For me, it’s about the visitor experience and what effect it has clicking on 4 out of the 6 tabs and finding no streams there for example.

Is it putting people off from watching content or streaming because it could look empty and thus not have the community feel that glimesh is aiming for.

I don’t know if it’s right to change it or keep it as it is, but it might be worth testing or trying to get some feedback from people.

Not to derail the thread, but I created a mockup of what a potential would be:

This would still keep the individual categories, but combine them on one browse page instead. Of course your variation was not even having this new nav bar.

Honestly I’m really not sold on either ideas. I feel like our distinct browsable categories is such a strong statement about what we are trying to empower and that it will be less an issue as we grow and they fill out.

4 Likes

Phase 1 has been rolled out to the live site!
https://build.glimesh.tv/t/site-update-0-1-0-347f6ec-navbar-changes-dmca-links/127/2

2 Likes

Hey Clone, noticed a couple of minor issues on iPhone:

  • A white line appears next to the heart if you click it, which then goes behind the number if you’re following someone who’s online
  • can’t close the category menu once it’s opened. It will then appear under the burger menu if you click that

I don’t use safari on my iPhone, but I do see the line now that you’ve mentioned it. A simple fix with CSS (I’ll fix it soon™️, unless someone else beats me to it). As for the category menu, it’s actually a dedicated page that a user is taken to when clicking the categories link. The hamburger menu pushes the category buttons down because the content does not extend past the bottom of the screen (viewport). It’s a default behavior of Bootstrap nav.

1 Like