tl;dr: Thanks for the feedback. We are actually trying to address most of the points raised. If you are interested in the story of how things got to be as they currently are or why we are not addressing the rest of the points, read below. It's long.
Hi eatmore, Thanks for the long and referenced feedback. As you mention, many of the things that were more clearly "bugs" as opposed to "design choices I disagree with" have been fixed, so I won't comment on those. I'll comment point by point below, but in general, I do personally agree with many of the points you raise, but UX research and expert designers seemed to disagree. There are some competing priorities between a majority of "seasoned competitors" like you (or me, back in the day), "casual or for-fun paritcipants" and "newcomers to the programming competitions world". Each group deserves attention, of course, seasoned competitors go through more rounds, but casual users are the majority and newcomers are the ones that need more help from the UI, and the ones that make a system sustainable. Additionally, some things, like having stats as a row or two below the scoreboards, may not be just "the correct way" but "the way we saw it done for a long time in a lot of sites" which are not necessarily the same. For example, it is much easier for someone new to focus on the stats and therefore actually use them if they are larger and at the top of the page. I still "voted" (there wasn't a vote) for having them at the bottom, but now that I have this different thing, I can imagine it might be better. Of course, it might also be worse and we are not opposed to changing it in the future after giving it a reasonable shot of working. Now, as promised, the point by point: > 1. Looks like Code Jam team already noticed that some people block third-party cookies, and made the website show a warning in this case. Still, it would be awesome if it were possible to actually log in without third-party cookies or, at least, with first-party isolation (currently, no warning is shown in this case, but login doesn't work). After the problem was first reported, we decided that showing a warning message and educating users about how to enable the cookies was a reasonable fix for most users (as most people were satisfied when we suggested that over email). There are indeed better solutions, but they take longer to roll out and it just has lesser priority than other stuff (like other fixes you've noticed, and some you didn't because they were under the hood). > 2. When entering a round, users should be directed to the problems, not to the scoreboard. This is how it worked in all previous versions, and this is how it should work. Also, the old version had a nice feature: it was possible to open the dashboard in advance of the round, and have the problems load automatically when it starts. I'd like to have this feature in the new version as well. Regarding the dashboard begin possible to open in advance of the round, we have added that feature too. I agree that is a good idea. Regarding the "order" of pages, I am actually not sure. I see your point and it was my first impression too, but I also see the point of people who prefer it the current way. Most books have the index in the first pages, not in the last, for example. It's easy enough to switch and you have to do it once per contest, so the impact should be minimal. That all being said, I would appreciate it if you can try to avoid phrases like "this is how it should work" when giving feedback and say "this is how I would prefer it" or similar. There isn't one way how things "should" be, and in most cases, different users will prefer different things, and even the same user would prefer it differently at different points in time. > 3. Something has to be done with the code editor. Perhaps it should be put below the problem statement, or into a separate tab. I would also suggest to allow those users who don't need an editor to hide it completely, and to switch to an interface that supports submitting only from a file (this is how it was done before 2018). > 4. The editor should not be displayed if the user is not logged in, or not registered for the round. Instead, they should see a message stating that. Currently, a message is displayed in an editor, and only if the user is not logged in. I agree. This is near the top of the things we want to address. Stay tuned. Regarding putting it below the statement, you may remember that being the default placement in the 2018 Code Jam interface, and we had a number of users reporting not finding it, that's why we are trying something different. Hopefully we'll converge to something that addresses everyone needs to a reasonable extent. > 5. There should be a sidebar on the left, with tabs for switching between the problems. It may show additional information as well. The old version had submission statistics and a mini-scoreboard in a sidebar, which I find quite useful. Most users reported the old mini-scoreboard being useless, actually. We did ask (and got) a way for users to switch problems without going back to the round overview page. A left panel will further remove real estate for the important things. > 6. In the new interface, there is a top bar, which doesn't scroll. I think that it is not useful enough to always be on the screen, so it should be made to scroll with the page. I'm not sure whether you mean the problem page or the round page (the one with the stats and scoreboard). If you mean the problem page, the top bar is quite small and you need it to see alerts and sign-in status, which is important. If you mean the round page, keeping the round title is important, but I agree the top bar is pretty big and consuming of important real estate. We are trying to do something about it, but this one is tricky to fix properly (just scrolling is not a good solution in general, unfortunately). > 7. There should be an option to receive desktop notifications when a submission is judged. Also, there should be notifications when there is an announcement, and when problem statement is changed. During the previous years, there were multiple occasions when problem statements were changed during the round without any notification whatsoever, and it was necessary to reload the page to see the changes. There is a notification when there is an announcement or any answered question, your alerts icon (top left) will display that. If you mean a browser notification that pops up on top of non-browser windows, using those is a good idea, we'll look into that, but don't hold your breath as I would expect that to take longer since it will be a completely new feature. > 8. The scoreboard should be made to look better. It should be made to show more than three problems at once, and preferably at least 100 rows per page. Submission statistics should appear below the scoreboard, not above. The part of the header that remains on the top of the screen while the page is scrolled should be at most as tall as a single row. I'll address the specifics. If you meant something in addition by "look better", please be specific about that. I happen to thing the look is pretty good. The number of problems displayed depends on the width of your browser window. If you make it wider, it will show more problems. The part about the header is basically my answer for #6b (I agree it could work better, we are looking into it, but it's harder than it looks to get a good design, regardless of implementation). Regarding the total number of rows, I agree that we should have an option to display more, but 100? Do you really use 100? Isn't seeing 100 at once close enough to just seeing the overall stats? The old Code Jam app (2017 and before) had only 30, for example. > 9. Round overview should be on its own page, not tucked above the scoreboard. I disagree. Why? I mean, that may be good, but it also means one more page. Right now there are 2 pages total (for the competition experience): one that is general to the round and one that is problem-specific. That seems sound and simple to understand, which is important for many users, especially new ones. > 10. Switching between the problems and the scoreboard should be more straightforward. Currently, to switch to the scoreboard, you have to press a left arrow in the top left corner of the screen, which is pretty unintuitive. The old "Contest scoreboard"/"Contest dashboard" links are much better. I'll note the feedback. I think the overall design was meant to be "you go from round-stuff (more general) to problem-stuff (more specific) and back" which is something that comes up a lot in different contexts (settings menus, for example, directory listings, homepage -> specific page in lots of websites). That being said, maybe the back arrow could be more explicit about where it's going back to, I'll pass the feedback on to design. Finally, I hope there is some broader interest in some of the backstage history of Code Jam's site redesign. It was cool to write, so thanks for prompting me to do it. Best, Pablo On Fri, Mar 8, 2019 at 6:13 AM eatmore <[email protected]> wrote: > This post on Codeforces: https://codeforces.com/blog/entry/65800 > > Hi all! This year, Google has again decided to change Code Jam user > interface. The new interface has already been used for Code Jam to I/O for > Women and Kick Start rounds, and from what I saw, it is even worse than the > last year. Let's start. > > https://i.imgur.com/sACL7ko.png > > This is what I saw when I opened Code Jam main page. This year it uses > even longer domain name, codingcompetitions.withgoogle.com, and some text > seems to be missing. After some investigation, I found that this occurs > when a browser is configured to block third-party cookies. I configure my > browser this way because I don't want some companies to track me around, > and for nearly all sites, this causes no issues. On some sites, blocking > third-party cookies causes single sign-on to stop working, but this is > understandable. Code Jam website is the first one that I saw such that > blocking third-party cookies breaks it so much that you can't even read > text (note: looks like this have been fixed, and now the website displays a > warning instead). > > After getting the text to appear, I struggled with some login problems and > finally got to the competition interface (this screenshot was taken after > the round, but it looked almost like that during the competition as well): > > https://i.imgur.com/8w1baOb.png > > Usually, when you enter a round, you expect to see the problems. This > year, you start a round with a scoreboard. To get to the problems, you need > to click one of the "Open problem" buttons. Doesn't matter which one: you > would be able to switch between problems from the dashboard. Here it is: > > https://i.imgur.com/25l4tVH.png > > As you see, in this new version there is a code editor that always takes > half of your screen space. No way to resize or hide it. Doesn't matter if > you want to use it or not. I, for instance, prefer to use a real IDE, > because it has syntax highlighting and completion and refactoring and I can > run the code locally and IT DOESN'T FORCE ME TO USE WHITE TEXT ON BLUE > BACKGROUND. Also, in the old interface, there was a side bar for switching > between problems, and in the older version it also showed submission > statistics and the number of new announcements, but now this is all gone. > > Side note: suppose that you just want to read the problems, and all you > got is a tablet. > > https://i.imgur.com/PIEuCgy.png > > Sorry, the editor, despite being completely useless, still wastes half of > your screen space. Also, looks like the problem name doesn't fit into the > provided space. > > Back to the previous screen. > > https://i.imgur.com/25l4tVH.png > > Do you see a submit button? Me neither. It took quite some time for me to > realize that to be able to submit your solutions, you have to register > TWICE: once to enter your information into the new website, and once more > to actually register for the competition. Otherwise, you can type the code, > but the panel with submit button (and a couple of other buttons) is hidden. > After I registered properly, the panel appeared (but my code disappeared, > fortunately, I had it saved to a file). Then I could finally submit it. > > Now, back to the scoreboard. > > https://i.imgur.com/tXb5qZV.png > > This is the scoreboard of this year's Code Jam to I/O for Women round. It > has four problems, but you can only see three at a time. Apparently, the > person who designed this is as bad in using your screen space as Windows 10 > is in using your RAM. Perhaps they should learn from guys who designed this: > > https://i.imgur.com/s4BFPVJ.png > > The old version easily fits six problems, and has space for one or two > more. And even the font size is almost the same! Now, on top of the > scoreboard, there are some big useless graphs. To see the actual > scoreboard, you have to scroll down. For comparison, the old interface > displays submission statistics below the scoreboard, as an additional row. > Codeforces is doing the same. > > Another change is the number of rows you can see on a single scoreboard > page. On Codeforces, you can see up to 200 rows at once, which is > reasonable for a round with several thousands of participants, and works > for smaller rounds as well. In the old Code Jam interface, it was possible > to see 30 rows at once. Now, there is a selector that switches between 10 > and 20, and it doesn't even work until you switch between pages (looks like > this had been fixed recently). > > Here is another example of a well designed scoreboard: > > https://i.imgur.com/uXD9oSj.png > > Also, as I scroll the scoreboard, I have about 40% of my screen covered by > the heading which doesn't scroll, which is way too much. > > Now about round overview and problem analysis. Instead of being in a > single convenient place, this information is now sprinkled around the > interface. To see the overview, you need to click a slider on top of the > scoreboard, and the overview will appear in place of those big useless > graphs. To see the analysis, go to a problem and click an analysis "tab" > above the text. Again, I like the old version so much more. > > All in all, the new interface is worse than the old one in nearly every > respect. So, what can be done to make it better? Here are some suggestions: > > 1. Looks like Code Jam team already noticed that some people block > third-party cookies, and made the website show a warning in this case. > Still, it would be awesome if it were possible to actually log in without > third-party cookies or, at least, with first-party isolation (currently, no > warning is shown in this case, but login doesn't work). > 2. When entering a round, users should be directed to the problems, not to > the scoreboard. This is how it worked in all previous versions, and this is > how it should work. Also, the old version had a nice feature: it was > possible to open the dashboard in advance of the round, and have the > problems load automatically when it starts. I'd like to have this feature > in the new version as well. > 3. Something has to be done with the code editor. Perhaps it should be put > below the problem statement, or into a separate tab. I would also suggest > to allow those users who don't need an editor to hide it completely, and to > switch to an interface that supports submitting only from a file (this is > how it was done before 2018). > 4. The editor should not be displayed if the user is not logged in, or not > registered for the round. Instead, they should see a message stating that. > Currently, a message is displayed in an editor, and only if the user is not > logged in. > 5. There should be a sidebar on the left, with tabs for switching between > the problems. It may show additional information as well. The old version > had submission statistics and a mini-scoreboard in a sidebar, which I find > quite useful. > 6. In the new interface, there is a top bar, which doesn't scroll. I think > that it is not useful enough to always be on the screen, so it should be > made to scroll with the page. > 7. There should be an option to receive desktop notifications when a > submission is judged. Also, there should be notifications when there is an > announcement, and when problem statement is changed. During the previous > years, there were multiple occasions when problem statements were changed > during the round without any notification whatsoever, and it was necessary > to reload the page to see the changes. > 8. The scoreboard should be made to look better. It should be made to show > more than three problems at once, and preferably at least 100 rows per > page. Submission statistics should appear below the scoreboard, not above. > The part of the header that remains on the top of the screen while the page > is scrolled should be at most as tall as a single row. > 9. Round overview should be on its own page, not tucked above the > scoreboard. > 10. Switching between the problems and the scoreboard should be more > straightforward. Currently, to switch to the scoreboard, you have to press > a left arrow in the top left corner of the screen, which is pretty > unintuitive. The old "Contest scoreboard"/"Contest dashboard" links are > much better. > > -- > You received this message because you are subscribed to the Google Groups > "Google Code Jam" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/google-code/127b7ed5-e98b-47c8-9300-a753ec2dd289%40googlegroups.com > . > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "Google Code Jam" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/google-code/CANa5jcBYdyF-HSycoyDmUMisNm5td0eesS1CKpRtZJLePZWG4A%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
