When designing a mobile application there are a lot of decisions to be made, especially when thinking about platforms, and how to optimize the design of the app for iOS, Android, Windows Phone etc..
Design styles / design trends are changing relatively quickly - in 1-2 years a very slick design can be seen as outdated. By aligning your design to the current OS standards, you can make the users feel very comfortable with the app - however as time passes year by year, you have to make major updates in term of navigation structure, design elements, and ultimately how all these reflect your brand.
Even on iOS, where patterns tend to change relative slowly you can easily spot apps designed 1-2 years ago - some signs are over-used gloss, too many reflections, just to name a few - and even as Apple is rolling out these changes in small chunks the company nowadays often criticised by designers that the OS is outdated - and 5 years after it's initial introduction I believe this is true.
The disadvantages of replicating OS design schemes can be seen very clearly on Android - which had a few complete redesigns over the last couple of years.
We believe that great / innovative design can last in the mobile field for about 5 years - and can reflect the brand in a very distinguishable way. However, designing such experience requires a lot of innovation - introduction of new design patterns that users need to discover themselves, and thus may reduce overall usability of the app in the short term.
Microsoft with Metro is designing the next generation of user interfaces - and it will definitely see challenges and critiques regarding this - just as the original iPhone was criticised because of the lack of physical keyboards. This should be considered natural, as every change requires a learning curve initially - but if overall productivity raises, over time it will find it's sweet spot in the users hearts.
Designing for the next generation is a risk - with a definite short term loss - however it can be a great advantage in the long run.
When designing AppFlow we wanted to create an experience that will last for the next 5 years - one that may create a unified brand for the foreseeable future. One that goes beyond OS limitations and so can be consumed by users regardless the platform they are using.
Human beings can only process a certain level of complexity - some more, some less, but every person has a barrier. By trying to understand the world that surrounds us we have to separate complexities on different layers - and inspect only one layer at a time.
Even though we know that the core building blocks of our world are atoms, we do not try to fix a whole in the wall by thinking about them. We think about the concrete surface, and use our simplified knowledge to reach our tasks.
When it comes to the technological world, the trend seen here is very similar.
As console line applications became too complex for us to process, the era of graphical user interfaces emerged. This allowed us to use true multi-tasking, and with the help of a mouse and keyboard become extremley productive - just by producing a new layer that covers the inner complexity we could build on top of that, do more advanced tasks.
This desire of hiding complexity is growing exponentially on mobile devices. As hardware technology advances, we have access to more and more features - ones which were no longer comfortable to do on a mobile sized keyboard.
Apple was the first to take the risk and creating a full-touch device, the iPhone. With one single button, and a complete touch screen, it reduced complexity of the overall user experience - leaving tremendous amount of space for app developers to leverage on.
However, that space is now filling. We are doing so much more on or smartphones than we did 5 years earlier. The grid based application interface is becoming too cluttered as it is now holding hundreds of applications - and making a complexity issue.
For Apple Siri is the new layer of simplicity that shall enable us to increase complexity on a new level - but as seen, the technology itself just now is not good enough.
Yet, we are in a desperate need of simplification - an intermediate solution until Siri-like technologies emerge - that is possible within the current technological barriers.
We have traditionally used technology to replicate functionality of real world objects - just in a much more effective way. Phone calls could replace letters or meetings, digital notepads / address books could replace physical ones and route planning algorithms could save us a lot of time just to name a few.
With the introduction of location based personal technology we can now create tools/utilities that could have been impossible before. Geofenced notifications and location aware social utilities such as Highlight are the pioneers of those - and expect a lot more to come. These take us to the truly digital world where we do not have any matching physical utilities - and the current design methods of Apple will not help us solve those in the most efficient way.
The replication of real world objects on devices will only be able to handle efficiently the complexity of their real world counterparts - or at least only with a few incremental steps. Stepping in the next generation of utilities these interfaces will no longer provide us with the best possible user experience.
Again, Microsoft with Metro is on it's own way of solving this issue - and if Siri won't be able to provide the user experience of a whole different level - they are the most likely candidates of becoming the pioneers of user interfaces for the next 5 years.
While chrome, textures, etc. can provide visual beauty & increase usability to a certain level, they are also huge distraction factors, and can only deliver a limited set of functionality until they stay understandable. Also, their core function remains helping the user to understand the context - e.g. torn paper helps user realize they can take instant notes - but do not improve functionality at all.
However, just removing the textures & real world design from the design won't radically change usability - while it might have incremental advantages - and will not allow developers to move to a next layer of complexity.
As users understand better and better the context they are working in shifting towards a more minimalistic design is a very logical step - but overall this is not a solution that can become itself a game changer.
In the world surrounding us we see trees grow, water flowing, doors opening in a constant movement. There is a beauty and understanding of motion. Just think about seeing a football player score - it is not just about the start and the end point of the ball - the route it takes makes us understand how & why the player managed to score. Time provides a much deeper layer of information that can help us much better understand how the world - or a mobile app - works.
When talking about motion & animation we are especially focusing on transformation & movement of elements. Visually indicating the flow of interface elements & data can improve understanding of the functionality of an application much better.
Mobile hardware & performance has also reached a level, where rich motion can be created with very high frame rate - and so creating a very fluid experience.
Creating motion however is a very difficult task. Motion cannot be drawn on a single paper. It cannot be sent to developers in a Photoshop file. Start & end states may vary as data might have different length - might require different layouts - which makes the coding even more difficult. Also, this kind of motion cannot be efficiently replicated with simple video mockups - as the dynamics is tied to the user interaction itself. You usually can't decide whether a certain transformation/animation "feels" good, until you try it out on your phone
The MVC design pattern that separates two views as much as possible also makes it hard to create "real" transitions between pages - apart from standard fade-in or slide-in animations. Developers code pages separately, and controls on each page are separate instances - therefore when using MVC (which is the most popular design pattern nowadays) makes creating really interactive apps quite hard.
All of the above, and the lack of a proper animation prototyping tools makes creating a real fluid experience extremley hard. Usually the developer itself has to design the animations - with some help from the interaction designers themselves. Certain highly qualified designers can also code - which makes them extremley valuable for designing real motion driven experiences.
When starting the design process, we knew that we wanted to create something special - something above the standard, and something that would last for years. We decided not to follow OS trends - rather try and create a style of our own. We wanted to remove as much UI elements - gloss/chrome - as possible, and use our content as design. When we started the design process we did not even have the complete functionality in our minds - we wanted to align the functionality with the design as much as possible - this made product (functionality) design, UI design / app development, and server side API development a parallel process. It was kind of a chaos, but we knew, that with the strong team & years of experience we had working together we will be able to create an awesome product.
We started by designing the App List view itself. We made some very basic photoshop designs, but within 1-2 days moved to designing in code - which lasted for 2-3 weeks. This means, only about 10% of the design work was actually done in Photoshop - the remaining 90% was done in the source code of the app.
We did not use interface builder, or any kind of interface mockup utility - while we like these products, but we found that they limit creativity and innovation. We decided to code every part of the UI in Objective C with custom layout code, and hand coded animations. This made it possible, to redesign the page multiple times, and code unique ideas quite fast. Most of our iOS developers where Flash/ActionScript developers before, which helped us a lot during the prototyping process - as they were already common with motion & animations, and how to effectively code them. Apple has also a very strong framework - called Core Animation - which makes it very easy to create animated interface elements, and performs very well in terms of performance.
We designed & developed the prototype of the app page-by-page. We made every page almost 100% ready before moving to the next one. We started with the ones that we believe were the most important, and moved further based on this priority. This meant, that while we did not have internal deadlines. We worked on a screen until we found it was just what we were looking for - rather than strictly pacing development.
We did not use scrum, or other specific development methods. We used trust between our developers - we made sure that questions are heard, and that everybody sees how different teams are progressing. We have ad-hoc meetings, (or more likely conversations) and all teams are flexible in terms of prioritizing resources in a way that is most effective for the project itself.
We have to note though, that is approach would be very hard to scale. We are not certain though, if it should be.
We also found some great ideas sometimes simply by messing up the code. A reversed animation by accident can show something really unique. This means designers should see every single build of the code, as they really can discover something awesome by accident. In our team the same persons were the designers as the developers, which made this extremely efficient for us - the total client design + development time was 4 months. (100 hour weeks though - seriously)
We used a lot of motion in AppFlow, most of which are completely new in the mobile world and are unique to the app. You can find the video demonstrations & insight on their purposes below.
Users can expand / collapse lists to show more information. When expanded items can be swiped through with simple up-down gestures, while showing one item at a time - This allows users to both scroll through a list very fast, or inspect every items together with it's screenshots. By combining the two views in one page & having the expand / collapse animation users can easily understand the underlying concept.
When viewing an app list the thank & follow buttons move to the top bar. As they are under the list name at start users understand the context of the buttons better.
When scrolling through the app details page the relist / bucket / download / share buttons float to the top of the page. Showing these buttons in context at the start point helps users to understand the context better.
Primary action buttons are shown in context at the initial position. However, when scrolling they emerge, and stay visible so users can access them easily. The inital start position helps users understand the context, showing that the primary button is for following the user - secondary follow buttons are for following individual lists.
After entering the list name, and jumping to the selection of the cover image, the title transforms to it's new position - changing color, style etc.. However, by moving from the input field to it's new position users can better understand the overall flow.
After choosing a list, users have to choose the position of the new app added to that list. By floating the app inside the list users can better understand what is happening - which item is the one to move around etc..
Having multiple lists on one page and pressing "show more", the selected list expands to fill the screen - when user presses back it collapses to it's initial position.
When pressing the search icon it moves to the left, while other elements disappear and text field appears. This solution helps us to have one bar at the top instead of having a separate navigation bar & search bar.
Both the edit list & add app buttons float to the top indicating to the user what is happening & why certain UI elements appear.
When relisting an app, the icon moves along to reach it's position on the form.
After a list is created it's image animates to it's position on the previous screen - showing that where they new list is accessible.