28
Mar
image

Yesterday, we finally decided to get to the bottom of Google Keep's new font, Roboto Slab. Shortly before that, however, we had an internal discussion about Keep's strange UI/UX. The app is beautiful – there's no denying that – but weird when considered alongside Google's other in-house apps. What's more, I'm of the opinion that the app isn't just a one-off in terms of design – I think that Keep, along with a few other hints, could give us some insight into what we'll see in the next version of Android (which we might see in May at Google I/O).

Before going any further, it would be prudent to explain my thoughts on the next version of Android and why I think we'll see a significant – though not total – visual shift, from current Jelly Bean paradigms to something, well, a little different.

From Gingerbread To Jelly Bean

image wm_2012-06-28-17.29.572 wm_2012-06-28-16.41.31 Screenshot_2013-03-27-21-36-38

There's no question that the jump from Gingerbread to Ice Cream Sandwich (let's ignore for a moment the "emergency landing" that was Honeycomb) was a big one. In the interest of word economy, I won't enumerate the various changes that Ron chronicled in the excellent "Getting to Know Android" series. What I will say, however, is that the move from Ice Cream Sandwich to Jelly Bean was not as big. And the move from 4.1 to 4.2 was even smaller.

In my mind, Ice Cream Sandwich marked the moment when, for the first time, Android's interface felt right (oh, and it introduced Roboto, but more on that later). And Jelly Bean (in both iterations) was about refinements. Where ICS revolutionized the look and feel of the platform, JB went back with a fine-toothed comb, fixing and improving things while adding some headlining features like Google Now and Photo Sphere.

So, how does that tie in to the future of Android? Given the strong foundation ICS set for the OS, and the refinements made by Jelly Bean, my prediction is that the next version of Android (Key Lime Pie?) will fall somewhere in the middle. I believe we're seeing several clues about Android's new look, and it will be noticeable, but not a complete overhaul. So, what exactly are those clues?

Google Keep

Google Keep is an interesting case. Less than a day after we covered 1E100's discovery of references to Keep in Google Drive's source code, Keep went live. And then it disappeared. Then a couple of days later it was back again, this time with an app. Naturally, we did a full hands-on post with Keep, noting along the way its new and interesting UI.

The interface is what I'd describe as a card hybrid. The app's functionality is – for the most part – contained inside a few cards of varying sizes: your notes, and a "quick add" panel for capturing text, lists, voice recordings, or photos.

nexusae0_wm_2013-03-20-16.26.20 nexusae0_wm_2013-03-20-16.30.46

