Change 714170 had a related patch set uploaded (by Wugapodes; author: Wugapodes):

[mediawiki/extensions/ChessBrowser@master] WIP: Style update for CB interface

https://gerrit.wikimedia.org/r/714170

You can see an example of the redesign in the attached screenshot

(critique based on the screenshot only)

can't say i love it.

it definitely looks more tidy, but at the cost of great reduction in information density.
the screenshot shows all of 4 plys (presumably it can show a few more - not sure what the fubar means), compared with several dozens which can fit similar screen area with current (previous?) denser display.
not a true chess aficionado, but it's my understanding that real "chessheads" find the game's full algebraic notation informative, and showing tiny fraction of it is counterproductive.
i'll repeat my previous suggestion: we should consult the chess communities when making these kind of choices (ditto for previous question, "should we sport an "autoplay" button")

alternatively, we can try to imitate existing chess sites sporting "pgn viewer" (completely arbitrary example. not saying it's "authoritative" or "definitive", but otoh, similar to any other viewer i saw to date).

ALSO, note a small "bug" that can be easily fixed is the numbering: it should not be
1
2
3

this is confusing, not to say wrong, since "17" this way really means 9 (algebraic notation numbering increments every two plys, not one)
it should be

1.
1...
2.
2...
3.
3...

(ellipsis is the standard way to denote black ply, e.g. when there's a comment after the white's ply:

17. Kh3 { this is a crappy move, should do xyz instead } 17... Qe5

also note the lack of period in both current and suggested notation. algebraic notation uses period between "move number" and ply notation. this is a bug in current implementation.

peace.

The two column format is used by both lichess.org (which this is based on) and chess.com, and it's the predominant format for chess score sheets in over the board play. I'm not opposed to you consulting communities if you'd like, but almost everyone who's played chess will have seen this format before.

The problem with showing all moves inline is that variations and comments very quickly become confusing which is what prompted this change. Denser display is not necessarily a good thing. For example, if there are multiple variations we get something like:

1. e4 (c4 e5 2. g3 Nc6 3. Bg2) (d4 d5 3. c4 dxc4) (Nf3 Nc6 3. Nc3 Nf6 4. g3) e5

where it's almost impossible to tell the start and end of variations for a casual reader. Similar for comments, any substantial commentary on a move or variation pushes moves far apart. On mobile devices this would be a big problem as there is not much screen space and readers would need to choose between seeing the board and seeing the move notation. Even on desktop, this makes it hard for readers who are not very familiar with chess. Keeping related information together is important, and using design to structure information helps with comprehension.

For example, if all a reader knows about chess is that players take turn making moves, a two column display is intuitive as it represents the colors and organizes moves: left column to see white's move right column to see black's and scroll down until you find the move you want. With Raw PGN you need to do a more extensive visual search to find the right move, looking past variations and comments, since there's no predefined location for that information on the page. Marking and separating variations and comments from the flow of the main game makes it easy to find or skip as the main information is structured differently. With raw PGN all information is presented similarly making it hard for readers to tell important information apart from commentary or asides. Raw PGN is useful for computers and chess players, but it's not ideal for the general public.

My idea would be:

• Full width interface
• Chessboard on the left, Two column for moves on the right (no higher than the chessboard to prevent content reflows)
• Drop the two columns below the chessboard in mobile/narrow view
• Notations, comments etc shown as a row below the move currently active
• Variants... no clue.. I haven't seen good examples of this, not yet sure
• Raw PGN available for download

But we could easily ask https://en.wikipedia.org/wiki/Wikipedia_talk:WikiProject_Chess what they think I guess ?

Change #714170 abandoned by Wugapodes:

[mediawiki/extensions/ChessBrowser@master] Style update for CB interface

Reason:

Superseded by 1055624

https://gerrit.wikimedia.org/r/714170

Change #1055624 had a related patch set uploaded (by Wugapodes; author: Wugapodes):

[mediawiki/extensions/ChessBrowser@master] UI/UX update for widget

https://gerrit.wikimedia.org/r/1055624

I've uploaded a patch which should mostly resolve this task. A comparison of the Original and New style are given in the file below. Some notes:

• Width: currently not full width because it made my math easier, but presumably it could be? I think this is better chosen on a case-by-case basis since what Wikipedia needs might not be what Wikibooks needs, for example. So I'm not too worried about defining the width out-of-the-box
• Board and Notation: the notation is now in two-column format and the board is to the left and equal height. The two-column notation format makes it easier to display comments and variations, aligns with reader experiences on other sites like Lichess and Chess.com, and limits the amount of information displayed to readers who are not interested in the specific moves or comments.
• Narrow view: doesn't work yet, but that's high priority since mobile devices are so popular for content
• Comments: Appear as a break in the notation, and have a border whose color indicates which player the comment applies to.
• Variants: I have ideas for this based on Lichess but not yet implemented. Medium priority since variants are an important feature.
• Raw PGN Download: not implemented and low priority. Workaround is to just view page source and copy the text.
• Colors: I made them up based on EnWiki's template scheme. I think they're good enough, but I'm open to other ideas.