Hacker News new | ask | show | jobs
by ComputerGuru 3077 days ago
For a website all about UX, the site is almost impossible to use (at least on mobile), both from an intuitiveness perspective and from a technical one.

I am entirely unsure what I’m supposed to click on, if what I’m seeing is an animation or a loading progress bar, the back button gave me a blank, black page, and everything on the site would be better if it were simply static html without all this JavaScript garbage that serves exactly zero functional purpose.

9 comments

I clicked on one of the book covers and ended up with an abstract full screen animation that ran for five seconds before I figured out it was a full screen page header.

I'm confident that web design is the way it is mostly as a means to keep the people that work with it employed. A simple, straight forward implementation with a little color and layout to make it stand out would have been much easier to navigate and digest, but making check boxes not look like check boxes, drawing cryptic metaphorical icons, random show-off CSS animations that serve no purpose etc. creates work opportunities.

I'm open to the idea that I belong to some sort of cynical minority, but I know for sure that it often happens to the detriment of things like ergonomics and usability. When I see a site like this I can't help but think that they never considered the experience they're supposedly designing.

>I'm confident that web design is the way it is mostly as a means to keep the people that work with it employed.

I work with web designers and can corroborate that.

Most of the time, their product is sold, negotiated and approved before anyone has actually used it. An unusable mess can be a "successful" project, while a usable product can be completely kiboshed and not even paid for or used. This pushes the emphasis towards beauty instead of functionality, often to the latter's extreme detriment.

This gets worse when the stakeholder has some pet attribute they believe is important, especially "cleanliness." These "clean" designs mindlessly strip away anything that can physically be stripped away, without regard to its importance. As long as the design still kind of reminds the client of their company, they don't see it as a problem.

It doesn’t help that the designers often do not code and model the experiences in animation software.

I am currently working on a redesign and just saw the agency’s suggestions for animation. Seem to be highly influenced by iOS apps’ transitions and motion. But this is a website, for browsers, to be displayed on a variety of screen sizes, on a variety of browser versions.

And the users of my website use mostly other websites so if I create something that behaves very differently, the training they have will be wasted and the experience — unintuitive.

So the agency will present this to high management, in an ideal layout, designed in animation software, moving perfectly smoothly and solving for only one case without a clue on how to approach corner cases. If management finds it sexy, we’ll be stuck with development and maintenance of ultra complicated code. And the pleasure of discovering and resolving all corner cases ourselves, on a deadline, with limited budget.

> It doesn’t help that the designers often do not code and model the experiences in animation software.

I don't think even that is a good enough reason. They simply don't approach the problem the way someone using their app would. It's the developers' problem to turn a difficult design into code, but the real problem is that even when that is done perfectly, the UX still sucks.

Every time we redesigned a major UX component of the dashboard of our (desktop) app, we would grab a random secretary, HR person, accountant, or anyone else we could find and borrow an hour of their time and just watch them try to use it without any prior preconceptions that come as a result of designing/coding the interface yourself.

It's been 10 years since we used that trick and I've moved on from that company, but I still think it's the best approach I've ever come across short of outsourcing some sort of panel testing.

User testing is a must have for digital design, otherwise the designers you work with are just graphic designers who pretend to know the tenets of UX through skimming some medium articles occasionally and do a great disservice to us folks who come from academia with degrees in HCI.
>So the agency will present this to high management, in an ideal layout, designed in animation software, moving perfectly smoothly and solving for only one case without a clue on how to approach corner cases.

Oh lord, I don't really have to deal with complex animations on websites. Even though I wouldn't be the one physically building it, I don't look forward to the day. That sounds like a 2d problem becoming 3d.

IMO, the problem is that the ones that approve the look-and-feel aren't exactly the users, but the hirers. And since they already live inside the company, some things might make sense to them, and not the wider public.
Yeah precisely. The CEO can connect the dots, so they don't stop to think if a customer could connect the dots, or if anyone would bother to think that hard (about their cryptic site, which is 7th website of 10, in a row of browser tabs).
Even on the desktop site it hides the navigation. It could use an index on the left -- not to mention that the entire law page is so brief that it does not need its own page.

Which one of those laws tackle UX bloat and ornament for ornaments sake?

