Will Google Material withstand XR?
How to Material You.
It goes by many names.
Material, Google Material, M3, Material You, the Worst Design Library Ever As Per Every Posh Designer.
You may know it after Google announced Material 3 as the successor of the widely known, boring Material 2. Perhaps you heard how Material 3 supports super cool widgets on the home screen. Or, you randomly woke up one night to find your Google Pixel looking completely different than it did at the party last night.
The real deal, however, is how Google is shifting the Material mindset to capture a larger range of devices; from watches, to TVs, and even car dashboards.
It's 2023. Why are we writing about M3 now? We're working on building native-like Flutter apps, and have discovered that the latest versions of Flutter are now shipping with M3 beta, as the out-of-box UI solution.
UI/UX is changing
For the past two decades, UI/UX was synonymous with "design for screens". A few years up until Apple's sudden announcement of the VisionPro, we've seen a dynamic shift to extend UI/UX beyond the pixels of a screen; it's gone back to its native definition of "how to make people a part of the things they do".
Apple, as always, went pretty hard on designers.
A complete guideline, along with some great tips, is available on Apple's Design section to build interfaces the "right way" for XR.
This isn't the first time; Apple is notorious for being pretty strict and demanding on designers, and has released guidelines for every single interface they support, each with their bespoke environments, inputs, and dos-and-donts, be it for watches, phones, tablets, and even cars.
Material 3+ as a competitor
We've discovered that in the world where we're constantly surrounded by digital interfaces, Google's Material Design M3 offers a more powerful blueprint than its predecessors and competitors, for creating a user-friendly UI. Clear, user-focused language is at its heart, ready to transform your platform's user experience across the board.
How to Material You
1. Clear Communication is Key
The hallmark of M3 is direct, user-centric language. Replace ambiguous prompts such as "Are you sure you want to move to trash?" with the more direct "Move to trash?"
2. Titles Matter
Avoid all caps in your titles. M3 advocates for sentence case, creating a softer and more welcoming interface.
3. Make Every Word Count
Abbreviations can be useful, but clarity is king. Unless you're short on space, full terms outperform abbreviations in ensuring your message reaches every user.
4. The 'You' Factor
M3 recommends the use of "you" to create a personal touch. It's about keeping the conversation between the UI and the user, so refrain from mixing "you" or "your" with "me" or "my".
5. Punctuation Perfection
Less is more when it comes to punctuation. Avoid periods in short texts and opt for contractions - "can't" is easier on the eyes than "cannot". Oxford commas are endorsed, unless there's an ampersand in play. Remember, commas always live inside quotation marks.
6. Exclaim with Caution
While exclamation points aren't banned, they should be used sparingly. Exceptions are allowed for greetings and congratulatory messages.
7. The Role of Parentheses
Parentheses are handy for defining acronyms or citing sources, but skip them for side notes or afterthoughts.
8. The Ampersand Rule
The '&' symbol is a bit of a diva. It’s acceptable in headings, but best avoided in body text.
Google's Material Design M3 is more than just a style guide - it's a strategic tool for enhancing user experience and making that said experience consistent across multiple interactions. The official Material website does not delve into tiny specifics by mentioning screen sizes, device types, etcetera. I take that as a good sign. That means they design beyond the boundaries and restrictions of mere devices. They design for humans.
However, going through the Foundations section of Material design's official website, it specifically covers touch devices, but not hand gestures through vision cameras. That kind of threw me off. Also, the layouts aren't really capturing the Z-depth factor in XR. This definitely needs some updating and some language change to make the system more inclusive to XR.
There's a world beyond 3-pane layouts and 2-dimensional interfaces: Get going with the times, Google! ;)
They're not too behind in the game though. Apple still uses iPad layouts and interfaces for the VisionPro. Smart or lazy? I'll leave that to you to decide.
Parting words
A clear, engaging UI built for the right platform, can be a pivotal factor in product adoption and user satisfaction, laying the groundwork for robust business growth. Stay tuned to our newsletter for more updates and insights on enhancing your digital interfaces.
Now, it's over to you: Do you think Material will survive?
Guest Author: Muhammad Munaf
Edited by: Saad Bazaz
