The topic of a “new, revitalized App Switcher” on iOS has resurfaced over the last day as The Verge posted a concept a user did recently on what he feels the iPhone 5 App Switcher should be. After reading and evaluating the concept, I really got to thinking about what I believe in when it comes to a good multitasking design. In other words, what are the make it or break it for a multitasking interface or concept? I have highlighted in the following sections different important factors I feel make or break a multitasking interface or a concept. I will be using The Verge’s concept post as the primary comparison.
Note: I will continue to add more points if time and ideas permit so view this as a “ever-changing, evolving” document.
Three-Way Battle
The proposed Verge mockup for the actual app switching has three basic key components.
1) App preview
2) App icon
3) App name
Out of these three choices, a logical question would be “Which one is the most important?” I would argue that that the application icon is the most crucial part of a multitasking interface. A user, especially on mobile devices, associates applications or certain tasks by its icon, not by the name or action. You can evaluate this on your own by viewing the SpringBoard as an example. What’s larger? The name of the application or its icon?
With this said, I return to the mockup and say that exemplifying the app preview and diminishing the size of the app icon is counter-productive. When I open the App Switcher, the first distinguishing factor is the icon. The icon is the most important part because, all other parts aside, it is the clearest piece of information that tells me the application I can switch to. Period. This concept loses the icons in the preview of the app and increases the time for me to cognitively understand what applications are what.
On top of this, the app previews are so small they essentially waste space and show nothing. Think about certain stock Apple apps have similar base interfaces. Imagine trying to figure them out in such a small view where content within the application is barely visible simply by their app preview? Ouch.
So what is my opinion on what makes this “three-way battle” come out with the right winner? Two things.
1) The icon must be the centerpiece and focal point of app switcher. It needs to be the most important piece
2) If you’re going to use an app preview, find a way to display it so the content is clearly visible and useful. Otherwise scratch it completely
Penthouse or Green Acres?
I use this analogy, because heck, you can’t discount the classic TV show “Green Acres” right? I’m into the classics. But really, I think this comparison fits perfectly with the app switcher interface. The underlying question really is the following:
“Do you want a scenic or compartmentalized view?”
The mockup brings in some new features that would be unique to that view, but I would argue that things are just too jam-packed. The more areas where touch or gestures can be accepted increases the level of error and mistakes. I understand that optimizing the space that is available is important and I’m a huge contender of that, but it must be done in the proper way.
Using the music section of the mockup as an example, the album and music icon are so small that they are barely visible or tappable. For people with big fingers, that could be an issue. Also, in the case of the album art, it’s so small that it’s not particularly relevant to see because you can’t distinguish any parts of the artwork itself.
The most obvious solution would be to split certain parts and put them on another page of the app switcher, but then that increases the number of views to swipe through. So to fix that problem, we have a “big lot next door” we could work on.
So what’s my opinion on this topic?
1) There is effectively 800+ pixels above the switcher that is left untouched. Utilize the surrounding real estate to cut down on things being too close together
2) Bouncing off my first point, if content is barely visible or useful, resize appropriately or cut it.
Law-Abiding Citizen versus Rebel
I will expand on this more when I have time, but if I could describe this section in one brief sentence, it would be the following:
“In the name of keeping our interfaces intuitive with Apple, we must somewhat play by their rules, but that doesn’t mean we have to think in the sandbox of what exists.”
The linen app switcher interface has been a part of iOS since the beginning. I would argue that to include a lot more of the features that people would want in a multitasking interface, that we need to start thinking outside of the linen box. Go beyond what exists and create something that still fits the iOS native profile but utilizes something new and unique.
I’ll be back with more! Stay tuned: feel free to tweet me on Twitter — @joshmtucker.
© 2012 Joshua Tucker
This is revision three for the interface I’m working on. In the process of designing what I had in mind, I drifted away from what I’m really aiming for in this concept. I haven’t really expressed it either so here’s my goal and vision for this interface concept:
Mission Statement:
To create a seamless, user intuitive interface with access to all of iOS’ core features that can be viewed with one unified action or gesture.
———————————————————————————————————-
Going back and re-thinking how I wanted to go about this, I changed a lot of things (as you can see from the pictures). Although I didn’t feel like I was rushing, I’m nonetheless going to take my progression a little bit slower so that I get a level of in-depth development. I appreciate all the suggestions and feedback you’ve given me so keep it up!
Before I move forward with the explanation of this revision, read up on my previous work to get some background. They are of the past now, but it’s good to get some well-rounded information about my progression.
Oh one last thing: Here are the assumptions I made when building this concept:
- To achieve the seamless nature, the interface is an overlay over a blurred image of what’s in the background (wherever you came from)
- No matter where you are when in this interface, all the features work and are useable.
- This interface is accessible everywhere except the lock screen (for security reasons — manage lock screen notifications with this concept).
———————————————————————————————————-
Activation:
Activating this interface could really be anything, however the methods that I’ve chosen for this interface are:
- Double tap Home button
- Swipe down on status bar
To get out of this interface, you can tap the Home button twice again or swipe up from the bottom of the shade.
In iOS 5, the way you access the Notification Center is by swiping down from the status bar while accessing the App Switcher is done with a double tap of the Home button. Since this interface is unified, you’re able to access both while within the interface. However, the starting page can be different depending on what you do. Here’s how I have it working (conceptually):
But first — note that the App Switcher interface I’ve designed is a merge between launchpad and multitasking functionality. It will be explained in more detail farther below.
- Double tap Home button — It will bring you to the App Switcher/launchpad interface first. From there, you can move from page to page
- Swipe down from status bar — You start off at the Notification Center. From there, you can swipe to get to the App Switcher/launchpad page
Note: In terms of the page dots, the Notification Center is the first dot and the App Switcher/launchpad page(s) are after. The number of dots varies on the number of pages you have on your App Switcher/launchpad.
Pages:
The page you’re on is noted by a page dot. To get to other pages, simply swipe left or right like on the SpringBoard.
When on this page, you not only have access to what applications are multitasking but also applications that you can launch. The page(s) that pertain to App Switcher/launchpad are organized from top to bottom starting with applications that are multitasking (most recent first). After that, they are organized in alphabetical order by default. The layout of the App Switcher/launchpad isn’t based off of what your SpringBoard looks like. You can make it the exact same if you want to our change it up however you wish. Putting applications into folders works in this interface just like on the SpringBoard.
Two Notes:
- To restore to the default alphabetical order for this interface, there will be a reset button somewhere in Settings.
- You cannot delete applications from this interface. That is all done through the SpringBoard like default.
You can at anytime arrange the icons however you want by going into Wiggle mode (holding down on one of the icons). When in Wiggle mode, applications that are multitasking will be distinguished by the default minus button which will allow you to quit the application out of the background if you wish to.
Note: My design incorporates my multiple icon mover concept (outdated but the premise is the same. I’ll at some point go back and revamp it to match this interface)
Notification Center:
The Notification Center is another page that is directly accessible from this interface. You can move to this page at any time as well as start on it (read above under the Starting Page section). And of course, you can move to the App Switcher/launchpad interface from here by swiping to the respective page.
All the normal functionality of the current Notification Center (managing notifications and what not) applies here.
Note: There are components of my older Notification Center concept will be incorporated eventually (outdated but many of the parts apply to this).
Spotlight:
The Spotlight feature is definitely a staple a component of this interface. It is taken to a new level because it is available no matter what page you’re on. Swiping between pages switches content below the Spotlight header but never hides it. You always able to access and utilize its functionality.
———————————————————————————————————-
Here is my checklist for this concept as of now
- - Review what’s already done and tweak accordingly
- - Incorporate music/rotation lock controls
- - Work with the Spotlight feature in more detail
- - Add important toggles
- - Elaborate on the quitting applications functionality (individual and multiple)
- - Put in multiple icon mover functionality (or I should say demoed with this interface)
———————————————————————————————————-
The first draft reveals the art, revision reveals the artist.“ - Michael Lee
© 2012 Joshua Tucker
This a continuation of my interface concept. You can check out the first part below —
Let’s break it down.
Wi-Fi:
When you launch the interface and select the Wi-Fi tab, this is what will appear.
Toggles:
You have the standard Wi-Fi on and off button as well as the Ask to Join Networks switch. Whatever you change in this interface will also change in Settings (vice versa).
Blacklist:
Blacklisting is a way of putting networks you don’t want to see or get notified by into a list. That way you will longer see the network or get a notification for it if you’re in the area (blue box on SpringBoard / application). You can at any point put or take networks out of the list and have three ways of adding networks to it:
- Swiping inside the blue box and hitting “Blacklist”
- Swiping inside this interface and hitting “Blacklist”
- Swiping in Settings in the Wi-Fi section and hitting “Blacklist”
The Blacklist is available in this interface as well as the Wi-Fi section in Settings.
Disconnect:
On top of being able to turn Wi-Fi on and off from here, you can also disconnect from networks by simply swiping the connected network in this list and hitting the “Disconnect” button (not shown — exactly like the Blacklist button but with the string “Disconnect”). This saves you from having to disconnect from Wi-Fi and than joining another network. Or choosing “Forget this Network.”
Pull to Refresh:
To update the list of networks that are shown, simply pull down from the interface to refresh the list.
© 2012 Joshua Tucker
