Top menu items get cropped on narrower screens

[kevincoleman]

Describe the bug The top menu items get hidden without much explanation as the window narrows. Especially for users who don’t know anything has been cropped this could be confusing.

To Reproduce Steps to reproduce the behavior:

1. Go to online-go.com
2. Resize window
3. Observe items disappearing

Expected behavior Menu items should either be space-efficient enough to persist down to the smallest expected window sizes, or they should be decried as hidden with some form of “••• More” menu.

Screenshots https://user-images.githubusercontent.com/445707/106336210-467f2280-6243-11eb-990a-76046b81e094.mov

Desktop (please complete the following information):

• OS: MacOS
• Browser: Any
• Version: Any

Smartphone (please complete the following information):

• Device: Any modern one, also tablets

Additional context This was discussed as a side item on the forum post about making the top menu slightly bigger and styled differently.

Proposed Fixes (action items)

• [ ] Consolidate current top menu items into left menu. Proposed menu structure:

  Home
  Play (takes you to My Games / Home on 2nd click)
  My Games
  All Games
  Tournaments
  Ladders
  Study (takes you to Learn to Play (?) on 2nd click)
  Learn to play Go
  Demo Board
  Puzzles
  Joseki
  SGF Library
  Other Go Resources
  Community (takes you to Leaderboards (?) on 2nd click)
  Leaderboards
  Chat
  Groups
  Forums
  (Moderator Center)
  (Announcement Center)
  About (takes you to About page on 2nd click)
  Documentation & FAQ
  Support OGS
  Profile (takes you to your user profile on 2nd click)
  Settings
  (Admin)
  Logout

Optional followup items:

• [ ] Move search (to top right?)
• [ ] Add board theming options to Settings > Game Preferences
• [ ] Add board theming options to appropriate contextual location (like on a single game view or 'My Games')
• [ ] Revisit right-bar content to make it collapsible

[kevincoleman]

Some top suggestions that have come to mind:

1. From forum user MooToYouToo: Gather links into categorized drop-downs to save space. Example:

   Play Create a Game Tournaments Ladders

   Study Learn to play Go Joseki Puzzles Other Go Resources

   Community Forums Chat Leaderboards Groups

2. Remove all quick-links in favor of a menu in the hamburger in the top left.

3. Move some options into the hamburger menu to alleviate the space issues, while keeping some of the most commonly-used ones in the top bar.

4. Remove any/all top menu items only in narrow-screen interfaces (media queries)

5. Add a “••• More” item that shows whenever items are hidden by size constraints, and provide the hidden items in a... dropdown?

I personally think Option 1 has the greatest potential, as it would both retain a consistent menu experience at all but the tiniest sizes and allow for further extensibility as menu items change in the future.

Option 2 is also pretty decent, but we would need to make sure the migration path for users is well explained (it has been noted that some users don’t use the hamburger menu at all, or that they miss its very existence).

Option 3 and Option 4 suffer from the same issue we have right now: inconsistent handling of user expectation. If the menu changes all the time it could end up being frustrating for someone when they can’t find a link they expect to be there.

Option 5 could handle the problem at hand (again, except for in the smallest of sizes), but doesn’t feel quite as elegant (IMHO) as it would still leave some items intrinsically more tucked away.

Whatever we land on, I’m happy to draft a PR as well.

[anoek]

FYI here's a list of the top 24 resolutions folks' use on the site, perhaps useful in considering the various options.

Desktop	Percentage of users	Pages / Session	Avg. Session Duration
1920x1080	16.95%	8.3	0:14:39
1536x864	8.09%	9.22	0:15:44
1366x768	7.94%	10.06	0:18:09
1440x900	5.36%	10.08	0:17:12
1280x720	3.87%	9.14	0:16:02
2560x1440	2.58%	7.66	0:13:01
1280x800	2.19%	9.01	0:16:18
1600x900	2.19%	11.1	0:18:20
1680x1050	1.92%	9.51	0:17:15
1920x1200	1.31%	7.25	0:14:19
1024x768	0.95%	7.94	0:15:00

(I suspect there are some desktop resolutions that are actually tablets, there is definite overlap) Tablet	Percentage of users	Pages / Session	Avg. Session Duration
768x1024	2.95%	9.09	0:13:17
834x1112	1.02%	8.82	0:12:21
810x1080	0.94%	9.73	0:13:00

