Song select redesign

[bdach]

• Part of Song select design and UX pass #18890
• Related to Update beatmap overlay to latest design logic #13712 (overlapping components)

Designs:

• https://www.figma.com/file/DXKwqZhD5yyb1igc3mKo1P/Song-Select-Draft-2?node-id=0%3A1
• https://www.figma.com/file/EjS27IBaZhc2qX97lFBUxN/Song-Select-5?type=design&node-id=0-1&mode=design&t=niACBGHZtOud4FyQ-0 (new WIP iteration)

Work is in progress by @mk56-spn @Joehuu nobody at this point?

Wedge/Info

Beta Give feedback

1. New beatmap information wedge design implementation #22116
   area:song-select size/XL type:cosmetic +3
   
2. Implement new components for song select wedge redesign #28063
   area:song-select blocked size/XXL type:cosmetic +4
   
3. Implement song select v2 difficulty name content component #29415
   area:song-select size/L type:cosmetic +3
4. Implement song select v2 length and bpm statistic pill #29437
   area:song-select size/L type:cosmetic +3
   

Carousel

Beta Give feedback

1. New beatmap carousel design implementation #22197
   area:song-select size/XL type:cosmetic +3
   

Footer

Beta Give feedback

1. New song select footer design implementation #21491
   area:song-select size/XL type:cosmetic +3
2. BeatmapOptionsOverlay is missing new design #24273
   area:song-select type:cosmetic +2
   
3. Add mod display and unranked indicator to new song select footer #28141
   area:song-select size/XL type:cosmetic +3
   
4. Improve animation of new song select footer buttons #28142
   area:song-select size/M type:behavioural +3
   
5. Add new footer back button and fix shearing being different between components #28183
   size/L type:cosmetic +2
6. Implement "let's go!" button?
7. Add basic animation to new footer and buttons #28184
   size/XL type:behavioural type:cosmetic +3
   
8. Move new screen footer to OsuGame and add temporary SongSelectV2 screen #28185
   area:song-select size/XL type:cosmetic +3
   
9. Detach mod customisation area from the footer and replace with an overlay panel display #28553
   area:overlay-mod-select size/XXL type:cosmetic +3
   
10. Add implementation for ScreenFooter to house footer content of sheared overlays #28682
    area:overlays size/L type:behavioural type:cosmetic +4
    
11. Replace local footer in existing sheared overlays (e.g. mod select & first-run setup) with ScreenFooter #28683
    area:overlay-mod-select area:overlays size/XL type:behavioural type:cosmetic +5
    
