Apple vs. Samsung: reinventing Android’s interface

Everybody is talking about the Apple vs. Samsung patent infringement case. The resulting verdict was a shock for many people. Apart from ‘politics’ and ‘sides’, I was impressed by the amount of Apple’s patents that the jury thought to have been infringed by Samsung.

One of my first thoughts was: “Android needs a lot of reinventing, from bottom up!”

Of the myriad of articles about the result of this trial, one of my favorites has been Kyle Vanhemert’s, for Fast Company ‘Apple’s Big Verdict: Bad For Usability, But It Won’t Stop True Innovation’ (you can read it here). One of Kyle’s argument is about how some of the patents Apple owns could (should?) be considered usability standarts for multitouch interfaces. Kyle writes this, about pinch-to-zoom: “It’s very much possible that pinch-to-zoom is the best way of zooming in on a map. Forcing smartphone developers to come up with a different way of doing things for the sake of coming up with a different way of doing things is outrageously stupid. And, needless to say, it would be a headache for users.

I started thinking how I would reinvent the interface for Android. This article shows some of the ideas I’ve had so far.

I hope this article can help start a discussion about designing interfaces for multitouch. Such a discussion could lead to some crowdsourced solutions, without patent constrains.

There’s a lot of problems that must be addressed in every digital interface design and, since last Friday, some of them are pretty hard to solve. I didn’t want to take my luck at tackling each one of those problems (like pinch-to-zoom, for example), but I wanted to rethink some major features needed for a smartphone operating system interface.

What you’ll find in this article are my ideas for some of those features, like home screens, folders and apps organization, navigating between apps, etc.

My first concept is really a no brainer: Smartphones are hand-held devices, usually handled by one hand alone. These gadgets are mostly a ‘thumbs device’. What this means is that most of it’s basic operations should be made possible while handling your device with one hand. In order to do that, you’ll have operate the phone with your thumb. Ah, the beauty of the opposing thumbs!!

Before going to the pictures and explanations of my ideas, a simple disclaimer: I’ve use a Samsung Galaxy S3 device as the base picture for the sketchs on this article. I found the picture on All the applications icons I’ve used for my sketchs are taken from Google Play and serve only as an example (and as a display of my own preferences!).

This is the home-screen when the phone is locked. Simple, it has the basic information you’ll need from it.

The home-screen can be personalized with feeds. These feeds can be from apps installed on your device, from folders containing apps or from websites (like Techcrunch in this example). A number will indicate the updates each feed has.

Of course, the wallpaper can be changed by you, whenever you feel like it. This one I found online with the help of Google. If you like it, there’s a caption on the picture with the URL for downloading it.

To unlock your phone just tap at the bottom of the screen and use Android’s brilliant ‘unlocking’ system.

With the phone unlocked, you can tap any of the feeds to expand it’s view. The expanded area becomes scrollable.

Touch any article on the scroll area and you are taken to the app of the feed. On this example, we’re taken to Chrome for Android. The website on this example is StarkInside.

Touch the phone’s ‘home button’ and you’re back on the home-screen.

When you first use your phone, you’ll need to ‘tell it’ if you’re right or left-handed. This will influence the interface, as you’ll see ahead. All my examples are designed for a right-handed user.

From the home-screen, by sliding your thumb from left to right, starting just outside the screen, you’ll access your folders and apps.

This circular menu has all your apps and folders, organized as you wish.

With your thumb moving just up and down, spin the menu to access everything you’ll need.

There’s and additional menu to access Google Play, create new folders and access the phone’s settings. Let’s go to Google Play.

We’ve just installed Zite, one of my favorite apps. The word NEW lets you know this is a new app and it requires that you organize it. If you leave the app on the menu, without moving it, the next time you’ll access the menu, the word NEW will not display.

To move any app inside a folder, just tap and hold on it. Then, drag the app to the folder you want to use. Similar, to delete any app or folder, just drag it outside the circular menu and it will be deleted from your phone.

Making a new folder is just as easy, just tap the + sign on the side menu. When a new folder is created, you can type it’s name and choose it’s color for better reference inside the circular menu.

OK, back to the circular menu:

To access your apps inside a folder, tap on that folder.

The folder expands, showing you it’s content. Tap again to close it. Since the menu is circular, you can have infinite folders opened (you’ll just need a lot of thumb-spinning!).

From our ‘Social’ folder, we’ve chosen to open Google Plus.

For ease of usage, you can access a menu with your most used apps. This is a menu that you cannot change. You can access it by pulling with your thumb, from left to right.

This is why it is important to ‘tell’ your phone if you’re left or right-handed. The circle ‘center’ for the menu will change in order that the rest of your hand doesn’t cover the circular menu content.

Just choose between one of your most used applications. Thumbs up!

It’s ‘Cut the Rope’ time! One of my favorite mobile games.

But how can you see which apps are opened on you phone and how to access it?

On the bottom of the screen there was an area called ‘Under the hood’, remember?

Scroll your thumb horizontally in that area and you’ll see all the apps that are running on your phone.

Just scroll to view those apps and tap to bring one to the screen.

This is Flipboard, another one of my favorites!

And how about closing an app? Simple, X is for closing… just draw an X in the screen with your thumb. You’ll be asked if you want to close that app.

And you’ll be back at your home-screen:

