This concept showcases an enhancement to folders on the SpringBoard to allow the user to switch folders without having to leave the folder at all. To move to the next folder (left or right), simply drag over and the content in the next folder over will come in; similar to how you switch pages on the SpringBoard. The user can move as many folders as he or she wishes by continuing to drag after the folder ahead of it in the queue is fully loaded (again, like how SpringBoard manages paging).
I broke down the fullscreen image into six sections to document how the implementation works.
1) The folder you’re switching from and its label
As you switch to the next folder, the following things happen. The folder itself with its respective icons begin to fade out to match the opacity of the rest of the icons on the SpringBoard. Since the label for the folder that is being switched from is gone when in the folder is open, that label begins to fade in to the level that the rest of the labels are. In this case, the folder “Misc” is fading down while its label is fading in.
2) The folder you’re switching to and its label
This works in the exact opposite of the above. The folder you’re switching to fades into to full view while the label fades out until it is hidden. In this case, the folder “Apple” is fading in while its label is fading out.
3) The dialog arrow on the folder
The arrow plays a key role animation-wise to distinguish that you’re switching folders. As you begin to move one direction, the arrow follows along along the horizontal axis attached with the top of the folder. As soon as it reaches the next folder, it stops. Like the SpringBoard, if you don’t page far enough and let go, it will go back to its original position. If you scroll far enough and let go, it will continue on its own until it hits the next folder.
4) Folder label of the folder that’s coming in and the previous folder’s label
When switching folders to the right (as depicted), the folder you’re leaving starts heading off to the left. The icons head out and the label follows them as well. In the case of this example, the label is already gone because it is on the far left side when displayed normally. If you switch the opposite direction (not depicted), then the label stays shown as you move into the next folder until the new folder takes view. As soon as the other folder is loaded, the previous label is already off screen and out of view.
The incoming folder works the same way. The label follows the icons in and how the label is viewed depends on the number of icons in the incoming folder and which direction you’re coming from.
5) Incoming folder icons
Briefly mentioned above, the icons come in from whichever direction you’re switching. The incoming icons push the previous icons out and don’t fade or perform any animation. Think SpringBoard paging.
6) The folder canvas and other SpringBoard icons
Because the folder canvas changes size based on the number of icons in the folder, the canvas will change size dynamically as you move into the next folder if applicable. That means it will grow larger or shrink smaller as you move into the next folder.
Since the SpringBoard icons (the low opacity icons) change layout based on the size of the canvas, they will move down or up depending on whether the canvas is getting smaller or larger. It will follow in suit to whatever the canvas does. In this case, you can barely see a row of icons poking off the bottom of the screen. When this animation finished, that third row of icons will be visible with the folder “Apple” displayed.
Here are some answers to a few possible questions that you guys might have.
Does this functionality conflict with the native folder handling?
No it doesn’t not. It’s an enhancement. You can still leave folders and go to the SpringBoard or another folder if you wish to that way.
How does this implementation handle switching when the next folder is on another page?
If you switch to to another page, it will simply jump to the next folder and keep the same animation style (which includes the dialog arrow moving into position if applicable)
Will this implementation work on all iOS devices?
Yes it will. Although depicted on the iPhone, the folder-switching capability will be usable on the iPad and iPod touch.
Any further questions can be posed to me on Twitter or in the comments below.
© 2012 Joshua Tucker
As John continues to code Abstergo to how we both want it, I have expanded into other ideas to tackle after our project is done. The beauty of teamwork is continuous innovation. When one of us is at a standstill waiting for the other, opportunities to test and play around with new things gives a sense of direction after we’re done with our current focus.
Although no name has been chosen, here’s a small sliver of our next project; a SpringBoard manager. This manager is a vast and encompassing project and isn’t fully developed yet. Small parts have been brought from my mind to paper so as sections come together, I will showcase them to you.
This portion of the project highlights dealing with deleting applications and placing them into folders. It will include my multi-icon mover concept as well as new and unique functionalities.
Note: My idea for moving multiple icons has changed slightly from the concept above. Information on how I want it to work will be revealed as time goes on.
I won’t let out too much information, but I will let you know about a couple of things pertaining to this part.
- - You will be able to multi-select applications
- - With multi-select, you will be able to folder them instantly as well as delete them with ease (individual and multiple)
- - The drawer as shown in the pictures will be available to you only in Wiggle Mode and can be revealed by pulling down in the SpringBoard
- - There will be a lot of animations (just enough to be appealing to the user of course)
And to top it off, there’s much more than meets the eye. Feel free to ask questions and I will do my best to answer them accordingly.
The Question Mark: I spaced on what I originally wanted in that box and I’m searching for the lost recollection of my idea. If you have any ideas, feel free to shoot me them. Hopefully I figure out what I wanted there!
———————————————————————————————————
I leave you with a quote from a man who we’ve all come to cherish and love. For his inspiration and impact on the world. His definition of innovation is what absolutely defines my experience; it’s powerful.
“But innovation comes from people meeting up in the hallways or calling each other at 10:30 at night with a new idea, or because they realized something that shoots holes in how we’ve been thinking about a problem.” - Steve Jobs
Until next time.
-Josh
Twitter: Joshua Tucker, John Heaton
WARNING: Anything and everything is subject to change.
© 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
Here’s an addition to iOS’ method of moving icons:
Check Marks: When in wiggle mode, you can tap multiple icons so that you can move more than one icon at the same time.
Badge: Tells you how many icons you’ve selected when moving them to a new destination (only applicable if the number of icons is greater than one)
Icons (Overlay): If you select multiple applications and move them, whichever one you tapped first will show in the beginning and the rest will stack underneath. This gives a good visual on how many icons you’ve selected and will let you dynamically drag all those selected icons at the same time.
Here are the features:
- If you select multiple icons and move them at the same time, you can place them at any destination and the SpringBoard will justify. For example, let’s say the first row of my SpringBoard is as follows —> Phone, Messages, Contacts, Reminders. If I were to select Contacts and Reminders and drag it between the Phone and Messages icon, it will place those icons in the order that I tapped them to show a row like this —> Phone, Contacts, Reminders, Messages
- You can select multiple icons and place onto another icon to make a folder.
- This functionality would be an addition to native iOS, leaving all the other mechanisms intact.
P.S. You may see a similarity with this and MultiIconMover by ashikase. It uses the initial selection method, however moving icons is done dynamically and is much more functional.
© 2011 Joshua Tucker