12. Unranked indicator overlaps with buttons next to it (e.g. "Deselect All" button in mod overlay) (see https://discord.com/channels/188630481301012481/188630652340404224/1260509921959481354)
13. Allow screens to add their own content to footer similar to overlays (see ShearedOverlayContainer.CreateFooterContent) (also see Use new footer for daily challenge #29165 (comment))

Leaderboards

Beta Give feedback

1. New leaderboard score card design implementation #22237
   area:song-select size/XL type:cosmetic +3
   

Filter Control

Beta Give feedback

1. Replace search with sheared variant (needs to have matches text implemented)

[Joehuu]

I'll try to tackle this while the focus is on scoring.

[NiceAesth]

Sorry to pester about this, but it has been bothering me a bit as something that could potentially go south if not communicated. This issue tracks the addition of the "Let's GO!" button from figma, yet that seems to contradict what I have read on Discord https://discord.com/channels/188630481301012481/188630652340404224/1149721526279606396, which would be having the osu! cookie there instead

@Joehuu just making sure you were also aware of this conversation

[Joehuu]

It's just there because it's in figma (even in the new iteration). I'll append a question mark to the task. I also don't like it replacing the osu! logo.

[april83c]

I had some thoughts on the design:

The controls including and around the search bar really clash with the beatmap carousel behind them. I would give them some sort of background, something like this:

I also don't like that density and fail rate are the stats shown here. I would show more useful statistics like OD/AR/CS/HP (possibly even Max PP above those?), and maybe make the top banner smaller. Something like this?

Unless that was what the Basic and Pro buttons were supposed to do (switch between the view shown and a different view with more stats?), in which case I think they should be labelled something else (maybe "Default" and "Compact"?)

[ghost]

hope im not late, wanted to share my thoughts on new iteration. slightly different approach, aligned some stuff, tidied up search a bit, added borders to grades so they look more pronounced. figma

[Qunas101]

I hope this will be skinnable. I like the current song carousel much more. There's just too much colour here. Sampling colour from background sounds cool on the surface, but in reality you often end up with something weird that does not really represent the picture in a good way. Especially when you block the picture with a gradient. The current look is much cleaner.

[Zyfarok]

I don't know if it's the right place to give feedback on this, but here's some comment, mostly on the "Select Draft 2" one:

First thing, showing bars for AR/CS/OD/HP is useless and a complete waste of space:
In osu! at least, the huge majority of beatmaps above 5* have CS 4~5, OD 8~9, AR 8~10, and HP 5~6, while the bars go from 0 to 10, which makes most bars look very similar on all 5*+ beatmaps. The difference between CS 4 and 5 is huge but it's very hard to see from the bars. Similar issues can be seen at lower star ratings too (values don't vary much between maps of similar difficulty). Having the numbers themselves is very important though, and this is something that is completely missing from the "Draft 5" one, but bars won't bring anything relevant that the numbers don't already give.

Second, something showing the proportion of sliders/slider-ticks/circles/spinners in the map might be nice but multiple bars does not seem to be the best way to show this. Maybe some stacked bars or a pie-chart would work better ?

Lastly, the space left for the leaderboard is really small... Along with removing bars as mentionned above, it would be good to compact things more (buttons for leaderboard options could move to the middle of the top bar ? Some numbers can move to the beatmap card bellow the star rating and song title ? Write AR/CS/OD/HP in abbreviated form and only show the full name on hover ?) and have a way to disable more of the less important info like tags, success rate and user rating/rating spread, or have them be displayed on hover only.

Other than that, the designs look very nice overall. Can't wait for them to be part of the game.

[peppy]

@arflyte ^

[arflyte]

There's a major redesign on the left side to declutter and de-messy-fy to address most of the concerns above, such at the search bar background, information overload and the panels on the left side. While the design is nice, I'm not quite happy with how the information is displayed so far, so this requires quite a lot of rethinking and rework.

(The Let's Go! button is just a placeholder, the cookie remains)

[Joehuu]

I'll give an update that I should've done a month ago. This was listed in the future tasks issue so I plan to prioritize this again.

I have the changes for the first iteration wedge details (top left) working and polished visually (unsure about code): master...Joehuu:osu:song-select-metadata-content

And I was concerned the header was taking too much space and have a diff to remove that (and replace with an arrow within the background wedge):

diff --git a/osu.Game/Screens/Select/BeatmapInfoWedgeV2.cs b/osu.Game/Screens/Select/BeatmapInfoWedgeV2.cs
index bd3e5f4d4f..dfbcc56aa2 100644
--- a/osu.Game/Screens/Select/BeatmapInfoWedgeV2.cs
+++ b/osu.Game/Screens/Select/BeatmapInfoWedgeV2.cs
@@ -2,10 +2,12 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using System.Collections.Generic;
 using System.Threading;
 using osuTK;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Effects;
@@ -14,16 +16,21 @@
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Events;
 using osu.Framework.Localisation;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
+using osu.Game.Resources.Localisation.Web;
 using osu.Game.Rulesets;
+using osuTK.Graphics;
 
 namespace osu.Game.Screens.Select
 {
     public partial class BeatmapInfoWedgeV2 : VisibilityContainer
     {
-        public const float WEDGE_HEIGHT = 120;
+        public const float WEDGE_HEIGHT = 100;
         public const float SHEAR_WIDTH = SongSelect.SHEAR_X * WEDGE_HEIGHT;
         private const float transition_duration = 250;
         public const float COLOUR_BAR_WIDTH = 30;
@@ -149,6 +156,15 @@ private void load()
                                     }
                                 }
                             },
+                            new ExpandDetailsButton
+                            {
+                                Anchor = Anchor.BottomRight,
+                                Origin = Anchor.BottomRight,
+                                Expanded = { BindTarget = ShowDetails },
+                                Margin = new MarginPadding { Bottom = 3, Right = COLOUR_BAR_WIDTH + 8 },
+                                Depth = float.MinValue,
+                                Shear = -SongSelect.WEDGED_CONTAINER_SHEAR,
+                            },
                         }
                     },
                     new Container
@@ -379,5 +395,101 @@ protected override void UpdateAfterChildren()
                 ArtistLabel.MaxWidth = DrawWidth - SongSelect.TEXT_MARGIN - SongSelect.SHEAR_X * DrawHeight;
             }
         }
