Repository-design-updates.md

Repository design updates

We've updated the repository pages to be respoinsive, and made some layout changes to the Code tab. We've added a sidebar to elevate project information that previously has been a hidden behind clicks, and given more space to features that support the development workflow.

To enable this new design you can switch it on via Feature Preview, and if you have any issues you can diable it again too.

Profile dropdown > Feature Preview > Repository design updates > Click "Enable"

Open Feature Preview	Enable Repository design updates

We want to make sure these updates work for maintainers, and would really appreciate feedback on things like:

• UX and visual bugs
• Performance issues
• Confusing designs or navigation
• Anything that feels like a disruptive change
• Things you wish were different
• Things you love about it 💓

Please let us know what you think by sending feedback here.

Oh I didn't notice that, thanks!

@AdamJel wrote:

number of contributors

Reminder: GitHub grossly miscounts the number of contributors and the number it shows is not to be trusted. In curl/curl, GitHub says 608 contributors while a quick check with git shows 798 unique commit authors. It's a pretty depressing delta if you ask me...

I wouldn't be surprised if GitHub aggregated contributors by .mailmap and combined identities. Remember that you can specify multiple emails in your profile in case you switched them in between.

I don't know what it does, but in my case my count (the larger one) is using mailmap and with a polished "combined" contributor count.

If anything, there are many more things that I would rather see before the last commit message (as its own column; I don't have anything against displaying it as a hover for the date). One such indicator could be the number of total/yearly changes for a certain file. This statistics would actually be useful in determining how important/volatile this file is (and if needed, one could click and see the history for this file).

https://gist.github.com/broccolini/2245234ac3a4936049e8ffc13f376986#gistcomment-3327565

Wholeheartedly agreed with the the whole comment posted by @mikkovedru, but this part in particular.

A useful metric to include would be "churn" -- see this link for one possible way to quantify it, but many exist https://softwareengineering.stackexchange.com/questions/371653/measuring-file-churn-over-entire-project-history-in-git

Just to answer some of the comments regarding the sidebar's position. For me somehow the right-aligned sidebar makes a lot of sense on GH and it just feels wrong for it to be on the left.

The new design and icons look awesome. Hope dark mode support for the website comes next.

I don't like that the README is in the same column as the file list. It should use the full available horizontal space. Otherwise there's a huge useless margin on the right that's just wasting space.

Just to answer some of the comments regarding the sidebar's position. For me somehow the right-aligned sidebar makes a lot of sense on GH and it just feels wrong for it to be on the left.

Thanks for showing this, but it really does look better on the left.

Oh! Nice !

awesome !🚀

“previously has been a hidden” -> “previously has been hidden”

Good word find it amazing

💜

The new design is quite good.

A few points, most of which have already been raised:

• The tabs being aligned left but the content aligned in the middle feels jarring on most screens.
  It is not terrible on 1920x1080 screens but it is definitely very distracting and discordant on larger screens.
• The file listing column could be significantly wider on most screens (including 1920x1080).
• The sidebar looks best on the right to me, because the file list is the most important.
  This could potentially be a user-selectable option.
• The sidebar could also be wider on large screens (including 1920x1080 in my opinion).
• The sidebar could be sticky (but this is not particularly important).
• The lines/dividers between items in the file listing were very helpful to aid in scanning information.
  Removing them makes it somewhat "cleaner" but also harder to scan quickly.
  Either reintroducing them (including at a lower visual weight) or using zebra tables (or something like that) should be considered before introducing the new theme.
• The icons in the file listing should also link to the files.
  Most file explorers (desktop, mobile and online) allow opening files & folders by tapping/clicking/double-clicking on the icons.

+1 about not reducing the width of the Readme.
I write examples paying particular attention that there is no horizontal scrolling, but the new column is too narrow and I will need to rewrite some.

Overall, the redesign looks great and is refreshing. 👍

The new design is quite good.

A few points, most of which have already been raised:

• The tabs being aligned left but the content aligned in the middle feels jarring on most screens.
  It is not terrible on 1920x1080 screens but it is definitely very distracting and discordant on larger screens.
• The file listing column could be significantly wider on most screens (including 1920x1080).
• The sidebar looks best on the right to me, because the file list is the most important.
  This could potentially be a user-selectable option.
• The sidebar could also be wider on large screens (including 1920x1080 in my opinion).
• The sidebar could be sticky (but this is not particularly important).
• The lines/dividers between items in the file listing were very helpful to aid in scanning information.
  Removing them makes it somewhat "cleaner" but also harder to scan quickly.
  Either reintroducing them (including at a lower visual weight) or using zebra tables (or something like that) should be considered before introducing the new theme.
• The icons in the file listing should also link to the files.
  Most file explorers (desktop, mobile and online) allow opening files & folders by tapping/clicking/double-clicking on the icons.

Absolutely agree with everything except may be for point no 6. Employing these changes will definitely improve the UX.

beautiful and intutive

LGTM!

This feature is awesome! It makes important information readily visible and seamless to go through.

As noted in the screenshots at the bottom, which contrast the new Repository refresh feature, several observations come to mind.

tldr;

Overall, I prefer the old design which adhered to the laws of simplicity and constrained the visual display of data in a way that was concise and easily accessible. The previous presentation needed to be tweaked in my opinion rather than overhauled in such a disruptive way. Changes should be fewer or at least less enforced for users who may be overly sensitive and responsive to color and focus. A sidebar in this case may not serve the intent to provide a strong focal point when viewing a repository.

Background considerations:

Why are we making changes? Do the changes improve usage, and if so in what way? Are we adding functionality? The existing design was well-thought out and had very subtle effects that assisted developers in being productive. Colors, lines, typography, and prose all permeated the design to enable developers to instantly understand what we are looking at when viewing a repository. Change should be made cautiously in this case unless the disruption is warranted by some perceived benefit.

Given these considerations here is my feedback:

• Removal of the metadata from above the files makes the information less concise and less efficient
• An alternative to the removal of the metadata is to add more hover over features (as seen in hovering over contributors)
• The new sidebar panel is missing a toggle to allow readers to expand/collapse it
  (since this is the most disruptive feature it should be something readers can toggle as a preference)
• When expanded the new sidebar panel makes consuming information harder by increasing volume of the design
• The New pull request button is removed from the front page and adds additional steps to one of the most used features
• Changes to the styles (colors, shading) make it harder to distinguish between the documented code, information, and actions
  (the styling above the file between the main code page and when viewing files is inconsistent and jarring)
• Color considerations (the orange styling served a distinct purpose and was very useful to bring attention to the metadata)
• Spreading metadata over a larger area does not make finding the information easier

Thats cool

Very good, thank you 👋🏼

Cool! Great work!

Good idea but I would appreciate some tweaks like switching sidebar from right to left, or just hide it altogether.

Did you mean "you can disable it again too" instead of "you can diable it again too"?

Just to answer some of the comments regarding the sidebar's position. For me somehow the right-aligned sidebar makes a lot of sense on GH and it just feels wrong for it to be on the left.

I also think it looks better than on the right

Just to answer some of the comments regarding the sidebar's position. For me somehow the right-aligned sidebar makes a lot of sense on GH and it just feels wrong for it to be on the left.

Just to answer some of the comments regarding the sidebar's position. For me somehow the right-aligned sidebar makes a lot of sense on GH if you have some useful extension.

Repository main page become so asymmetric... Can it be somehow adjusted?

I really like the design of new buttons ("clone", "new issue", etc). Are those still bootstrap buttons that have been redesigned by you or it's new framework?