So what's so interesting about that? Well, a few things. For starters, there are several inconsistencies in UX – there's no overscroll glow within notes (Update: It's been brought to my attention that notes do have overscroll in certain instances – thanks Micheal!). Besides that, the action bar isn't actually an action bar (at least visually). Google has been known to bend the rules of Holo (I could write an entire piece on that alone), but the way the action bar area looks and appears in this app is worth discussing. Instead of a solid, blocky bar across the top, Keep's action bar is implied. The icons are there, and the up navigation works as you'd expect, but the bar blends in with the background to accentuate the card layout. The bar is also translucent – if you scroll down through notes, you'll see them glide underneath, each getting their own drop shadow along the way.

1 2

I would posit that, in future versions of baked-in Android apps, we'll see this hybrid card layout again. The barely-there action bar seems like a natural extension of the current Holo look, and I wouldn't be surprised to see it elsewhere in Android in the future.

All of these things are interesting on their own, but there's one stand-out feature in Keep that really speaks to my prediction, and it's called Roboto Slab.

Roboto Slab

robotoslabbig

Roboto Slab is probably bigger news than it's gotten credit for. Remember back in the days before Roboto, when Android had the Droid font family? Droid was eschewed in ICS in favor of the cleaner, simpler, more beautiful Roboto, but it only came in one variety – sans serif (though that included light, thin, regular, medium, bold, and everything in between).

Roboto Slab, Roboto's serif-fied brother, rounds out the Roboto family, though it was introduced silently with Keep, and appears absolutely nowhere else. Yet. And that's why it needed to be specifically shipped inside the Keep app.

The new font is almost certain to be a hint at future offerings. While it doesn't appear in the leaked Play Store 4.0, we must remember one of Ron's most recent finds: Google Play News. The per-issue and subscription based content service, headed for the Play Store who knows when, is the perfect candidate for the Roboto Slab serif + sans serif treatment.

Where else might we see Roboto Slab? My first guess is Google Play Books – interestingly, Play Books already uses Roboto regular (sans serif) but doesn't label it as such. It's just called "sans." This is probably because the "serif" font is still Droid Serif. Yes, that's right – Droid Serif still appears in Play Books. It only makes sense, then, that the family would be completed, eliminating the need for a mismatched pair of fonts.

Screenshot_2013-03-28-00-14-46

Next is Google Drive which, embarrassingly, still uses both members of the Droid family. At least it's up front about the fact, though.

image

Other apps that might use Roboto Slab aren't immediately apparent, but I have no doubt that it will see further integration with Android's next steps.

Google Play 4.0

The leak of Google's 4.0 version of the Play Store was exciting, to say the least. It's also important to the purposes of this piece – after all, it features again what I'm calling the "hybrid card" interface. At first glance, the yet unreleased Play Store looks like a game of Solitaire, but it mixes cards with traditional Holo in an interesting way.

nexusae0_wm_2013-03-20-20.32.51 nexusae0_wm_2013-03-20-20.51.46

Unlike Keep, the Play Store maintains a solid action bar. From what I can tell, this is mainly to keep consistent color coding among the store's various content selections. Like Keep however, the new Play Store's design isn't afraid to put gray right on top of gray. The extraneous backgrounds and patterns of the old store are gone in favor of transparency, with text laid straight over the background. We also see cards in a variety of shapes and sizes, with varying amounts and types of information. Heck, even the purchase dialogue looks like a big, floating card.

nexusae0_wm_2013-03-20-21.19.56

nexusae0_wm_2013-03-20-20.36.111 nexusae0_wm_2013-03-20-21.07.122 nexusae0_wm_2013-03-20-22.22.17

What's interesting, though, is that the new Play Store takes cards beyond just displaying information. As an example, the Editor's Choice and Staff Picks buttons look like cards. Or is it that the cards behave like buttons? With this design, Google is getting close to blurring the line between the two, but the sense of what the user can interact with (and how) still remains clear.

image

TL;DR

So after exploring several of these garden paths, what is the take-away? Essentially, I predict that with a new release of Android, we'll see a subtle yet sizeable shift in the UI of Google's in-house Android apps. Apps like Calendar, Books, Messaging (fingers crossed for Babble), and others will take on the fresh look of a hybridized card UI with lighter buttons, less background bulk, and an intuitive sense of what can be touched and when. Things will get lighter. I wouldn't be surprised if the "Holo dark" system theme shrank a bit in favor of the new aesthetic language.

On top of all that, Android will once again have a united font family called Roboto with its Sans Serif and Serif branches serving their individual purposes both in apps that need a font update, and those that have yet to come to market.

At any rate, we don't have too much longer to see whether any of my wild-eyed predictions come true.

Liam Spradlin
Liam loves Android, design, user experience, and travel. He doesn't love ill-proportioned letter forms, advertisements made entirely of stock photography, and writing biographical snippets.

  • http://twitter.com/Alankrut Alankrut Patel

    Great article. I really hope they go with the "hybrid card" layout, it looks clean and functional. Currently I feel Google Now is probably the best designed mobile application to date because of its simple UI, thanks to Hybrid Card Layout

    • RitishOemraw

      I think Keep is better designed than Google Now, but both are great!
      Still trying to figure out how a hybrid card UI would work on homescreens.

      • TheFirstUniverseKing

        Widgets and homescreen transitions.

        • warcaster

          Redesign and addition of more stock widgets is long overdue in Android. I hope they redesign the old ones and a lot of new ones - card style - in Android 5.0.

          I also hope they add these card guidelines for widgets to their Android Design website, so other developers can make a lot of widgets like that, too. Android needs to take advantage more of widgets. It's very untapped power, and now with the new card style, they are going to look great, too.

      • http://AndroidPolice.com/ Liam Spradlin

        I think the hybrid card UI would take focus on apps, while the home screen may change in a way that I'm not prepared to guess (because we have no information about it). As TheFirstUniverseKing mentioned, widgets will probably reflect the lighter hybrid card aesthetic.

        • heat361

          I'd like that currently all of google's widgets have a different color, some light and some deal and transparent.

  • http://twitter.com/GiuntaRob Roberto Giunta

    I was thinking more or less the same.

    Have a look at the Gmail and Maps counterpart for iOS. They look even BETTER than their current iterations on Android and they use that card-ish look. Especially Gmail for iOS looks much better. The Android one is more functional, but man, to be honest I never thought it really looked 'good'.

  • http://twitter.com/GiuntaRob Roberto Giunta

    EDIT: Oops, my internet had a hiccup, can somebody delete this one?

    I was thinking more or less the same.

    Have a look at the Gmail and Maps counterpart for iOS, they look even BETTER than their current iterations on Android and they use that card-ish look. Especially Gmail for iOS looks much better. The Android one is more functional, but man, to be honest I never thought it really 'looked' good.

  • Ygor Vaz

    Don't forget google chrome, it also uses the card layout when changing between tabs in the phone version :)

    • http://www.facebook.com/profile.php?id=1244276178 Steve Hopper Jr.

      How about the new Play Movies and TV with the "cards" functionality introduced yesterday? It seems that this is indication that Google is full on with the UI as predicted.

      • http://AndroidPolice.com/ Liam Spradlin

        Good point. While not fully integrated into the foundation of the Play Movies interface design, the cards are really impressive and definitely show a trend.

    • AGWednesday

      And the Google+ app has been using a card layout for a long time now.

  • bluey

    Holo black blue and white is a winner.
    This new "card look" is too lab-like.
    Everything blends too much and is too flat!
    I want that pop that you get with that holo blue on black!
    And this following of that ugly windows 8-like pastel colours is not appealing!
    But then again as long as Google keep making Android better and the enthusiast ROM devs and themers stay on their game there's nothing to complain about.

    • http://pixelsw.im/ Steve Heinrich

      Flat design is the way things are going these days. Pretty sure iOS is going to undergo a similar treatment as time goes on. But, like you said, as long as there is an active theme and dev community out there you'll always be able to find something for your preferences.

      • http://AndroidPolice.com/ Liam Spradlin

        You're right, everyone is taking an iron across their interface, iconography, and even logos these days. I've been wondering for a while now what will be next, because things can only get so minimal before disappearing entirely.

        • http://pixelsw.im/ Steve Heinrich

          Very true. This image is a bold prediction of Android in a couple more versions ... the software just isn't there yet...

          • http://AndroidPolice.com/ Liam Spradlin

            It's...beautiful.

  • cmonandslam

    Felt this way ever since I saw glass using the card style ui. Frankly, I don't like it. I felt that holo dark was perfect in terms of functionality and style. I'm still not completely sold on the whole card style yet.

  • Sarah Puls

    I think..... We'll need to wait till I/O to see for sure!

    Sarcasm aside, I kinda like this direction. Cleaning and sprucing things up doesn't hurt. Especially since Android is quite beautiful as is. I love the holo theme and only throw on 3rd party launchers for extra functions.

    Hopefully there's an extra something to wow us from I/O if the Android OS is only getting minor updates.

  • Nick V

    I think that either KLP, or a future version of it, will look a little more like Windows 8 Phone. With the cards, Google can position the data in a way that will serve a better purpose. I do like what Microsoft did with the live tiles, but I think that their OS isn't anywhere near fitting for me.

  • Barton82

    Yay, more white! Great news for AMOLED users! ;)

    • Matthew Fry

      Exactly what I was thinking! The first thing I do when I get a new app is see if it has a dark theme. Not only is it battery saving, but it's also easier to read in the dark. I sure hope the lighter theme doesn't prevail.

      • PhilNelwyn

        Wouldn't it be great to have an option in settings to choose the theme for system apps/widgets, all at once?

        • Matthew Fry

          That would be fabulous. Google. Do it.

        • alexcue

          Slim Bean ROMs support this in the settings panel, and it's pretty amazing. I was using their S3 ROM for awhile and loved on-the-fly switching. ParanoidAndroid also does some really amazing things, but that is over the head of most users, so it will probably never see official integration.

        • Tomi Golob

          Ding ding ding ding ding! Ladies and gentleman ,we have a winner! Good idea and shouldn't be that difficult to implement. Same could go for widgets

      • Barton82

        Oh, I advise you to accept the white. It's clearly getting brighter and brighter every time. The last pretty dark Android was Gingerbread. Then we got white People app, white Google Search/Now, white Google+, white YouTube, white Chrome and now Keep. Of course you still have white Talk, white Messaging, white Gmail, white Calendar, white Translate and many other white, or mainly white apps. You're not gonna escape the white.

        • Matthew Fry

          I'm not going to let the white win without a fight.

          • Barton82

            You're gonna have to bring out the big guns. It's not only Google, more and more devs do the same. CyanogenMod's Apollo, Koush's Carbon and Superuser, Chainfire's SuperSU, new Tasker and many, many more. Sure, you can switch many of them to dark theme at least, but not all and still more and more defaults to white.

          • Freak4Dell

            Google seems to be doing a more muted white than most 3rd party developers, though. Google often uses a slightly gray white, at least for backgrounds, which sets apart the pure white of the cards but doesn't make everything too ridiculously bright. I'm hoping to see more of that incorporated into other apps.

          • firethorn

            I'm totally fine with the all defaulting to white as long as I can still opt for the dark variant. Sadly, no such luck with the Gapps. That's right on top of my wishlist for KLP, along with Babble.

    • Guest

      Black saves battery on amoled screens.

      • Barton82

        You clearly didn't see the wink at the end.

    • nsnsmj

      This is actually Google's secret plan to try and hinder Samsung's dominance.

      • Barton82

        I'm not that sure about that anymore. I mean I would say the same two weeks ago, but have you seen the preproduction software on the Galaxy S4? It's white in places where even stock AOSP is dark, like the settings menu for example. And it's white almost everywhere, messages, contacts, dialer, keyboard and so on. All these things being dark on the S III of course. That was really surprising move for me. But we got a leak of newer build few days ago and it's dark again in most of the places, so it looks like we have to wait and see what will we get on retail units.

      • mrsbelpit

        I like this.

  • http://twitter.com/arghness Alex

    I just wish Google would make a concession to battery life with AMOLED screens and provide an option for dark themes in their apps.

  • patapongirl

    As much as I love the new design of Play 4.0, the fabric textured action bar looks like a piece of moldy rag. D:

    • http://AndroidPolice.com/ Liam Spradlin

      I wouldn't count on that weird texture to hang around. My guess is, since it was a pattern of dots, that it was some kind of watermark or identifier.

  • http://www.facebook.com/RobertLandrum13 Robert Landrum

    Do you think they will stick with the "Holo Blue" for the main icons? Or would they possibly do something to match that of "key Lime Pie" and put out a bright, flourescent greenish/yellowish Icon set? I would be perfectly fine if they stuck with Holo blue. It just looks right.

    • Freak4Dell

      Ew, I really hope they don't go to a green. The blue works well.

      • http://www.facebook.com/RobertLandrum13 Robert Landrum

        I agree the blue works very well.

  • andrew__des_moines

    Android phones are going high-resolution across the board -- presumably that opens up some options on font details.

  • nsnsmj

    That was a great read. Really love this stuff.

    I don't necessarily think Google is bending the rules of Holo with these card-based UI's though. I think it's just an evolution of it. Of course, that could be what you're saying, and I'm just interpreting it wrong. Anyway, I can't wait to see the next version of Android. It's gonna be amazing. I do hope their is a Dark Holo version of the cards though. I'd like it to drop the gradients and maybe switch black with gray, though.

    I think Falcon Pro is already sorta card-like and gray. It could be a small indication of what a dark version of the Holo cards UI would look like, assuming Google doesn't just drop Holo dark completely.

  • Freak4Dell

    I just got an email from Google Play for some Music sale. We're definitely going to be seeing more cards in the future.

  • Matthew Merrick

    "Things will get lighter. I wouldn't be surprised if the "Holo dark" system theme shrank a bit in favor of the new aesthetic language."

    Nuuuuuuuu D: I love dark UIs.

  • Micheal Hill

    I disagree that Google Keep is really that much of a deviation from Google's existing portfolio of apps. I got a little carried away with my argument to support this, so you'll have to read it here: https://plus.google.com/106286360388182142967/posts/YJhB1ie9jA6

  • Uren Patel

    actually there is over scroll glow within notes....

  • joser116

    Oh please Google add ad-hoc support

  • Tomi Golob

    What Android really needs is become more consistent with the UI design first ...I rest my case

  • http://twitter.com/tigerhawkvok Philip Kahn

    To pick a nit -- Droid Sans Mono is also the monospaced font. There isn't a Roboto monospaced font.

  • Larizard

    I know it is common knowledge that there are two types of typefaces based on whether or not it has serifs or none, but a SLAB typeface (or Egyptian) is a specific kind of Serifs used mostly for headlines or short paragraphs. You will seldom find body copy set in a Slab font. Because of this, some people even consider them a category of their own.

    I guess with the trend of using Sans Serif for body copy and Serif for headlines (on screen media), it makes sense for Google to add a slab typeface. But for Roboto to be a complete family, they will need another Serif that is easy on the eyes and would work as body copy as well.

  • tym0

    I think that is pretty much what everyone saw in keep, and i love it! :-)

  • http://twitter.com/JazzEspresso JazzEspresso

    the "hybrid card" layout....somehow (kind of) reminds me WebOS...i wonder where Google got the idea :-)

  • http://www.facebook.com/Bewinxed Omar Al Matar

    I want universal night mode on KLP, Where everything will have a dark theme -_-

  • Humberto Hernandez

    I really like how the Android UI is going...

    Looking forward to a great (and beautiful) UI change in the next android version!

Quantcast