The thing that bothers me the most is the "switches" (3rd example here[0]). My first thought upon updating the app was "Why did they reinvent the toggle switch when iOS has a perfectly good one built in?" Being bothered by this is irrational, yet I'm bothered by it all the same.
I also find the ripple effect[1] when pressing things to be infuriating. Just do the action I've asked, don't do this animation and delay the action by half a second. Again, this is somewhat irrational, but it still bothers me.
Perhaps the thing that bugs me the most is that it feels like I have a really well-designed Android app on my phone. The problem though is that I have an iPhone. If I wanted to use Android apps, I would have bought an Android phone.
[0] https://material.io/design/components/selection-controls.htm...
[1] https://material.io/design/interaction/states.html#pressed
It is not irrational to want your device and the software you use on it to be as high-performance as possible. In my opinion, unless we're talking about a game, software should always avoid wasting the user's time, no matter how briefly. Of course, if an animation is playing while something else is happening, that is acceptable. But in many cases, applications wait for the animations to complete (because it's "only" 300 milliseconds) before proceeding with the requested action. Disrespecting the user's time is disrespecting the user, full stop.
While nobody likes excessive animation, it is very important to let the user know their input was received. It's why the cursor changes on mouseover. It's how you know if the app is crashed, or merely processing something you requested.
I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action.
At one time this was one of Apple's UI priorities — feedback. Unfortunately, Apple has gotten away from a lot of its core UI values without a strong personality to enforce them.
>full stop
In the real world, nothing is ever "full stop." You should purge that phrase from your lexicon.
Not just ordinary people. I see the same behavior daily on older tech people, who fail to notice the (ever shrinking) browser loading indicator.
Honestly, it seems like Safari is the only browser that still cares to show a visible loading indicator, that takes up the whole address bar in a bright blue color, last time I checked.
Chrome and Firefox seem bent on a war to see who can infuriate their users the most, by removing one of the most important pieces of feedback on which the web experience is based.
As a result, we (the devs) need to add a ton of server-side checks to discard the multiple clicks that users invariably make, because they can't see that their first click went through.
Some times I'd like to know what the browser people smoke.
I said, "Of course, if an animation is playing while something else is happening, that is acceptable." Yes, play an animation while actual work is happening. That provides the feedback you are describing, which is useful if and when the application cannot respond to user input immediately.
However, my point was that many applications, due to laziness of designers and/or programmers, play an animation and then begin to execute the work requested. The facile argument made by these designers is that the animation is relatively brief—say 300ms—so it's not a "big deal." But I contend that delaying the initiation of requested execution is disrespecting the user's time, regardless of how long the delay is.
To reiterate: beginning the work effort and then concurrently playing an animation is good and should be encouraged. Playing an animation to completion and then beginning the work effort is bad and should be avoided.
The theoretical ideal is to respond in 0ms. If the work takes 50ms, it's best to start the work immediately then start playing an interruptible animation. The user may see a couple frames of the animation. Far worse to play a 300ms animation to completion, then start the 50ms of work.
> I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action.
Agreed! While doing lengthy operations, play an animation and disable the button. But don't delay beginning the work until after the animation completes, even if that animation is only 300ms.
> In the real world, nothing is ever "full stop." You should purge that phrase from your lexicon.
I said "Disrespecting the user's time is disrespecting the user, full stop."
I stand by the decisiveness of that statement. In my opinion, disrespecting the user's time is equivalent to disrespecting the user. I will retain the phrase in my lexicon, thank you.
*https://developers.google.com/web/fundamentals/performance/r...
Not to get further off topic, but: Huh? "Full stop" just means "end of message". It's an amusing leftover from telegraph technologies that people sometimes use for emphasis, but it doesn't have a literal meaning more than just "end of message".
As for the telegraph use, I'm aware of that. I have a background in amateur radio and in college a crusty old engineer taught me morse code to communicate over the maintenance department's secret building-to-building campus telegraph network.
In American English, 'period' is used in the same ways (indicating the end of a sentence and, like in the above case, to indicate that a matter is closed for further discussion).
On mobile, this is more difficult - the user's finger is obscuring whatever button they hit from view, so I kind of understand the "ripple" after the button is released (and ostensibly the user's finger has moved away, thus allowing them to actually see the ripple).
Still, unnecessary delay is infuriating on desktop apps. I agree feedback is important, but I don't accept the premise that latency is required to provide feedback.
However, if I've performed a destructive action, that is perhaps only reversible temporarily, then I absolutely don't mind being briefly interrupted to see a "trash" animation.
Another pet peeve I have is when web pages shows very little content because: 1. the fonts are too big 2. there are too many sidebar (top/bottom/etc) items 3. the graphics or icons take too much room
i have some ideas about optimization but will reserve that rant for another time.
My iPhone 8 still takes me just as frustratingly long to navigate apps as it did on my iPhone 4, because there's no way to skip the useless animations and effects.
I'm not here to work for my device, it's here to work for me.
Interface feedback on making a selection is possible in many ways.
Another thing that really bothers me: They've got all kinds of iOS-specific stuff in the app - Apple Pay, 3D Touch previews, Touch ID for login. They clearly went to a lot of effort to support stuff that's specific to Apple devices, why didn't they just go the extra mile and actually make it look and feel like an iOS application?
This is one of the big five Canadian banks. Their net income is over $1B every quarter. Surely they can afford to hire an iOS dev to do the app natively.
It's rather amazing how little information can fit on a screen with these designs even with modern high-res 4k retina displays. It's a failure of following trendy UI instead of focusing on true UX.
I don't think material design is very pretty either and I'm very interested in alternatives, if only I knew what they were!
But then I still think the original iPhone icons were awesome. Even the little television for the YouTube app.
Back then, icons communicated far more information than most icons today, which have become little more than bland corporate logos.
Understandably, few people like that advice because it doesn't make life easier. It does make your product better though, which is really all that matters.
Semantic and Bootstrap have been "ported" to React and are missing features or do things non-idiomatically, whereas MUI was built with React in mind (twice if you count the rewrite). There are other React-first toolkits but none are nearly as comprehensive and "healthy".
But I've been on the fence because it feels really weird to write a cross-platform app (mobile and desktop) using components that are clearly designed to look like just one platform (Android). Technically I could make a custom theme for it, but that looks extremely complex, and OP's linked theme is practically the only free one I could find.
I'd love to just abandon toolkits like this and write my own React components specific to my app, but honestly I don't know how to make half the stuff that's in these toolkits. My JS/CSS is just not that strong.
So, star count isn't a good measure.
I frankly don’t understand the appeal of Material Design. If it came from anyone but Google, it wouldn’t be a thing except in the back alleys of Dribble.
However, this dashboard project — thanks to whomever made it. It does look very nice — just not a fan of the typical Google design language because of serious usability flaws. This dashboard does seem to mitigate some of my main complaints (ambiguity and uncertainty.)
That’s only true if you’re already accustomed to how Apple does things.
Consider the iPhone a perfect example: 300 different ways to single-click, double-click, triple-click(!), 3D-touch (whatever that is) and use random swiping gestures from all screen directions outside the screen, and different swiping gestures within the screen.
Absolutely madness and probably makes at least 80% of the phone’s functionality completely undiscoverable and inaccessible unless you already know it is there.
How is anyone supposed to know about all that? It breaks every design book’s rules by providing zero affordances. Nothing about this is obvious or intuitive. It’s all 100% learned behavior.
And I say that as an iPhone owner.
Well, that can't be strictly true, since no one is born knowing these things, yet people do learn about them. I don't think it's crazy to expect people to desire to read a quick guide or watch a quick video about UI paradigms/tricks/shortcuts for what is likely to be one of the most complex and most frequently used electronic devices in their lives.
I do agree that 3d touch is a bad idea, because there's no pattern to learn other than very specific per-application places it can be used. If there was some visible UI hint that an element was 3d touchable, perhaps I would be more of a fan.
As for the double-click and triple-click stuff, I can't really think of that many examples on iPhone. I believe triple-clicking a physical button can be used to enable accessibility features? I think it's pretty acceptable to have accessibility features that drastically transform the phone's user experience fairly hidden, as long as they're well documented for the people who need them.
Is 'accidental discovery' part of the superiority of Apple's design ethos?
I think it may be that "affordances" are hard on small touch screens. I mean, the "affordance" is that you can touch it, that's about it.
Really, even on desktop, we know how to use it cause we've spent years learning how to use it. The first GUI's had _much_ simpler UX's with many fewer interaction modalities, cause it was hard enough to get people to learn those. (I remember classes on how to use a mouse -- it was not obvious). They got more complicated as generalized "society" learned to use the simple ones.
Hand an iPhone X to someone who is familiar with other iPhones, but not it.
Watch their first frustrated attempts.
Talk more about obvious design.
It’s a good read — one of my favorites on human computer interaction.
Surely this is a joke? The million different gestures are just the tip of the iceberg when it comes to Apple and interface discoverability.
Would there be any practical way to provide them with some simple markup that allowed marking up their designs such that some sort of scaffolding tool could be used to convert it into a starter project for various frameworks/languages/etc?
Yes some of them come with bootstrap or whatever framework files, but if it were generalized it would be possible create a configurator/generator/scaffolder that would allow many more options and combinations.
It seems like Wix and SquareSpace have some sort of proprietary version of this. Where you pick a template, customize it, and then directly use it for development, but of course only using their tools, which as has been discussed here quickly run into limitations for non-trivial sites/apps.
This is all off the cuff thinking, I haven't put much though into what potential markup or a DSL would look like. However, maybe even a small set of options available as an open standard could provide a great deal of flexibility and be easy to use for artists and designer who are not that technical.
Maybe it could also be possible a start for an ecosystem of tooling to make use of it across a variety of development environments, not just "bootstrap and gulp included".
If it's plausible, hasn't been done, and has enough interest I'd be willing to take a pass at a draft spec that could at least help people realize what not to do :).
If you run the same audit tools on any Wix website you can expect the same sort of nonsense, maybe a megabyte of scripts at the top, CSS where it runs to 10000 lines of which 97% unused, images flagged for being bloated.
The newer thinking that I find most making sense is to not use any framework at all and to also ignore people using Opera Mini/Internet Explorer. Clearly Google and organisations like the BBC cannot dismiss those people and have to make their websites work on the legacy browsers too. But, if making money matters more than pandering for people that shouldn't be online then the no-framework option makes a lot of sense.
No-framework is also getting a name as 'intrinsic web design' and the idea is to use built in things such as CSS Grid, Progressive Web App, HTML5 form validation and vanilla javascript to hold it all together.
With this way of working you can make the document pure content with semantic tags, e.g. 'Article', 'Section', 'Main/Aside/Header/Footer/Nav' and dispense with the many, many, many nested divs and spans with everything having a gazillion class tags. Going for the 'perfect outline' can be done too with a few hundred CSS lines instead of the tens of thousands you get if using some lame framework.
Building this way and using native browser features instead of the old cruft ways results in sites that load 10x quicker as you don't have the megabyte of scripts/stylesheets that the likes of Wix bloat sites with.
The thing is that to do frontend this way requires throwing out all knowledge of 'floats', 'margin/padding hacks' and even that tedious design process where someone that can't code designs something in a desktop publishing type of program for it to be handed off to frontend developers that tinker with the bloated theme their CMS comes with to make it look like whatever the designer got signed off with the client (without speaking to them first). Even 'Responsive Web Design' is old hat, with CSS grid there is no need to think in those ways, you can make everything content driven with fluid typography plus a few CSS grid rules making it work whatever the screen size.
In summary - forget about frameworks and enjoy the web as it should be.
Secondly, if there were an easy way for designers who are not extremely technical to attribute their code, it actually could greatly help some of the problems you're referring to. For example, if a pre-processor knew what the intent was it could replaced a bad or bloated decision automatically without changing the semantic meaning.
Finally, as for the suggestion around keeping it simple with basic constructs and are predictable and easy to work with, there is no reason that couldn't be part of some type of effort like this that attempted to extract more value from artists than their technical knowledge may allow and realize the potential of many more designs.
Material's desktop experience definitely needs to continue improving. I'm trying to see Material's design as how desktop users of the future might work, who grew up mobile-first, unlike most of today's desktop users who grew up in a desktop first world.
Material has a number of headstarts a headstart due to it's "card" lineage coming from the designer of Palm, and WebOS.
https://www.surfacemag.com/articles/matias-duarte-google-is-...
They don't. And when something like this has a connection to a company like Google, people simply don't question it.
Yep. It's the "Nobody ever got fired for buying IBM" mentality that pervades the modern IT industry.
You get one so-called "thought leader" to scribble a blog post about how skeuomorphism is a bad thing, and the next thing you know every screen looks like pastel confetti.
I was reading an old computer magazine last night and one of the ads was for a 6809 box that had a red keyboard. RED! With white function keys and blue action keys!
If anyone tried to produce a computer like that today, they'd be laughed right out of HN, even if there were a dozen studies backing the color scheme's utility.
Until one day someone from Facebook or Big G or some random blogger with the correct Twitter followers says it's good. Then suddenly, it's red keyboards all around.
Working in the IT industry, and knowing people who work in the fashion industry, you'd be surprised how alike the two camps are.
It was...something special. Everything was just sort of cobbled together with zero creativity about it.
Unless the goal is to create art, consistency is a great thing for both users, who can eventually learn what's going on, no matter how bad the metaphors, as for developers, who can grow beyond checkbox-of-the-week towards well tested patterns.
Now the desktop browser web apps...
I see it as less "well thought out" and more "designed into meaningless oblivion."
I don't know anything about how Material was put together, but from an outsider's view it looks like something that came out of a committee of committees of committees.
Personally I'm a fan of MD and other minimalist styles.
But it doesn't matter what technies think. What matters are the users. Google did extensive usability testing on MD but just to be sure we did our own testing because we weren't sure how it would go over in Asia and Google is less focused on the Asian markets. Turns out the users fucking love it. We're talking about a hugely positive response across the board: men, women, children, poor, rich, artists and police officers. Three most common comments: (1) clean like Apple! (2) it's cute, not too serious (c) it's simple, easy.
Yes this is subjective. It's not even clear how a design language can be "easy" but that's what the users feel. Given that kind of feedback and considering all the hardwork Goog has already done it'd be crazy not to leverage it.
Do you have a page or document you can link to for more information, or is this just internal meeting stuff?
I like Home Assistant and don't hate the Google Cloud Console.