As you can see this is just a very small effort for reinventing an operating system interface for mobile phones. It is also a lot of fun to do!!!

This is just my humble contribution to what I would love to see: an overall discussion about touch interface design, shared by many.

Crowdsourcing design! Without patents or any other of those things…

Now it’s your time, how would you do it?

Please share your thoughts and/or links on the comments bellow.

One Response to “Apple vs. Samsung: reinventing Android’s interface”
Check out what others are saying...
  1. […] Apple vs. Samsung: reinventing Android’s interface html, body { height: 100%; } #fsi-full-bg { position: fixed; top: 0; left: 0;width:100%; height:100%; z-index:-10; } #fsi-full-bg img { position: fixed; top: 0; left: 0; z-index:-9; opacity:0} #fsi-full-bg img:first-child{opacity:1;} .fsi-full-bg-full-width { width: 100%; } .fsi-full-bg-full-height { height: 100%; } #fsi-full-bg-overlay { position:fixed; top:0; left:0; height:100%; width:100%; z-index:-9; background:url( repeat; } (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = ''; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); jQuery(document).ready(function($) { // remove empty p $('p') .filter(function() { return $.trim($(this).text()) === '' && $(this).children().length == 0 }) .remove() //remove &nbsp $(".one_half, .one_third, .two_third, three_fourth, .two_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth").each(function() { var $this = $(this); $this.html($this.html().replace(/ /g, '')); }); }); body { background:#000000; background-repeat:repeat; background-attachment: scroll; font-size:12px; font-weight: Normal; } a:link, a:visited, a:active, a:focus, .cat_article_content .article_read_more:hover, a.nb_recent_more:hover, .tweet_list li a, .news_box ul.more_news li span { color:#fa0505; } a:hover, .cat_article_content .article_read_more, a.nb_recent_more, .tweet_list li a:hover, .news_box .recent_news_content span a:hover, .article_meta a:hover { color:#a13737; } .single_article_content h1 { font-size:36px; font-weight: Normal; } .single_article_content h2 { font-size:30px; font-weight: Normal; } .single_article_content h3 { font-size:24px; font-weight: Normal; } .single_article_content h4 { font-size:18px; font-weight: Normal; } .single_article_content h5 { font-size:14px; font-weight: Normal; } .single_article_content h6 { font-size:12px; font-weight: Normal; } /*———————————- * Main font ———————————-*/ #navigation ul.nav > li a , .slider_items .slider_caption h2, .slider_items .slider_caption h2 a, .lates_video_news .widget_title, .news_box .news_box_heading h2, .sidebar .widget .widget_title, .sidebar .widget, #footer .widget .widget_title, .cat_title, .tabbed_widget ul.tabbed_nav li a, .mom_social_counter .sc_item .social_box span, ul#ticker01 li a, #crumbs { font-family: !important; } /******************************************************************* * Colors Start Here *****************************************************************/ /* Alert Bar */ .top_alert { background-repeat:no-repeat; background-attachment: scroll; } /* Topbar & bottombar */ .top_bar, .top_bar ul.top_nav li ul, .bottom_bar { background-color:#000000; box-shadow: 0 0px 0px 0 #3C4048 inset; background-repeat:no-repeat; background-attachment: scroll; } /* Header */ #header { background-color:#000000; background-repeat:repeat; background-attachment: scroll; } /* Navigation */ #navigation .nav_wrap { background-repeat:repeat; background-attachment: scroll; } #navigation ul.nav > li a { color:#e81515; } #navigation ul.nav li:hover > a, #navigation ul.nav > li.current-menu-item > a, #navigation ul.nav > li.current-menu-ancestor > a, #navigation ul.nav li.home:hover > a, #navigation ul.nav > li.home.current-menu-item > a, #navigation ul.nav > li.home.current-menu-ancestor > a { color:#520000; } #navigation ul.nav li ul li a:hover { color:; background-repeat:repeat; background-attachment: scroll; } /* Feature */ .Feature_news, ul.slider_nav, ul.slider_nav li.activeSlide a img, #feature_outer { border-color:#ff0000; } /* Widgets */ .sidebar .widget, .lates_video_news, .news_box, .cat_article, .ticker_widget, .news_boxes_tabs { } .sidebar .widget .widget_title, .lates_video_news .widget_title, .news_boxes_tabs ul.custom_tabs { color:#ff0000; } /* NewsBox */ /* News Ticker */ .ticker_widget { } ul#ticker01 li a, ul#ticker01 li { color:#ff0000; font-size:13px; font-weight: Normal; } ul#ticker01 li a:hover { color:#ff0000; } ul#ticker01 li span { color:#ff0000; } /* News Ticker */ /*———————————- * review ———————————-*/ /*———————————- * end review ———————————-*/ #header { background-attachment: scroll; background: transparent; background-repeat: repeat; } #navigation .nav_wrap { background:transparent; border-top:1px solid #393b3c; } @media only screen and (min-width: 768px) and (max-width: 989px) { } @media only screen and (min-width: 480px) and (max-width: 767px) { } @media only screen and (min-width: 320px) and (max-width: 479px) { } […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

  • Enter your email address to subscribe to this blog by email

    Join 762 other followers

  • Thank you

    This blog needs your input. Please comment to start a discussion or drop me a line at
  • Categories

%d bloggers like this: