Expand your prototyping knowledge

Designing for phablets: 5 UI tips for bigger mobile screens

Designing for phablets: 5 UI tips for bigger mobile screens

With phablet popularity continuing to grow, follow these 5 UI tips on designing great user interfaces for bigger screens while still keeping thumbs happy.

The phablet is on the rise. The official ‘year of the phablet’ may have been back in 2013 according to Reuters magazine, but since then the popularity of the phone+tablet hybrid devices has only gone from strength to strength. The rise in photo-sharing social media apps like Snapchat and the trend for phone-based ‘Netflix and chill’ sessions has meant that next generation mobile devices with larger than average screens have made a dramatic dent on the mobile market. In fact, according to Anthony Scarsella, Research Manager at Marketing firm IDC, “Phablets … account for 20% of all smartphone volumes in 2015, with expectations that volumes will grow to 32% in 2020 or 610 million shipments.” That’s a lot of phablets.

How phablet screens impact user interfaces and user experience

So what does the rise of the phablet mean for designers? Essentially, the biggest factor in terms of user interface design is the size of screens. Whereas the ‘traditional’ smartphone has a screen of around 3.5 inches high, phablets can reach a massive 6.9 inches, a fair doubling of the typical interface space. That’s fine for the classic tablet, which is designed for two-handed use, but what about the phablet, which is meant to give the functionality of a tablet with the experience of a phone?

The biggest impact, in terms of user experience, is on the thumbs. As Steven Hoober discovered in his oft-quoted research in UX Matters, 75% of people use their thumb as their primary phone digit, and 49% favour a one-handed grip. Trying to cover almost 7 inches of screen space one-handed puts the humble thumb under a whole lot of pressure. The so-called ‘thumb zone’ identified by Hoober, the area across which a human thumb can move comfortably while cradling a mobile device, is hugely influential on mobile interface design; after all, if your UI element is out of reach it’s out of play.

As designers focus on maintaining good UX and happy healthy thumbs, finding creative user interface design solutions is key to improving the user experience of phablets. So let’s take a look at some of the key things to keep in mind when designing for larger mobile screens.


Download Justinmind today to start prototyping for phablets!



Bottom navigation

Take a real-world example. Spotify has 100 million mobile users worldwide, 42% of whom listen on smartphones. So let’s hypothesize that 20% of these users are accessing the app on a phablet, based on Scarsella’s claims. That’s over 8 million users. And none of those will be able to hold their phablet in the traditional one-handed mobile grip and still reach the Spotify menu hamburger, located in the upper-left of the screen. As both Hoober and Scott Hurff are at pains to point out, this is no biggie – it just means that people will change their grip and carry on navigating. But wouldn’t it be better if those 8 million music fans people didnt have to goof around with their grip while walking along drinking coffee, listening to Spotify and trying to get to work? Short answer – yes, it would.

This is where bottom navigation comes in – moving the menu bar from the top to the foot of the app. Big-hitters such as Facebook and Dropbox have made the switch to bottom navigation in recent years, placing their most frequently used interactions within easy thumb reach instead of way up North. Nick Babich has some great examples of how and when to use bottom navigation in this post. We also recommend playing around during the prototyping stage of your design process, finding out what kind of navigation solutions work best for you and your product; being innovative with navigation is a big part of designing for bigger screens, so don’t be afraid to experiment. Check out one of previous articles on mobile UI patterns to find out more.


Image source: Apple Support

Floating navigation buttons

But what do you do if you’re designing for Android and their bottom-anchored system navigation bar is messing with your bottom navigation plans, leading to mis-taps and user frustration? As Luke Wroblewski points out, Google already found a solution for that: floating action buttons. Based on the most commonly performed actions within a given app, Google allows designers to promote the action in a floating button, as we see below in the Google Maps app.


Treat your floating action buttons as a powerful call to action for the user; they should stand-out visually and guide the user to performing the most popular, most common action on that particular page. They provide an opportunity to direct user flows and streamline your interface.

Responsive navigation patterns

You can also make your key navigation areas user-responsive. Apple experiments with this through their ‘Reachability’ feature: with two taps on the Home key you can cause the top part of a page to drop down to the thumb-zone; a reasonable band-aid but one that nonetheless implies 2 more taps when attempting any action, and requires the user to 1) be aware of the function and 2) remember to use it. Not ideal UX. Samsung also tries to minimize over-reach on the Note phablets by reducing the whole screen’s contents to a 4 inch area at the bottom right of the screen. Simple, but not super elegant.

We’re with Michael Braun on this one: navigation could change completely as 6 inch screens continue to proliferate. Watch this space.

Get creative with gestures

In his UX Matters article, Steven Hoober noted that the center of the screen is where people tap fastest and with most ease. But that doesn’t mean to say that they don’t or can’t use other parts of the screen: as Hoober points out, they just change their grip a little and carry on. As a UI designer this frees you up to think about what kind of gestures you can use in different areas of the screen. Centrally placed icons will work best with an On Tap gesture, while those on the far left could be designed as Swipe Rights. Since the explosion of Tinder on the online dating scene, many apps have adopted the Swipe as their primary gesture – you can even Swipe right to adopt a puppy thanks to BarkBuddy.


Image source: BarkBuddy

If you’re prototyping on Justinmind or a similar tool you can experiment with a ton of gestures to find the right one for your app or responsive site. Play around with the gestures available in your prototyping tool and find out which combinations work best in terms of user experience.

Split screens

Split screens have been around since the dawn of the phablet way back in 2012, when Samsung’s Galaxy Note 2 introduced the feature. Allowing users to divide screen space between two different apps, split screening is a relatively simple way to combine the capacity of larger screens with our insatiable love of online multi-tasking. However, Michael Braun thinks that split screening could be utilized by designers of mobile apps for phablets: instead of running two apps side by side, how about showing two featues of the same app at the same time. Users see this all the time on their tablets or web browsers, as mail apps show our inbox overview on the left while opening out individual mails on the right. Of course, successful split screening requires thoughtful designing or your users could be overwhelmed with information.

Big screens, little UI tweaks, huge UX gains

Overall, the challenges posed when designing for larger screens and human thumbs provide designers with some interesting opportunities to play with interfaces. Prototyping will become ever-more important as screen real estate becomes more crowded. But it looks like the phablet is here to stay, and so tweaking your UI design to cater for larger screens and weary thumbs will lead to big UX gains in the long run.


Cassandra Naji

About the Author

Cassandra is Marketing Content Editor at Justinmind

Comments are closed.