As part of the Mobile Academy curriculum, I recently attended a class by Priya Prakash on “design principles”. Priya is a very experienced designer and has founded Design for Change, a London-based urban experience design studio.

Priya started off the session by explaining that design principles describe the experience of core values of a product or a service. Design principles help in making decisions on your product. She referred to a great definition of design principles by Luke Wroblewski (see Fig. 1 below). The important part of Luke’s definition is that all decisions can be measured against design principles.

“Design is what you decide not to do” was one of the key points that Priya raised in this class. It’s all about doing less and simplifying things.  She talked about Spotify and Google Glass as good examples in this respect:

1. Content first – Focus on the content, and remove any unnecessary user interface elements.
2. Get familiar – Even though there is a clear distinction between a “lean forward” mode (Spotify desktop app) and “lean back” mode (Spotify mobile app), there’s a unified design language which has been executed consistently, irrespective of the device that you access Spotify from.
3. Don’t get in the way – Google Glass is designed to be there when you need it and to be out of the way when you don’t. The goal is to offer engaging functionality that supplements the user’s life without taking away from it.
4. Keep it relevant – Deliver information at the right place and time for each Google Glass user.

Priya then talked about motion user interface design principles:

1. Personality – For example, the Pitchfork app has a magazine like feel. It’s about understanding what the content is and translating this into appropriate behaviours.
2. Responsive – Priya talked about the Clear app as being very responsive, explaining how this app gracefully expands or contracts.
3. Context – Motion should give context to the content on screen by detailing the physical state of those assets and the environment they reside in.
4. Emotive – This principle is all about evoking a positive emotional response. This kind of response can be triggered by wide range of user interface elements, for example  smooth transition or a nice animation. Yelp‘s app is a good example in this regard.
5. Orientation – Motion should help ease the user through the experience.  The “orientation” principle means that motion should establish the “physical space” of the app by the way objects come on and off the screen or into focus. The key is to get the flow of actions right, guiding the user on her journey and make sure she doesn’t feel lost or confused. Mobile apps like Yelp and Evernote do this pretty well in my opinion.
6. Restraint – Keep it simple! Similar to the abovementioned “orientation” principle, it’s important not to bombard the user wity too much animation or confuse them with too many interactions to choose from. This is one of the reasons why I’m so a big fan of single purpose apps; I like the simplicity that they offer and the level of design restraint that they tend to apply.

Main learning point: I learned a lot from Priya Prakash’s class on design principles, particularly with respect to motion user interface design principles. Design principles can provide valuable guidance for the design of any software product or service and should therefore not be taken lightly. Thanks to Priya for a great class!

Fig. 1 – Definition of design principles by Luke Wroblewski – Taken from: http://www.lukew.com/ff/entry.asp?854

“Design principles are the guiding light for any software application. They define and communicate the key characteristics of the product to a wide variety of stakeholders including clients, colleagues, and team members.”

“Design principles articulate the fundamental goals that all decisions can be measured against and thereby keep the the pieces of a project moving toward an integrated whole.”

Fig. 2 – What makes a good design principle? – Taken from Priya’s lecture at the Mobile Academy on 14 October ’14:

• Specific enough to help make a choice
• Focuses the team – avoid being broad
• Measurable against user need or product/business goal

Related links for further learning: 

1. https://developers.google.com/glass/design/principles
2. http://www.theguardian.com/business/2014/aug/03/inside-spotifys-redesign
3. http://www.lukew.com/ff/entry.asp?854
4. http://pitchfork.com/news/52898-introducing-pitchfork-weekly-our-new-app/
5. http://www.beyondkinetic.com/motion-ui-design-principles/
6. https://www.vitsoe.com/gb/about/good-design
7. http://www.uie.com/articles/creating-design-principles/
8. http://www.slideshare.net/goldengekko/mobile-apps-design-trends-2014