+
+        public partial class ExpandDetailsButton : OsuHoverContainer
+        {
+            private const int fade_duration = 500;
+
+            public readonly BindableBool Expanded = new BindableBool();
+
+            protected override IEnumerable<Drawable> EffectTargets => new[] { background };
+
+            private Color4 flashColour;
+
+            private readonly Container content;
+            private readonly Box background;
+            private readonly SpriteIcon spriteIcon;
+
+            public ExpandDetailsButton()
+                : base(HoverSampleSet.ScrollToTop)
+            {
+                Size = new Vector2(20);
+                Add(content = new CircularContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Masking = true,
+                    EdgeEffect = new EdgeEffectParameters
+                    {
+                        Type = EdgeEffectType.Shadow,
+                        Offset = new Vector2(0f, 1f),
+                        Radius = 3f,
+                        Colour = Color4.Black.Opacity(0.25f),
+                    },
+                    Children = new Drawable[]
+                    {
+                        background = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both
+                        },
+                        spriteIcon = new SpriteIcon
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(10),
+                            Icon = FontAwesome.Solid.ChevronUp
+                        }
+                    }
+                });
+
+                TooltipText = CommonStrings.ButtonsBackToTop;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                IdleColour = colourProvider.Background3;
+                HoverColour = colourProvider.Background2;
+                flashColour = colourProvider.Light1;
+
+                Action = Expanded.Toggle;
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                Expanded.BindValueChanged(e =>
+                {
+                    spriteIcon.RotateTo(e.NewValue ? 0 : 180, fade_duration, Easing.OutQuint);
+                    TooltipText = e.NewValue ? "Hide details" : "Show details";
+                }, true);
+            }
+
+            protected override bool OnClick(ClickEvent e)
+            {
+                background.FlashColour(flashColour, 800, Easing.OutQuint);
+                return base.OnClick(e);
+            }
+
+            protected override bool OnMouseDown(MouseDownEvent e)
+            {
+                content.ScaleTo(0.75f, 2000, Easing.OutQuint);
+                return true;
+            }
+
+            protected override void OnMouseUp(MouseUpEvent e)
+            {
+                content.ScaleTo(1, 1000, Easing.OutElastic);
+                base.OnMouseUp(e);
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                base.OnHover(e);
+                return true;
+            }
+        }
     }
 }
diff --git a/osu.Game/Screens/Select/SongSelect.cs b/osu.Game/Screens/Select/SongSelect.cs
index cd441b0394..c827328d25 100644
--- a/osu.Game/Screens/Select/SongSelect.cs
+++ b/osu.Game/Screens/Select/SongSelect.cs
@@ -111,8 +111,6 @@ public abstract partial class SongSelect : ScreenWithBeatmapBackground, IKeyBind
 
         protected GridContainer LeftArea { get; private set; } = null!;
 
-        private BeatmapInfoWedgeV2 beatmapInfoWedge = null!;
-
         [Resolved]
         private IDialogOverlay? dialogOverlay { get; set; }
 
