addihorowitz
commented
3 years ago 
Closed addihorowitz closed 3 years ago
addihorowitz
commented
3 years ago
github-actions[bot]
commented
3 years ago This issue is now marked as stale because it hasn't seen activity for a while. Add a comment or it will be closed soon.
Home page <----Corresponding screenshot on left column
1 Uneven spacing between label and dropdown arrow for getting started and community. Recommend reducing space between community label and dropdown arrow to match getting started.
2 Why not dropdown arrow like the other ones (getting started and community) that trigger the same behavior? Would recommend using dropdown and remove ellipses to set expectations of what may happen once a user clicks.
4 Assuming there will be description here?
5 I may suggest desaturating the faded ones so they are all grayscale and faded. The faded colors are kinda distracting/competing against the full colored/saturated ones.
6 Keyboard focus state for ‘getting started’ ‘community’ and several more on the UI are this lighter blue color that does not pass accessibility contrast standards against white backgrounds. Recommend sticking to the darker blue one of the outline of “constructhub” label to pass standards (but keep it the light blue version for the footer, where the background is dark). You could probably have better accessibility/color contrast by choosing a darker color for the outline of the cards and search bar + language dropdown too.
7 will the tags be clickable at some point? I got super excited bc they look clickable
8 top and bottom padding of cards are uneven. Recommend increasing bottom padding to match top padding.
9 looks like slight differences in vertical distance on the bottom section of card, recommend making even to balance it out
10 could be cool to have a hover effect to help user focus/be aware of the one they are considering, plus feels a bit more modern
11 when I click on the dropdown, the first list item is pre-highlighted which throws me off a bit. Shouldn’t it highlight once I decide to focus/hover my mouse onto the item?
12 the list items and their headers are not left aligned — the labels are slightly more indented than the items. Recommend having them left aligned for crispness, probably where the labels are not where items are.
13 worth considering a darker shade of grey for divider lines. Does not pass AA standards for graphical objects — though, because this divider is more decorative than necessary you can get away with having a lower contrast ratio — but the 1.1:1 contrast ratio on this is pretty hard to notice. [Image: construct-hub_detail-page-UAT.png]Corresponding descriptions on right column ---> Detail page <----Corresponding screenshot on left column
1 search interaction threw me off. When I see a search input bar, I expect to click into the input field to start typing, not a modal. I don’t hate the modal thing, but just feels like an unnecessary click. Why not embed the filter next to search bar that customer can select before pressing enter?
2 ideally have the top padding be the same across col1 and col2 to look clean/sharp
3 Is this a common icon to represent ‘dependencies’? I thought it was mostly a signal for “copy link” or something to do with URL linking
4 most of the UI language is a border with no shadows, so I wonder if we should just keep it aligned in style and have the alternate option also be a regular border instead of a shadowed border
5 same comment as for other page - try desaturating to greyscale to remove the color. Also, the go and .net logos could probably be bigger to fill up more space/give more even visual weight bc TS and Python are such nice fat even icons that fill up their space on all sides
6 this seems super important but also placed in an area that seems easy to miss and overlook. I might suggest placing it directly under the dependencies dropdown, or try it to the left of the language selectors since those two are tightly related, or even between the space of the tags and language selector
7 bullets in bulleted lists should be indented more to the right so that it looks like sub of lines above
8 there’s a hover state (underline) on all the headings but I can’t click it nor does it do anything. Don’t think we need the hover state if we’re not providing some additional interaction
9 is this supposed to be bold? Looks like some kind of markdown that didn’t translate with the double asterisks flanking the term. Also, when I clicked python icon, it still said typescript.
10 I like the precedence set by the “use construct” dropdown with the language label within the blue bar - keeps it within one unit (the code sample box/container). If we were thinking about putting the label typescript on these per the “typescript” value on top of this code sample, maybe try using the same pattern as the one on the use construct dropdown.
11 the placement of the divider lines dnt he spacing between H2 sections makes the sections a bit ambiguous. A few things I’d try: Option 1: place divider line on top of H2 instead of below H2 Option 2: place divider line way closer to bottom of H2 instead of having it so spaced out, and increase the top padding of H2 so it has more separation from section above
12 try to have these padding areas be equal and aligned to keep it clean and feeling less ‘squished’. Id try to make the left and right spaces be the same as the middle one. Or change all three to a value slightly narrower than middle one.
13 color of this code color fails AA contrast standards for normal text. Since code is so important, it may be worthwhile to choose a darker color that meets/exceeds AA contrast requirements. You can use this tool to check: https://webaim.org/resources/contrastchecker/
14 reduce bottom padding of required and optional tags. Looks floaty
15 the “linkable text/code” indication is difficult to know upon first glance. Everything is in blue and I can’t tell on first glance which elements are clickable things and whats not, so I end up hovering around to see what I can or cannot click. It may be worth worsting through a clearer visual cue/differentator to communicate what is linkable and what is not. (But also maybe its just me, if devs know that type = string theres not much to interact with/click and type=more complex stuff, theres more to learn/click, ignore me! Im not a dev)
16 it would be nice if the left nav auto-expands as I scroll down to deeper sections within the page