Hacker News Reader

Comment by mabbo | Hacker News Reader

The UX for this page is a lesson. There's no affordance, no hints, that you should be moving sideways instead of the standard 'down' that websites typically use. The '1/5' made me think there might be more, but I guessed I was misunderstanding somehow.

It was only after I came to the comments and saw people talking about water jets that I realized there was definitely more content than a single picture. I had to go back and search the page for a clue as to where to find the additional content. The links I could see, 'previous' and 'work' took me elsewhere entirely.

Lesson: if you aren't following standard patterns, give the users strong hints as to what they are supposed to do.

View on HN

Damn, you're right. I had to go back to the page after I looked at that image for a while thinking "so what?"

I still think the same, but at least I now know I can see more images of it

Edit: Don't forget the big empty space at the bottom, the 1/5 indicator (that I now realise are pages) disappearing when you scroll, and text that highlights in the same colour as the background

> The '1/5' made me think there might be more, but I guessed I was misunderstanding somehow.

Same here, I eventually realised I could click on the "5" to advance pages. I didn't even discover the scrolling/dragging behaviour until reading the comments.

Same. And given the... simplicity of this "art", I figured this first image was all we get. It's no banana on the wall.

I literally had no idea there was more content until I read your comment. Scrolled a bit up and down, thought that was it and left.

I just spent 10 minutes exploring his site because of the odd UX. Good or bad, it was rather refreshing.

In terms of not following patterns, the selected text turning transparent is another confusing choice

It says 1/5. Just out of curiosity, what did that mean to you? Anyone who has used Instagram, Reddit, Facebook, etc. (i.e. most people) should understand this UI.

I knew there might be more content, but had no idea how to get there. It never occurred to me that I should move sideways. There was no hint.

And it's a shame because it's an otherwise really nice website.

Those uis also have little clickable arrows to the left and right of the image, at least on reddit. That is the kind of hint op wants.

I would at least have expected that I can swipe left and right to move between images, but on desktop Chrome (Mac), doing the standard "two finger swipe" just goes back and forth in the browser history.

You have to "push down" on the touchpad with a single finger to drag the images. It's utterly confusing. Hardwiring a webpage to "mobile phone expectations" is just as bad as expecting that there's a keyboard and mouse attached.

(I also tried the left/right arrow keys, but that didn't work either. What does work is clicking on the 1/5 numbers, but there's no indication that those are clickable links)

Two clickable arrows on the left and right edge would do wonder, or just go with vanilla HTML and don't create such a weird contraption :)

Arrow keys also work, but you need to focus the image first...

> Hardwiring a webpage to "mobile phone expectations" is just as bad as expecting that there's a keyboard and mouse attached.

Swiping didn't even work on mobile for me, I had to tap on the numbers and it moved me either forwards or backwards for some reason. It's broken.

Looked like a date to me.

Even noticing that, it's still not completely clear how to interact with the page. My right/left arrow keys don't work unless I first click the image

Well, for one; on mobile - they're incredibly small to try to press, furthermore, the scrolling to move between the images is completely broken on both my iPhones and my Mac.

As I said in another comment, this is one of the most poorly-designed sites I've ever seen on HN. I thought it was satire, as in like an example of what not to do in web design, I'm honestly shocked it's supposed to be taken seriously.

> It says 1/5. Just out of curiosity, what did that mean to you?

A rating by nouve-riche hipsters? tbh I didn't even clock it, as left corner is usually general menu / logo..

Location is context; Usually a progress counter like that for a gallery is presented either top centre or bottom centre, with additional widgets to indicate manual scrolability.

usually, pagination like 1/5 are accompanied with arrows, text like next/previous/first/last and clicking on the '5' usually takes you to the page 5, not the next one

Personally I use these apps, but I didn't expect that kind of navigation on desktop, so it took me a few seconds to realize.

I've gotta disagree, the first thing I did (before reading the comments here) was click on the 1/5. The UI made perfect sense to me. Horses for courses, I guess.

Hehe it didn’t occur to me to click the 1/5. Only the “1” is linked, it’s a pretty small target on my iPad, and it moves backward instead of forward… a little surprising. The 1/5 was enough clue to make me try scrolling sideways, after trying vertical, so it took a sec.

Is the “x/y” think usually clickable on Instagram or whatever? I was completely unaware of this.

Swiping left and right is supposed to work on this page but barely does. I find I had to swipe multiple times to get it to change images.

I agree with the criticisms. This page design is pretty terrible.

Two transparent arrows (one left, one right) would've solved it. The numbers don't look aesthetically well, compared to the images and mechanic of the scrolling. Stick with your theme.

To me it was cursor: pointer; that made me interact with the image.

worse still is using this on ios at least is a nightmare as swiping/scrolling sideways didn’t work so you have to click the numbers

works fine with javascript disabled

Reply on news.ycombinator.com