0

I am working on a game-related web app which has a global navigation in a sidebar. There are going to be a few categories, with currently "My profile" and "The games" on the mockup below. Those categories are equivalent, so I feel they should be displayed in the same way in the main section of the web (the right section, under User name and the avatar).

First mockup I attached is "My profile" with a few tabs, then there is "The games" mockup, which has the heading looking the same and in the same place. Then the last mockup is "The game 1" which depicts particular game in "The games" category.

This is where my problem occurs. I feel like the particular game that we open is more important than the general category of "The games". It also has a few tabs, so it looks more like "My profile" now. However, in the hierarchy it is a lower/deeper level, so its heading should look different and be placed somewhere else, for example below, right? Like it is now on the 3rd mockup? I gave the game name a bigger size to draw attention to it and "win" with the "The games" category heading + the icon makes it more prominent, but that's all I have.

Can you provide any advice on how to deal with it? Or maybe it's not as bad as I think? It annoys me a bit, but I can't seem to come up with a solution on my own.

At the bottom I attached an extra mockup with what I keep having in mind and can't shake, but at the same time feel it's not right due to consistency guidelines and so on, because there's no "The games" heading.

My profile The games enter image description here

enter image description here

Improve this question
2
  • What does 'The Games' page hold?
    – Oddball
    Mar 20, 2018 at 14:14
  • 2
    @Oddball - It consists of all the games the user is currently involved with. Because there can be more than those few in the sidebar at the same time, so this page represents all the games.
    – Ola Osinska
    Mar 21, 2018 at 11:26

2 Answers 2

Reset to default
1

So how big should your headers be for each page?

I would say that your desire to show consistency by making each game header smaller would be important if you were showing all of your web page's content on a single page, like in this Wikipedia article about video games. They show several different levels of information on the same page, so they have to use the headers to help you understand the levels. For example, they show:

Video Game

Overview

Platform

PC

However...

Your pages are not showing all hierarchical content on the same page, so this would not be the most effective way to show hierarchy. A user will likely not notice or remember your header styles well enough to form a mental model of which styles mean what because it will be difficult to compare them across pages. Fear not, there are other ways to show hierarchy.

  • Your navigation helps to show the nesting already
  • Assuming your target audience reads in a left-to-right language, your links "into" a game/subsection can point right (e.g. Explore ›) and your return links can point left (e.g. ‹ Back to All Games) so that there's an idea that moving "right" goes "deeper" and going "left" gets "higher" in the tree.
  • Use breadcrumbs on your subsections to show the user where they are in the tree.
Improve this answer
5
  • Thanks so much, it really makes me think and I believe I'll apply some ideas. However, I must not have been clear enough before, because there's still no answers for my struggles. What bothers me is the consistency that I feel I have to follow - which is to make My Profile and The Games heading equal in size and weight (they're equal in hierarchy) and Particular Game Name smaller, because that's a deeper level. But then again, the Particular Game Name is more important on this game's page than The Games heading (which is there just because it's a parent level). What do I do?
    – Ola Osinska
    Mar 21, 2018 at 11:48
  • @OlaOsinska Ah, I understand now, my mistake! I've changed my whole answer, hahha. You can still read the old one if you'd like.
    – maxathousand
    Mar 21, 2018 at 13:53
  • Thanks again! I'm glad I was finally able to explain what I mean. Now it's time for me to ask some literal details from your answer. I do not get what you mean with those elements pointing right. I mean I can't see it. I get it with pointing left (as is with all the "back" and "previous" buttons). I get the general idea and the logic you provided, but I cannot see where I could implement a link with an actual, visual arrow. I have tabs in the top-middle that lead to subsections and I have this sidebar global navigation. But I don't see a place for some "right" pointing elements of navigation.
    – Ola Osinska
    Mar 22, 2018 at 9:22
  • I have a question to your old answer (the one you've hidden). Are you sure it's ok not to place any headers on the top of a particular page? Is a prominent indication of category in the sidebar enough? It kind of keeps me up at night - whenever I feel I've come to a conclusion with myself I start leaning towards the opposite solution (leaving headers vs taking them out with just the indication in the sidebar). It also affects a few later parts of the project - so I keep jumping back and forth. I'd like to leave them out, but is it ok for sure?
    – Ola Osinska
    Mar 28, 2018 at 12:30
  • That ultimately depends on what your pages and app look like. Essentially, the goal is to structure your app such that your user is never left wondering "wait, where am I?" or "how do I get to ___". If having a title at the top of every page helps to solve that, then do it; if your navigation is prominent enough that your users are well informed as to where they are at any given time, then I would say titles aren't mandatory. If you have further questions, feel free to ask a new question with the specific problems you're facing.
    – maxathousand
    Mar 28, 2018 at 18:48
0

If the primary purpose of this web app is to play a game, then your gut-feeling that the headers and categories are taking up valuable real estate is correct. The prime real estate of the page (top center) should be wholly dedicated to the most desired purpose (not read your name nor remind you what page your on).

In this case, can you NOT place anything about the sign in User nor Page info in the right 'frame?'

Can you design the left side navigation to indicate the active page and/or User Sign in name? At this lo-fi UX level - design should not be solved (in detail) yet. But let your UX design show some indication of the active page (larger text, uppercase, etc). Lastly, let the UI designers figure what is the best way to highlight the active page and trust their instincts.

The UX should give the User what they want and not assume they will accept the norm.

enter image description here

Improve this answer
3
  • appreciate the mockup. However the main purpose is not to play a game, it's to download the game and get as much info about this game as possible. This website is about games. There will be Updates and Forum tabs, screenshots section and so on. So the existence of headings and the user bar on top don't bother me. What bothers me is changing of the heading that should be the most important on each page. Maybe I wasn't clear enough about my struggles. continue -->
    – Ola Osinska
    Mar 21, 2018 at 11:35
  • continue --> Once it's My Profile, then it's The Games. And it's fine. But then I want to show a particular game so it should be The Games (big heading) and then The Game 1 (particular name with a little heading) - it should be so considering consistency. But I feel that particular game should be more prominent.
    – Ola Osinska
    Mar 21, 2018 at 11:37
  • I understand now. I was critiquing more than you asked for. But I am still not a big fan of having 2 locations for navigation. With that said, if you are wondering about how to balance the Category title with the Game (subtitle), I would give the user more credit than you think. Making all the headers (and subheads) the same size is sufficient. if there are many levels of navigation, perhaps a horizontal breadcrumb trail for the Page Header (in which the current page is the last link in line)? Then place your tabs under the breadcrumb trail/header line.
    – jhurley
    Mar 21, 2018 at 14:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.