User Interface Design · UI Engineering

Anyone use Google Material (or more specifically Angular Material)?

Vijay MD Founder Chefalytics, Co-owner Bite Catering Couture, Independent consultant (ex-McKinsey)

January 12th, 2016

Any thoughts on google material and its UI in terms of a working application? Have you seen any user differences vs. Bootstrap?

And does anyone have specific thoughts on Angular Material? Been thinking about the change, and one weird thing that came up in my due diligence is that it doesn't have button groups (which we use quite a bit in our app as we think its a better UI than radio buttons for selecting from 2-3 operational options in our forms - ie green "active" button vs red "disabled" button with the inactive version grayed out.).

Josh Miller Startup-focused product manager, speaker, and serial entrepreneur. I only use my powers for good.

January 12th, 2016

Hey Vijay - good question.

For younger, artistic communities without a strong Apple bias, we found GM did very well.

However, coupled with other factors, we found it decreased NPS with some demos. As I mentioned, older demographics tend to have a tougher time with specific aspects of it, such as with color contrast and navigational hierarchy. These could all be mitigated with some careful aesthetic choices - and in one project, that's what we did. In others, it didn't feel quite right as we were fighting the standard/framework.

What is important (and this applies to more than just Material vs Bootstrap) is that the design decisions are driven by the needs and characteristics of customers rather than of the product team.

Unrelated, I've often found using frameworks like Material and Bootstrap make market differentiation more difficult. These frameworks tend to be more about developer ergonomics - that's great for creating low-fidelity MVPs, but the experience of an app should reflect the brand, which should resonate with the user. Frameworks don't give us that, so it is sometimes better not to use them post-validation.

Daniel Turner Interaction Designer, Xerox PARC

January 12th, 2016

Vilay, my free professional advice as a product designer is that you're waaaay jumping the gun. Figure out first: what problem does it solve, for whom and how you know this. THEN: how will it work, using even just paper and pen; you should be making lots of changes as you learn about the users and how they think about things -- will the interaction flow work at all? Only last should you worry about how it looks. You'd only use Material design on Android, anyway, and Google has (confusing and poorly organized) guidelines for what to you and how. If your users are mostly on iOS, Apple's Human Interface Guidelines are better organized and easier to understand and show you when to use which interface affordance. 

Maybe, as you build low-fidelity prototypes and test with users (that is, not you or people on the team who know "how it 'should' work"), you'll find that your assumptions about radio buttons or button groups aren't actually working for the users. Don't commit code -- once you have it, you'll wreck designs in order to save it.

Vijay MD Founder Chefalytics, Co-owner Bite Catering Couture, Independent consultant (ex-McKinsey)

January 12th, 2016

Daniel, Not sure I understand the comment. We're currently a SaaS (desktop) product built on the front end in Angular. Choice is between Angular Material and Twitter Bootstrap (Angular equivalent) in making a framework choice as they don't play well together. Have to pick one (or from a few others) - makes no sense to punt on the choice for a form-driven business software product. See it as a Ruby/ Python type choice - my general approach is to pick convention over configuration (hence I do more work in Ruby on Rails) and trying to figure out if Google's framework is mature enough to use yet. Since Angular is built/ supported by Google, Angular Material is an offshoot of Angular's core team, so I'd expect it to be more robustly supported and use a bit more of angular's potential than the typical random new framework. Which is in fact true as it comes with a number of Angular directives out of the box that can increase front-end coding velocity. However, as a v1 it still has a number of holes that they're filling in. I understand that the near term path goes through Ionic/ Cordova, which would make it available cross-platform as a hybrid until product scales enough to justify native mobile development. We're already well past the initial prototyping stuff you discussed...I own the first customer and we're automating a process that currently happens manually (in Excel in our shop, on paper in a number of others...causing lots of pain) at the core of our business.

Frank Martinez Co-founder at Upstream Ventures LLC

January 13th, 2016

Well said Josh... 

Frank Martinez Co-founder at Upstream Ventures LLC

January 12th, 2016

If you're building for the desktop; consider using Electron:

http://electron.atom.io/

Electron isn't as opinionated as Material [to Daniel's point using it tends to make your app look Android like]. 

Re: Material limitations; I believe they'll be temporary; it has growing support in the front end community.  And there's nothing stopping you from designing your own toasts, notifications, etc. while following the MD guidelines.   

Vijay MD Founder Chefalytics, Co-owner Bite Catering Couture, Independent consultant (ex-McKinsey)

January 12th, 2016

Josh, Curious as to the customer reaction. Did it limit adoption? Prevent sales? Where did it work well vs. poorly? Our end user is chefs, primarily in the 25-45 age bracket...mostly SMB so browser upgrade isn't a huge issue (will need to be part of onboarding but there isn't legacy IT resistance) and familiarity with android is reasonable due to cheaper plans/ devices with android. Competitors are all Windows XP/ Office or event filemaker) looking so we're trying to highlight visually that we're different (opening up the conversation that we'll also bring more modern capabilities). Feedback on current version in vanilla bootstrap 3 was that it looked a bit boring, so I'm trying to figure out if I upgrade to Bootrap 4 and do lots of work in CSS or take a stab at the Google Material visual interface (which superficial A/B tests have gotten a positive reaction to). We have lots of typeaheads, dropdowns, and tables so the feel of material vs. bootstrap would be material to a decent percentage of the page.

Frank Martinez Co-founder at Upstream Ventures LLC

January 12th, 2016

We're using Materialize for a couple of healthcare web app projects. It's not as robust as Bootstrap but also not as bloated. It seems more fluid in tablet and smartphone layouts than the other RD frameworks.

One warning: The notification system isn't as mature; we're having to write our own modals, closure classes, etc.

Josh Miller Startup-focused product manager, speaker, and serial entrepreneur. I only use my powers for good.

January 12th, 2016

I agree with what Daniel said about jumping the gun and challenging design assumptions (though I disagree with some of the other things).

I've used ngMaterial on some of the products I've managed where it was a good fit, but have worked on plenty of others where Material Design was a poor fit. You want to be thinking in terms of iteration and customer development.

That said, here are some important distinctions between ngMaterial and Bootstrap. ngMaterial relies on Flexbox, which doesn't have the best browser support. If your customers include corporate, education, or middle-aged Americans, that's bad news. Material Design is also very familiar to Android users (and can work well in generic web environments with younger demos where playfulness and interactivity are important), but Bootstrap feels much more "normal" to most users.

On one product, we discovered that our customers were not as youthful as we had anticipated. Material Design was a poor fit because, to exaggerate just a little, it didn't feel like Windows XP.

Anyway, the moral of the story is that there are no facts inside the building. If you're in an early-stage startup, talk to customers, validate the problem, validate the solution, and get quickly to an MVP you put in front of them so you can test. But make sure long-term design decisions are delayed until you have more facts.

John Grant Software Engineering Consultant

January 13th, 2016

I am considering the switch too. I wanted to mention that vanilla bootstrap is easily customized.

Will radio button groups be sufficient? It appears that you can customize the contents, and selection is just like radio groups. Angular Material shows an example here:

https://material.angularjs.org/latest/demo/radioButton

Vijay MD Founder Chefalytics, Co-owner Bite Catering Couture, Independent consultant (ex-McKinsey)

January 12th, 2016

Frank do you see the limitations as specific to the codebase (ie it seems like it's being written by a few students at Carnegie Mellon vs. professionally supported) or do you see them as endemic to the Google Material approach (it looks like they use something called toasts https://material.angularjs.org/latest/demo/toast)