good design principles for app developer (uab) 2014
TRANSCRIPT
Ingenieria de desarrollo de aplicaciones para dispositivos móviles
Diplomatura Postgrado
2014 –15
Good Design Principles for App Developers
Good Design Principles by Dieter Rams
• Chief Design Officer at Braun (1961–1995)
• "Less, but better"
Dieter Rams (1932)
Dieter Rams products are self-explanatory
Braun T2 Table Cigarette Lighter (1968) & Apple Mac Pro
Braun T1000 radio (1962) & Apple PowerMac G5Braun T3 pocket radio (1958) & Apple iPod
Braun LE1 speaker (1959) & Apple iMac
Dieter Rams & Apple
Good Design Principles & Apps
Why is important to keep in mind the good design principles from the hardware design to the software design?
Braun ET calculator (1981) & Apple calculator iPhone OS v2 Korg Electribe ESX1SD & Korg iElectribe for iPad
Hardware use
Touch screen
Software use
Good Design Principles & Apps
The User Interface of the BRAUN Receiver Regie 510 (1972) is:
1. Innovative2. Useful3. Aesthetic
4. Understandable5. Honest6. Unobtrusive
7. Long-lasting8. Consistent in every detail9. Environmentally friendly
10. As little design as possible
Good Design Principles & Apps
“Pull-to-refresh” by Loren Brichter
Technological development is always offering new opportunities for innovative design,Innovative design always develops in tandem with innovative technology, and can never be an end in itself.
1. Good Design is innovative
Google Mapshttp://www.google.com/mobile/maps/
Good design emphasizes the usefulness of a product while disregarding anything that could possibly detract from it.The most important task of design is to optimise the utility of a product’s usability.
2. Good Design makes a product useful
Currencyhttp://simplesimple.co/currency
The aesthetic quality of a product is integral to its usefulness because products we use every day affect our well-being.Only well-executed objects can be beautiful.
3. Good Design is aesthetic
It clarifies the product’s structure.Better still, it can make the product talk.At best, it is self-explanatory.
WTHRhttp://wthr.co
4. Good Design makes a product understandable
It does not make a product more innovative, powerful or valuable than it really is.It does not attempt to manipulate the consumer with promises that cannot be kept.
WhatsApphttp://www.whatsapp.com/
5. Good Design is honest
Google Nowhttp://www.google.com/landing/now/
Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art.Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.
6. Good Design is unobtrusive
Paper by Fiftythreehttp://www.fiftythree.com/paper
It does not follow trends that become out-dated after a short time.Unlike fashionable design, it last many years–even in today’s throwaway society.
7. Good Design is long-lasting
iOS 8 Clock iPad App
Nothing must be arbitrary. Care and accuracy in the design process shows respect towards the user.
8. Good Design is consistent in every detail
Design makes an important contribution to the preservation of the environment.It conserves resources and minimizes physical and visual pollution throughout the life cycle of the product.
Don't drain the battery, save energy!
9. Good Design is environmentally friendly
Less but better – because it concentrates on the essential aspects and the products are not burdened with non-essentials.Back to purity, back to simplicity.
10. Good Design is as little design as possible
Human Interface Principles
ProductivityFocus: easy task
Human Interface Guidelines
GameFocus: immersive experience
1. Aesthetic Integrity
Human Interface Guidelines
• Allows people to transfer their knowledge and skills from one application to another
• Use HI standards when necessary
2. Consistency
Human Interface Guidelines
The comfortable minimum size of tappable UI elements is 44x44 points!
3. Direct Manipulation
Human Interface Guidelines
Assures people’s actions that processing is occurring. Keep in mind to use:
UI elements Animations Sounds
4. Feedback
Human Interface Guidelines
Metaphors help user to learn how to use the app
5. Metaphors
Human Interface Guidelines
• User, not applications, should initiate and control actions
• Keep in mind that a ‘home button’ click hides the App in any moment given
YESNO
6. User Control
"What works good is better than looks good, because what works good lasts."
— Ray Eames [aisleone.net]
User Interface vs. User Experience
User Experience Guidelines
User Experience Guidelines
Focus on the Primary Task
• Clarity of purpose
• Ease of use
• Optimize required input
User Experience Guidelines
• Minimizing the number of controls from which people have to choose
• Information paths have to be logical and easy for users to predict
Product Strategy Means Saying Nohttp://insideintercom.io/product-strategy-means-saying-no/
Minimize options
Use realism(and skeuomorphism)
• Aesthetically
• Using physics
User Experience Guidelines
Always have a reason for customization
• And remember: all apps need at least some custom artwork, for example, the icon
User Experience Guidelines
Users usually spend no more than a minute
or two evaluating a new App!!!
Start Instantly
• Onscreen User Help has to be minimal
• Avoid asking to supply setup information
• Launch in the device’s default orientation
• Delay a login requeriment as long as possible
User Experience Guidelines
• Preferably, use a single font.
• Use hierarchy: - Font style (Bold, light, italic) - Size - Colour - Effect (Only as a last resort!)
Typography
User Experience Guidelines
Hierarchical Content/experience–drivenFlat
There are three main styles of navigation, each of which is well suited to a specific app structure:
Navigation
User Experience Guidelines
Issue: users should always know were they are in an App!
Windows Phone is Hierarchical Navigation-driven
"If you're a UI designer, you should be making UX decisions. Otherwise, you're just a decorator, nothing more."
— Scott Jensen [iPhone Blueprints]
Reference Links
Windows Phone Design Principleshttp://developer.windowsphone.com/en-us/design/principles
Android Developers Design Guidelineshttp://developer.android.com/design/index.html
iOS Design Resourceshttps://developer.apple.com/design/
Dieter Rams Wikipediahttp://en.wikipedia.org/wiki/Dieter_Rams
Typography in ten minuteshttp://practicaltypography.com/typography-in-ten-minutes.html
Thanks!