Hacker News Reader

Comment by smt88 | Hacker News Reader

The philosophy described in this article sounds like a naive guess at what makes things usable instead of reading the mountains of actual research on the topic.

For example, it seems like one tactic for "simplicity" or "minimalism" is that nearly all the text is in the same font (same size, same font face, and mostly the same color).

That tells my brain that everything is of equal importance. It's confusing and actually has the opposite effect of "bring the information you’re there for to the forefront" (the goal the article describes).

Many buttons don't look clickable, many links don't look like links (because they're black or gray, like the rest of the text), and the whitespace is a disaster on my screen (line spacing is very condensed, margins are all over the place).

View on HN

>many links don't look like links (because they're black or gray, like the rest of the text)

I strongly agree with this. I see that mouse-over styling is being used for links. I think links should be always formatted in a way that makes it obvious that they are links. In other words, I like the old-fashioned way of having persistent link underlines, or one could do what Wikipedia and others do and make all links consistently blue text, which seems to work well enough.

The naive approach would just be to underline everything. Here are some examples:

https://sr.ht/nK6J.png

https://sr.ht/LLUJ.png

https://sr.ht/MavH.png

Honestly I find this a bit distracting. I'm not opposed to adding underlines in a few places - perhaps anywhere that the links don't convey their nature with the blue color would be a good compromise. What do you think?

>What do you think?

I don't find it distracting. It is a bit ugly, though. I like ugly-but-functional UI, but I understand not everyone does.

The advantage is that I can see clearly what is clickable. For example, I did not realise the relative timestamps ("a day ago", "an hour ago") were links until I saw your altered screenshots with the underlines.

I think any of these would make it clear enough:

- All links blue

- All links underlined

- All non-blue links underlined

maybe use a slightly darker blue and a lighter weight underline that wouldn't contrast quite as much? (i'm not a designer so take that for what it's worth)

That actually looks great.

Author here, thank you for the feedback. I'm a little bit confused by your comments, though. Can you point out a particular page and some specific improvements you think would help? I admit that I'm not a great UX designer, I would appreciate help in refining my approach.

While I agree that the line-height could use a little work, don't take any criticisms from the HN crowd to heart.

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.

My criticism was specific: the site is confusing to use. It's hard to find what I want. I gave reasons for this.

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.

It's absolutely fine to be a not-great UX designer. I'm also not a great UX designer.

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)

- https://www.smashingmagazine.com/category/ux-design/

- https://designmodo.com/design/ux-design/

>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).

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.

You're right.

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.

Some things that stand out to me:

- 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.

Thanks for the feedback!

>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?

Re: icons, sorry if I was unclear — I'm not suggesting you add more icons, and I think your opinion in the article is good! I'm saying that it's not obvious to me what the right arrow means specifically, and (IMO) it's common enough that it adds visual clutter. For example, in the tree summary, "browse" and "log" have the right arrow, but the repo URL under "read-only" doesn't, and it's not clear why.

I can reproduce it.

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.

This is totally bizarre. I think it's a Firefox bug. Can you open a ticket on Firefox's bugzilla?

Done: https://webcompat.com/issues/27204

This... is not the Firefox bugzilla.

https://bugzilla.mozilla.org/ > New Bug > Report an issue with a website that I use

Seemed like the most appropriate place to put it.

Fair enough, I didn't realize that was a Mozilla thing.

I'm not a designer, but:

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.

Reply on news.ycombinator.com