A kind of an opinionated tl;dr
I particularly love what you did with the titles - practical advice, each backed by the appropriate "law", reads nicely and forms a clear picture in my head.
Having lots of detail is not equivalent to being complex.
Ie removing the leading zero breaks some sorting (Eg .mp3 files on an album where you know the number of tracks and hence how many leading 0s you need)
I hope mods replaces yours with the original.
Thanks.
There's also CTRL+F in the browser. For the love of all that is holy, don't break it.
I'd be careful with this one and be sure you understand what you are doing on a case-by-case basis. I have noticed a thing which I'm not sure there's a name for, but I call it Emphasis Blindness.
Similar to Banner Blindness, I think users today are often trained by habit to ignore things that stand out as some kind of obvious promotional item.
For example, you have 5 items in your navigation: Process Company News Blog Shop, and Shop is the most important, right? So you put it in some kind of special placement, and give it a button-like appearance with a special color and an outline. That doesn't necessarily make it easier to see! In some cases your users might just be looking through the "normal" navigation and not see "Shop". They will skip right over your large colorful button because it looks like a promotion, which they are trained to ignore.
Something to consider anyway.
I think a lot of the hate comes from people seeing that it's about UX and want to immediately tear it down for not being how they personally prefer information (apparently, if it's not the most information dense way possible, they don't like it).
I actually think having a distinct picture and making you scroll a bit helped me. The distinct picture is a good mnemonic and makes each law stand out from the others (especially by using different colors). If you had them all squished together with no scrolling necessary and no colors, it would be hard to distinguish between them. Sure, it might be more efficient to scroll through, but that in itself might be the point: reading through something and actually grokking it does not happen by scrolling through it as fast as possible, so why optimize for that?
It looks fine on mobile to me. The only real complaint I had was losing my position on hitting back, but I wouldn't jump to the conclusion that they consciously made it do that. Probably just a bug/oversight.
You don't get it, you just minimized and dismissed everyone's objections to this site.
As a power point presentation, this site is great. As a line item on your resume, sure.
As a resource that someone can use and reference, it's awful.
Arguably, the rest of the site is also a major design error. Its style over substance approach doesn't look or work like most web sites.
In fact it looks like an excuse to design a set of virtual retro book covers that reference the stylings of the late 1960s and early 1970s.
I have nothing against vintage book covers, but it seems like an unusual choice for a site about modern web design.
I was one of the critics and I gave very explicit, objective criticism on the points I considered awful. And it has nothing to do with what your arrogant intelect generalized.
That's some very thick and obvious rhetoric.
It's a few different fallacies rolled into one, most notably a Straw Man.
You are in essence defining your opponents terms by your own book to shape the argument in a way favorable to you, instead of approaching the criticism from an objective and open-minded perspective that respects the actual position of the critic.
Awful experience.
It looks like the author is a talented graphic designer that decided to compile the laws of UX without reading them (actually, I wouldn't know, as there was too much friction for me to read them all)
The site is doing the equivalent of advertising as "rules of efficient chair design", and then listing laws of thermodynamics.
And the corollary: “Don’t fear information density. Remove decoration if it allows faster access to the information that matters.”
Also, frankly, this is nearly a dadaist instance of a web page.
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.
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 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.
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.
Maybe we need a flag or some banner, or something.
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".
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.
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?
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.
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?
(At least on my iPhone 6)
* 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.
> 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.
It was just a function embedded in the multi-language routines.
Customizability. Users could set up their own hot keys, and even their own tool bars.
Discoverability. Every UI widget (knob) had a tooltip, which explained its function. When a menu item was being browsed, there was a help line on the bottom that explained its function. Items that could be clicked were either visually distinct (such as buttons), or highlighted when hovering over them.
Regular users didn't set up their own hotkeys or their toolbars. And they definitely didn't read the help or tool tips.
The best UX for regular users, not interested in computers, is somewhere between websites and mobile apps.
Which is precisely what modern UX makes harder. You see, regular users aren't "neanderthal users". They have a brain and some amount of focus, and if they have to use an application/website more than few times, they'll figure out and appreciate any feature that lets them do their work more efficiently. Unfortunately, modern UX trends are all about removing productivity, turning tools into toys.
Many of us have graduated from users to superusers to sysadmins or devs but modern software feel quite dumbed down compared to the options we had.
I don't recall any desktop app from the 90s whose features would be discoverable by even a 3-year-old.
This site breaks so many conventions of the web and normal navigation I don't even want to start listing them.
Bad SPA sites are the full page Flash sites of today.
* Expectation is subjective and this forum are the minority
* History-jacking done badly is not a reason to throw out a technology
Random JavaScript hate is so last year
Unfortunately, the way something looks is but a tiny, tiny factor in the scope of the overall UX. This totally falls apart as a reference piece that I can bookmark and go back to from time to time. I think this is also compounded by the fact that the content of the site is centered around preaching good UX - but doesn't adhere to it's own advice. I can forgive lapses in UX thinking on software engineering blogs or the latest and greatest crypto forum...but if your site about UX has bad UX, you're in for a bad time - especially on HN.
Wiki puts it at 4 +/- 1:
I think the problem people are struggling with is that it's a site created mostly for fun and delight, but the message is about "UX", which people generally think of as a way to maximize efficiency.
Products don't always need to be relentlessly efficient to be considered useful or "good". Some products are created for you to just enjoy.
Super positive. We love it.
Blows my mind. But that's the point - it's really like two very, very different ways of thinking about, approaching/creating and evaluating projects (in this case, a web site.) On one side, they have "an eye for design" that really appreciates this novel UI design, but on this other side, we have that eye for efficiency and... ahem... user experience. (Rather than how a designer might experience something.)
Everyone is taking this fairly seriously. I doubt HN is the target demographic for this sort of thing though.
This should come with the footnote "unless you're Facebook". I wonder if they're fully aware of the power they wield in defining what normal/expected UX looks like to a so many people? (e.g. popularizing the mobile three lines 'hamburger' menu, then later moving away from it themselves)
I mean, even site of huge companies are not necessarily the Facebook of anything, since that’s just not the use case. I would, for example, argue that this law applies perfectly and without any qualifications to Apple’s website which might see a lot of traffic, but it’s not exactly a site users spend most of their times on. (I would also argue that the website people actually do spend most time on exists in a certain context where the outside world will have some influence on how and how efficiently it is perceived and used. Obviously the website people do spend the most time on has a role in forming that context, but so does the web as a whole and every single site.)
Oh, and I do think Facebook is very aware of that fact, but you still have to see that they are always wrestling with the status quo, i.e. for them the law takes the form of “Users spend most of their time on other sites or on the old variant of your site. This means that users prefer your site to work the same way as all the other sites they already know or your site as it was.“
It’s not exactly easy for them, even if they get to be expectation-defining and their power is not absolute. The stakes are high.
Miller's Law - The average person can only keep 7 (plus or minus 2) items in their working memory.
[1] https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus...
<ul>
{% for law in laws %}
<li><strong>{{ law.name }}</strong> - {{ law.summary }}
<a href="{{ law.wikipedia_url }}">{{ law.name }} on Wikipedia</a>
</li>
{% endfor %}
</ul>Something in this direction would be Bootstrap's templates:
https://getbootstrap.com/docs/4.0/examples/
I dunno about you, but I'd rather not have to think about how to make project sites look like every time, but at the same time not necessarily use the same purchased template (because said template may not actually have a good UX).
The fact that there are no standards here is part of the problem, IMO. Novelty drives views and therefore revenue so some sites are incentivized to be overly complex, imo.
UX is figuring out what should be a main menu element and what shouldn't. Home and princing? Definitively. ToS and privacy policy? Not so much.
UX is making some elements stand out as they are. What's the best way to show links to users? Spoiler alert: blue color and underline. But then what happens when your brand color is blue and the design has a blue background? Then links won't stand out.
You could say that the UX plug-and-play solution is the way browsers handle the default CSS, add a few more styles and you got sites like CraigsList and Pinboard. And brutalism web design was born.
But that's the visual part about UX, you have to figure out what your users are feeling, and for most starting sites, feeling good is the selling point, so you have to understand their psyche and design towards it.
Maybe we need a number 11, "don't use weird fonts"
https://mobile.twitter.com/UXColumbo/status/5978387232633651...
Nice, huge, Fitts' Law-optimized button though.
It seems that a lot of things these days are being extremely simplified beyond their point of usefulness and that things are always too small and too cumbersome to click, and require extra clicks because "wow such empty-ness and whitespace-ness".
Fitts's Law tells me nothing about what it is other than its a UX "law" coined by someone called Fitts.
I want to know which ones are most relevant to me. I'd like to see a summary for each one so I can make that decision before loading another page. Otherwise, I needlessly have to click on them, make a decision and click back if not.
This is similar to how a blog typically shows an excerpt for each post on the blog index. See Jakob's law.
Personally, I would significantly expand where Hick's law should not be applied. Examine the example provided that compares two remote controls: one with a common suite of buttons, and another with a dramatically reduced set of buttons. The site seems to suggest that at the very least the stripped remote yields ratings of "better user experience" from users. I would argue that such ratings alone should not drive UX decision-making.
In my life, I have seen the trend of simplifying user interfaces chip away at functionality in virtually every interaction I have with technology, and I don't feel better for it. I really miss the opportunity to more finely control devices and applications according to my needs and wants. The most recent technological epoch—focused so much on mobile devices as it is—has been among the most pronounced with its stripping of functionality (ostensibly to make things easier to use on tiny displays).
I often feel that this law is misapplied, perhaps subconsciously as an excuse to not build more comprehensive functionality. Why build a hard button that can turn on and off Closed Captioning when you can just put that in a menu, or better yet, not implement Closed Captioning at all?
(To be clear: it can be perfectly fine to hide infrequently-used features in special menus. I use about:config in Firefox routinely. What bothers me most is that, for example, the browser on my phone doesn't have a tenth the options of Firefox and certainly doesn't have anything like about:config. The argument this is because it's a small screen device seems hollow to me; the real reason almost always rings of laziness and contempt for customization by users. Sometimes it will be spun as a means to reduce testing time—laziness by another name—as if mobile software has had any track record of being tested more thoroughly versus old desktop software.)
Designers, hear my plea: Let's start pushing back on Hick's Law. Yes, in cases of needing a fast decision, a stripped user interface is agreeable. But in many cases, we're not acutely rushed while using our devices. Generally, I want more functionality from technology, not less. Stop using a UX law as cover for laziness and reduced feature sets.
[1] https://uxplanet.org/design-principles-hicks-law-quick-decis...
I use about:config frequently on my phone - is a pain to use on a phone however. Here's an idea. Use software on the phone but allows users (who wish to) to do deep configuration of phone software on their desktop computer.
I have the opposite complaint about most phone apps - they expose complexity on screens where it's not appropriate. Good software on any platform should "make common things easy and hard things possible".
Conservation, momentum, trying to force people to use physics concepts for UX, for crying out loud, is anybody taking this seriously?
The usefulness of a web page is a function of the multiplication of the number of laws it cites w/o any context whatsoever and the ratio of the lines of text such page contains in a screenful over how many it could've contained.
> The time to acquire a target is a function of the distance to and size of the target.
Wat?
> The time it takes to make a decision increases with the number and complexity of choices.
Certainly. But this is as relevant as general relativity to designing UX: the context is the key. What are you making, for what purpose, when, for whom? In this form in which it's put forth here, this can mean about anything.
> 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.
This is SOOO WRONG. I probably don't spend time on those sites because I'm in love with their UI, most of the time I'm fighting it with uBlock and patience. Many people are in prisons, that doesn't mean they like it.
> 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.
Again, this means nothing. It's like, "stones are hard". Alright then, what am I supposed to do? Sand them? Hit my head on them? Throw them at passers-by?
> Objects that are near, or proximate to each other, tend to be grouped together.
Alright...
> The average person can only keep 7 (plus or minus 2) items in their working memory.
Yeah...
> Any task will inflate until all of the available time is spent.
Oh, thanks...
> Users have a propensity to best remember the first and last items in a series.
This is kind of immediately useful, but it's also neat that this rule is ignored in making this fancy bulleted list.
> 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.
Agree.
> 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.
Certainly true.
This web page is a good demonstration of bad UX: there certainly are some stuff there that could be useful, but no indication of how that can be possible is made, no explanation of what is before the eyes of the reader is there, the only means of interpretation provided to the reader is intuition, illegiblity is swiftly achieved by using black font on a nearly-black background, the viewport is used with absolutely no care to efficiency, and there is a menu that requires JavaScript to operate. This is like a parody of a page on UX laws.
Put information on your web pages, people.
Even if the author is not a UX person himself and doesn't understand those things well enough to give better explanations, this is still not wrong. Users spend most of the time not on your website, but on other websites. This is important, because it means that other websites shape what users know and understand about websites' UIs, not your website and that users are not willing to spend time learning your website's UI. So you have to learn how other websites do it and apply the same concepts in order to make it easy for people to use your website.
If you need to move the cursor far and to a small target, it will take a long time to hone in on it.
The shorter you have to move it, and the larger the target - the easier it is to click.
For example the menu on macOS is always at the top of the screen, making its target HUGE and is therefore basically O(1) to hit.
The cargo-cult reading of Fitts' work which is so prevalent nowadays probably accounts for many of the instances of cargo-cult UX design that are so popular today.
Ergonomics was and still is it's own thing. It very much relates to the physical world exclusively.
If it's your job to improve the user experience, you're doing a bad job if ergonomics is not a consideration.
Yes, we spend more time on other sites and therefore, we are used to the UX patterns used on other sites, but that doesn't mean that all other pages are doing good.
Actually, we do not choose the sites we are on purely based on UX patterns. Instead we choose the sites by the service/functionality they are offering.
So assuming that other pages are doing good UX and inventing new patterns will irritate users might be a good advise for junior UX designers, but UX experts should always question the status quo and search for improvements. So defining it as a law to stick to the UX patterns of the majority of sites is just wrong.
For years we were seeing the burger icon (3 horizontal bars) as an icon for menus. It took quite a while until it became a well known standard to add some 'Menu' text next to it (as you can see it on the Laws of UX page).
So for years we had a pattern on most sites which was not optimal. Just using it because everybody else was using it, didn't solve the problem that a majority of users did not understand or knew the icon.