@@ -258,46 +256,17 @@ private void load(AudioManager audio, OsuColour colours, ManageCollectionsDialog
                                         RowDimensions = new[]
                                         {
                                             new Dimension(GridSizeMode.AutoSize),
-                                            new Dimension(GridSizeMode.AutoSize),
                                         },
                                         Content = new[]
                                         {
-                                            new Drawable[]
-                                            {
-                                                new Container
-                                                {
-                                                    RelativeSizeAxes = Axes.X,
-                                                    Height = 90,
-                                                    Padding = new MarginPadding { Left = TEXT_MARGIN - WEDGE_CORNER_RADIUS, Right = BeatmapInfoWedgeV2.COLOUR_BAR_WIDTH },
-                                                    Children = new Drawable[]
-                                                    {
-                                                        new SongSelectHeaderTitle
-                                                        {
-                                                            Anchor = Anchor.CentreLeft,
-                                                            Origin = Anchor.CentreLeft,
-                                                            Alpha = ShowHeader ? 1 : 0,
-                                                        },
-                                                        toggleDetailsButton = new ShearedToggleButton(120)
-                                                        {
-                                                            Anchor = Anchor.CentreRight,
-                                                            Origin = Anchor.CentreRight,
-                                                            Text = "Details",
-                                                            Height = 25,
-                                                            Active = { Value = true },
-                                                            Font = OsuFont.GetFont(weight: FontWeight.SemiBold, size: 14),
-                                                            Padding = new MarginPadding(),
-                                                            HasGradientBorder = false,
-                                                        },
-                                                    }
-                                                }
-                                            },
                                             new Drawable[]
                                             {
                                                 new Container
                                                 {
                                                     RelativeSizeAxes = Axes.X,
                                                     AutoSizeAxes = Axes.Y,
-                                                    Child = beatmapInfoWedge = new BeatmapInfoWedgeV2
+                                                    Padding = new MarginPadding { Top = 10 },
+                                                    Child = new BeatmapInfoWedgeV2
                                                     {
                                                         RelativeSizeAxes = Axes.X,
                                                     },
@@ -382,8 +351,6 @@ protected override void LoadComplete()
 
             modSelectOverlayRegistration = OverlayManager?.RegisterBlockingOverlay(ModSelect);
 
-            toggleDetailsButton.Active.BindTo(beatmapInfoWedge.ShowDetails);
-
             apiState.BindTo(api.State);
             apiState.BindValueChanged(_ => fetchOnlineBeatmap(), true);
         }
@@ -972,7 +939,6 @@ private void updateVisibleBeatmapCount()
         }
 
         private bool boundLocalBindables;
-        private ShearedToggleButton toggleDetailsButton = null!;
         public virtual bool ShowHeader => true;
 
         private void bindBindables()

The details collapsed is underwhelming and should have a condensed display showing the really important stats.

As with the code changes, I'm just a little overwhelmed with them and would preferably do one (future) skinnable component per PR. Something like this:

[Zyfarok]

The last iteration of song select design (top left of https://www.figma.com/design/9bpXaCQNLuYQlbtyzcs115/Song-Select-6 ) looks nice and fixed most of the previous issues (A lot more room for leaderboard, feels less bloated, ...). Good job @arflyte.
I have a few comments however, from my PoV of player:

In osu! when I'm selecting a beatmap, I will look at a few different values, usually in this order from the most important to the least important (in my opinion):

• SR
• BPM
• AR
• CS
• Length and max combo (more digestible than object count!)
• Mapper (both of that diff and of the set)

I'd like to have all the above list displayed in a reasonably big font, and close to one other, as they are the most important and define most of what a beatmap is about. Currently, the BPM and length are too small and too far from the rest, and CS is not included in the latest design (probably an oversight since SR is duplicated). Note that OD and HP can be relevant, but usually not as much as the above (so their size/position matters less).

Additionally, when I'm searching for something specific and want to know even more about a the type of beatmap, I look at:

• The %age of objects being sliders -> would be nice to have a pie-chart or at least %ages in the song select instead of the raw numbers ? Raw total numbers can be displayed on hover only but are less relevant. (Would also be nice to count & display sliders that have slider-ticks or repeat separately from other sliders, as they are widely different in how they are played)
• Strain graph to show the distribution and type of difficulty (currently not available in-game, so I use external tools) -> This tells so much about a beatmap (is it "slider-tech" ? is it tapping ? Does it spike ? Where are the hard parts ? Does it have pauses ?...), so it would be really nice to also include in the song select, or give quick access to it (Button? Optional info panel taking some of the leaderboard space? In a compressed form like the density bar of previous designs ?)

These two are of course less important and can be lower priority, but I think it would be nice to have in the future.

Talking about the future, as beatmap tags are added, it might be nice to also have a way to display them.

Lastly, for the leaderboard, it would be nice to display miss-counts and maybe (?) also mod multipliers in addition to the rest?

[Zyfarok]

Ah, also, I noticed the mapset author is missing from the beatmap list... Would be a nice to have !

(And the design for beatmap lists when not grouping by set: where did it go ? The last example is in the "draft 2" figma...)

[arflyte]

The design has more focus on the layout frames than details. The details in the frame are suggestions on what to put with specific design format. Things can be easily expanded, moved around or reduced. Feel free to move around BPM etc wherever relevant.

Since the screen is customisable on player's end, more widgets will be added so they can suit their play style.

As for the missing stuffs, I'll see where I can cram the additional info.

[cloudrac3r]

I notice that the top left quadrant of the screen is used up by a box with the beatmap background in it. I think this is a strange design decision because the beatmap background is already used as the background of the whole screen. Why is the background partially covered by a copy of itself?

I think it would make more sense to remove the box in the top left, creating some empty space, which would make the background more visible as the background of the whole screen.

[felipemarins]

I think the box background being the beatmap background makes sense and is nice to see, as it allows you to see the beatmap background in a more clear way. Also, the default setting is to blur the song select background, so it doesn't work as a main display for the beatmap background.

[necocat0918]

Can mod select overlay's mod customize list be like tabs for each mod instead of a loooong list of all the customizable mods cause with we have a lot of mods to customize, it will be pain for users to find where the mod is

[leah7-7]

can you add back thumbnails like in stable? no one benefits from seeing the small badly cropped part of the background, also you need to add the mapper/uploader name to beatmaps before we click on them. currently it is very hard to tell apart different mapsets of the same song, especially without a proper way to see the map's background without clicking on it. and theres mapsets of the same song that use the same backgrounds, making it even worse. cheers

[Avelia-tr]

one of the current issue I hear a lot with the current song select is that it's too "clostrophobic" and this one of the thing that contribute to it, would it be possible to make it integrate more smoothly and free up some space there ?

in the most recent proposal this becomes worse due to the inclusion of this bottom bar that I'm guessing is the chat ? a feature that i don't think should get that much space. When we compare to stable it isn't even on the song select screen (since I'm guessing it's meant to be a solo play screen).

it also don't help that the mods and back button get another layer on top of it

[peppy]

The chat bar is not related to song select and is optional. Please adjust your UI scale if it feels too "claustrophobic".