Phone	Percentage of users	Pages / Session	Avg. Session Duration
375x667	4.09%	6.99	0:09:41
414x896	2.81%	7.63	0:11:38
360x640	2.66%	7.69	0:11:39
375x812	2.07%	6.37	0:10:03
360x780	1.35%	7.96	0:12:00
320x568	1.13%	6.26	0:10:04
393x851	1.09%	5.9	0:08:39
414x736	1.00%	6.26	0:11:25
360x760	0.92%	6.61	0:11:40
360x720	0.91%	7.82	0:13:30

[anoek]

Some notes from what other sites do:

chess.com:

They have a left nav bar if there is horizontal space for it, then they switch to a top nav if the width is low

lichess.org:

They have a top nav that has drop down links if there is room for them all to fit on the bar, otherwise they switch to a hamburger menu that drops down with all of the link. The height of the nav bar also shrinks if the window is short.

[anoek]

My observations and thoughts on the topic of changes to our navigation system:

1) We need to get rid of the double-navigation system we have now. At any given time, we either need to have a left nav or a top nav system. I think it's ok to switch between the two dependent on device size and orientation, but we need to only have one active at a time, unlike what we have now.

2) We can have a left nav system on landscape layouts, but we need to have a top nav system on portrait layouts. Switching between the two is what chess.com did, lichess went with the top-nav only approach. Ultimately both are quite successful projects.

---

When talking about the top nav, for the same reason that the left nav is confusing now in combination with the top nav, I think that we need to either have a hamburger expansion menu, or navigation links (presumably in drop down menus of some form or another) on the nav bar, but not both at the same time. I think the "More" option wouldn't look as good as some of the other options we're discussing, though I'd recon it remains a possibility. Personally though, I think that if there are navigation items on the nav bar, it needs to be all or nothing like Lichess.

I think the first question we need to answer is if we want to have a left nav system or not.

• If we have a left nav system for landscape orientations, then I think this might obviate much of this conversation. If we have a left nav, then I'd think everything should be moved over there (notifications, profile, etc), and we should get rid of the top nav in landscape mode. In portrait mode, it should be a hamburger dropdown system, except for the notifications and probably profile like we have now - so basically option 2.

• If we decide to not have a left nav system at all, and always have a top nav, then I think we have two modes, one with whatever dropdown links and regular links we feel are appropriate - with no hamburger expansion, and then when there is not enough space for that, drop all links off the bar and switch to a hamburger system - so basically option 1+4.

That's my two cents!

[kevincoleman]

I think these points are spot on. The underlying mechanic that will create confusion is inconsistency, and splitting up the navigation into multiple locations just decreases consistency—especially if there’s ever a case where different locations have different options. There should be one “main copy” of the menu items, which then gets presented differently based on the screen/format.

Since this has quickly become a discussion about the entire navigation paradigm/strategy (which is great!), I think we should try to quantify all of what we aim to organize. Right now I see the top menu, the hamburger menu, and the account/profile menu in the top right. I also note the chat and groups menus, but as those take a fairly different format I think maybe we can let those be for the moment (thoughts?). Here’s what I see, in total (deduped):

• Home
• Play
• Demo Board
• Games
• Leaderboards
• Chat
• Puzzles
• Joseki
• Tournaments
• Ladders
• Groups
• Forums
• Profile
• Learn to play Go
• SGF Library
• About
• Documentation & FAQ
• Other Go Resources
• Support OGS
• Settings
• Logout

I also see that there are sections under the account/profile menu for notifications and theme. those two areas might be best rolled into this navigational structure as we get organizing, but let’s see where we land. Using MooToYouToo’s suggestion for categories we can make this easier to parse, even in a left-bar environment:

Home (which I think we could just use the logo for!)

Play

• Leaderboards
• Games
• Tournaments
• Ladders

Study

• Learn to play Go
• Demo Board
• Puzzles
• Joseki
• SGF Library
• Other Go Resources

Community

• Chat
• Groups
• Forums

Profile

• Settings
• Logout

About

• Documentation & FAQ
• Support OGS

I realize in this organization I used some main sections as simply headlines while using some existing pages as their section headlines. It might work well to make each headline category also act as an index for the subpages once you browse to the page. This way even if there’s a section that doesn’t currently have a dedicated page (like Study) it could act as a landing page for those interested in that area. If a page already exists and is used as a heading, (like About) we could combine the purpose of the existing page with the index of subpages. I think where this gets trickiest is with Profile, so I’m definitely open to thoughts on that one. Might be nice to roll the color settings into settings.

Edit: just thinking about this more. Maybe it makes more sense to put Profile, Settings, and Logout under “My OGS” or something similar. That way we could keep the profile strictly about the user, and not also an index for settings.

