Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but buttons that don't look like buttons because they blend into the background are another pet peeve - or have light gray on dark gray. Ugh! Contrast serves a purpose!
> Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but buttons that don't look like buttons because they blend into the background are another pet peeve - or have light gray on dark gray. Ugh! Contrast serves a purpose!
Modern UX design fads appear to be a UX trainwreck.
It's kind of sad when the supposed experts choose to badly screw up stuff that had already been figured out. Sometimes it seems UX rule one is: show you're better than your users by invalidating their investment and making your UI harder to use once they've gotten used to it.
I vaguely remember a pizza delivery company facing a fine, because its website actively broke screen readers, and therefore was considered as discriminating against the blind.
Memory says a blind would-be customer complained loudly, but was ignored before they engaged the authorities with a formal complaint.
Honestly this all sounds very old fart “they don’t build them like they used to” and “back in my day”. That isn’t to say I disagree with the sentiment entirely. But:
A hidden button doesn’t clutter up what the user interacts with so long as the user knows how to find the button. I like clever interfaces after I figure them out. I don’t like them before because they make me feel stupid. But as soon as they make me feel smart after I figure them out, I suddenly enjoy them so long as they meet the second goal: make me productive. Take Snapchat for example. It has a really clever UX where you tap on your face and it will bring up filters. I honestly don’t know if there is a dedicated button for this somewhere. I certainly felt dumb right up to the point where someone showed this feature to me and and then it felt very neat.
So maybe when the pendulum swings from clutter-free to discoverable again we could find some compromise between 1000 buttons on the screen that all do something and no visible buttons and figure out clever AND discoverable interfaces.
And before yet another startup with their idea for a UI walk through GUI pops up, no those things aren’t the answer. They suck and I would prefer they didn’t exist. If your UI needs it, you designed a bad UI.
The problem starts if you have to make assumptions about the ability of the user to figure things out. Smart user interfaces too often leave people behind because it is far too complicated to test UX for discrimination. Good design guidelines like the OP help. However, I agree there is the slight possibility for smart UX: First build it with your grandma and a user with a switch input in mind (a11y personas) and let the kids do the learning curve...
> It's kind of sad when the supposed experts choose to badly screw up stuff that had already been figured out.
Most "experts" I meet know... nothing. They don't know basics of their jobs, they don't think how their design / code will have effect for people other then... them.
I'm not a web designer but I personally don't have any issue with "modern" UI design. It looks clean to me and I don't have any trouble distinguishing things. Just a data point.
I've been doing software engineering for about 16 years now and 10 of them have been specializing in design, UI and UX. Modern UI principles are good. A stark improvement from the days when hapless engineers were in charge of design because nobody considered it. There are always bad trends and bad apples, but they stick out a lot more now. Mostly because they're contrasted so sharply with good design everywhere.
It’s boring when UIs have a stark contrast; What makes light contrasts beautiful is rarity. Perhaps in the future, extremely elusive UIs with very faint variations will be the top of the design fashion after using cookies to know the user’s tolerance to light contrast.
For example, today’s movies are pitch black because they want to upsell 5000:1 screens. The sole reason it didn’t happen to software yet is because we don’t receive any kickback from screen manufacturers, as opposed to movies.
Yet UIs are too often services increasingly necessary to live and excel in life. So all these rare and beautiful designs keep out users with vision problems, or at minimum push them to use more tooling to work around that shit.
> Especially the contrast/magic number discussion.
From a developer perspective, working with color palettes with defined "magic numbers" is really great. I have written a blog post [1] around this topic and wrote a tool [2] to calculate/ensure accessible magic numbers for color palettes.
It's worth pointing out that HNs 's heavily downvoted posts are intentionally hard to read. Thats hardly a gotcha. Now whether they should be is a whole different question.
Speaking about accessibility, who came up with that name "magic number"? It's already an overloaded term with multiple meanings and even has one negative one (for constants that has seemingly "magic" meaning or not a fully understood one).
Even something like "contrast ratio" would be immediate to come up with, and much better name as it actually says something on the tin.
> Hey Pete, what is the magic number for our color scheme in article body text?
Makes no sense... Replace "magic number" with "contrast ratio" and suddenly it does make sense.
Contrast ratio is not a good name to describe this concept. A contrast ratio is a decimal number, while a "magic number" is an ordinal value. Also, a contrast ratio has a clear definition from WCAG perspective, and it would be even more confusing to use the same term for two very related topics (magic numbers are based on WCAG contrast ratios).
"Magic number" is not good either, for the reasons you've mentioned. But while doing my research for this topic, I couldn't find any better alternative, nor did I want to come up with my own term. I think this topic is niche enough, so we don't have to overthink it.
Windows 11 has some infuriating parts like this where the contrast between elements is so small you can't tell what is going on (like.. where is the scrollbar?). Especially when you own some cheap LCD display that's 15 years old with 20 nits of brightness and a contrast ratio of non-existent. Compared to the guy that designed the UI (and I'm guilty of this in the past) who persuaded his boss he needed a $6500 Apple ProRes UltraHDR+++ display that is literally brighter than the noonday sun and has a contrast ratio approaching aleph-zero.
I studied computer science and have been software engineer for almost a decade. Before college I came from a design background. I also went back to design school after I already became a senior engineer.
One thing I've noticed is that art students have looked into pivoting into UI/UX design because it pays. There are skills and intuition that transfer, such as designing for visual hierarchy. In fact, there are even systemic ways in design school to do color analysis. One way is to take a screenshot of the page and view it in greyscale in Photoshop. I've seen every corporate designer talk about accessibility, but not a single one of them do something like this. They will spend time coming up with a color theme for the brand, but it's really about their own personal brand, not the company's.
The problem becomes when ego takes over and people treat service design as their own aesthetic endeavor. Craigslist is good design. HackerNews is good design. Google was a design innovator under Marissa Meyer. Now it feels like Google's design department is just bikeshedding. Material design is a yawnfest but the whole lexicon around it feels pretentious, bordering on those abstract post-modern descriptions in art museums. "Leveraging fluid streams of irregular forms, the artist manifests environmental concerns to provoke sublinear ethereal emotions latent in time and memory". I remember an architecture class where one of the exam questions was "Check all the following that describe the architectural style of the Byzantine empire". One of the answers was "abstract". Out of 50 questions on the exam, this question was one of the questions that tripped people up the most. The instructor held a session for people to review the exam and express their grievances. Some of the students felt this question was biased towards Westerners, and asked the lecturer what "abstract" meant. The lecturer responded "abstract means abstract". To this day I still dwell on whether this instructor knows what abstracts means.
The hardest class I took in university was not Operating Systems, String Theory, nor even graduate level Philosophy. It was modern architecture. The text was harder to read and understand than Kant. Even using Google Translate on some classic Chinese text makes more sense. Maybe Google Translate should add "design" as a language (not to be confused with design language and design systems). Yes, there are ideas being transferred and communicated, but 90% of the content felt like it's not making any substantive or meaningful statement. It literally felt like reading Infinite Jest.
And so we end up with bloated CSS. Why use lot CSS when few CSS do trick? HackerNews still has personality and brand, and people who built an HN clone might remember bits of it in their head. In fact, when my girlfriend talks to me she just says "oh, did you read that on The Orange Website?" Designers feel it is business critical and that the product shouldn't launch if we don't have rounded corners with an exact amount of curvature, or the line height is off by 1. Yes, some engineers shouldn't be left to their own accord and build dashboards that look like it was built by engineer. Maybe we can also blame the media perception that Steve Jobs is a perfectionist. He probably is, but most software products are CRUD apps and don't need an academic treatise on design. I've worked at a place where designers always wear black, and as far as a turtleneck. I've considered going back to school for Industrial Design, and having UI/UX design as a fallback, but when I think about the cliquey and political overhead of the day-to-day, I just stay collecting my engineering paycheck so that eventually I don't have to rely on a paycheck and then muddle my personal ego with doing corporate design work.
I have designer friends outside of work where I can observe
designers out the corporate veil. Their priorities ( corporate politics are different topic ) are not aligned with the user. They treat the work as the pyramid of Giza, or at least something to cement their careers and portfolio. The problem when art students become UI/UX designers is that they view their design as art: "what does the work say/convey?" / "what artistic boundaries is it pushing?". That's not relevant to useful software.
This is not unique to designers. Computer Science graduates have a tendency to shoehorn all their academic learnings into the source code. Angular felt like people needing to flex all the design patterns they learned from Gang of Four. At least in my bubble, it felt like frontend engineers always felt an inferiority complex. I don't think that's warranted, but nonetheless frontend engineers need to remind people they have a computer science degree, too. And so the Node ecosystem becomes what it is. Go felt like it was designed by pragmatic programmers, not object oriented philosophers inspired by Plato's theory of form.
Designing to be aesthetically interesting is okay, too, insofar that it does not hinder the user experience. It's kind of cruel that Microsoft ended up being more aesthetically interesting than Google. In terms of being original, interesting and aesthetic, Metro is better than Material, and XBox is better than whatever hardware Google cranks out. Then again, Microsoft is more engaged and in-tune open source and the frontend ecosystems nowadays than Google is. Less than decade ago, my Microsoft friends was perplexed why anyone would want to build a web app with HTML5 when they can build native applications with C#. I think Google would be better off if they lower compensation, I might consider rejoining.
I actually really hate material design in general. It's "okay" on Android, and that's the only place it works.
The Material web design layout never feels good in the browser - it's floaty. Interactions don't ever feel "solid" - basically the experience is always like using a buggy webapp where you're thinking you need to open the dev panel to see if it's erroring silently. Try using any of Google's setting panels or the like compared to an old school bootstrap app - regardless of actual quality, you constantly feel like your interactions with Google are being ignored and that's on Material designs floatiness.
Bootstrap feels solid and clean. Heck even the AWS UI console - which is broken a ton of the time between corporate IAM and just jank - always feels more responsive to your inputs.
I worked at Amazon, too. People look down on Amazon, especially relatively to Google. But Amazon had their priorities straight when it comes to frontend. I worked on the team that made shares UI widgets, and it was forking off of Bootstrap.
Yes, people may remember Amazon retail being bloated, still kind of is sometimes, but those are product design decisions separate from the ui components. AWS wise, there is just so many products and maybe not enough users / page where it doesn’t make enough business sense to invest more resources.
Actually, Amazon had the most practical designers I ever met. They were also closer to the metal in the terms of being considerate about CSS bloat.
> interactions don't ever feel "solid" - basically the experience is always like using a buggy webapp where you're thinking you need to open the dev panel to see if it's erroring silently
Funny you mentioned AWS. This is exactly the problem with the GCP web console, even though it had a better overall visual hierarchy than AWS.
I remember back before Material design, I think it was called "Polymer", and how it generally meant I needed to be extra careful because reimplementing basic browser behaviours in JS meant I was never sure if typing text in a textbox will work, not to mention dropdowns and such...
Like on Windows where you can't tell where on the top of the window you have to click to drag, where lets you resize the window, and where does nothing at all.
The contrast on the example images rated as AA is actually quite horrible though. I can read the header, but the normal sized text is almost indistinguishable.
Even basic things like window borders, our Windows 10 desktops at work don’t have them and MS app window backgrounds are white. If several windows are overlapped and there’s a small window in the middle somewhere, good luck trying to find the edges to move it. It’s just a sea of white with text scattered about.
The contrast on that Using Color page seems unexpectedly low to me. The text is dark gray on a light gray background. It's not unreadable, and I assume it follows their own guidelines, but I find it draining to read.
There is a dark-gray-on-white area on the front page that I find more pleasant to read.
The background is nearly white at #fcfcfc, and the body copy is an 80% black color (roughly #323232). That is a contrast ratio of 12.49:1, which far exceeds even the most stringent contrast requirements in WCAG 2.1 AAA of 7:1.
The "Color, Color Family, and Grade" callout box has the same color text but an #e6e6e6 background, which produces a contrast ratio of 10.27:1 – also passing.
Everyone has different preferences, but in terms of color contrast they're doing great.
Am I misinterpreting it? To me it makes sense that smaller text would require greater contrast. I'm understanding it that larger text/headings need more contrast. Might be more eye-catching, but that doesn't make sense for accessibility.
Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but buttons that don't look like buttons because they blend into the background are another pet peeve - or have light gray on dark gray. Ugh! Contrast serves a purpose!