The site is pretty, that's true, but it's not made to be a useful source of information, it's made to be pretty above all else. The entire site is a great example of what to do if you want to make information minimally accessible and create a vapid slideshow.

The irony is that they're perfectly demonstrating the importance of Jakob's law (03): "Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."

  users prefer your site to work the same way as all the other sites
And yet, the last one contradictory reads: "[…]when multiple similar objects are present, the one that differs from the rest is most likely to be remembered." There are no such things as 'rules' in this field. People don't realize how wishy-washy this is and because of that, they throw around some arbitrary rules and then write about it on Medium in a desperate attempt to show authority and demonstrate expertize in their line of work. I could whip out ten other rules that are more applicable and closer to the digital sphere, starting with the notion of 'functionality' instead of some overly complicated and obtuse lingo. In fact, the very first slide has a very weird syntax to it.
And most other sites have dark text on a light background, not light text on a dark background.
User testing is a must have for digital design, otherwise the designers you work with are just graphic designers who pretend to know the tenets of UX through skimming some medium articles occasionally and do a great disservice to us folks who come from academia with degrees in HCI.
I share your opinion. I guess I'm in the minority too.

Maybe we need a flag or some banner, or something.

Some rare and unique symbol, like an unstyled form submit button.
It also creates differentiation in a competitive world.
Different doesn't equal better.
how are measuring "better"? If it wins you a contract, then the market has judged your fancy-checkboxes as "better"
Not necessarily. There's a good chance there was just someone who knows nothing about UX and is never going to actually use the software approved it for others to use. Or it might be that despite a poor UX, it's still the only product to do what you need. Despite a poor UX, it's better than the other guy's even worse UX, at least for now.

There's been loads of software that has been successful just by taking the idea from already existing software and making it more user friendly.

You seem to be confused about better in the objective sense. I am saying that designers make things fancy to get attention, especially from product managers. No claims about what is better need arise. From the perspective of the ux designer, they are doing what the market is selecting for and rewarding them for.

By analogy, You don't get to claim what is better in evoulution and natural selection. There is only what is selected for, which might not have any preference for what you consider good or not

That's IMO the root of the problem. Market works as it always does, it optimizes for profit. So things are designed to be sellable instead of useful.
can't even program a computer these days without becoming a marxist!
While dark patterns make money, I choose to not engage in them because I also value trust, convenience, long term relationship and this means that I create certain experiences for my client.

Just one example where profitability is unfit to be the only criterium.

I did not assume "dark patterns". I am explaining behavior from the viewpoint of the UX Designer, especially getting work. As a product owner, you are free to choose what you want to prioritize. You don't get to chose what other product owners prioritize. Some product owners really like fancy checkboxes. go to any apple page and tell me if you see standard, unstyled html text boxes, combo boxes, and check boxes.
I was undecided until middle-click opened in current tab.

That's not what I asked for. Let my browser do its job.

Edit: And right-click behaves like left-click! Non-standard and annoying. So much for "Jakob's Law".

That is an unforgivable sin of web design: do not highjack the open-in-new-tab/new-window keystrokes.
I've noticed some sites hijacking Alt-ArrowKeys now, too. Since backspace was deprecated, that means those websites prevent the user from using the keyboard to go Back. Very frustrating.
Even on a desktop I find its UX annoying.

It only feeds you a morsel of information at a time and you have to wait for stupid animation transitions in between. I read two panels then left.

This information could easily have been presented in a normal HTML document.

perhaps the author was going for the clockwork orange esc feel of discomfort so you should actively think about the ux you're experiencing
perhaps rename the website to lossofux.com
lawsux.com, maybe.
Laws 'o fux?
331K transferred. Less than 1K of actual readable text.

In the about section, the author brags about using Sketch, Gulp, SASS, Nunjucks, and a third-party font. Seriously? He couldn't have just envisioned that thing in his head and put it straight to code?

It's actually 1.3kB of text. Here's the entire contents of the page, for anyone else who can't read the original. Clicking on each entry brings you to a page with the same text and a Wikipedia quote on the origins of the law and a couple sources for further reading:

1. Fitts's Law: The time to acquire a target is a function of the distance to and size of the target.

