User Experience -- redesign the code/discussion page

[kytrinyx]

Here is what the page currently looks like:

Here's what it contains:

• context information: language track icon
• name of the exercise
• link to the exercise data (readme, test suite)
• if the solution is archived, it's flagged as such
• who submitted it, and when
• link to see other implementations of the exercise
• link to all the other iterations of this solution (this gets unweildy when there are many iterations)
• "like" button, and list of people who have liked a solution
• unsubscribe from conversation (don't get notifications anymore)
• "manage" menu - visible only to the person who submitted the code with two options: archive solution (it won't show up in the activity streams any more) or delete the iteration you're looking at.
• share this exercise on twitter
• comments
• a box to submit comments (will ask you to log in if you are not logged in and you try to submit a comment)
• for each person who has commented
  • include a link to their own solution of this exercise in the same language (if they've solved it)
  • link their username to the profile page

I think that the page could probably be cleaned up a lot to make it easier to find the things you're looking for when you're looking for them.

[kytrinyx]

Ref: #34

[Motardo]

The code/discussion page uses a two column layout with the code on the left and the comments on the right. Here are some thoughts on this layout:

1. Sometimes the list of comments is longer than the code
   • the code column is "sticky" so you can keep it in view as you scroll the comments (current behaviour)
2. Sometimes the code is longer than the comments
   • should the comments column be "sticky" in this case?
3. Sometimes the lines of code are wider than the view window
   • the expand button toggles the layout from two column to full width code and full width comments
4. Sometimes the comments are wider
   • toggling the layout makes them full width but the button is attached to the code window so it's confusing. Should there be a single button to toggle the view?
5. When the view toggles (clicking the expand button) the whole window sometimes scrolls to a random place depending on where the "sticky" code column is in relation to the comments. It would be nice if the window kept your scroll position when toggling.
   • this could probably be fixed without any redesign of the layout

I'm not proposing any changes yet. I'm still just thinking about the layout and wondering what others are thinking.

[sebito91]

A key component would be to add a "request help" button somewhere in the code review page. Given that users would have to submit at least one solution before they're able to review others' code, this could give someone the ability to request help directly instead of waiting for someone to troll through their updates and comment/help as necessary. This would accomplish a handful of things:

1. Make newer users feel more comfortable asking for help and even contributing answers for solutions they've already completed (for other newbies)
2. Can mark functions as "pending help" vs "general feedback" or something similar so that more advanced users can filter their updates
3. Make the UX a little bit more interactive than just reviewing diffs + iterations

Thoughts?

[sebito91]

Funnily enough, this seems to be mentioned in another post: #47

[kytrinyx]

@sebito91 I think the request help functionality is implemented:

There's no filter for it, but it does get called out in the list:

I agree, we really do need filters.

[codeale]

Having a quick toggle to do side by side comparison between the solution and the user's own solution would be nice

[kotp]

Any ideas on how to facilitate, or what it would look like? Consider that the reviewer may have 10+ iterations, and they may be reviewing a submission with a single iteration... how would this work? What would it look like? This is interesting, and I think I like the idea. Perhaps a new issue for this? @codeale

[kytrinyx]

@thomascullen did a redesign 🎉 🎉 🎉 and posted it on dribbble: https://dribbble.com/shots/3303245-Code-Challenge

[thomascullen]

Hey All 👋, had no idea this issue existed! I'm happy to do a few iterations on this if you have any feedback!

[kytrinyx]

Hi @thomascullen ✨ It would be fantastic to have your input here.

I'm working with a small group of folks (@exercism/reboot) on deeper UX issues (right now we're asking lots of questions, it will likely be a while before we start thinking about flows/wireframes/visual things). So some of our insights might end up changing things at a fundamental level... meanwhile I think there's a ton of low-hanging fruit on some of the existing pages and interactions.

I've written a bit about the deeper/more long term design stuff we're working on here:

• http://tinyletter.com/exercism/letters/the-delightful-design-of-exercism
• Towards an Exercism Roadmap #113 (broken link in the newsletter. Sigh.)

[thomascullen]

Thats awesome, i'm really excited to see what comes of the reboot. I think going about it from the ground up is a fantastic idea as well. I suppose the most useful thing I could do at this point would be to bullet point the various thoughts and decisions I made while doing that redesign.

• The first thing that I tried to focus on was reducing the size of the headers. It currently takes up a lot of space on the page and I think could be reduced to a single header.
• Next I tried to focus on some more stylistic things, primarily the code block. Due to the fact that it is the main content of the page I think its worth adding some contrast by using darker syntax highlighting.
• I have moved the iterations to a drop down in the code block however this introduces some other questions:
  • How would you go about comparing two iterations?
  • What would happen when there are more than one file submitted?
• I have noticed that in a few places the terminology for an 'exercise' switches between 'exercise' and 'problem'. Keeping to 'exercise' across the board would be good as it has the association to the name. Although looking now there doesn't seem to be an issue with this on the existing exercise page.
• I moved the 'Activity Streams' nav item into the navigation on the left of the header. It makes sense to me to keep all of the navigational links in the one place.
• I think the 'Unsubscribe' action could be moved in with the other actions in the 'manage' dropdown. I'm not sure how often people unsubscribe from comment threads? I don't think I ever have although I can see it being useful for people give a lot of feedback.
• The rest of the changes were styling decisions as I felt the page lacked some colour variation.

Some other changes I might make:

• As mentioned above, I think the 'request help' functionality is a great idea and it did take me a while to find it. I think it would be good to move that a higher priority on the page.
• I like the idea @codeale mentioned above. I think it would be really useful to be able to view the users iteration and your latest iteration side by side. I also think this would be a good way of viewing two iterations from the same user. From a layout point of view the comments thread could be pushed down below the two iterations that you are comparing and become the full width of the page.

[kytrinyx]

Hearing your thought process is amazing @thomascullen, thank you so much for laying that out. And asking great questions.

[thomascullen]

No worries! Glad to be able to help. I'l keep an eye out for any other UX/UI discussions as i'd love to do what I can to help out.

[codeale]

@kotp @thomascullen Glad you like the idea
I'm no UI/UX designer but one way I can think of would be:

• Button on top that opens the comparison section, overlaying comments area
• A textbox that reviewer can drop in any code that they like
• A drop down that select and loads reviewer's codes into the textbox
  

[ErikSchierboom]

@thomascullen @kytrinyx I adore the redesign you did. So clean and readable with the focus on the code. As for comparing to another exercise, I'm not sure how to do that best, but it should ideally be quite prominent as I think it can be very useful.