Let me know what you think!

[anoek]

Roughly I think that's good grouping.

Notes:

• Need the search field and a way to display the results
• Leader boards probably belongs under Community
• Support OGS might need to be prominent depending on the layout. I think that's a fine grouping if we have flat links like in a hamburger menu or in a left nav, if we have drop downs in the top nav though, I think it might be too hidden. It's our life blood after all :) Or perhaps it's listed there but also under Study as AI Analysis or something like that, will have to ponder on that a bit. Definitely an important thing to consider though so we can keep the lights on.
• We had usability issues when we had the 'OGS' logo act as the home link, it was the number one question in chat "How do I get back to the screen with all of my games?" (aka, how do i get back to the home screen)
• We might just want to move the board theme selection to something on the game page, it'd be more appropriate there I think. And/or the redundantly on the settings page.
• There's another 3 links that are not visible to normal users, they are
  • Moderator Center
  • Announcement Center (many non moderators have access to this)
  • Admin (Only myself and matburt have access to this, so it an go wherever)
• re "It might work well to make each headline category also act as an index for the subpages once you browse to the page" - I think we'd get a lot of negative feedback on this one, people don't like having to click multiple times to get to where they want, the less context changes the better. And even if there are direct links under the drop downs, people are still going to end up clicking the index either by accident or because that's just what they do, and it'll be an irritation. I think chess.com got it right - if you have to have an expanding menu - one click to open the menu, click again in the same place to go to the primary page there (so Play page for instance - no need to move the mouse and re-click, just double click and you're at the play page). For something like "Study" and "About", it probably makes sense to have an index I reckon, though whatever we do it should not feel like we've just taken a link to links.

When visualizing things in your mind, please keep in mind internationalization - word lengths will change, as does the font for folks that override that sort of thing, so we can't count on a strict width, it shouldn't be different than more than say 25-30% most likely.

If we go with a top nav system, I reckon the indicator icons' can remain where they are in both the hamburger and link modes.

If we go with a left nav system, we'll need to place the indicator icons somewhere in the left nav presumably. I could see them being their own row up top, or perhaps moving some down next to an appropriate menu item, such as the chat indicator next to the chat link, tournaments next to tournaments, that sort of thing. Online friends, move indicators, and notifications are a little harder to place, although they might warrant being up top next to each other as a standalone row, we'd would have to play with it.

Another organizational possibility to consider is taking "right column" content on the home screen and putt them under expanding menus (second level drop down, or expand right, menu, depending on wether we're talking about top nav, left nav, or hamburger). That is to say, clicking on groups would expand the list of groups you're in, same with ladders and tournaments, and potentially friends too.

(Did I mention this is a rabbit hole? It's a good one though.. we need to re-orient ourselves to de-clutter and simplify things)

[kevincoleman]

Wow! Again, super great insights.

Need the search field and a way to display the results

I think this may actually live best in the right side of the top bar. It follows the Jakob Nielsen heuristic that 90% of user expectations are defined by other people’s sites (because users spend 90% of their time elsewhere). We can hunt for samples, but I’m pretty sure we’d find the search-in-top-right as a very regular pattern at this point. I also noticed someone in the forum mentioned they’d like a search to be more readily available. As one last point about moving it, putting the search in a more globally-accessible location helps imply that its scope of search is global (not just searching the menu options or something more narrow). I haven’t even started to think about how we would display search results with a change to how it currently is. Can we move forward by keeping the search how it is right now? Then if it causes issues we can revisit.

Leader boards probably belongs under Community

Roger. Makes sense.

Support OGS might need to be prominent...

I agree. As I was drafting up the above categorization I wondered about it being so low. I only felt ok leaving it down there because it’s already pretty low in the menu. Really, we could probably leave it low in the menu, and then make a more prominently featured banner/bar/badge somewhere in the main view that appears for non-supporters. This is probably a separate issue, but it might be kind of cool to make a set of rotating banners that show benefits of supporting. A little more advertisement style. While I never really love advertising, advertising for ourselves is obviously a different case. Much to discuss here. Could I propose that for now we just treat this like a menu item so we can narrow the scope of this issue?

We had usability issues when we had the 'OGS' logo act as the home link

Yeah, I wondered about that. Especially it first it would be hard—and TBH it doesn’t sit with me super well to use the logo anyway, as it relies on the assumption that 'Home' = 'My Games'. Should we consider adding a 'My Games' or 'Current Games' item to the menu, and possibly putting a link to it at the top of every single-game view? Ironically, with this talk of removing the 'Home' link it’s actually the link I find myself using the most on the site. After every move I click it to get back to games (I have the auto-advance turned off). One other proposal (again, maybe another issue) would be to include a small list view (probably horizontal) of running games at the bottom of a single-game view. That would allow users to enter a single game view, move, then either auto-advance to the next game or scroll just a bit to select which game they want to jump to. I can imagine if I were playing 4 or 5 correspondence games this would make for a great experience. No extra navigating—just play, pick next game, play again, repeat. Again. Should be another issue.

We might just want to move the board theme selection to something on the game page

I think the location we place this should correspond to the scope in which the setting applies. Keeping it in settings seems like a win, because if ever a user doesn’t know where to look that’s probably where they’ll end up. Otherwise, I think we may want to put these settings in a place that matches the scope it affects. If it’s on a single game page users may expect it to affect just that one game. If it’s on the home/login page they may expect it to be a whole-site theming option. Maybe this would be a good setting to make available on the 'My Games' page (if that becomes a thing)? It does feel like it should be quickly accessible when you’re looking at a single game too, though, since that’s when you’re most likely to want to make the changes (and so you have a nice view of the results). What if it were a collapsible item in the right side bar? That also seems single-game specific to me. The more I look at it, the more I think maybe it needs to just live in Settings > Game Preferences. I might also suggest moving the day/night mode into Settings > General Preferences, since it affects more than games. Just spit-balling ideas here.

3 more links

Moderator Center and Announcement Center seem like they could go under Community, and Admin seems like it could be a link that hangs out at the bottom of the menu entirely (or just above Logout, maybe?). I’m going to add these and move the proposed menu structure to the main issue comment so we don’t have to chase it as the discussion continues. Open to thoughts!

Index links as headlines

Yeah, good point. I definitely want to avoid 1. confusion and 2. links to links. I think it only feels natural to me in a case where we have a nice “landing page“ for the content. Like, I can imagine 'Play' having a nice page like the current home page that lists your current games but then also includes other play-related items. The more I think about it, though, the more what you say makes sense. Let’s just use the most common page as the one users land on when re-clicking a header. Especially if we split Games into 'My Games' and 'All Games' (or something similar) I think this has some nice mileage.

Internationalization

Good point about I18n. I am all for keeping things both accessible and intuitive for people using other languages (though I’m somewhat new to implementing this). Naming is of course important, and icons can help.

Indicator Icons

By the indicator icons, you mean these, yes? These actually don’t bug me too much, because they are live-update elements that could be time-sensitive (unlike nav items). That sort of data is really nice to persist in an always-visible location. This isn’t to say that we couldn’t improve those somehow, but that’s probably for another issue, as I think we can implement the menu changes without messing with these. Yes?

Right bar content

I like the idea of making these collabsible, but then I think this may also be another issue to discuss. Yea?

If it’s ok by you, I’ll try to summarize these items into a list of to-do’s in the main issue comment. That way we can try to clarify/settle them and then have a hit list for a first stab PR.

[kevincoleman]

Also, do we currently have stats on which menu items see what amounts of traffic?

[kevincoleman]

Re: headlines and target pages, I noted in the top draft of menu items where I think each headline should take you on 2nd click. There are only two that I don’t feel too confident in: Study -> Learn to Play and Community -> Leaderboards.

I kind of feel like the study page could be something we develop into a “study center”. It could feature the “Learn to Play” section for you until you’ve completed it, after which it could be a whole spread of options (games, joseki, puzzles...). Could be really nice to have a landing page where I could go if I feel like studying but I don’t know exactly what format I want to study in. It could have a featured puzzle, featured historical game... even an instructional video of the month or something.

For the Community header, what’s the most commonly used community section? Would it also be a good idea to have a community landing page?

In short, I think we could get by with a re-click of these headers going to 'Learn to Play' and 'Leaderboards'—enough to get us rolling with this new menu—but I think there’s room for improving their behavior.

[anoek]

By the indicator icons, you mean these, yes?

Yep

I think this may actually live best in the right side of the top bar.

Sounds right

I think the location we place this should correspond to the scope in which the setting applies. Keeping it in settings seems like a win, because if ever a user doesn’t know where to look that’s probably where they’ll end up. Otherwise, I think we may want to put these settings in a place that matches the scope it affects. If it’s on a single game page users may expect it to affect just that one game.

That sounds reasonable as well. I'd have to look at the implementation, it might be a slight modification to get things to have it so a theme only applies to the current game, but it's totally doable. We do something similar for sound settings right now, where you can control the volume of a particular board. We (used to? I'm not seeing it now) also support(ed?) a "save this setting globally" button for that setting. If we have theme settings on the board I could see combining the sound and visual settings into a new modal or something of the sort, and then allowing the user to change the settings for just that board, or apply the settings globally. All that is a somewhat tangential topic though, I would say for the scope of a PR that removes the theme settings from the nav bar, moving that into the global settings is the thing to do, and we can worry about sprucing up the game page in another PR.

Moderator Center and Announcement Center seem like they could go under Community

Yeah that sounds good, Admin too just for simplicity I'd say, it's hidden from most everyone.

Right bar content

I like the idea of making these collapsible, but then I think this may also be another issue to discuss. Yea?

What I was musing about was removing the right bar all together and putting the contents under menu items in the navigation system. I think we can punt that though, just something I was kicking around in my head about how that might look in the different navigation options we're pondering.

[anoek]

Also, do we currently have stats on which menu items see what amounts of traffic?

Page	%
/game/ID	39.98%
/play	11.41%
/overview	8.59%
/	7.16%
/player/ID	4.67%
/puzzle/ID	3.47%
/observe-games	1.96%
/game/view/ID	1.74%
/user/view/ID	1.60%
/learn-to-play-go/capture/ID	1.00%
/sign-in	0.87%
/tournament/ID	0.83%
/chat	0.68%
/group/ID	0.66%
/learn-to-play-go/snapback/ID	0.61%
/learn-to-play-go/the-board	0.56%
/puzzles	0.46%
/learn-to-play-go/seki/ID	0.40%
/learn-to-play-go/defend/ID	0.39%
/joseki	0.39%
/learn-to-play-go	0.38%
/chat/global-english	0.35%
/groups	0.29%
/review/ID	0.27%
/learn-to-play-go/ko/ID	0.27%
/tournaments	0.24%
/learn-to-play-go/the-board/ID	0.20%
/learn-to-play-go/ladders/ID	0.19%
/learn-to-play-go/rules-intro	0.19%
/settings/general	0.19%
/learn-to-play-go/ending-the-game/ID	0.18%
/learn-to-play-go/capture	0.18%
/ladders	0.17%
/ladder/ID	0.17%
/learn-to-play-go/defend	0.16%
/register	0.15%
/user/settings	0.15%
/learn-to-play-go/ending-the-game	0.14%
/learn-to-play-go/snapback	0.11%
/learn-to-play-go/seki	0.11%
/learn-to-play-go/ladders	0.10%
/learn-to-play-go/ko	0.10%
/chat/global-english/english	0.10%
/learn-to-play-go/	0.09%
/settings/account	0.08%
/leaderboards	0.08%
/settings/game	0.07%
/demo/view/ID	0.06%
/library/ID	0.06%
/settings/sound	0.05%

[anoek]

I kind of feel like the study page could be something we develop into a “study center”. It could feature the “Learn to Play” section for you until you’ve completed it, after which it could be a whole spread of options (games, joseki, puzzles...). Could be really nice to have a landing page where I could go if I feel like studying but I don’t know exactly what format I want to study in. It could have a featured puzzle, featured historical game... even an instructional video of the month or something.

For the Community header, what’s the most commonly used community section? Would it also be a good idea to have a community landing page?

In short, I think we could get by with a re-click of these headers going to 'Learn to Play' and 'Leaderboards'—enough to get us rolling with this new menu—but I think there’s room for improving their behavior.

I'm wondering if the right thing to do would be nothing - if they click again it closes the menu or just does nothing, have them select something appropriate. I feel like for Play and Profile, maybe those make sense because they are something specific and a category?

Or, if we want consistency, which is a decent argument, perhaps Study should got o Puzzles, and Community to the Forums? Or chat.. not sure there.

[kevincoleman]

Huh! That’s a great idea. I do see that it lacks consistency, but it seems smarter to me to deliver only behavior that’s expected or nothing at all. In the case of Play and Profile they feel expected, but not so with Community or Study.

If nothing else, linking to nothing is a good baseline behavior we could use as a jumping off point for changing behavior in the future. I dig it.

[github-actions[bot]]

This issue has been marked stale and will be closed soon without further activity. To keep the issue open, please respond to the comment to keep the discussion going.

[github-actions[bot]]

This issue has been automatically closed due to inactivity. Please feel free to re-open it if the issue persists.