2. Hick's Law: The time it takes to make a decision increases with the number and complexity of choices.

3. Jakob's Law: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

4. Law of Prägnanz: People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.

5. Law of Proximity: Objects that are near, or proximate to each other, tend to be grouped together.

6. Miller's Law: The average person can only keep 7 (plus or minus 2) items in their working memory.

7. Parkinson's Law: Any task will inflate until all of the available time is spent.

8. Serial Position Effect: Users have a propensity to best remember the first and last items in a series.

9. Tesler's Law: Tesler's Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced.

10. Von Restorff Effect: The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Basically, the whole contents of this website fits in a average-sized HN comment.

This is what I mean when I say about "toys" vs. "tools", or "designing for sellability" vs. "designing for delivering value". Your version of that site delivers pure value. Anything more than that - like e.g. images vaguely related to content - is just wasting user's attention, bandwidth, compute and power bill.

Law/Effect:

1. Fitts: The distance to and size of a target dictate the time to acquire it.

2. Hick: The number and complexity of choices increase the time to make a decision.

3. Jakob: Users prefer your site to work similarly to sites they know.

4. Prägnanz: People exert the least cognitive effort to interpret complex images.

5. Proximity: Proximate objects are grouped.

6. Miller: The average person can only keep 7 +/- 2 items in their working memory.

7. Parkinson: A task's duration matches its allocated time.

8. Serial Position: Users best remember the first and last items in a series.

9. Tesler (aka "Conservation of Complexity"): A system has irreducible complexity.

10. Von Restorff (aka "Isolation"): What stands out is remembered best.

> He couldn't have just envisioned that thing in his head and put it straight to code?

That's a pretty snobby thing to say. So what they needed to design something in Sketch. So what they used Sass and Gulp.

If you're deriding someone for using a tool to help them with something, can you be derided for using a napkin to sketch an algorithm or something?

I believe the author is being derided for being inefficient to the tune of 33000% or so.

It's like buying 300-some-odd napkins and a similar number of pens so you can scribble a phone number on one.

I'm not so sure, unless it's a total misunderstanding from the person chiding them.

Sketch doesn't add to final size. Neither does Gulp. Sass and Nunjucks might, but it's a website. They tend to need HTML and CSS.

You're absolutely right! Sketch and Gulp don't add to the final size. And HTML and CSS are needed.

So let's be generous! I'll assume that 4x the core content size (1.3k) is needed for markup and presentation, for a total of 6.5k. Round a bit... that's still 5100% inefficient.

I can see why some might consider that a bit inefficient. Of course, I can also see why some might consider the design the most important part of the site.

The most annoying thing on that kind of scrolling UX for me is the fact that when you scroll down, navigate, and hit the back button, you end up at the top of the page and have to scroll down again.

(At least on my iPhone 6)

I actually liked some elements of the mobile experience:

* Hamburger menu upper right (90% of people are right handed) * Sticky top menu with breadcrumbs * Consistent back button behavior

Only nit was large graphics/icons and requirement to click on them to "reveal" the law. That content should have been front and center on home page with drill-links to details.

On desktop it's awful too. I scrolled for about 5 seconds and decided it wasn't readable.
> the site is almost impossible to use (at least on mobile)

> I am entirely unsure what I’m supposed to click on

As a tangent, I wonder if we'll be stuck with "click" being a very common word to use to refer to following links when it makes no sense when in the context of a touch screen. English is littered with words like that, so it's possible it's here to stay, but occasionally (rarely, I admit), it jumps out at me as oddly out of place as it did here, even through it's entirely obvious what was being communicated.

I've built sites before where the term "click" was automatically changed to "tap" on the mobile version.

It was just a function embedded in the multi-language routines.

4 or so years ago, I remember a frustrated Dev printed out signs on our floor at Zynga that was focused on the then early-mobile efforts that said “It’s a tap not a click!”
It is possible to click on a mobile device, although lots of software just treats it like a very precise touch, which makes no sense.
The site works fine without JavaScript.
I just tried. Actually, the site UX is so bad that it gracefully degrades without JavaScript enabled. The animations, the low information density, and all the other atrocities translate "perfectly" when browsing without JavaScript. smh