Working physics into interface design close
With a new device or screen seeming to come out weekly the job of an interface designers is getting harder.
With new devices comes new and varied ways of interacting with them. So in design terms the days have gone where a flat photoshop document was enough and later down the line the developer might throw in a fancy hover state or transition that you never had in mind but looks good so went with it. Now transitions and interactions are becoming baked into the brand experience and navigation flow. This is often referred to as Physics.
How you design for this can be tricky as you have many options without many established interaction rules to follow. You could spend weeks looking at lots of beautiful examples of new apps and how they reveal their menu or animate their iconography or trawling sites like http://www.awwwards.com (I do this) for nice full screen transitions or the latest parallax effect. But the danger of doing too much of this, particularly at the design concept stage, is that you could lose your way and forget what you are actually trying to achieve.
With this in mind we at Codegent have been looking into how we approach different projects. Our approach is to front load a lot more work in the planning and research stage and actually put less hours into the initial design phase, getting to build faster and iterating with designer and developer working together rathe than considering them discrete phases of a project.
By planning and research I mean even before wireframing. It's the point where you pull apart the brief and look at exactly what the client and user needs. Asking a lot of important questions and building scenarios that help flesh out the problem. You may also find at this point that what was written in the brief or what you had in you head to start off with turns out to be totally useless and another route suits it better.
By doing proper research into the target users and what they will expect from the product we can then start to work out what content they need, at what time and in what place.
A great way to start thinking about content is as cards as opposed to old fashioned pages. They provide much more flexibility in how you can move them around and start to build content groups. For example, at this point, what does the user want and expect to see, and then sort your cards to match that. By thinking like this you can then start to map out when you hide content and when you surface content in the user journey.
This is only one piece in the puzzle though. A job of an interface design is then to give the product a visual identity. This used to be just a case of adding a logo, a nice colour palette and some heading style but now visual identity and branding of a product comes through in the way it moves and responds to you.
You can see this with some of the biggest companies like Apple and Microsoft. You associate a lot of you experiences with them with how you interact with their products.
They have developed a visual language off the back of how they want their user to see content and at what times. They add simple transitions that allow the user to understand where they are in the product and things like this are becoming so important. It's incredible how small interaction details can significantly improve the user experience and build an emotional connection with the product.
In our opinion you can only do this by doing more work up front and not jumping into design. The more you understand the user the better your product will be.
Once you do begin to concept ideas for interactions and transitions its really important to keep testing and iterating through prototyping and creating actual mockups of your ideas that gradually build up a consistent language and navigation. You need to understand how something moves or responds to your touch or click to then work out what happens next. You could say that when you click an icon you want a menu to open, but how do you want it to open and what happens to the content that you were looking at? To answer these questions and to finely tweak them you have to create small mock ups using whatever you are comfortable in. This could be as simple as a animated gif or a basic flash animation or one of the many prototyping tools out there, but anything that helps you start to visualise how your transition or animation would look will really benefit the final outcome.
But before any of this, as designers we have to put aside our initial urge to get straight into making something look beautiful and invest real time in research. You will go into wireframing and design armed with some in depth knowledge and clear goals that will make choosing or developing the right interactions and transitions easier. It also prompts you to cast aside ideas that are not quite right, even though they may have appeared pretty cool!
To check out some of our work and our approach in action have a look on our Behance page. http://www.behance.net/codegent