23 ms·
Laws of UX
- eagsalazar2 6y agoThis is a great example of my own first law of UX: Almost everyone is terrible at UX, including people who think they are experts at it.
- twirlock 6y agoIt'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?
- SilasX 6y agoGreat compilation! But 12-14 don't seem to have direct relevance to to UX. (Occam's Razor, 80/20 rule, and "work expands to fill available time".)
- csours 6y agoAre you thinking of UI? 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.
- SilasX 6y ago> Are you thinking of UI? 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.
- csours 6y ago> "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.
- avodonosov 6y agoYes, 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.
- wgx 6y ago<ad> Shameless plug: If you want 81 more: https://uxbook.io https://uxbook.io </ad>
- 50 6y agoAdded to cart! But in similar vein, do you know if UX writing is a viable career? If so, how would one get into it? What should be on one's portfolio?
- wgx 6y agoI 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.
- projektfu 6y agoWhat do the shapes mean?
- 1f60c 6y agoI think they were just meant to make the design more interesting :)
- jmole 6y agothe shapes are the raison d'etre for the article. "How many UX concepts can I attempt to illustrate with basic shapes and shading?"
- TeMPOraL 6y agoI'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. If it were meant to convey information first, it would have looked like this: https://news.ycombinator.com/item?id=24031163 https://news.ycombinator.com/item?id=24031163.
- KineticLensman 6y agoSome of them seem completely arbitrary. Others vaguely relate to the law involved - e.g. #6 where the circles share a common boundary. 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.
- test7777 6y agoyou can scroll down to get the actual content. but get this, while that site is about UX, its UX is so bad you didn't figure that out right away.
- ourmandave 6y agoLAWS OF 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.
- isatty 6y agoThank you so much. Rule 21 should be: don’t make the user click 20 times.
- kipply 6y agonice compilation! is anyone else bothered that they have to scroll below the fold after clicking "learn more" to get to the content?
- Waterluvian 6y agoThe 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.
- amelius 6y ago> I have to say, I love the style of these graphics. Minimalism I guess? I'd say if you practice Minimalism, then also make sure it applies to the total amount of space you're using for it ;)
- Waterluvian 6y agoYeah I’m probably using the entirely wrong term. Whatever you call this style.
- smrk007 6y agoIt’s much better from desktop view, I found.
- joeyspn 6y ago> I love the style of these graphics. Minimalism I guess? It's a "Memphis style" variant. Pretty trendy these days. Now the industry is starting to move to "Neumorphism".
- Waterluvian 6y agoThanks. Two new terms to google.
- ardy42 6y ago> 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 https://en.wikipedia.org/wiki/Memphis_Group and this: https://www.megapixl.com/illustration-for-hipsters-memphis-style-illustration-67848727 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+Graphic+Design https://www.google.com/search?q=Swiss/International+Style+Gr..., but I'm by no means an expert.
- seesawtron 6y agoDiscussion from 2018: https://news.ycombinator.com/item?id=16185118 https://news.ycombinator.com/item?id=16185118
- kazinator 6y ago> 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.
- wtracy 6y agoThe 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!
- FridgeSeal 6y agoI agree, 400ms is a long time. 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.
- 1f60c 6y agoBecause 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.
- jakear 6y agoI 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?
- pretty_lorelei 6y agoThe 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.
- petepete 6y agoContrast ratio of 1.19 on the numbers isn't a good start either.
- csours 6y agoThe 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.
- crawsome 6y agoI'm not cruising for irony here, but trying to use this site is a huge pain.
- spanhandler 6y agoThe 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.
- jakear 6y agoNot to mention you can use it without any sort of account. Truly fantastic website design.
- FridgeSeal 6y agoIt 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?
- jakear 6y agoI personally love the new reddit design: it’s so miserable to use that it has broken my reddit addiction almost entirely! Now I just need HN to do something similar and maybe I’ll get back to being a productive member of society ;)
- DangitBobby 6y agoThe 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.
- myth2018 6y agoI 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.
- JamesBarney 6y agoI'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.
- myth2018 6y agoI 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
- 6y ago
- rapnie 6y agoRule no. 0: People will always complain about your UX choices /s Seriously. What are your most appealing UX designs these days?
- scraft 6y agoThis is how it looks for me in the Materialistic Hackernews app https://ibb.co/ZJr2MXG https://ibb.co/ZJr2MXG Certainly some fine UI laws in action.
- mimsee 6y agomaybe update android webview?
- markdog12 6y agoDoherty didn't go far enough.
- Animats 6y agoThis is on user interfaces for sites that are selling something. It's not for user interfaces that are for doing something.
- csours 6y agoMy 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.
- csours 6y agoHow does your organization approach UX? Do you feel like it is taken seriously? To me UX is modern day industrial design - both for internal tools and for products.
- ivan_gammel 6y ago#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.
- realtalk_sp 6y agoAccessibility 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.
- punnerud 6y agoCopy-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
- eplanit 6y ago
- XCSme 6y agoLaw 21: Check text contrast on your page. Black text on dark gray background is hard to read.
- indiantinker 6y agoStop doing this to design. Please!
- mxmilkb 6y agohttps://i.imgur.com/g1QERdk.png https://i.imgur.com/g1QERdk.png I guess the Materialistic app does need some TLC though
- test7777 6y agooh 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.
- deleted 6y ago[deleted]
- marcianx 6y agoSome (hopefully) constructive feedback based on my experience on this site: - At first, the site looked like a slideshow with prominent prev/next at the top and a title content that takes the entirely of my desktop monitor. So, naturally, I hit the keyboard right arrow (like most slideshow web pages) to get to the next slide for content, and nothing happened. - Then at the bottom left, there's a down button. So I scrolled down to find the content there. I read it, and still subconsciously hit keyboard right for the next slide...oops, I mean, page...because of the prev/next at the top (sure, pebkac and all that; but it's also expectations-setting). - Then I clicked on "next" to get another page that again takes the full monitor for the title, requiring scrolling down to get to the content, all of which can easily fit on a single screen. It seems unnecessarily "distracting", in a sense, since the expectation is that the user would actually go through the content and not just the titles which themselves are not very informative. - One way I tried to improve ergonomics was to hitting page-down to read the content and then tab a couple times to get to the next button (almost automatic). However...the focus indicator for the "next button" has been removed in CSS, which is another usability nono. Of at least tangential relevance here are Doherty Threshold (slide 2) and Jakob's law (slide 5). Just my 2c.
- layoutIfNeeded 6y agoCan’t really trust UX advice from a site with such annoying UX.
- Jaruzel 6y agoWhen I was first getting in web design (mainly for fun, but also a bit of profit), I read 'Don't Make Me Think'[1] it really helped me understand the difference between good and bad web usability design. --- [1] https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability/dp/0321965515/ https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability... (Non-affiliate link. I'm just recommending a book I found helpful...)
- dathinab 6y ago> Jakob’s Law I have a problem with that law. EDIT: TL;DR/Clarification: What matters is what users believe as "intuitive and easily usable" which is not implied by something being familiar nor by what most other sites or apps do. People don't want your site to work like other sites at all. They want your site to work "intuitive and easily usable" for them. As such they only want your site to behave like other sites if what they perceive as "intuitive and easily usable" was coined bye such "other" sites. But in reality what user perceive as "intuitive and easily usable" is often largely coined bey the UX patterns around which they "learned" to use tech initially. Which means what is "intuitive and easily usable" is often displaced in time and depending on your audience might MAJORLY differ from what most other sites you can find today in the internet do!! A good example is sourcehut (e.g. look at `https://git.sr.ht/~sircmpwn/scdoc` https://git.sr.ht/~sircmpwn/scdoc`). It's visually completely different from what most other github like sites do and probably for some people it might look bad. But for their target audience it's supper appealing as it appeals to what that audience originally learned to be "intuitive and easily usable". So I would strongly argue that Jakob’s Law is a harmful over simplification of the actual effect which might be ok for some target audiences but literally might brake your business if applied blindly.
- Izkata 6y ago> (e.g. look at `https://git.sr.ht/~sircmpwn/scdoc` https://git.sr.ht/~sircmpwn/scdoc`). HN doesn't have backticks syntax, so the trailing one is getting inculded as part of the link and 404ing. Fixed link: https://git.sr.ht/~sircmpwn/scdoc https://git.sr.ht/~sircmpwn/scdoc
- dathinab 6y agoThanks for the reminder, total leap of judgement in on my part. I really shouldn't write comments after/just before midnight ;-).
- d_burfoot 6y ago"The useability flaws of an application are invisible to its designer."
- mmhsieh 6y agoLaw 21: You can never please everyone.
- anonytrary 6y agoI find it ironic that the number heading contrast with the background is almost non-existent.
- deft 6y agoRule 21: your text and content should be readable. The very low contrast between the numbering and the grey background is distracting and looks like a video game "make the second image barely visible" configuration.
- mrob 6y agoPostel's Law ("Be liberal in what you accept, and conservative in what you send") is a bad idea. You should be conservative in both, which will result in broken software, but broken software gets fixed. Postel's Law adds avoidable complexity, and complexity is a major source of security vulnerabilities. Unlike broken software, insecure software often stays insecure until it's being actively exploited.
- freehunter 6y agoAs someone who has spent their entire career in infosec, one of my most important rules is “security should break your company”. The alternative is, someone else will break your company for you. If you can’t produce a document that explains what this server does and every external interaction it could possibly have, you’re failing. Be extremely conservative in what you accept. If you’re allowing basically anything in, eventually the wrong person with the wrong code will get in. And that might very well be the last day you have a business.
- miguelmota 6y agoI agree that in general Postel's law is bad practice but I think that it also makes sense under certain contexts. For example, if you have an email input field, it's better to trim spaces from the user input before sending it to the server instead of showing an error that there's spaces needing to be trimmed. In this example the input field is liberal in what it accepts and conservative in what it sends to the server.
- noobermin 6y agoThat might be the issue, what is "liberal" and "conservative" needs to be quantified. Taking Postel's law or any law/adage to an extreme is a bad idea.
- noobermin 6y agoIt seems better to try to ship software that works than ship software that will intentionally break. I get "everything will break" but ensuring it will break sooner and more spectacularly seems like a headache for users.
- stblack 6y agoPlaintext: LAWS OF UX 01. Aesthetic Usability Effect: Users often perceive aesthetically pleasing design as design that’s more usable. 02. 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. 03. Fitts’s Law: The time to acquire a target is a function of the distance to and size of the target. 04. Hick’s Law: The time it takes to make a decision increases with the number and complexity of choices. 05. 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. 06. Law of Common Region: Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary. 07. 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. 08. Law of Proximity: Objects that are near, or proximate to each other, tend to be grouped together. 09. 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 tasks.
- markdown 6y ago
- aswanson 6y agoI love the design on this site.
- spaetzleesser 6y ago"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." A lot of designers should write this down 100 times before they start working. An extension should be "users prefer your site to work the same way as it did yesterday since that's what they already know."
- FridgeSeal 6y agolooks pointedly at Spotify Can we also have some rule about the maximum frequency of changes? Alternatively can I go one further and suggest that for UI/UX changes, agile style sprints are absolutely not the way they should be done? Rushing out change after change in the UX won’t let you actually see what works and, and let you iterate, it just disrupts users. These changes should be thoroughly thought through, distilled, tested properly - not wildly deployed onto a subset of users, and if necessary, grouped up and deployed altogether so that there is only one UI change to adapt to, not 30.
- spaetzleesser 6y ago"grouped up and deployed altogether so that there is only one UI change to adapt to, not 30." that's what I am disliking more and more about rapid releases. If there is a big change once a year, I can take time to read the release notes and learn what changed. But if there is a change once a month I can't keep up.
- physicles 6y agoAnother related aphorism, I believe from Joel Spolsky: “Users don’t want to use your software, they want to _have used_ your software.” Users come in with a task they want to perform, not so they can bask in the glory of your wonderful UI.
- twat 6y agoThe only rule of [subject] is that there are no rules
- enriquto 6y agoCannot take this article seriously. The best UX for this content is clearly a single page of text with 20 sections.
- nwallin 6y agoThis is, without a doubt, one of the worst UXs I've ever used. This cobbler's children have no shoes. Not because he doesn't care about his children, or can't be bothered after a long day. No; this cobbler simply doesn't know how to make shoes. edit: is the site satire? Poe's law is strong with this one.
- noobermin 6y agoI think the first law gives ux people too much of a license. Who decides what is "aesthetic?" When it's designers to begin with they can use to justify all sorts of pretty but user-unfriendly designs. One of the best examples in my mind was that spate of poor contrast color schemes from the mid 2010s that was fairly common and still persists on some sites.
- LoSboccacc 6y agoweird that a 20 UX rule website is so hostile to navigate on mobile. for each role you click to get in then swipe all the way past the fold to get to the sentence of interest then swipe all the way past the footer (!) to get to the next rule
- willpegan 6y agoGreat
- miguelmota 6y agoLove the color schemes and animations. Nicely done. Some feedback: - Make clicking the browser back button resume in the same position user was instead of taking them back to the top of the page. - Move the 'Serial Position Effect' item to be the last item in the list for greater effect. - Link directly to the PDF for the posters instead of the dropbox folder. Also having a separate page for all the downloads would be nice. - Speed up the animations on the linked pages since they're a bit slow. - Doing the shape animations as the user scrolls down the page could be interesting instead of the static images.
- hizxy 6y agoEveryone has a different definition of UX. That makes the term meaningless.
- enjeyw 6y agoI've got serious doubts about a list of 'UX laws' that doesn't include any references to affordances (or anything else from 'The Design of Everyday Things'). Also, this site is impossible to read?
- mayoff 6y agoYou have twenty things to say, and your site only shows one thing per screen regardless of the size of my window. Apparently you think a PowerPoint deck is the pinnacle of UX?
- rrdharan 6y agoPreviously discussed in 2018: https://news.ycombinator.com/item?id=16185118 https://news.ycombinator.com/item?id=16185118
- deleted 6y ago[deleted]
- npunt 6y agoThis site feels like the product of a graphic designer trying to formally learn UX, and a classic case of theory & book smarts not translating to practice.
- ratsimihah 6y agoCan you disable horizontal scrolling on the menu on mobile please
- mekoka 6y ago1. Users often perceive aesthetically pleasing design as design that’s more usable. As a non-designer who's had to fight many designers on this, I'd like to draw your attention to the fact that this is about perception. It's about a user's first impression regarding usability prior to actually using the system. It's not an actual impression based on their experience after interacting with it. That impression can quickly evaporate the moment they try to do anything with the interface. If time and money have to be allocated to develop a product, use them wisely. The properties of this principle seem to be more relevant to marketing and advertising than actual UX. I believe that the wrong take-away from reading this law would be that improved esthetics implies improved usability. Attempting to place esthetics and function on the same pedestal would be a mistake. When it comes to usability, function is superior to esthetics and should almost always be given priority, no matter how ugly. I agree that esthetics can and should be used in a way that it supports function, but as you add to it, there will always be a point of negative return (functionally speaking). If you misunderstand what that law is saying you might be misled into thinking that esthetic climax and usability climax are on the same locus. I think we can agree that something can often still be made even more beautiful way past the point where it's almost completely unusable. Adversely, you might be called into making something uglier in order for it to become useful again. Better get comfortable with the idea.
- 627467 6y agoI'm a designer (maybe of the less designry sort) and I agree that I would have moved the 1st law further down and added more clarifying context here to avoid the misunderstandings you listed.
- peferron 6y agoI find this principle useful when users come with negative preconceptions against the usability of your product, perhaps because of previous iterations that weren't very usable or because they tried other products in the same space that weren't very usable. Putting additional effort on aesthetics can encourage these users to consider your product with fresh eyes, or give it a chance when they otherwise wouldn't. Of course, past that initial help you need "real" usability to keep them. For example, I would pay a lot of attention to this principle if I was working on a product in the payment space (e.g. Stripe), taxes (e.g. TurboTax), etc.
- 627467 6y agoOnly skimmed the content for now and can already appreciate the quality of the thinking and how it is presented. Thank you. I also love how the site looks and behaves exactly the same with or without javascript (ublock origin user here) EXCEPT for the menu which relies on js. I wonder if site creator can be persuaded to replace that js dependency with the "checkbox hack"[0] at least for the basic navigation. [0] https://css-tricks.com/the-checkbox-hack/ https://css-tricks.com/the-checkbox-hack/
- kgraves 6y agoRule number 21: Site should still work with JS disabled.
- tlow 6y agoThis is not new and is almost entirely covered in two reference resources I use as a designer. 1. Universal Principles of Design https://g.co/kgs/X19MeR https://g.co/kgs/X19MeR 2. The Humane Interface by Jef Raskin https://g.co/kgs/JfdBkB https://g.co/kgs/JfdBkB
- jhardy54 6y agoPlease just post the URL instead of using a redirect link, especially if you're just doing a google search for the words you posted. 1. https://www.google.com/search?q=Universal+Principles+of+Design https://www.google.com/search?q=Universal+Principles+of+Desi... 2. https://www.google.com/search?q=The+Humane+Interface https://www.google.com/search?q=The+Humane+Interface
- tlow 6y agoI just used Google's built in "share" button, is that incorrect in some way?
- summitsummit 6y agoless friendly as it obscures the destination to the user. it could have been a rickroll or something pertinent given the url
- bananaface 6y agoI think this is bikeshedding. Edit: bear in mind vanilla search URLs include personal info, which you need to know how to identify & strip.
- peferron 6y agoI use Universal Principles of Design as an engineer as well. Before starting a new project, I'll flip through the pages and compile a list of principles that are particularly relevant for the project. Then as the project progresses I'll check that list from time to time to help me steer it in the right direction.
- clashmeifyoucan 6y agoironic that the first block talks about aesthetics but the text literally does not meet the acceptable contrast ratio. I do like the rest of it, though.
- llaolleh 6y agoI need to do an analysis of all of these with Microsoft Teams. That piece of software breaks so many fundamental UX laws. One of the worst culprits I've ever seen.
- taphangum 6y agoThis is great. But IMO, the real fundamental aspect of UX, from which all others emerge, is the law of having a great information architecture. I wrote more about this here: https://simpleprogrammer.com/information-architecture-developers-learning-design/ https://simpleprogrammer.com/information-architecture-develo....
- jhardy54 6y ago> Want To Earn More... And Receive Extra Recognition? Take this self assement and see how you can boost your software development career today! Yes, Show Me How! I wanted to read your thoughts but your pop-up modal prevented me from reading your article and also decreased the probability that I'll ever visit your website again.
- taphangum 6y agoIt's not actually my site. I just guest posted there. But try refreshing and see if it helps.
- deleted 6y ago[deleted]
- kabacha 6y agoIt's missing by far the most important law: if the user uses the program the same way after a year of usage it's a failed program - in other words good program design needs to allow the user to grow.
- TwoBit 6y ago"By far the most important law"? What are you smoking?
- quickthrower2 6y agoAnother "expertsexchange" style domain name!
- quickthrower2 6y agoJakobs law: Yellow on white is impossible to read.
- deleted 6y ago[deleted]
- SPBS 6y agoNo one mentioning that the site being SPA makes it laggy? If this were a static webpage - and it should - the scrolling would be 100% responsive. Instead on my 2015 macbook the animation stutters when loading the page in and scrolling down too fast incurs a delay while the content loads.
- nyanmatt 6y agoWallpaper versions: https://t.co/Hj9MLMaDVM?amp=1 https://t.co/Hj9MLMaDVM?amp=1
- strogonoff 6y agoUsage of monospace font and questionable accessibility practices put into question the authority of this resource. That aside, what most UI/UX rules fail to capture is that our experience of X exists over time and in larger context. Aside from things with near-zero intended lifespan (which this one may well be—I won’t pretend I know author’s intention), it is not only (and not so much) important how a product or resource is experienced right at this moment, but also how it will feel after a while, how it would evolve, how it interoperates with other software or resources (including search engines), what resources are required to maintain it, etc. True beauty arises from functionality and sustainability.
- buddyp450 6y agoFor a UX page about the laws of UX I'm very happy I am a law breaker. This site is terrible for communicating it's point.
- falcrist 6y agoWhat's with the oceans of empty space between everything? Who likes this? Please put more than one thing on the screen at a time, especially when those things are links that lead to the actual content. Also, when I click through to one of the laws, there's no indication that I have to scroll down, so I'm clicking around for a few seconds like an idiot trying to figure out what to do. I feel like I'm crazy... Is this really considered good UX?
- ggcdn 6y agoThe 0th law of UX: Any website that attempts to describe good UX will itself be criticized for bad UX.
- hmmazoids 6y agoWell yeah you better preach what you teach or look like an idiot
- Hasu 6y agoHN users, on the whole, are terrible UX critics who have no idea what they're talking about on the subject. The average HN user probably: - knows their way around a terminal - understands default browser behavior in depth - has the programmer's mentality of 'everything should be governed by universal logical rules that apply equally everywhere' The truth is, this is not how most users think. Good UX for a cli application is not the same as good UX for a website. If you think of websites in terms of what programmers think good UX is, you get... HN and Craigslist and all the other things that HN users typically think are fantastic user experiences, because they meet their expectations. These applications are also almost uniformly ugly. This actually makes perfect sense, and for these users, this is fantastic UX. But what makes UX good is that the target audience can easily use the software. That's it. There's no such thing as an 'intuitive user interface'. Clicking on stuff in computers is not natively intuitive to humans. There are only familiar and unfamiliar interfaces. Every interface we haven't seen before is unfamiliar and 'terrible' at first glance. People will train themselves to use and love extremely bad interfaces, or refuse to use very good interfaces that are difficult to learn. The HN user is someone who has typically put a lot of effort into learning how computers work and how web browsers work by default, so they develop intuitions like, "If a website breaks the default browser behavior, it's bad UX." And for them, that's true, but what makes the default browser UX better than an alternative, other than that you already know it? Now maybe it actually is better, and I can think of many examples of websites that change default behavior in ways that are absolutely worse. But I've also seen websites do cool things with scrolljacking that aren't inherently wrong because they defied expectations for 3 seconds. Every application has to be learned by the user. How easy it is to learn it depends on the background knowledge and experiences of the user, so it's very very hard, if not completely impossible, to develop a UX that will be good for every possible user. But if some UX isn't good FOR YOU, that doesn't mean that it's bad, it might just mean you aren't the target audience.
- jeremydw 6y agoNoticed that keyboard navigation (tabbing, focus order, focus rings, etc.) didn't work on this site. Maybe I'm being pedantic but a baseline for good UX should be accessibility.
- staycoolboy 6y agoThat's a lot of named laws!
- TwoBit 6y agoPostel's Law is bad - "be liberal in what you accept and conservative in what you send". It has a history of destroying technical standards. Remember how so much HTML was broken on conforming browsers ten years ago? That's because Microsoft wrote their browser to accept any broken crap you gave it, so that's just what everybody did.
- 1MachineElf 6y agoPeople here have a lot of nit-picks about the design of this site. Throwing mine in: I dislike that it's logo is a triangle containing a circle and a square. Reminds me too much of a Witch House album cover, or some other "dark" aesthetic appropriating that look. Kind of hard to put into words, but that symbol carries a smugness that seems just a little more pronounced outside of a 2020 goth context. I'm not trying to be persuasive, just honest.
- nojvek 6y agoWhy are they mostly named after white men? I’m sure other people practice and research UX too right ? Like some laws have multiple researchers who wrote the original paper but the law takes on the white man’s name rather than the other minority person. Why? It would be a lot more welcoming if we changed the laws to be named what they mean. E.g Fitt’s Law -> Size & Distance Law. Doherty’s Threshold - Respond to input within 400ms Etc.
- noir_lord 6y agoWhy is that relevant here? Other than igniting the inevitable firestorm.
- nojvek 6y agoBecause it implies only white men are good at UX even though the other researchers had equal contributions. Tech is already so biased and this propagates the idea.
- blatter2016 6y agoOh god, not this trite BS again.
- joshu 6y agoWhat about Cole’s Law?
- pilif 6y agoTo be snarky: A page titled "Laws of UX" probably shouldn't have black text on a dark grey background (the law numbers)
- JGM_io 6y agoAm I the only one that thinks these are UI rules and not specifically UX?
- je42 6y agoit took me a while to find the arrow get to the explanation....
- rkagerer 6y agoAesthetically pleasing design can mask usability problems I'm not sure that motivation deserves praise. Provide system feedback within 400ms in order to keep users’ attention and increase productivity. That's horrible lag. Try 30ms. I get frustrated whenever the responsiveness is slower than I can hit keyboard shortcuts or click. I even turn off Android animations as they slow me down. Touch targets should be large enough for users to both discern what it is and to accurately select them... Touch targets should have ample spacing between each other Sure thing hoss. But don't take it too far. The wasted screen real estate on your site is abominable. ...I had to stop after the first few...
- muzani 6y agoHere's the straightforward plaintext version: 1. UI > UX. 2. Respond in less than 400 ms. 3. Make buttons clickable. 4. Make it simpler. 5. Copy functionality and UX off other sites. 6. Draw borders around similar functionality. 7. Simpler imagery is better. 8. Users think objects next to each other do similar things. 9. Similar items close together look like one big thing. 10. Things that look the same (color, font, etc) will look like they do the same thing. 11. The average person can remember 5-9 things at once. 12. Remove all unnecessary elements. 13. Focus on the 20% that does 80% of things. 14. Any task will inflate until all of the available time is spent. 15. People judge the experience by its beginning and end. 16. Be tolerant to whatever actions the user may take. 17. People remember the first and last items in a series. 18. You can't reduce all the complexity. 19. When one thing stands out from others in a group, it will be remembered. 20. People remember incomplete tasks, i.e. use progress bars. 4 and 12 are identical. 14 has nothing to do with UX or UI. 15, 11, and 17 are the same. 18 is an excuse masquerading as a Law. From 11-18, it feels a lot of these are pulled in from some Tim Ferriss book or some generic self-help Seven Secrets of Highly Influential People. Perhaps it believes its 15th and 17th law so much that it thinks it can hide fluff in the middle of the list. It establishes credibility with a lawsofux.com domain them then proceeds to wreck it by violating its 7th law. It does solidly prove its first law, that if you have a pretty enough site, everyone will believe it.
- yoz-y 6y agoWorst thing is, that taking 1, 4, 11, 12 and 13 as a gospel ends up with stuff like macOS Big Sur. Power users are left wanting because features that are useful, but a tiny bit niche are getting either removed or hidden in shelves.
- andialo 6y agoOr gnome's hell.
- read_if_gay_ 6y agoYour critique is based on your interpretation of the laws which is in many cases clearly incorrect. Take for example 15. It doesn’t say people judge by the beginning and the end, but by the peak and the end. Or 4 - representing Hick’s law as “make it simpler” misses so much nuance that the key point is completely missed. It rather seems like you barely skimmed the page before deciding to shit on it for arbitrary reasons.
- rawoke083600 6y agoSide Note: I'm not an UX Expert and won't comment, my sites usually looks like Xmass trees ! What IS interesting is how many times this site(https://lawsofux.com/ https://lawsofux.com/) has been submitted and not received ANY comments and now about the 10th time it got submitted, it has 226 comments :) ? lol HackerNews can be so weird at times.
- yoz-y 6y agoOh. The last time this came around I remember writing a digest because the site was hard to read. https://yozy.net/2018/01/10-laws-of-ux-digested/ https://yozy.net/2018/01/10-laws-of-ux-digested/ It seems that it got updated with double the rules since then.
- steinuil 6y ago> Users often perceive aesthetically pleasing design as design that’s more usable. Is that right? Personally I feel like the opposite is true; I'll take an ugly looking but very usable UI over one that has all the bells and whistles but is actually a nightmare to use. Surely when the UI is bad and the UX is also bad the effect is compounded, and first time users might very well perceive the combination of bad UI/good UX as much worse than good UI/bad UX, but I really don't think this should be given out as good advice.
- thiht 6y agoThat's not what the "law" says at all. If you have two websites with very similar UX, both very usable with the same quirks, one beautiful and one ugly, users will be more forgiving towards the beautiful one.
- fold_left 6y agoSome of you might also be interested in The Laws Of Simplicity by John Maeda http://lawsofsimplicity.com/ http://lawsofsimplicity.com/
- flr03 6y agoAfter reading all the comments of the UX experts here I almost feel that I need to apologise to have enjoyed this list of nice cards over a list of bullet points.
- eurasiantiger 6y agoI don't buy the first one about apparent usability. The claim that better aesthetics are perceived as better usability is based on a 1995 study by Kurosu and Kashimura. The study was done on 156 students of a Japanese design school and 96 students of a Japanese university psychology course. That's already an over 160% sample bias towards very likely extremely aesthetically-minded people, not to mention that the Japanese have an ancient culture of aesthetics (https://en.wikipedia.org/wiki/Japanese_aesthetics https://en.wikipedia.org/wiki/Japanese_aesthetics) which in itself renders the study and its conclusions culturally irrelevant to global audiences.
- Andrew_nenakhov 6y agoUX of this website is horrible. It is rather stylish but makes it incredibly hard to understand what the author wanted to say. This [1] commenter here did a better job in simple plaintext. Thus, for the breach of the Laws ot UX, by the authority granted to me by myself, I sentence the author of the website to 2 months of studying GNOME HIG. [2] [1]: https://news.ycombinator.com/item?id=24034941 https://news.ycombinator.com/item?id=24034941 [2]: https://developer.gnome.org/hig/stable/ https://developer.gnome.org/hig/stable/
- neop1x 6y agoThis is what I would like to suggest: 1. make it respond fast to input (it is super annoying that some textboxes are not pure native textboxes anymore and have deep javascript logic behind that sometimes I see characters popping up slowly as I type!) 2. avoid low contrast between text and background (it's hard to read your light gray text on white background) 3. make it clear what a button is and what a label is (a blue label being a button on iOS) 4. avoid wasting screen space, stop making fonts huge unnecessarily (if you wasted half the screen size by couple of words or there are big empty spaces where is your content really, what are bigger screens good for then) 5. stop designing desktop UIs like it was a smarphone (scrollbar should really be big enough to move by mouse and handle should have contrast to the slider; I am not touching my desktop screen or scrolling by swiping and hopefully never be) 6. for text content (descriptions, articles, comments, etc) stop preventing right click, copying text or messing up with clipboard (like appending some garbage at the end of copied text) 7. stop inventing original design widgets no one asked for and it is not immediately obvious how they work and easy to use / just an additional option (I have seen many toggles where it was unclear whether they are in On or Off state; or widgets lost ability to be controlled by the keyboard; or date fields which I could fill in in 2 seconds by keyboard but they forced me to spend minutes by selecting year first, listing months, finding the day in some unnecessary calendar popups) Thank you.
- alvarlagerlof 6y agoThis is exactly like those UX Instagram accounts that for example say "make sure to have a high enough text contrast" then procedes to completely brake that rule in the next post.
- colapro 6y agoInteresting how the law count here seems to have ballooned to double of what it was a few years ago when this link was on the front page before.
- karaterobot 6y agoMany people in this thread are criticizing the website's design, as though to criticize the content itself. In case it's not clear from the website: they did not make any of these observations themselves, they just curated and presented a list of observations other people made, usually decades ago. It doesn't follow that any ineffective design or unclear wording on the presenting website reflects on the validity of the source content. A stronger criticism, at least in my opinion, is that presenting observations about user behavior as "laws" is misleading, since humans aren't particles. You can have laws in physical science, but not in design. If you thought of these as laws rather than wise words to bear in mind, you'd be an ineffective designer.
- JamesSwift 6y agoTo be fair to the critics, there is a difference between posting a blog post about laws of UX and creating a site with a domain of 'lawsofux.com' dedicated to the practice. In this case, I would assume that the site I am interacting with is trying to adhere to its rules how it interprets them.
- rxsel 6y agoThe law says “make all applications and programs accessible, aesthetic, intuitive, and user friendly” but I think I see alotta engineers out here.
- ryeguy_24 6y ago> "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." While likely accurate, this thinking is likely not conducive to UX innovation.
- mleonhard 6y agoIt's missing a warning about modes. That is a serious omission. If you want to learn about UX, Nielsen Norman Group's website is a good place to start: https://www.nngroup.com https://www.nngroup.com