It's a pretty site, don't get me wrong, but which law suggests presenting lists of obscurely named concepts as fullscreen shape art where I have to click one by one to read the list?
Some of these may be more pertinent while analyzing User Experience compared to composing User Experience.
Occam's Razor: What is this control meant to do?
Pareto: does this UX cover at least 80% of the user's needs? Are there critical cases in the remaining 20%?
Parkinson's Law is more of a bank shot, but think of it along with the Pareto Principle: Organize the UX so that the user can accomplish the most important tasks in the least time.
No. I’m saying if you squint hard enough, then maybe you can think of how these apply to UX, but they don’t directly indicate some insight of UX, in any way like the others do.
> Occam's Razor: What is this control meant to do?
If that’s how they mean to apply it, they should phrase it as “users make the inference about the control that requires the fewest assumptions about how to model the UI”. There’s a big difference between saying how users actually act, vs how you as an engineer should infer, or what you should optimize for.
And yes, if the latter is meant, then it’s applicable on some level, it’s just not specific to UX (just making inferences about data in general), and even then didn't make clear how it would apply in a UX scenario.
>Pareto: does this UX cover at least 80% of the user's needs? Are there critical cases in the remaining 20%?
That wouldn’t be the Pareto principle, that would be “check the 20% for if you’re missing something critical.”
Again, a tangential application, if you stretch, just not direct like the others.
>Parkinson's Law is more of a bank shot, but think of it along with the Pareto Principle: Organize the UX so that the user can accomplish the most important tasks in the least time.
That's orthogonal to Parkinson’s law, which says that time spent will bloat to its bounds. What you’ve described is a different principle, something like “minimize the time average spent to do tasks, thus giving more weight to the more frequent ones”.
LATE EDIT: With that said, those three should definitely be part of any UX engineer's mental toolkit ... but only in the sense that they should be part of any engineer's toolkit. The specific applicability to UX isn't obvious the way the others are, at least.
> "With that said, those three should definitely be part of any UX engineer's mental toolkit ... but only in the sense that they should be part of any engineer's toolkit. The specific applicability to UX isn't obvious the way the others are, at least."
I think that's fair. I will say that I appreciate this site, but I do think the author had to stretch a bit to get to 20 rules. For instance, I would have had a section just on the Gestalt Principles because they don't make much sense by themselves.
Yes, I also don't see how to apply the #14 "Any task will inflate until all of the available time is spent." to UX. It's more form the area of management.
I think writing in tech for a publisher is probably not a viable career. I’m a full time UX person, and the book was a side-gig. If it had been my only income for the last couple of years; I’d be broke. It’s a great exercise for any expert in their field, but it’s hard to make a living writing. In my experience, YMMV.
I'll hazard a guess: the site is a portfolio piece, meant to show off both the author's ability to make artistic design, and their familiarity with some theory behind UX.
Aesthetic Usability Effect
01 Users often perceive aesthetically pleasing design as design that’s more usable.
Doherty Threshold
02 Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
Fitts’s Law
03 The time to acquire a target is a function of the distance to and size of the target.
Hick’s Law
04 The time it takes to make a decision increases with the number and complexity of choices.
Jakob’s Law
05 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.
Law of Common Region
06 Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
Law of Prägnanz
07 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.
Law of Proximity
08 Objects that are near, or proximate to each other, tend to be grouped together.
Law of Similarity
09 The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
Law of Uniform Connectedness
10 Elements that are visually connected are perceived as more related than elements with no connection.
Miller’s Law
11 The average person can only keep 7 (plus or minus 2) items in their working memory.
Occam’s Razor
12 Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.
Pareto Principle
13 The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.
Parkinson’s Law
14 Any task will inflate until all of the available time is spent.
Peak-End Rule
15 People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
Postel’s Law
16 Be liberal in what you accept, and conservative in what you send.
Serial Position Effect
17 Users have a propensity to best remember the first and last items in a series.
Tesler’s Law
18 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.
Von Restorff Effect
19 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.
Zeigarnik Effect
20 People remember uncompleted or interrupted tasks better than completed tasks.
<h1>Laws for good User Experience (UX)</h1>
<dl>
<dt><a href="https://en.wikipedia.org/wiki/Aesthetic%E2%80%93usability_effect">Aesthetic Usability Effect</a></dt>
<dd>Users often perceive aesthetically pleasing design as more usable.</dd>
</dl>
HTML-ified, tweaked the text, expanded the initialism :P
The site is beautiful and I couldn’t do it. But I’ll still be a bit judgemental. It breaks my first law of UX: don’t be self serving.
The first screen is a long scroll of 20 elegant looking blocks and titles none of which mean anything on their own. I have to click on each and sit through some superfluous animation before I can even get access to the explanation.
Because of the animation, t he natural flow of swiping back on my phone results in a really janky transition.
I have to say, I love the style of these graphics. Minimalism I guess? Reminds me of the University of Waterloo during my childhood.
This website is not giving me that impression. If anything, it reminds me of a style I associate with the 60s or 70s (namely a sans serif font coupled with geometric graphics that use multiple shades of the same bright color).
Lol this is not Memphis, which is an art movement from the 80s. "Corporate Memphis" is new term to describe the over-the-top illustrated landing pages which are very common in modern web design.
It seems you are conflating "Memphis" from modern web design. What we see on the Laws of UX cards is geometric abstraction.
Googling “memphis style symbols” gives no useful results, just poorly made stock art. The design of the site is not at all akin to the Memphis Group, which is characterized by a sense of whimsy and lack of gravity, clashing colors and dazzling patterns.
Regarding neumorphism, I’d bet that will be much like the “long shadow” trend of yore; an interesting style that is hyped until, a short time after, the appeal of the newness and uniqueness wears off completely.
I wouldn't call these Memphis at all, although Memphis certainly grew out of the same milieu. More than anything, these are referencing the look of Swiss style and mid-century modern book cover design, such as those by Rudolf de Harak.
It breaks my number one rule of UX for the web: don't fuck with scrolling. Native scrolling is one of the most natural interactions we have with our computers. Even a slight deviation is noticeable and annoying.
It also brakes the rule that all text should be selectable (so that people can e.g. copy past it to an search engine).
(The laws titles are not selectable on desktop/linux/firefox.)
Furthermore the short description of the laws does sometimes subtle differ from the actual long descriptions in ways which make major differences about how "correct" that law is.
I mean who expects the whole card to act as a link and as such need special handling wrt. selecting text? Especially if there is an explicit "link button" to navigate to the "more details view" just besides the card.
The funny thing is that while for some users the whole card acting as a single hyperlink is intuitive (even through there is no indication that it does) for others it isn't intuitive at all and at most they would expect it to behave like a normal tile (it looks like a title) .
The logo on the card being clickable and being a hyperlink on the other hand is probably expected by much more people.
Oh, wanna search for a cool band outside our platform, but there name is in Chinese or something else you don't have an IME for? TOO BAD, GOTTA INSPECT ELEMENT.
Found the short summaries sufficient for everything except Law of Prägnanz, which I can't see how to apply. Much preferred the name+blurb style over a bigger description.
Being judgmental about the UX is fair in this case since it is a site about UX.
Quite frankly, it has a terrible UX. It took me three visits to understand what you meant by access to the explanation. I could only find a bunch of uninformative slides and a blurb promoting a book on the first visit two visits. On visit number three, I found the explanations.
Why?
I originally interpreted the scrolling indicator as an advance to next slide button. When I clicked on the button it presented the new slide and the advance button disappeared, so I further explored the site by clicking on the learn more button. That presented another uninformative slide so I ignored the advance button. After all, why would I want to repeat an action that failed to produce the desired result the last time I did it? Noticing the next link, I clicked on that in hopes that it would produce a more desirable result. Unfortunately, it produced the same sort of result as the advance button. At that point, I just gave up and clicked on the Info button and saw the blurb promoting the book. I tried clicking on the links to the left, saw the uninformative slides, and concluded that it was a gawd awful promotion for a book that included nothing but chapter headings.
Those were my first two visits. On visit three, convinced that there must be something more, I actually tried the advance button on the right slide and discovered that it was a scroll indicator. By that point, I was already so frustrated with the experience that I just gave up on the site without seeing what the creator had to say.
As for the graphics style, sure it's great. On the other hand, taking the minimalist presentation too far produced a site that was more difficult to interpret.
Edit: trying to keep terminology consistent as my understanding of the site evolved.
>> ... a long scroll of 20 ... blocks and titles none of which mean anything on their own
> frankly, it has a terrible UX
I don't follow these critiques. The content and navigation of the site is quite clear to me. The trackpad/wheel scrolling stutters very slightly in FireFox on Windows.
I opened this site on mobile. The blocks are half as high as the titles, making them impossible to read. Clicking a block took me through soms slow animation, which always ended with some graphic growing into view, in the same colour as the text, overlapping with the first paragraph of text...
The problem that I ran into was the lack of clear visual cues that you are supposed to scroll, which is why I was referring to everything as slides. I simply clicked on the things that it looked like you were supposed to click on. If you approach the site in that way, you miss out on virtually all of the content.
In a way, I should know better. I landed on a news article earlier in the day that started with one of those dynamic infographics that you interact with through scrolling. I was at the point of backing out of the page, concluding that the article was the infographic, when a hint of an actual article popped up on the screen. While it is a visually, I also find it a very annoying waste of time when I am trying to find information.
(Incidentally, I didn't run into the performance issues that others have been mentioning even though I was using an 8 year old computer.)
It seems the site is designed for someone that wants to take ample time to meditate on and memorize the "laws" (it's basically flash cards).
So it's not designed for me — a person on lunch break, hoping to read at least 5 articles via Hacker News before my burrito is gone.
While I was annoyed there, I still appreciate it. It's a free resource. It's pretty. I gleaned a few useful takeaways (especially the idea of putting more important things on the edges).
> The first screen is a long scroll of 20 elegant looking blocks and titles none of which mean anything on their own. I have to click on each and sit through some superfluous animation before I can even get access to the explanation.
Bad user! You're not following the first law of UX:
> Users often perceive aesthetically pleasing design as design that’s more usable.
> Aesthetically pleasing design can make users more tolerant of minor usability issues.
> Aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually works better.
> Aesthetically pleasing design can mask usability problems and prevent issues from being discovered during usability testing.
You're supposed to go "oh, pretty!" and forget how crappy it really is! /s
Seriously now: the first law of UX should be that aesthetics are secondary to usability. If your focus is on making something "eye catching" or "beautiful" then you're doing bad UX. If designers followed that, we wouldn't have so many UX trainwreaks.
Oh my god, this is exactly how I feel about most modern software UI. It seems like it's optimised to look pretty on screenshots, rather than to actually be usable!
...and "pretty" is highly subjective. I find the current "sea of white/blackspace with almost no affordances" and "hide everything that could possibly be useful" trend rather repugnant --- but perhaps that's because it almost always comes with a lack of usability.
Yes, the "hide everything" trend is really annoying. An egregious example of this is how iTunes hides the track number and/or duration when you hover over or have a track selected: https://i.imgur.com/IhwHnfO.png
> [T]he first law of UX should be that aesthetics are secondary to usability.
I would argue that instead it should be aesthetics and functionality need to be balanced.
Your usability will suffer if lack of aesthetics obscure the usability of a tool. Conversely, your aesthetics need to be reigned in, so that they do not obscure the usability of your tool.
I dunno man, I don't think it's a tradeoff. Make a good UX, then slap on a nice color scheme, some shiny buttons, whatever. The hard part is making the UX good.
This is the biggest problem with tech today, making "eye catchy" software which is horrible to use and getting anything done (and I mean simple things as making a payment if it's just little bit different than the "designer" imagined, for example you want to add a note) is so frustrating because it takes so much time. Yet it was not like that few years ago.
Thanks apple I guess ?
EDIT: And then to make the software "easier to use" security goes down the drain. There is a small fintech bank where all you need to know is email and 6 digit pin number to pair the account with a phone. That is, the 6 digit pin number is all you need to know to access the customer's funds. Now keep in mind attacker wouldn't care about a specific account, just get loads of customer emails and try the most common pin numbers and fish what you can - there is no notification when a new device is paired either, indeed.
Not really the best user experience and use of my time if I lose my money and need to fight with the fintech bank to get it back or when my account gets locked needlessly.
The same goes for the constant redesigns. How is that mindful to the user if you change everything (again) so they need to spend their time to learn again how to use your app just to get the same stuff done as before.
The problem with many sites and free-to-use commercial products isn't that interfaces are designed around minimizing user interactions but instead that they're designed around minimizing the most profitable user interactions. This is what leads to email sign up forms and dark patterns taking precedence.
Let's comment: awful decision. The "laws" are not equally important and as a user I would expect that their order reflects that. It never even occurred to me it could be done differently.
To be honest, this site looks like some designer's playground, not something an UX expert put together.
I suspect in a lot of large organizations the first rule of UX isn't even make it aesthetically pleasing to users, it's make it aesthetically pleasing to PMs in product demos.
And they may or may not even interact with the software directly, or for very long.
Teams will build software aligned with the immediate incentives they have, never assume those incentives are even remotely close to those that might make the business succeed in the actual market.
> The first screen is a long scroll of 20 elegant looking blocks and titles none of which mean anything on their own.
The page behaves differently on mobile vs desktop, and that quote is a description of the mobile experience. On desktop, it also includes a one-sentence explanation of each law without needing to click through.
Just the first screen and then not the subsequent screens depending on where you click. I clicked around trying to figure out what to do and got to what looked like presentation slides with a prev/next links. I just saw text ("Doherty Threshold") and a meaningless graphic. Clicking on the screen does nothing. I didn't realize you were supposed to scroll down for more text, I just didn't see the scrollbar and I guess I wasn't looking for it because the page looked like slides.
Though to be fair, on desktop at least, I don't think the site breaks modern web conventions in any egregious way which compromise UX. In most critical respects it works like any other website: it scrolls normally, it has headings and subheadings, it links off to pages located at different URLs, and those inner pages have reasonably conventional layouts.
I agree that the mobile experience is broken. They should rethink the layout to add the summaries back onto the main page.
If I was offering advice to the designers, I would suggest they abandon the obsession with 100vh layouts and always have a little bit of scrollable content peeking in from the bottom. 100vh layouts evokes the slideshow metaphor, which changes how people expect interaction to function.
I would also restyle the "LEARN MORE" buttons to make them clearer. My brain somehow completely ignored them on first viewing. I saw them on subsequent viewings but the low contrast makes them not seem very clickable, I think they could be easily misinterpreted as shortcuts to the next content "slide".
Ironically the first law says "Users perceive aesthetically pleasing design as design that's more usable".
So now you say "I love the style of these graphics". So if the 1st law is correct it means you perceive this design as usable.
Then here's the irony: Just because you PERCEIVE it as more usable does not necessarily mean it is more usable. Which seems to be the case as per your experience.
But so what is the point about trying to make users PERCEIVE a design as usable? Shouldn't the goal be to make it actually usable whether users perceive it as such or not?
The irony is this designer made an excellent demonstration of poor design :-)
i agree none of the graphics use actually seem to mean anything intuitively to me. Looks like just pretty placeholder pictures.
Also if one find oneself writing down 20 general rules for anything, it's an excellent indication one may not have actually grokked the topic because it's very very unlikely you'll apply 20 rules at the same time. It's likely in some situations, 3-4 are important and in other situations, some others are more important and this ability to classify and recognise what applies where is an indication of knowledge and pedagogical strength.
> Users often perceive aesthetically pleasing design as design that’s more usable.
Figures that would be rule number one. Everywhere you go there are pretty UI's that are garbage, functionally.
Animation, transparent fading, no distracting scroll-bars or borders, wrapped around a 1-2-3 menu selection.
> Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
That is just nonsense. Productivity soars the faster the computer is. Ideally, the user should never waits for the computer; everything should be instant.
Whether the user waits for the computer is neither here nor there.
The ultimate computer-does-not-wait-for-the-user is to have the users prepare job specifications entirely outside of the computer and then submit them to a clerk at a job window. The computer never waits for a user because the job queue is busy from numerous users. It is not very good UI.
In an actual interactive UI, a needless delay could be caused by, for instance, collecting the necessary parameters for an operation through a cascade of multiple dialogs instead of batching them together. Though the computer waits more, too, that's irrelevant; the user's time is what was wasted.
I'm amazed anyone pretending to be a UI person would even feign being interested in how much time the machine spends waiting for the user.
The 400 ms threshold cited for the Doherty threshold is from a 1982 research paper. I imagine that in 1982, 400 ms response times felt pretty darn good.
Also, the nature of the tasks that users performed in 1982 may have meant that there was no benefit to <400ms response times. (If it takes twenty seconds to read and understand the output, and another ten to key in your next command, then a 400 ms delay is not a meaningful productivity drag.)
Today, I would guess that the threshold is closer to 50 ms.
(Also, "time spent by the computer waiting for the user" makes sense in the context of a 1982 research paper. That has changed in the last 28 years, to say the least.)
All of this is a long way off saying that if you are making UX decisions based on 28 year old research, you are on shaky ground!
I’d be over the moon if most websites did things within 50ms, even 100ms would be a significant and welcome improvement.
Anecdotally, when I’m working on the database at work, the olap database (Clickhouse) feels amazingly snappy because it’ll respond in around 30-60ms, but SQL server feels like molasses, even when doing queries each dB is designed for.
Because of the logo (and general quality of the site), I thought this was affiliated with Google and the Material project, but it doesn't appear to be.
I cannot even begin to fathom how a ux website that literally touts "don't make your users wait more than 400ms" as it's #2 rule also has
- 400ms css transition
- network load of new page
- scrolling down to view content
- another 400ms transition to go back to main content
as its primary mechanism of interaction... is the irony totally lost on them? Or did they drink the #1 kool aid to the extent that they believe their "design" will outweigh their myriad UX failures?
The button in the bottom left corner of individual rule pages is almost sadistic: "Do you want to scroll down a screen to view actual content you already clicked for - or find and click the button in the place your cursor spends the least time at?"
Edit: also I will never click the social links on the right, because they are absolutely unreadable to me.
The point is, don't have a static screen for 400ms after an interaction. If I click on something, and nothing at all happens for half a second, I feel a disconnect. A 400ms animation is a choice that you may not make, but does not 'feel' the same as a page load, or other stall.
Feels the same to me... in fact, I'd probably prefer 400ms of a static screen to 400ms of animation. Withe the static screen I can blame my internet and not think much of of it, if I'm watching an animation I have to sit there and think about how the "designer" chose to force me to wait for them to twirl around and take a bow before I can move on.
Edit: Exact test of rule 2:
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
Nowhere does it say that waiting is only bad if you don't see something happening. I am waiting on the computer to finish it's little jig. That is bad, and a violation of rule #2.
Further, from the original study itself:
"When a human being’s command was executed and returned an answer In under 400 milliseconds, it was deemed to exceed the Doherty threshold, and use of such applications were deemed to be “addicting” to users."
My answer has not been returned within 400ms, this the Doherty threshold has not been met.
I've only ever seen one unintrusive animation in UI, which was the window minimization animation of the Metacity window manager. It minimized the window immediately, but then followed up with an animated outline showing where the window had gone. It was thin enough that you could easily ignore it, but still provided all the benefit that designers claim from their slow and disruptive animations.
I hear you. I read this as: what if you can't meet the Doherty threshold? Do you try harder? More caching? Put a spinner on it? Animate? Try to tell some jokes?
The big problem with this is that you expect the computer to respond to your clicks naturally and instantly and instead you are put on hold while an animation plays. It may not break the latency rule strictly, but theoretically feels like it should be added on there because it has the same effect for users who don't care about animations (aka most users).
None of those things you listed are in conflict with rule #2.
The length of an animation is not the same as making your users wait for an initial response to your input. The rule is talking about how fast the computer appears to acknowledge and begin responding to a user input, it is not talking about how fast any given task is completed. The wait is the length of time between clicking the button and when the screen starts to animate.
Animation you have to wait for can sometimes be a bad design choice on a page, and I'm not a big fan of overuse of css transitions. But a navigation transition helps the user keep mental track of where they are, and it specifically signals that the computer is responding to your input. The animation itself here doesn't break the Doherty threshold, it does the opposite, it meets the Doherty threshold.
Network loading of a new page is unavoidable (out of the control of the page author), is absolutely standard practice for internet apps (see Jakob's law), and your browser (not the page) is what handles the interaction. The browsers adhere to the rules listed here to every extent possible, and they respond to page loads instantly by showing you a loading spinner, a blank page, and allowing interactions like cancelling the load while loading. Again, the interaction criteria here is that the computer acknowledges your input, not that it is required to finish something that can take time.
Scrolling is another interaction that meets rule #2, it doesn't break the rule. The rule is not about design or layout. When scrolling, if the page is moving in response to your input, then it's meeting the rule. And scrolling is one of the things browsers bend over backward to make as smooth and fast as possible.
> Network loading of a new page is unavoidable (out of the control of the page author)
Nope, the author had complete control over how much information they wanted to show on the main page vs the details page. In desktop view they show the single-sentence descriptions on the main page, in mobile they don't. So they've forced mobile users to wait for the network load (potentially much more than 400ms) completely unnecessarily.
> Scrolling is another interaction that meets rule #2, it doesn't break the rule.
Sure, it doesn't break rule #2 specifically, but it does break #3. And, more importantly, it's shitty UX and has no place on a "Rules of UX" website, except maybe as a counterexample.
> I'd probably prefer 400ms of a static screen to 400ms of animation.
The alternative here is no visual response to a click at all. I'm not okay with that, and I seriously doubt you'd be okay with it in general. Most people aren't (this has been shown). A 400ms delay after button clicks and scrolling and other interactions is an indication that your input was not received, and it feels intolerable to people today. The 400ms standard here was set 40 years ago. Today software feels completely broken if it doesn't respond with something in under 100ms, and desktop browsers typically do something within 33ms.
> the author had complete control over how much information they wanted to show
That's irrelevant. The browser does respond to your page load request instantly, with a blank page and a spinner. It doesn't break the rule.
Again, you can criticize the choices with your own opinion at a subjective level, this doesn't mean the authors aren't following their own advice. It feels like you're looking for reasons to justify not liking the page. You're free to not like the page, I won't disagree with that. What I disagree with is the reason given.
> Sure, it doesn't break rule #2 specifically, but it does break #3.
It seems like you're moving on to misunderstanding rule #3. Scrolling and clicking does not apply to Fitts' Law.
EDIT: I said scrolling doesn't apply to Fitts' law, and I meant that specifically as a reponse to, and in the context of the suggestion being made here by the parent: scrolling to find a new unknown target plus acquiring a new target, plus moving to click on the new target.
Extending the law to include the number of interactions is going to be tautological in the sense that if number of manual interactions is your "distance" then of course more will take longer. Including targets that are unknown is just beyond the scope of what has been studied and shown, I'm saying it is not really in the spirit of Fitts' law. https://en.wikipedia.org/wiki/Fitts%27s_law
Are you honestly, and I mean honestly honestly, trying to argue that needing to scroll then move your mouse to reach a target can not be thought of as a target being further away when it comes to Fitts' law and the relationship between distance and time to acquire a target? It seems to me that you are choosing to focus on the specific text used in a rule as opposed to the concept that rule is trying to convey. I don't enjoy arguing over that sort of thing whatsoever, so I'll have to call it a day and go back to spreading mulch. Good day :)
Your question is a straw man. You can think of scrolling as something being further away if you want, and I don't disagree. That doesn't mean Fitts' law applies.
Fitts' law is referring to a single interaction ("movement") with visible targets, not a general abstract concept of "futher away" that you can extend in any way and to any topic you want across multiple interactions. It is precisely because you have to use two different movements, as you pointed out, to both scroll to see the target and then move your mouse or hand to reach the target, that Fitts' law does not apply here.
Speaking more generally, there is a big problem with your assumption here that you can take interaction studies (or any scientific results) out of context just because you can think of it as analogous. When researchers have studied human perception and motions under specific conditions, you cannot assume the findings apply to conditions that weren't tested.
There isn't anything to be argued. You said that the scrolling violates Rule #3, which is about Fitts's law specifically. Scrolling has nothing to do with Fitts's law.
It absolutely does force you to wait though. If I click Learn More, then try pressing the PREV or NEXT buttons at the top, they do not respond to user input until the CSS animation is finished. I'm fairly certain this is exactly what rule #2 is talking about, trying to quickly go to the end or front of the list this way is extremely frustrating.
CSS transitions can be fine, but they shouldn't block user input or force the user to wait until they finish before moving on.
For this particular instance it might not matter a ton that they broke rule 2. But imagine if this was a table of paginated data, having to wait up to an extra second each time you go to the next or previous page just so the data could animate in would be rage inducing after a long period of time.
You are right. It took me a couple of tries to hit More and then move up to NEXT fast enough to repro the problem, you sort-of have to be in QA mode to catch this one. I'd say it's a problem with the NEXT button, and not a problem with scrolling. I'd also say the average reader is not very likely to bump into this.
I do agree that transitions shouldn't make you wait, and I mentioned above that I'm not the biggest fan of transitions. BUT the transitions here do not break rule #2, regardless of whether they are good design or not. Forcing you to wait as part of the interaction is not the same thing as not responding in the first place. The animation is the response to the input, and it acknowledges that the system is up and running.
A good way to understand rule #2. Here are two scenarios. A breaks rule #2 and B does not break rule #2.
A - You hit a button that makes an AJAX call. The response takes 10 seconds to arrive. The CSS has disabled button hover highlights, and button press state changes. There is no indication on screen that the request has been made.
B - You hit a button that makes an AJAX call. The response takes 10 seconds to arrive. Default CSS rules show the button press, and the page pops up a loading spinner.
Actually you can just click NEXT multiple times in a row. Imagine you are on item 1 but really want to see item 5. You would have to click next, wait for transition to finish, click next, wait, etc.
(I found this because I already read the first 2-3 laws and closed the page, reopened to see the "Details" and wanted to quickly navigate to the middle/end of the list. Instantly the site felt super sluggish and unresponsive)
I totally agree with you BTW, clicking a button and having a quick (<200ms in my eyes) visual response is completely fine, even if that response is just a CSS transition. I do this all the time.
The specific problem I had is the NEXT button stops responding during that CSS transition which might not technically break rule #2 but definitely makes the UI feel sluggish and non responsive.
Note that scrolling in some browsers is a specific interaction that disables JavaScript and all other interactions while scrolling in order to maintain high frame rates and smooth scrolling. This might be an unintentional bug or side-effect of using scrolling at all, and some people consider it a browser bug. It does mean it's important to think before triggering a scroll, OTOH, the interaction here of jumping instantly to another item without scrolling could be disorienting to some people. Maybe the whole issue would be fixed by changing the transition time from 400ms to 200ms?
I'd also note that rule #2 serves a more specific purpose than avoiding any wait times. It's there to avoid confusion about what's happening in response to a click, not to eliminate all waiting, nor to eliminate all annoyances in UX delays. With a transition, it's annoying that you can't interact while the animation plays, but it's not (in this case) confusing about what's happening. I know why the button isn't working, and very quickly I know how long I have to wait before it works again, even though I'd rather that it did work instantly.
It also hits the uncertainty like in some games when a cutscene ends but you have yet to figure out that it's time to move. At the first time I tapped on a box I had to decide whether my action is required. And it was, I had to scroll anyway. It failed easy interaction before all else.
We can discuss form and composition forever, but we all know that a simple scrollable page with screen-high tiles and/or a floating "next" button would do the job a million times better than this. If that was a job-related tool and not a site that you can read once and close forever, I would consider an alternative immediately. Fun fact, I didn't even bother to go further than few "articles" and read 6-8 times more text here itt than on their site in the same amount of time.
Your points are probably correct for a ux that has such problems, but if you do not create a problem, you do not have to solve a problem, and you cannot fail at it (which is easy to do).
FWIW, I'm not discussing form or composition at all, nor am I defending the site's high level design choices at all. I'm just trying to help clarify what the rules on this page actually mean, because rule #2 was misunderstood above. This page has been posted before, and other people have also misunderstood rule #2 to assume it means that interactions have to be complete in a certain amount of time. The rule is simpler than that, and lower level than page layout issues. I would guess that part of the reason this rule is misunderstood is because it's rarely broken these days in commercial apps and web pages. Unlike the 80's, it's not that common anymore for computers to not respond at all in any way to a user input in more than 400ms, and browsers take care of a lot of the cases where it might happen.
"System Response Time. This is the time span between the moment the user enters a command and the moment a complete response is displayed on the terminal."
Note the phrase "complete response" and that the paper itself is titled "The Economic Value of Rapid Response Time".
Yes the phrase "complete response" does sound like a full task finished, but what, exactly, is a "complete response"? Isn't a popup or dialog box or a loading spinner a complete response from a UI perspective? If not, why not?
The definition of "complete response" in the paper is not specific. What were the tasks being studied? Can you have sub-tasks for which there are multiple complete responses? Note the interactions this paper is discussing are terminal commands on a terminal connected to a local mainframe. They didn't have web pages.
There are notes in the paper that give clues as to what kind of tasks & responses they are talking about: "In 1979 their installed system was designed to offer 300 simultaneous users word processing, programming, computing, and remote job entry capabilities, with the response to 80 percent of the transactions being processed in .5 seconds or less."
There are lots of other clues that the kinds of interactions they are talking about are so basic and tiny that we don't even think about them as individual tasks anymore. When you read the entire thing and study the charts, what the paper is really showing is that computers in 1982 were excruciatingly slow, so slow that they interfered with basic word processing and data entry, so slow that they could actually calculate the financial savings of being able to execute shell commands slightly faster.
Even though it says the subjective words "complete response", there are and always have been large tasks that take much longer than 400ms. Does that mean any task that takes longer than 400ms is automatically bad UX? I don't think so, I consider starting a 3GB video download, for example, to be a complete response when the browser acknowledges sending the request, and starts showing progress. I think the paper's definition would agree with that because I can submit other tasks to the computer immediately, I can read other pages, type other commands, save files, etc., etc.
A spinner is not a complete response because the system is still going to respond more without additional input.
Here is another quote that the paper quotes: "...each second of system response degradation leads to a similar degradation added to the user's time for the following [command]. This phenomenon seems to be related to an individual's attention span. The traditional model of a person thinking after each system response appears to be inaccurate. Instead, people seem to have a sequence of actions in mind, contained in a short-term mental memory buffer. Increases in SRT [system response time] seem to disrupt the thought processes, and this may result in having to rethink the sequence of actions to be continued."
A spinner still disrupts the thought process in the same way. I would personally say that yes, anything that takes longer (I'd say more like 100ms even, possibly less) is automatically bad. It might still be the best possible in a particular situation and pretending that something will necessarily be fast when it often isn't is also bad. It is easier to plan around tasks that take longer when a small and reliable set of tasks take longer and somewhat fits with the theme in that way, but I'd still say the core idea here is "everthing that happens should happen quickly" and have other guidelines to deal with the cases where that isn't possible. Don't try to trick yourself that the system is actually responding quickly when it really isn't.
You could say that the most extreme reading of this principle would imply that a computer should never play video or audio. Personally, I would say it shouldn't except when I ask it to. My top guideline for websites would be something like "your website is not an experience". You can put an experience on your website and some people will appreciate it, but let me accomplish what I wanted to do when I visited your site quickly. Breaking my thought process to insert marketing is not a good experience.
I disagree this is not relevent today; I didn't use a mainframe in 1982 but I wouldn't be surprised if the experience was more responsive than what is common today. Part of this is due to everything making network requests today but in general system response does not seem to be valued particularly highly. I regularly wait over two seconds for a particular text entry box in Windows 10 to work on a fast modern system with an SSD and no network connection that is interacting with a small local database. Windows 7 seemed more responsive to me, as did a lot of older software compared to modern versions.
> A spinner is not a complete response because the system is still going to respond more without additional input.
The paper talks about launching batch jobs. How does that fit into your interpretation of a "complete response"? What would the complete response to starting a batch job have been in 1982?
> I didn't use a mainframe in 1982 but I wouldn't be surprised if the experience was more responsive than what is common today.
I did use mainframe terminals in high school and college, and they were nowhere near the responsiveness that is common today. Not in the same ballpark, not even on the same planet. Our expectations for responsiveness have grown as fast as response times have shrunk, computing today is orders of magnitude more responsive across the board.
> Don't try to trick yourself that the system is actually responding quickly when it really isn't.
That sounds pretty catchy, but is completely subjective, it depends on what you mean by response, which is what we are trying to flesh out here. I'm trying to make the case that in the context of UI/UX best practices this is a red herring. The questions are about interaction and expectations, about acknowledging your input, not about whether computers can magically perform impossible feats of physics. Speed of light prevents some servers on earth from getting a response to you in under 100ms. I do tasks all the time that takes seconds or minutes, and I bet you do too. I disagree that long tasks are automatically bad UX. Bad UX is failing to notify you that you started a task, or failing to notify you that a task finished. Bad UX is giving no indication of how long a very long task will take. Bad UX does not automatically exist merely because a task takes time.
"At NIH there was an average of 90 transactions and two batch submissions per work session. This did not vary, even though work session length varied with the computer response time."
The paper is not talking about turning non-batch jobs into batch jobs (or batch jobs at all really), it is just an aside where they insert magic marketing numbers to sound good. Presumably for practical reasons they would consider the response "batch job started" to be the complete response. I think we can at least agree that it is unhelpful to call an unavoidably long task bad design just for being unavoidably long.
Nothing in the paper suggests that making tasks avoidably long is ok if the system gives an indication it is doing something.
Right. ‘Batch job started’ is the same “complete response” as a spinner. A progress bar is a better response and UI design than either because indicates time to completion.
> Nothing in the paper suggests that making tasks avoidably long is ok if the system gives an indication it is doing something.
I can agree with that statement as written, but there are a couple of minor issues with your framing here. One, I didn’t suggest that making tasks avoidably long is okay. I can see why I might appear to have hinted in that direction, but your summary, especially inserting the word “avoidably”, is not a generous interpretation of my words, and I was explicit from the start about stating that I’m not a fan of CSS transitions and not defending the design choices of the Laws of UX site. Two, you already know the context of this paper is 1980, when the alternative to what they actually mean by “complete response” is a blinking terminal cursor that doesn’t move. They’re not talking about partial response of some kind, and they are considering “batch job started” to be a complete response. In that sense, and in the context of the time the paper was written, it is very much suggesting that more quickly giving an indication that it’s doing something is the goal.
Beyond this paper, the broad idea of fast response in the UI/UX and web world has adopted the idea that showing acknowledgement of input very quickly is important. There are multiple examples of this in the nearby threads, and many hundreds of papers beyond Doherty’s that discuss these topics and demonstrate the humans perceptually prefer to see fast reactions even when the final result takes a while.
It might also be worth pointing out that for the arrow buttons on the Laws of UX site, the animation itself literally is the “complete response”. The function of the button is to trigger the animation. Animations are really out of the scope of Doherty’s paper, their idea of a “complete response” in 1980 was a line of text that could display at once.
> It might also be worth pointing out that for the arrow buttons on the Laws of UX site, the animation itself literally is the “complete response”.
This is where we disagree. The animation is exactly what I mean by "avoidably long". It interrupts the user the same way the long response times mentioned in the paper do. If you quote this paper, expect people to say that it means what it clearly states since this is a source of real frustration for many of us. As I mentioned earlier, some people do appreciate a more paced "experience", but many of us never want such an experience from a website and just want rapid response.
It’s fine if you don’t want animations, your opinion is valid if you don’t like them, but you’re conflating a design choice with the idea of a “response”. You can’t disagree with the fact that the arrow buttons on the site are the complete response. It makes no sense to say that, because those buttons do nothing else; their single solitary function is to trigger an animated scroll, and once the animation is done playing, there is nothing else involved in the “response”.
Yes, the length of animation is a design choice, and is in that sense avoidable — precisely because the length of time the animation plays was a conscious intent. What you’re talking about is not related to what Doherty’s paper was talking about.
The rule is talking about whether the system acknowledges your input visually. The input is specifically acknowledged by the animation starting and then playing. That is the indicator that the click was received.
On a technicality, I'll mention that a 400ms transition technically isn't more than 400ms, it's equal to 400ms. That's just me being cheeky though, it's irrelevant, because rule #2 is met on my laptop within 17ms when the animation begins.
Let’s look at the rule itself instead of making baseless declarations about what the rule is talking about:
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
Further, from the original study itself:
"When a human being’s command was executed and returned an answer In under 400 milliseconds, it was deemed to exceed the Doherty threshold, and use of such applications were deemed to be “addicting” to users."
My answer has not been returned within 400ms, and I had to wait for the computer, and the site was so un addicting that I exited out after suffering through those animations only 2 times. Thus not a single interpretation of Doherty threshold in its original form has been met. It’s really quite simple.
If acknowledging input rather than returning an answer was all that was needed, the rule would state as such and the old hat engineers making the original computers would have had wired “Enter” up to “bell” and called it a day. Luckily they weren’t nearly as lazy as many in this thread seem to be.
For cases such as the “downloading a 3gb file” that get brought up, I’d consider the “answer” to pressing the download link to be the dialog box saying that a download has started. I would not consider the “answer” to clicking a link to be an animation saying... I’m not sure what; rather, the “answer” to clicking a link is clearly my browser starting to navigate to that link
Side note: just for funzies, I patched vscode to show a loading animation for 400ms before opening new files. After playing around with it for a couple minutes, I can assure you that if I pushed that to master, insiders users would come screaming tomorrow morning and all the “well actually this is in compliance with XXX law because technically...” would not appease them. If you wouldn’t accept it in your editor, why accept it in your websites?
The 400ms rule is that if the user does something, the UI must do something, anything.
It can mean "display the linked page within 400ms" or "start the animation within 400ms". You can't expect 1 TB of data to be transferred within 400ms but you can display a progress bar within 400ms.
Apple used that to great effect. iPhones, at least in the early days always felt more responsive than Android phones. That because they hid latency using smooth animation. And it worked. It was also apparent when I compared Chrome and Firefox a few years ago. Chrome felt faster but mostly because Chrome was faster at showing something on screen. They took about the same time to fully load the page.
Side note, it would be very interesting if comments were a DAG rather than a Tree... that way one could respond to several comments with the same thread.
Also, this is a Very different scenario to the listed. The html loads in < 10ms, But I have to wait 400ms (!!!) to see it. It’s actually the exact opposite of the cases you mentioned above, they take a fast operation and dramatically reduce the perceived performance by making you wait 400ms (!!!) for it to complete.
No, I don’t think a link taking you to an empty page where the content only appears after you decipher what interaction you’re supposed to perform then perform it should be normal.
Instead, I think links taking you to pages where the content is immediately visible should be normal.
The only site my tech-challenged dad can kind-of use well is Craigslist. Plain text, accessible, good hierarchies, nothing buried or nested, fast, and, crucially, everything is in the same place every time he visits. Some of the best UX on the Web.
It feels like modern website design conflates “better UX” with “surface level attractiveness”
Craigslist is a great example, original reddit is another example: my UI/UX designer friend considers original reddit to be quote “ugly and horrible”, and while there definitely could be some improvements, the reddit redesign (which I know my friend would come up with something similar to) is quite literally orders of magnitude worse, but is aesthetically “nicer”.
Original reddit looks ugly, but everything you want from an interface is there once you get through a 3 minute learning curve: information dense, enough white space (but not too much), consistent behaviour, fast, respects scrolling, etc etc.
Where did we go “wrong” with web design that what we have now is seemingly worse? And what does a good balance of “actually functionally useful” and “aesthetically pleasing” look like?
The site looks and performs fine to me with the redesign. The problems I have with it are the obnoxious "open in app!" Pop-up and the subreddit preview that interrupts the comment section... Totally unacceptable.
It literally does not work on my laptop: it stutters all the time when scrolling, navigating, etc. It's unusable even with the greatest degree of patience. This happens in both Chrome and Firefox, both with the default settings (uBlock improves things slightly, but not by much). I genuinely thought there must be something wrong with my setup, but several of my friends have reported similar experiences across different platforms.
Granted, I have a cheap not very fast laptop, but it's less than a year old and almost everything else works just fine – certainly not as horrendously slow as Reddit. These problems seem to disappear if you gave a faster machine from what I've been told.
But, yeah; it's broken for millions of people who have low-end to medium hardware. I genuinely don't understand how they could ship something so dysfunctional for so many people.
I often see the second law being broken by the first (or a misinterpretation of it): in the eagerness to make the site look beautiful, the designer make it slow, either deliberately with animations, either inadvertently by increasing load times.
Also, I commonly see Miller's and Zeigarnik Effect being disregarded: although our working memories are not so great, we possess some and we can retain some basic information about our workflow. Then, IMHO there's more harm than good in putting a lot of visual clues, drawers, panes over panes etc. so that navigation is "improved".
Speaking particularly about form-based enterprise applications, I keep thinking that some important empirically learned lessons from the last 40 years are simply being thrown away. Simple, correct and, most important, FAST interfaces trumps everything else, even if it's a TUI.
Oh, and regular users also can and ENJOY using the keyboard -- a tool which is being deprecated in this mistake of trying to create a uniform experience between desktop and mobile.
I'm not entirely convinced simple is better for enterprise apps. I'm a consultant who has to jump around between a lot of project management tools like Asana, Jira, and Azure devops and the simpler the interfaces make me far more frustrated.
They all have pretty much the same functionality, but some hide functionality for UI's sake. Then anytime I need to do something new, instead of looking around a busy screen, I'm sifting through a bunch of websites I found on google.
I think simplicity doesn't necessarily mean having less widgets on the screen.
If, by removing widgets, those interfaces are making you to perform more steps and to think more to find and execute the functionality you need, then I'd say those interfaces are getting more complex actually.
Besides, this is another common mistake in current UX trends, IMO. They seem to assume that interfaces can always be simpler, as if there weren't fundamental bottom limits to complexity; and, to make things even worse, they remove widgets, replace text with icons etc., seeming to believe in a positive correlation between complexity and amount of stuff in the screen
One of the reasons I like HN for is the lack of ANY animation. It just does what you want it to do.
Also: At work I make internal software for managing basically everything. We do not use any animations, besides one for dropdowns. And those are only .1 second long.
So, I kinda tend to think that animations/trying to be clever in interactions are actively harmful.
Speaking of being clever, the new reddit layout seems to try to be a single page application. I hate those quite a bit, due to making it much harder to browse.
My basic definition of UX is providing users data and decisions in a certain context.
In some contexts (selling), certain things are more important, like having a beautiful appearance and no data overload. Your first time user may be your most common user, because they may only make one purchase per [lifetime, year, etc]
In other contexts, for instance industrial controls, data density is more important, and the user may be expected to take more time to learn the interface. There is still some need to accommodate new users, because everyone is a new user at some point.
In any case, there is a decision to be made, aided by some data presentation.
#13, the Pareto Principle, is the main source of digital inequality nowadays. Lots of modern UIs do not perform well in terms of accessibility, because backlog is never prioritized for minority groups of users. The art of inclusive communications will never exist if we continue applying this as a law, instead of focusing on reducing the costs of accessibility.
Accessibility is the sort of thing that has to be regulated into existence because the economic cost-benefit often cannot be justified. Similar to handicap parking, ramps, etc.
Copy-paste highlight from every page, for easier read:
1. Aesthetic Usability Effect - Users often perceive aesthetically pleasing design as design that’s more usable
2. Doherty Threshold - Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other
3. Fitts’s Law - The time to acquire a target is a function of the distance to and size of the target
4. Hick’s Law - The time it takes to make a decision increases with the number and complexity of choices
5. 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
6. Law of Common Region - Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary
7. 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
8. Law of Proximity - Objects that are near, or proximate to each other, tend to be grouped together
9. Law of Similarity - The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated
10. Law of Uniform Connectedness - Elements that are visually connected are perceived as more related than elements with no connection
11. Miller’s Law - The average person can only keep 7 (plus or minus 2) items in their working memory
12. Occam’s Razor - Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected
13. Pareto Principle - The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes
14. Parkinson’s Law - Any task will inflate until all of the available time is spent
15. Peak-End Rule - People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience
16. Postel’s Law - Be liberal in what you accept, and conservative in what you send
17. Serial Position Effect - Users have a propensity to best remember the first and last items in a series
18. 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
19. 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
20. Zeigarnik Effect - People remember uncompleted or interrupted tasks better than completed task
Thank you! I was thinking that the site should offer a simple list as an option.
Ironically, in the strict (and best) sense of the notion "user interface" (i.e. being an effective, efficient, easy conveyance of information to/from computer and user), yours is better than the fancy site.
oh my fridging gawd, i am so triggered by this. the site linked to is supposed to advertise a book on ux with some example content and yet literally every comment here is suggesting a way to improve on the UX of that with some even just downright reformatting the content as a comment.
i hope they don't sell a single book as this serves as an example of how to not do UX.
308 comments
[ 2.6 ms ] story [ 270 ms ] threadSome of these may be more pertinent while analyzing User Experience compared to composing User Experience.
Occam's Razor: What is this control meant to do?
Pareto: does this UX cover at least 80% of the user's needs? Are there critical cases in the remaining 20%?
Parkinson's Law is more of a bank shot, but think of it along with the Pareto Principle: Organize the UX so that the user can accomplish the most important tasks in the least time.
No. I’m saying if you squint hard enough, then maybe you can think of how these apply to UX, but they don’t directly indicate some insight of UX, in any way like the others do.
> Occam's Razor: What is this control meant to do?
If that’s how they mean to apply it, they should phrase it as “users make the inference about the control that requires the fewest assumptions about how to model the UI”. There’s a big difference between saying how users actually act, vs how you as an engineer should infer, or what you should optimize for.
And yes, if the latter is meant, then it’s applicable on some level, it’s just not specific to UX (just making inferences about data in general), and even then didn't make clear how it would apply in a UX scenario.
>Pareto: does this UX cover at least 80% of the user's needs? Are there critical cases in the remaining 20%?
That wouldn’t be the Pareto principle, that would be “check the 20% for if you’re missing something critical.”
Again, a tangential application, if you stretch, just not direct like the others.
>Parkinson's Law is more of a bank shot, but think of it along with the Pareto Principle: Organize the UX so that the user can accomplish the most important tasks in the least time.
That's orthogonal to Parkinson’s law, which says that time spent will bloat to its bounds. What you’ve described is a different principle, something like “minimize the time average spent to do tasks, thus giving more weight to the more frequent ones”.
LATE EDIT: With that said, those three should definitely be part of any UX engineer's mental toolkit ... but only in the sense that they should be part of any engineer's toolkit. The specific applicability to UX isn't obvious the way the others are, at least.
I think that's fair. I will say that I appreciate this site, but I do think the author had to stretch a bit to get to 20 rules. For instance, I would have had a section just on the Gestalt Principles because they don't make much sense by themselves.
"How many UX concepts can I attempt to illustrate with basic shapes and shading?"
If it were meant to convey information first, it would have looked like this: https://news.ycombinator.com/item?id=24031163.
I prefer the rules in my copy of Design Elements - A Graphic Style Manual. Its rule #2 make a comment that is apt here: communicate don't decorate.
Aesthetic Usability Effect 01 Users often perceive aesthetically pleasing design as design that’s more usable.
Doherty Threshold 02 Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
Fitts’s Law 03 The time to acquire a target is a function of the distance to and size of the target.
Hick’s Law 04 The time it takes to make a decision increases with the number and complexity of choices.
Jakob’s Law 05 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.
Law of Common Region 06 Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
Law of Prägnanz 07 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.
Law of Proximity 08 Objects that are near, or proximate to each other, tend to be grouped together.
Law of Similarity 09 The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
Law of Uniform Connectedness 10 Elements that are visually connected are perceived as more related than elements with no connection.
Miller’s Law 11 The average person can only keep 7 (plus or minus 2) items in their working memory.
Occam’s Razor 12 Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.
Pareto Principle 13 The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.
Parkinson’s Law 14 Any task will inflate until all of the available time is spent.
Peak-End Rule 15 People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
Postel’s Law 16 Be liberal in what you accept, and conservative in what you send.
Serial Position Effect 17 Users have a propensity to best remember the first and last items in a series.
Tesler’s Law 18 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.
Von Restorff Effect 19 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.
Zeigarnik Effect 20 People remember uncompleted or interrupted tasks better than completed tasks.
Rule 21 should be: don’t make the user click 20 times.
is anyone else bothered that they have to scroll below the fold after clicking "learn more" to get to the content?
The first screen is a long scroll of 20 elegant looking blocks and titles none of which mean anything on their own. I have to click on each and sit through some superfluous animation before I can even get access to the explanation.
Because of the animation, t he natural flow of swiping back on my phone results in a really janky transition.
I have to say, I love the style of these graphics. Minimalism I guess? Reminds me of the University of Waterloo during my childhood.
I'd say if you practice Minimalism, then also make sure it applies to the total amount of space you're using for it ;)
Whatever you call this style.
It's a "Memphis style" variant. Pretty trendy these days. Now the industry is starting to move to "Neumorphism".
Really? I thought Memphis style was this: https://en.wikipedia.org/wiki/Memphis_Group and this: https://www.megapixl.com/illustration-for-hipsters-memphis-s... (e.g. "80s style").
This website is not giving me that impression. If anything, it reminds me of a style I associate with the 60s or 70s (namely a sans serif font coupled with geometric graphics that use multiple shades of the same bright color).
Edit: I think it's closer to the "Swiss/International Style": https://www.google.com/search?q=Swiss/International+Style+Gr..., but I'm by no means an expert.
It seems you are conflating "Memphis" from modern web design. What we see on the Laws of UX cards is geometric abstraction.
It's like saying Apple is not Bauhaus.
Regarding neumorphism, I’d bet that will be much like the “long shadow” trend of yore; an interesting style that is hyped until, a short time after, the appeal of the newness and uniqueness wears off completely.
Really? Neumorphism is cool to look at occasionally, but I would hate it if everything started looking like that.
I didn't notice any scrolling differences myself ¯\_(ツ)_/¯
"Don't fuck with scrolling" applies to both scenarios equally though.
(The laws titles are not selectable on desktop/linux/firefox.)
Furthermore the short description of the laws does sometimes subtle differ from the actual long descriptions in ways which make major differences about how "correct" that law is.
They are not easily selectable.
I mean who expects the whole card to act as a link and as such need special handling wrt. selecting text? Especially if there is an explicit "link button" to navigate to the "more details view" just besides the card.
The funny thing is that while for some users the whole card acting as a single hyperlink is intuitive (even through there is no indication that it does) for others it isn't intuitive at all and at most they would expect it to behave like a normal tile (it looks like a title) .
The logo on the card being clickable and being a hyperlink on the other hand is probably expected by much more people.
Oh, wanna search for a cool band outside our platform, but there name is in Chinese or something else you don't have an IME for? TOO BAD, GOTTA INSPECT ELEMENT.
Paulie law: make a website you would like to use
The other 25 are irrelevant
Quite frankly, it has a terrible UX. It took me three visits to understand what you meant by access to the explanation. I could only find a bunch of uninformative slides and a blurb promoting a book on the first visit two visits. On visit number three, I found the explanations.
Why?
I originally interpreted the scrolling indicator as an advance to next slide button. When I clicked on the button it presented the new slide and the advance button disappeared, so I further explored the site by clicking on the learn more button. That presented another uninformative slide so I ignored the advance button. After all, why would I want to repeat an action that failed to produce the desired result the last time I did it? Noticing the next link, I clicked on that in hopes that it would produce a more desirable result. Unfortunately, it produced the same sort of result as the advance button. At that point, I just gave up and clicked on the Info button and saw the blurb promoting the book. I tried clicking on the links to the left, saw the uninformative slides, and concluded that it was a gawd awful promotion for a book that included nothing but chapter headings.
Those were my first two visits. On visit three, convinced that there must be something more, I actually tried the advance button on the right slide and discovered that it was a scroll indicator. By that point, I was already so frustrated with the experience that I just gave up on the site without seeing what the creator had to say.
As for the graphics style, sure it's great. On the other hand, taking the minimalist presentation too far produced a site that was more difficult to interpret.
Edit: trying to keep terminology consistent as my understanding of the site evolved.
> frankly, it has a terrible UX
I don't follow these critiques. The content and navigation of the site is quite clear to me. The trackpad/wheel scrolling stutters very slightly in FireFox on Windows.
EDIT: And hey, it's in Dark Mode!
#21: More people will visit your site with tiny/mobile screens than large/desktop ones.
In a way, I should know better. I landed on a news article earlier in the day that started with one of those dynamic infographics that you interact with through scrolling. I was at the point of backing out of the page, concluding that the article was the infographic, when a hint of an actual article popped up on the screen. While it is a visually, I also find it a very annoying waste of time when I am trying to find information.
(Incidentally, I didn't run into the performance issues that others have been mentioning even though I was using an 8 year old computer.)
So it's not designed for me — a person on lunch break, hoping to read at least 5 articles via Hacker News before my burrito is gone.
While I was annoyed there, I still appreciate it. It's a free resource. It's pretty. I gleaned a few useful takeaways (especially the idea of putting more important things on the edges).
Bad user! You're not following the first law of UX:
> Users often perceive aesthetically pleasing design as design that’s more usable.
> Aesthetically pleasing design can make users more tolerant of minor usability issues.
> Aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually works better.
> Aesthetically pleasing design can mask usability problems and prevent issues from being discovered during usability testing.
You're supposed to go "oh, pretty!" and forget how crappy it really is! /s
Seriously now: the first law of UX should be that aesthetics are secondary to usability. If your focus is on making something "eye catching" or "beautiful" then you're doing bad UX. If designers followed that, we wouldn't have so many UX trainwreaks.
I would argue that instead it should be aesthetics and functionality need to be balanced.
Your usability will suffer if lack of aesthetics obscure the usability of a tool. Conversely, your aesthetics need to be reigned in, so that they do not obscure the usability of your tool.
Ever performed your craft and you just nail it and as a side effect the thing looks positively beautiful?
Once again someone on HN phrases something better then I could hope to.
> Ever performed your craft and you just nail it and as a side effect the thing looks positively beautiful?
Best feeling in the world, on the rare occasions I manage it.
The first law of UX is that human resources are precious. Therefore design must seek to maximize the economy of user time, cognition, and effort.
This is the biggest problem with tech today, making "eye catchy" software which is horrible to use and getting anything done (and I mean simple things as making a payment if it's just little bit different than the "designer" imagined, for example you want to add a note) is so frustrating because it takes so much time. Yet it was not like that few years ago.
Thanks apple I guess ?
EDIT: And then to make the software "easier to use" security goes down the drain. There is a small fintech bank where all you need to know is email and 6 digit pin number to pair the account with a phone. That is, the 6 digit pin number is all you need to know to access the customer's funds. Now keep in mind attacker wouldn't care about a specific account, just get loads of customer emails and try the most common pin numbers and fish what you can - there is no notification when a new device is paired either, indeed.
Not really the best user experience and use of my time if I lose my money and need to fight with the fintech bank to get it back or when my account gets locked needlessly.
The same goes for the constant redesigns. How is that mindful to the user if you change everything (again) so they need to spend their time to learn again how to use your app just to get the same stuff done as before.
To be honest, this site looks like some designer's playground, not something an UX expert put together.
And they may or may not even interact with the software directly, or for very long.
Teams will build software aligned with the immediate incentives they have, never assume those incentives are even remotely close to those that might make the business succeed in the actual market.
The rule seems to imply UI > UX lol
> The first screen is a long scroll of 20 elegant looking blocks and titles none of which mean anything on their own.
The page behaves differently on mobile vs desktop, and that quote is a description of the mobile experience. On desktop, it also includes a one-sentence explanation of each law without needing to click through.
> 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.
Side note, this text was hard to copy because the site changes the text highlight color to black, the same as the background.
I agree that the mobile experience is broken. They should rethink the layout to add the summaries back onto the main page.
If I was offering advice to the designers, I would suggest they abandon the obsession with 100vh layouts and always have a little bit of scrollable content peeking in from the bottom. 100vh layouts evokes the slideshow metaphor, which changes how people expect interaction to function.
I would also restyle the "LEARN MORE" buttons to make them clearer. My brain somehow completely ignored them on first viewing. I saw them on subsequent viewings but the low contrast makes them not seem very clickable, I think they could be easily misinterpreted as shortcuts to the next content "slide".
So now you say "I love the style of these graphics". So if the 1st law is correct it means you perceive this design as usable.
Then here's the irony: Just because you PERCEIVE it as more usable does not necessarily mean it is more usable. Which seems to be the case as per your experience.
But so what is the point about trying to make users PERCEIVE a design as usable? Shouldn't the goal be to make it actually usable whether users perceive it as such or not?
i agree none of the graphics use actually seem to mean anything intuitively to me. Looks like just pretty placeholder pictures.
Also if one find oneself writing down 20 general rules for anything, it's an excellent indication one may not have actually grokked the topic because it's very very unlikely you'll apply 20 rules at the same time. It's likely in some situations, 3-4 are important and in other situations, some others are more important and this ability to classify and recognise what applies where is an indication of knowledge and pedagogical strength.
The index page is even worse. It sits under the burger/help menu. Non of the titles make sense, you'll have to click each and read to have a clue.
https://news.ycombinator.com/item?id=16185118
Figures that would be rule number one. Everywhere you go there are pretty UI's that are garbage, functionally.
Animation, transparent fading, no distracting scroll-bars or borders, wrapped around a 1-2-3 menu selection.
> Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
That is just nonsense. Productivity soars the faster the computer is. Ideally, the user should never waits for the computer; everything should be instant.
Whether the user waits for the computer is neither here nor there.
The ultimate computer-does-not-wait-for-the-user is to have the users prepare job specifications entirely outside of the computer and then submit them to a clerk at a job window. The computer never waits for a user because the job queue is busy from numerous users. It is not very good UI.
In an actual interactive UI, a needless delay could be caused by, for instance, collecting the necessary parameters for an operation through a cascade of multiple dialogs instead of batching them together. Though the computer waits more, too, that's irrelevant; the user's time is what was wasted.
I'm amazed anyone pretending to be a UI person would even feign being interested in how much time the machine spends waiting for the user.
Also, the nature of the tasks that users performed in 1982 may have meant that there was no benefit to <400ms response times. (If it takes twenty seconds to read and understand the output, and another ten to key in your next command, then a 400 ms delay is not a meaningful productivity drag.)
Today, I would guess that the threshold is closer to 50 ms.
(Also, "time spent by the computer waiting for the user" makes sense in the context of a 1982 research paper. That has changed in the last 28 years, to say the least.)
All of this is a long way off saying that if you are making UX decisions based on 28 year old research, you are on shaky ground!
I’d be over the moon if most websites did things within 50ms, even 100ms would be a significant and welcome improvement.
Anecdotally, when I’m working on the database at work, the olap database (Clickhouse) feels amazingly snappy because it’ll respond in around 30-60ms, but SQL server feels like molasses, even when doing queries each dB is designed for.
The microcomputers I used in 1982 had instantaneous response time.
Most of the software was developed by assembly language die-hards.
400 ms is more acceptable if there is no jitter in it, in comparison to unpredictable response time.
- 400ms css transition
- network load of new page
- scrolling down to view content
- another 400ms transition to go back to main content
as its primary mechanism of interaction... is the irony totally lost on them? Or did they drink the #1 kool aid to the extent that they believe their "design" will outweigh their myriad UX failures?
If Amazon had a 400 ms animation for every purchase/page load I would be very upset.
If an art project had a 400 ms animation, that would be part of the art.
Edit: Exact test of rule 2:
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
Nowhere does it say that waiting is only bad if you don't see something happening. I am waiting on the computer to finish it's little jig. That is bad, and a violation of rule #2.
Further, from the original study itself:
"When a human being’s command was executed and returned an answer In under 400 milliseconds, it was deemed to exceed the Doherty threshold, and use of such applications were deemed to be “addicting” to users."
My answer has not been returned within 400ms, this the Doherty threshold has not been met.
The length of an animation is not the same as making your users wait for an initial response to your input. The rule is talking about how fast the computer appears to acknowledge and begin responding to a user input, it is not talking about how fast any given task is completed. The wait is the length of time between clicking the button and when the screen starts to animate.
Animation you have to wait for can sometimes be a bad design choice on a page, and I'm not a big fan of overuse of css transitions. But a navigation transition helps the user keep mental track of where they are, and it specifically signals that the computer is responding to your input. The animation itself here doesn't break the Doherty threshold, it does the opposite, it meets the Doherty threshold.
Network loading of a new page is unavoidable (out of the control of the page author), is absolutely standard practice for internet apps (see Jakob's law), and your browser (not the page) is what handles the interaction. The browsers adhere to the rules listed here to every extent possible, and they respond to page loads instantly by showing you a loading spinner, a blank page, and allowing interactions like cancelling the load while loading. Again, the interaction criteria here is that the computer acknowledges your input, not that it is required to finish something that can take time.
Scrolling is another interaction that meets rule #2, it doesn't break the rule. The rule is not about design or layout. When scrolling, if the page is moving in response to your input, then it's meeting the rule. And scrolling is one of the things browsers bend over backward to make as smooth and fast as possible.
> Network loading of a new page is unavoidable (out of the control of the page author)
Nope, the author had complete control over how much information they wanted to show on the main page vs the details page. In desktop view they show the single-sentence descriptions on the main page, in mobile they don't. So they've forced mobile users to wait for the network load (potentially much more than 400ms) completely unnecessarily.
> Scrolling is another interaction that meets rule #2, it doesn't break the rule.
Sure, it doesn't break rule #2 specifically, but it does break #3. And, more importantly, it's shitty UX and has no place on a "Rules of UX" website, except maybe as a counterexample.
The alternative here is no visual response to a click at all. I'm not okay with that, and I seriously doubt you'd be okay with it in general. Most people aren't (this has been shown). A 400ms delay after button clicks and scrolling and other interactions is an indication that your input was not received, and it feels intolerable to people today. The 400ms standard here was set 40 years ago. Today software feels completely broken if it doesn't respond with something in under 100ms, and desktop browsers typically do something within 33ms.
> the author had complete control over how much information they wanted to show
That's irrelevant. The browser does respond to your page load request instantly, with a blank page and a spinner. It doesn't break the rule.
Again, you can criticize the choices with your own opinion at a subjective level, this doesn't mean the authors aren't following their own advice. It feels like you're looking for reasons to justify not liking the page. You're free to not like the page, I won't disagree with that. What I disagree with is the reason given.
> Sure, it doesn't break rule #2 specifically, but it does break #3.
It seems like you're moving on to misunderstanding rule #3. Scrolling and clicking does not apply to Fitts' Law.
EDIT: I said scrolling doesn't apply to Fitts' law, and I meant that specifically as a reponse to, and in the context of the suggestion being made here by the parent: scrolling to find a new unknown target plus acquiring a new target, plus moving to click on the new target.
Fitts' Law has been studied on scrolling alone, for example: https://www.microsoft.com/en-us/research/wp-content/uploads/...
Extending the law to include the number of interactions is going to be tautological in the sense that if number of manual interactions is your "distance" then of course more will take longer. Including targets that are unknown is just beyond the scope of what has been studied and shown, I'm saying it is not really in the spirit of Fitts' law. https://en.wikipedia.org/wiki/Fitts%27s_law
Fitts' law is referring to a single interaction ("movement") with visible targets, not a general abstract concept of "futher away" that you can extend in any way and to any topic you want across multiple interactions. It is precisely because you have to use two different movements, as you pointed out, to both scroll to see the target and then move your mouse or hand to reach the target, that Fitts' law does not apply here.
Speaking more generally, there is a big problem with your assumption here that you can take interaction studies (or any scientific results) out of context just because you can think of it as analogous. When researchers have studied human perception and motions under specific conditions, you cannot assume the findings apply to conditions that weren't tested.
You've been confidently wrong about the only two rules you've commented on.
CSS transitions can be fine, but they shouldn't block user input or force the user to wait until they finish before moving on.
For this particular instance it might not matter a ton that they broke rule 2. But imagine if this was a table of paginated data, having to wait up to an extra second each time you go to the next or previous page just so the data could animate in would be rage inducing after a long period of time.
I do agree that transitions shouldn't make you wait, and I mentioned above that I'm not the biggest fan of transitions. BUT the transitions here do not break rule #2, regardless of whether they are good design or not. Forcing you to wait as part of the interaction is not the same thing as not responding in the first place. The animation is the response to the input, and it acknowledges that the system is up and running.
A good way to understand rule #2. Here are two scenarios. A breaks rule #2 and B does not break rule #2.
A - You hit a button that makes an AJAX call. The response takes 10 seconds to arrive. The CSS has disabled button hover highlights, and button press state changes. There is no indication on screen that the request has been made.
B - You hit a button that makes an AJAX call. The response takes 10 seconds to arrive. Default CSS rules show the button press, and the page pops up a loading spinner.
(I found this because I already read the first 2-3 laws and closed the page, reopened to see the "Details" and wanted to quickly navigate to the middle/end of the list. Instantly the site felt super sluggish and unresponsive)
I totally agree with you BTW, clicking a button and having a quick (<200ms in my eyes) visual response is completely fine, even if that response is just a CSS transition. I do this all the time.
The specific problem I had is the NEXT button stops responding during that CSS transition which might not technically break rule #2 but definitely makes the UI feel sluggish and non responsive.
Note that scrolling in some browsers is a specific interaction that disables JavaScript and all other interactions while scrolling in order to maintain high frame rates and smooth scrolling. This might be an unintentional bug or side-effect of using scrolling at all, and some people consider it a browser bug. It does mean it's important to think before triggering a scroll, OTOH, the interaction here of jumping instantly to another item without scrolling could be disorienting to some people. Maybe the whole issue would be fixed by changing the transition time from 400ms to 200ms?
I'd also note that rule #2 serves a more specific purpose than avoiding any wait times. It's there to avoid confusion about what's happening in response to a click, not to eliminate all waiting, nor to eliminate all annoyances in UX delays. With a transition, it's annoying that you can't interact while the animation plays, but it's not (in this case) confusing about what's happening. I know why the button isn't working, and very quickly I know how long I have to wait before it works again, even though I'd rather that it did work instantly.
We can discuss form and composition forever, but we all know that a simple scrollable page with screen-high tiles and/or a floating "next" button would do the job a million times better than this. If that was a job-related tool and not a site that you can read once and close forever, I would consider an alternative immediately. Fun fact, I didn't even bother to go further than few "articles" and read 6-8 times more text here itt than on their site in the same amount of time.
Your points are probably correct for a ux that has such problems, but if you do not create a problem, you do not have to solve a problem, and you cannot fail at it (which is easy to do).
FWIW, I'm not discussing form or composition at all, nor am I defending the site's high level design choices at all. I'm just trying to help clarify what the rules on this page actually mean, because rule #2 was misunderstood above. This page has been posted before, and other people have also misunderstood rule #2 to assume it means that interactions have to be complete in a certain amount of time. The rule is simpler than that, and lower level than page layout issues. I would guess that part of the reason this rule is misunderstood is because it's rarely broken these days in commercial apps and web pages. Unlike the 80's, it's not that common anymore for computers to not respond at all in any way to a user input in more than 400ms, and browsers take care of a lot of the cases where it might happen.
https://jlelliotton.blogspot.com/p/the-economic-value-of-rap...
"System Response Time. This is the time span between the moment the user enters a command and the moment a complete response is displayed on the terminal."
Note the phrase "complete response" and that the paper itself is titled "The Economic Value of Rapid Response Time".
Yes the phrase "complete response" does sound like a full task finished, but what, exactly, is a "complete response"? Isn't a popup or dialog box or a loading spinner a complete response from a UI perspective? If not, why not?
The definition of "complete response" in the paper is not specific. What were the tasks being studied? Can you have sub-tasks for which there are multiple complete responses? Note the interactions this paper is discussing are terminal commands on a terminal connected to a local mainframe. They didn't have web pages.
There are notes in the paper that give clues as to what kind of tasks & responses they are talking about: "In 1979 their installed system was designed to offer 300 simultaneous users word processing, programming, computing, and remote job entry capabilities, with the response to 80 percent of the transactions being processed in .5 seconds or less."
There are lots of other clues that the kinds of interactions they are talking about are so basic and tiny that we don't even think about them as individual tasks anymore. When you read the entire thing and study the charts, what the paper is really showing is that computers in 1982 were excruciatingly slow, so slow that they interfered with basic word processing and data entry, so slow that they could actually calculate the financial savings of being able to execute shell commands slightly faster.
Even though it says the subjective words "complete response", there are and always have been large tasks that take much longer than 400ms. Does that mean any task that takes longer than 400ms is automatically bad UX? I don't think so, I consider starting a 3GB video download, for example, to be a complete response when the browser acknowledges sending the request, and starts showing progress. I think the paper's definition would agree with that because I can submit other tasks to the computer immediately, I can read other pages, type other commands, save files, etc., etc.
Here is another quote that the paper quotes: "...each second of system response degradation leads to a similar degradation added to the user's time for the following [command]. This phenomenon seems to be related to an individual's attention span. The traditional model of a person thinking after each system response appears to be inaccurate. Instead, people seem to have a sequence of actions in mind, contained in a short-term mental memory buffer. Increases in SRT [system response time] seem to disrupt the thought processes, and this may result in having to rethink the sequence of actions to be continued."
A spinner still disrupts the thought process in the same way. I would personally say that yes, anything that takes longer (I'd say more like 100ms even, possibly less) is automatically bad. It might still be the best possible in a particular situation and pretending that something will necessarily be fast when it often isn't is also bad. It is easier to plan around tasks that take longer when a small and reliable set of tasks take longer and somewhat fits with the theme in that way, but I'd still say the core idea here is "everthing that happens should happen quickly" and have other guidelines to deal with the cases where that isn't possible. Don't try to trick yourself that the system is actually responding quickly when it really isn't.
You could say that the most extreme reading of this principle would imply that a computer should never play video or audio. Personally, I would say it shouldn't except when I ask it to. My top guideline for websites would be something like "your website is not an experience". You can put an experience on your website and some people will appreciate it, but let me accomplish what I wanted to do when I visited your site quickly. Breaking my thought process to insert marketing is not a good experience.
I disagree this is not relevent today; I didn't use a mainframe in 1982 but I wouldn't be surprised if the experience was more responsive than what is common today. Part of this is due to everything making network requests today but in general system response does not seem to be valued particularly highly. I regularly wait over two seconds for a particular text entry box in Windows 10 to work on a fast modern system with an SSD and no network connection that is interacting with a small local database. Windows 7 seemed more responsive to me, as did a lot of older software compared to modern versions.
The paper talks about launching batch jobs. How does that fit into your interpretation of a "complete response"? What would the complete response to starting a batch job have been in 1982?
> I didn't use a mainframe in 1982 but I wouldn't be surprised if the experience was more responsive than what is common today.
I did use mainframe terminals in high school and college, and they were nowhere near the responsiveness that is common today. Not in the same ballpark, not even on the same planet. Our expectations for responsiveness have grown as fast as response times have shrunk, computing today is orders of magnitude more responsive across the board.
> Don't try to trick yourself that the system is actually responding quickly when it really isn't.
That sounds pretty catchy, but is completely subjective, it depends on what you mean by response, which is what we are trying to flesh out here. I'm trying to make the case that in the context of UI/UX best practices this is a red herring. The questions are about interaction and expectations, about acknowledging your input, not about whether computers can magically perform impossible feats of physics. Speed of light prevents some servers on earth from getting a response to you in under 100ms. I do tasks all the time that takes seconds or minutes, and I bet you do too. I disagree that long tasks are automatically bad UX. Bad UX is failing to notify you that you started a task, or failing to notify you that a task finished. Bad UX is giving no indication of how long a very long task will take. Bad UX does not automatically exist merely because a task takes time.
The paper is not talking about turning non-batch jobs into batch jobs (or batch jobs at all really), it is just an aside where they insert magic marketing numbers to sound good. Presumably for practical reasons they would consider the response "batch job started" to be the complete response. I think we can at least agree that it is unhelpful to call an unavoidably long task bad design just for being unavoidably long.
Nothing in the paper suggests that making tasks avoidably long is ok if the system gives an indication it is doing something.
> Nothing in the paper suggests that making tasks avoidably long is ok if the system gives an indication it is doing something.
I can agree with that statement as written, but there are a couple of minor issues with your framing here. One, I didn’t suggest that making tasks avoidably long is okay. I can see why I might appear to have hinted in that direction, but your summary, especially inserting the word “avoidably”, is not a generous interpretation of my words, and I was explicit from the start about stating that I’m not a fan of CSS transitions and not defending the design choices of the Laws of UX site. Two, you already know the context of this paper is 1980, when the alternative to what they actually mean by “complete response” is a blinking terminal cursor that doesn’t move. They’re not talking about partial response of some kind, and they are considering “batch job started” to be a complete response. In that sense, and in the context of the time the paper was written, it is very much suggesting that more quickly giving an indication that it’s doing something is the goal.
Beyond this paper, the broad idea of fast response in the UI/UX and web world has adopted the idea that showing acknowledgement of input very quickly is important. There are multiple examples of this in the nearby threads, and many hundreds of papers beyond Doherty’s that discuss these topics and demonstrate the humans perceptually prefer to see fast reactions even when the final result takes a while.
It might also be worth pointing out that for the arrow buttons on the Laws of UX site, the animation itself literally is the “complete response”. The function of the button is to trigger the animation. Animations are really out of the scope of Doherty’s paper, their idea of a “complete response” in 1980 was a line of text that could display at once.
This is where we disagree. The animation is exactly what I mean by "avoidably long". It interrupts the user the same way the long response times mentioned in the paper do. If you quote this paper, expect people to say that it means what it clearly states since this is a source of real frustration for many of us. As I mentioned earlier, some people do appreciate a more paced "experience", but many of us never want such an experience from a website and just want rapid response.
Yes, the length of animation is a design choice, and is in that sense avoidable — precisely because the length of time the animation plays was a conscious intent. What you’re talking about is not related to what Doherty’s paper was talking about.
On a technicality, I'll mention that a 400ms transition technically isn't more than 400ms, it's equal to 400ms. That's just me being cheeky though, it's irrelevant, because rule #2 is met on my laptop within 17ms when the animation begins.
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
Further, from the original study itself:
"When a human being’s command was executed and returned an answer In under 400 milliseconds, it was deemed to exceed the Doherty threshold, and use of such applications were deemed to be “addicting” to users."
My answer has not been returned within 400ms, and I had to wait for the computer, and the site was so un addicting that I exited out after suffering through those animations only 2 times. Thus not a single interpretation of Doherty threshold in its original form has been met. It’s really quite simple.
If acknowledging input rather than returning an answer was all that was needed, the rule would state as such and the old hat engineers making the original computers would have had wired “Enter” up to “bell” and called it a day. Luckily they weren’t nearly as lazy as many in this thread seem to be.
For cases such as the “downloading a 3gb file” that get brought up, I’d consider the “answer” to pressing the download link to be the dialog box saying that a download has started. I would not consider the “answer” to clicking a link to be an animation saying... I’m not sure what; rather, the “answer” to clicking a link is clearly my browser starting to navigate to that link
Side note: just for funzies, I patched vscode to show a loading animation for 400ms before opening new files. After playing around with it for a couple minutes, I can assure you that if I pushed that to master, insiders users would come screaming tomorrow morning and all the “well actually this is in compliance with XXX law because technically...” would not appease them. If you wouldn’t accept it in your editor, why accept it in your websites?
It can mean "display the linked page within 400ms" or "start the animation within 400ms". You can't expect 1 TB of data to be transferred within 400ms but you can display a progress bar within 400ms.
Apple used that to great effect. iPhones, at least in the early days always felt more responsive than Android phones. That because they hid latency using smooth animation. And it worked. It was also apparent when I compared Chrome and Firefox a few years ago. Chrome felt faster but mostly because Chrome was faster at showing something on screen. They took about the same time to fully load the page.
Side note, it would be very interesting if comments were a DAG rather than a Tree... that way one could respond to several comments with the same thread.
Shouldn't this be normal?
Instead, I think links taking you to pages where the content is immediately visible should be normal.
https://usercontent.irccloud-cdn.com/file/9LX6jYDI/Screensho...
Craigslist is a great example, original reddit is another example: my UI/UX designer friend considers original reddit to be quote “ugly and horrible”, and while there definitely could be some improvements, the reddit redesign (which I know my friend would come up with something similar to) is quite literally orders of magnitude worse, but is aesthetically “nicer”.
Original reddit looks ugly, but everything you want from an interface is there once you get through a 3 minute learning curve: information dense, enough white space (but not too much), consistent behaviour, fast, respects scrolling, etc etc.
Where did we go “wrong” with web design that what we have now is seemingly worse? And what does a good balance of “actually functionally useful” and “aesthetically pleasing” look like?
Now I just need HN to do something similar and maybe I’ll get back to being a productive member of society ;)
Granted, I have a cheap not very fast laptop, but it's less than a year old and almost everything else works just fine – certainly not as horrendously slow as Reddit. These problems seem to disappear if you gave a faster machine from what I've been told.
But, yeah; it's broken for millions of people who have low-end to medium hardware. I genuinely don't understand how they could ship something so dysfunctional for so many people.
Infinite scroll kills it after a while for me. You must spend less than 4 hours per session.
* Make users use the app * Make Reddit more like Instagram (browser visual content)
Also, I commonly see Miller's and Zeigarnik Effect being disregarded: although our working memories are not so great, we possess some and we can retain some basic information about our workflow. Then, IMHO there's more harm than good in putting a lot of visual clues, drawers, panes over panes etc. so that navigation is "improved".
Speaking particularly about form-based enterprise applications, I keep thinking that some important empirically learned lessons from the last 40 years are simply being thrown away. Simple, correct and, most important, FAST interfaces trumps everything else, even if it's a TUI.
Oh, and regular users also can and ENJOY using the keyboard -- a tool which is being deprecated in this mistake of trying to create a uniform experience between desktop and mobile.
They all have pretty much the same functionality, but some hide functionality for UI's sake. Then anytime I need to do something new, instead of looking around a busy screen, I'm sifting through a bunch of websites I found on google.
If, by removing widgets, those interfaces are making you to perform more steps and to think more to find and execute the functionality you need, then I'd say those interfaces are getting more complex actually.
Besides, this is another common mistake in current UX trends, IMO. They seem to assume that interfaces can always be simpler, as if there weren't fundamental bottom limits to complexity; and, to make things even worse, they remove widgets, replace text with icons etc., seeming to believe in a positive correlation between complexity and amount of stuff in the screen
Also: At work I make internal software for managing basically everything. We do not use any animations, besides one for dropdowns. And those are only .1 second long.
So, I kinda tend to think that animations/trying to be clever in interactions are actively harmful.
Speaking of being clever, the new reddit layout seems to try to be a single page application. I hate those quite a bit, due to making it much harder to browse.
Seriously. What are your most appealing UX designs these days?
https://ibb.co/ZJr2MXG
Certainly some fine UI laws in action.
In some contexts (selling), certain things are more important, like having a beautiful appearance and no data overload. Your first time user may be your most common user, because they may only make one purchase per [lifetime, year, etc]
In other contexts, for instance industrial controls, data density is more important, and the user may be expected to take more time to learn the interface. There is still some need to accommodate new users, because everyone is a new user at some point.
In any case, there is a decision to be made, aided by some data presentation.
To me UX is modern day industrial design - both for internal tools and for products.
1. Aesthetic Usability Effect - Users often perceive aesthetically pleasing design as design that’s more usable
2. Doherty Threshold - Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other
3. Fitts’s Law - The time to acquire a target is a function of the distance to and size of the target
4. Hick’s Law - The time it takes to make a decision increases with the number and complexity of choices
5. 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
6. Law of Common Region - Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary
7. 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
8. Law of Proximity - Objects that are near, or proximate to each other, tend to be grouped together
9. Law of Similarity - The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated
10. Law of Uniform Connectedness - Elements that are visually connected are perceived as more related than elements with no connection
11. Miller’s Law - The average person can only keep 7 (plus or minus 2) items in their working memory
12. Occam’s Razor - Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected
13. Pareto Principle - The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes
14. Parkinson’s Law - Any task will inflate until all of the available time is spent
15. Peak-End Rule - People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience
16. Postel’s Law - Be liberal in what you accept, and conservative in what you send
17. Serial Position Effect - Users have a propensity to best remember the first and last items in a series
18. 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
19. 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
20. Zeigarnik Effect - People remember uncompleted or interrupted tasks better than completed task
Ironically, in the strict (and best) sense of the notion "user interface" (i.e. being an effective, efficient, easy conveyance of information to/from computer and user), yours is better than the fancy site.
i hope they don't sell a single book as this serves as an example of how to not do UX.