Google’s newest creation is slowly being lowered on fiber-optic cables à la Frankenstein’s Monster. Google Inbox is meant to redefine how Gmail users interact with and archive their messages. It’s still being tweaked and currently riding on invite-only status. I’ve managed to get access to Inbox and want to cover a few ideas from the design perspective.
In this post I’ll be taking a look at the interface style of Google Inbox. Think of this like an exploration digging into the emotions and processes of user experience design. Google has always been a paragon of clean user experience from which other websites derive enthusiasm and creative direction. These ideas should provide a more in-depth look into their newest product with unique concepts and fanciful design patterns.
Guided Tour
Once you open up Google Inbox there’s a brief introductory tour of the features. I found the interface to be quite useful and easy to maneuver. Graphics are clean and simple following a pattern of Material Design. Also once the first tour ends you’ll have brief tips that pop up throughout the browsing experience.
For example when first marking a message as “done” it’ll be sent to that specific category. A fullscreen tooltip message appears to explain the process and how you can access these messages again in the future.
Guided tours are not anything new to the world of interface design. They rose to fame on mobile applications and gradually became a solution for websites too. Naturally these tours are most beneficial to social networks and other webapps that demand a steep learning curve from new users.
Although these tips are useful, I think the descriptive information could be a little more specific. I found myself very confused about sweeping, message bundles, pinned topics, and the purpose of different inboxes.
Navigation Elements
The site has one main navigation list of links found in the top-left corner of the screen. This three-bar nav menu has become common for responsive websites that need to display a long list of navigation links. In this scenario it works perfectly to fit with the ever-flowing collection of Inbox links.
Each link in the navigation is paired with a certain icon. This is beneficial in the sense that it makes browsing effortless and much easier from a distance. Although the text is crisp and easy to read, the icons are even easier to read and make navigation a little more fun.
Another important navigation feature is located in the bottom-right corner of the screen. This circle uses a Path-style navigation with flyout links for quick compose features. The button itself is a compose link which allows you to draft up a new email lickety-split.
Other secondary links also appear which allow you to perform actions like setting a reminder, emailing Google Inbox directly, or inviting someone else to join Google Inbox. These circular nav buttons hinge on icons and hover tooltip info to explain their purpose. While the symbols are great, the small tooltip explanations make all the difference.
Icons are great at visual communication, but icon-based navigation amounts to a hill of beans when toying around in a new application. Google has been very good about including textual tooltips along with icons to guide new users.
Search Functionality
At the very top of the page is a large search bar feature. When you first select the search field new autosuggest results appear underneath the input. The whole search process feels very dynamic and snappy – possibly snappier than traditional Gmail.
Once you’ve entered some keywords new results begin to populate immediately. There are sections of results labeled “top results” and “all results” based on the keyword density. I find this to be a little tedious compared to searching through results organized by date. Also you’ll sometimes have the same e-mail show up in top results and regular results, which takes up more screen space than needed.
Overall the search feature works great and offers a very warm, genial sensation. At the moment I find wading through search results to be a laborious chore – much more confusing than with Gmail. But the search feature animates quicker, provides snapper results, and seems to be cleaner than within Gmail.
Mobile App Design
I use an iPhone so I was only able to test out Inbox for iOS, but I have to say it works beautifully. I’m running an older iPhone 4S with iOS 7 and the interface still feels snappy and responsive to every gesture.
When swiping a message you can either archive it or mark it as done. You can also pin certain messages so that they appear right on the homescreen(comparable to starring a message in Gmail). I find the minimalist interface more appealing on a mobile app rather than in the browser. They both work great but it feels like the UI lends itself to smaller screens, specifically touchscreens.
In the top navbar you’ll find all of the same features including search, pinned messages, and the sliding drawer menu. Also the circular red button is viewable at all times in the lower-right corner of the screen. Tapping this button will display the same options as before, minus the ability to invite a friend which seems to be conspicuously missing.
Since Google Inbox is a relatively small application it works great on mobile. It almost feels like a touch-enabled platform that was extended to work in the browser. The animation effects are flawless and it provides a firm starting point for material design enthusiasts.
I would suggest that curious UI/UX designers should definitely check out the app just to see what Google has accomplished. It’s still in private invite for now, but over time I expect to see more interface updates and hopefully a tighter connection into Gmail.
Closing
While my experience of Inbox was quick it still painted a broad picture of the product. I think the interface excels in many areas but feels ignored in others. Notably the message listing feels a little crowded and confusing at first. Perhaps over time users will grow accustomed to Inbox and prefer it to classic Gmail. Either way I hope this post can shed light onto some of the new concepts within Google Inbox demonstrating the usage of popular UI/UX trends.
If you liked this article you may also enjoy these interfaces:
40 Examples of iOS 7 Mobile App Interface Designs
Author: Jake Rocheleau
Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau