[vc_row][vc_column][vc_column_text]My personal creative brief: Design an experience for multitasking on the iPad that is additive to the current implementation of iOS 8.The genesis of my solution’s inspiration came from the physical work. As I work on sketches and use other elements, I notice that I tend to slide things around to where I needed them. My issue with some of the other multitasking solutions out there is it does not seem naturally intuitive.The experience I wanted was “This should feel as easy as moving a piece of paper around.” Despite it being a digital experience on a touchscreen, my desire is to have a physical gesture that felt familiar to humans.
Per usual to any project I work on, I often like to create a list of questions that I might encounter to keep in consideration. A few questions that came up (some I still need to answer) were:
Even on design explorations, I create a set of guiding principles and rules for myself. I can choose to break them if I choose, but I need to set a foundation.As Bruce Lee says, “Obey the principles without being bound by them.”I made a decision to allow multitasking for two apps maximum. I felt adding the third app would create some constraints in layout size in addition to maintaining some focus. Currently, there is no native split-screen multitasking for Android and two apps are allowed on Windows 8.The other principle I set is that when a user launches the first app, the rest of the screen would be the springboard interface of the iPad. Not until the second app launches does the springboard and dock get completely hidden.
As you may or may not be aware of, there is a gesture you can use on the iPad where you can close apps by pinching 4–5 fingers. I decided on this being the initiator of multitasking. By using a gesture that already exists, I created an intermediary state where a user can snap an app into certain points on the screen to start multitasking. This would amplify the power of an existing gesture that is already found in iOS on the iPad (though I often argue it would be a natural gesture on the iPhone 6 Plus).If a user wants to change the size of the app, he or she could spread to expand or pinch to collapse to scales of 75/25, 50/50, and 25/75.
I drew out some different states of what I would animate, such as what it looks like with an app running with a springboard on the right.
Auto layout and size classes seem to pave the way for responsive layouts on multiple iOS devices. For example, a 75% multitasking layout on landscape fits perfectly with the 1536px portrait layout.In Adobe After Effects, I created a low fidelity prototype of how apps would shift in the layout based on the state changes. Here is an example of the video animations I created without the hands.This was originally the conclusion of the scope of work I was going to do, but I felt like I needed something else to articulate the experience I wanted. To do that, I called my good friend and former coworker Tony to help me film some gestures at Top Pot Donuts. It was important for me to actually act out these gestures to see how it felt on my hands. Video Demo I decided on creating a small After Effects video as the final deliverable to show you what this looks like with real fingers using it. This allowed me to continue to explore by practicing these gestures in real life to test. The sequence you see is as follows:SaveSave[/vc_column_text][vc_raw_html]JTNDc3R5bGUlM0UuZW1iZWQtY29udGFpbmVyJTIwJTdCJTIwcG9zaXRpb24lM0ElMjByZWxhdGl2ZSUzQiUyMHBhZGRpbmctYm90dG9tJTNBJTIwNTYuMjUlMjUlM0IlMjBoZWlnaHQlM0ElMjAwJTNCJTIwb3ZlcmZsb3clM0ElMjBoaWRkZW4lM0IlMjBtYXgtd2lkdGglM0ElMjAxMDAlMjUlM0IlMjAlN0QlMjAuZW1iZWQtY29udGFpbmVyJTIwaWZyYW1lJTJDJTIwLmVtYmVkLWNvbnRhaW5lciUyMG9iamVjdCUyQyUyMC5lbWJlZC1jb250YWluZXIlMjBlbWJlZCUyMCU3QiUyMHBvc2l0aW9uJTNBJTIwYWJzb2x1dGUlM0IlMjB0b3AlM0ElMjAwJTNCJTIwbGVmdCUzQSUyMDAlM0IlMjB3aWR0aCUzQSUyMDEwMCUyNSUzQiUyMGhlaWdodCUzQSUyMDEwMCUyNSUzQiUyMCU3RCUzQyUyRnN0eWxlJTNFJTNDZGl2JTIwY2xhc3MlM0QlMjdlbWJlZC1jb250YWluZXIlMjclM0UlM0NpZnJhbWUlMjBzcmMlM0QlMjdodHRwcyUzQSUyRiUyRnBsYXllci52aW1lby5jb20lMkZ2aWRlbyUyRjExNTgyOTIwNyUyNyUyMGZyYW1lYm9yZGVyJTNEJTI3MCUyNyUyMHdlYmtpdEFsbG93RnVsbFNjcmVlbiUyMG1vemFsbG93ZnVsbHNjcmVlbiUyMGFsbG93RnVsbFNjcmVlbiUzRSUzQyUyRmlmcmFtZSUzRSUzQyUyRmRpdiUzRQ==[/vc_raw_html][/vc_column][/vc_row][vc_row][vc_column width="1/1"][/vc_column][/vc_row]
