- In the header, it looks like you're using the same text style for the inactive navigation links as the helper text ("Logged in as").
- Icons should be used to help clarify things, but most of the icons seem to be just arrows pointing right on links. You can probably omit them!
- In the source tree, I had no idea I could click on the file names until I hovered over them by chance. Blue text alongside black text is a very strong signal that the blue text is a link and the black text is not. (Also note that in the file path at the top, the ancestor directories are blue and clickable while the current directory is black and not). Here is where an icon would be useful: to disambiguate between directories and files.
- Not a visual UX issue, but an accessibility one: for whatever reason, keyboard navigation doesn't work for me in Firefox.
In general, just try to have consistent styles for things, and consistently different styles for different things. Links should look like links, not unclickable text. It's okay if you take a bit of artistic license in specific places (like the main navigation) but things should at least be internally consistent within that place.
>Icons should be used to help clarify things, but most of the icons seem to be just arrows pointing right on links. You can probably omit them!
I discussed my opinion on icons in the article, and I stand by it in this case.
> the source tree, I had no idea I could click on the file names until I hovered over them by chance. Blue text alongside black text is a very strong signal that the blue text is a link and the black text is not. (Also note that in the file path at the top, the ancestor directories are blue and clickable while the current directory is black and not). Here is where an icon would be useful: to disambiguate between directories and files.
Good point. I don't want to add an icon, but I should make filenames underlined or something like that.
>for whatever reason, keyboard navigation doesn't work for me in Firefox.
That's bizarre, it works fine for me. Can anyone else reproduce this?
I'm on Firefox Developer Edition, 66.0b9.
I went to https://meta.sr.ht/ and tried to tab through the site. Here's a gif: https://i.imgur.com/2dQL2C2.gif.
Explanation of gif:
I clicked on the search bar, then clicked on the site, then pressed tab repeatedly.
Seemed like the most appropriate place to put it.
The way you wrote and posted this article, there was an implication to me (and I'm guessing to others) that you think this design philosophy is better than what most other people are doing. The article would benefit from some qualifications, e.g.: "I'm still teaching myself UX and aesthetic design," for example. As it is, it comes across as a strong argument from someone who thinks he's an expert (and thinks other people's design decisions are wrong).
In terms of resources, you could take a full-semester class just about typography. Designing UIs is really hard and requires a ton of research. I've spent hundreds of hours over the last 10+ years just reading books and articles, and I still consider myself an amateur.
My strong recommendation is to pay someone who is great at UX and understands how to accommodate people with physical disabilities. Even people who are just 40+ years old (and not disabled in any way) are getting significantly less light coming through their retinas, and it's possible to choose fonts and colors that are difficult for them.
You can find someone who could revamp your stylesheet in a couple of days, and it shouldn't cost you more than $1k-$2k with the right person on Upwork.
You seem to be great at a lot of other things, so why not find someone who has equal depth at UX design? As a generalist myself, I often rely on specialists because it's truly impossible to be great at a large number of fields.
If you want to take a DIY, some good initial resources are:
- https://alistapart.com (note that its design is very functional and minimal, but still uses fonts, colors, and whitespace in a helpful way)
I thought I covered this pretty well in the conclusion: "I’m not a particularly skilled UI designer, so keeping it simple like this also helps to make a reasonably nice UI attainable for an engineer-oriented developer like me."
Outside of that, thank you very much for the resources.
I took "not particularly skilled UI designer" to mean that you're not very good at Photoshop and/or you don't want to learn this skill. It seemed (to me) that you're against the idea that UX design is a complex skill that people should learn before becoming a vocal practitioner of UX design.
I also pay more attention to the difference between "UI" and "UX" than most people do, I'm sure.
Like I said, I think (based on upvotes) that my impression was shared by others, but that certainly doesn't mean it was correct or universal.
It often seems like half the people here are only happy on original DEC VT-100 terminals, and the other half are only happy if they can transform the web into an Xbox game.
And if all else fails, remind yourself that Craigslist, fleaBay, and PayPal didn't become billion dollar companies by throwing around a bunch of gradients, animated GIFs, or whatever the latest craze is.
Generalizing about the HN community has nothing to do with what I said.
If you specifically think that most text and links should be the same, that buttons and non-buttons should be undistinguished rectangles, and that margins should bump up against the sides of the browser, then please say so and explain why you think these things are better for usability.
On the file page, the links at the top (git, builds, todo, etc) have a hover effect, the links to ~sircmpwn and git.sr.ht do as well. The links to summary, tree, log, refs and contributors do not. From context, it's easy to guess that they're links, but they should share a hover effect with one of the other links.