Keynote shown at Universitat Autònoma de Barcelona (UAB), on the Graduate Engineering Mobile Application Development, teaching the Good Design Principles for Mobile App Developers. · Good Design Principles by Dieter Rams · Good Design Principles & Apps · UI
 – Human Interface Principles · UX – User Experience Guidelines · Reference Links

1. Ingenieriadedesarrollodeaplicaciones
paradispositivosmóviles
Diplomatura
Postgrado
2016
–17
GoodDesign
Principles
forApp
Developers

2. GoodDesign
Principles
byDieterRams

3. • Chief Design Officer at Braun (1961–1995)
• "Less, but better"
DieterRams

4. Dieter Rams products are self-explanatory

5. Good design is innovative
Good design makes a
product useful
Good design is aesthetic
Good design makes a
product understandable
Good design is unobtrusive
Dieter Rams
Ten principles
for good design
Good design is honest
Good design is long-lasting
Good design is thorough,
down to the last detail
Good design is
environmentally-friendly
Good design is as little
design as possible
The power of good design
Dieter Rams’s ideology, engrained within Vitsœ

6. 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
DieterRams&Apple

7. GoodDesign
Principles
&Apps

8. 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
GoodDesignPrinciples&Apps

9. The User Interface of the
BRAUN Receiver Regie 510 (1972) is:
1. Innovative
2. Useful
3. Aesthetic
4. Understandable
5. Honest
6. Unobtrusive
7. Long-lasting
8. Consistent in every detail
9. Environmentally friendly
10. As little
design as
possible
GoodDesignPrinciples&Apps

10. “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.GoodDesignisinnovative
Material Design - Floating action button

11. Google Maps
http://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.GoodDesignmakesaproductuseful

12. Currency
http://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.GoodDesignisaesthetic
VSCO Cam
http://vsco.co/vscocam

13. It clarifies the product’s structure.
Better still, it can make the product talk.
At best, it is self-explanatory.
Weather Dial 1
http://wthr.co
4.GoodDesign
makesaproduct
understandable

14. 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.
WhatsApp
http://www.whatsapp.com/
5.GoodDesignishonest

15. Google App
www.google.com/search/about/
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.GoodDesignisunobtrusive

16. Paper by Fiftythree
http://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.GoodDesignislong-lasting

17. iOS 8 Clock iPad App
Nothing must be arbitrary. Care and accuracy in the design
process shows respect towards the user.
8.GoodDesignisconsistentineverydetail

18. 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.GoodDesignisenvironmentallyfriendly
Compress and optimize
images and assets

19. 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.GoodDesignisaslittledesignaspossible

20. UI
HumanInterface
Principles

21. Productivity
Focus: easy task
Human Interface Guidelines
Game
Focus: immersive experience
1.AestheticIntegrity

22. Human Interface Guidelines
Allows people to transfer their knowledge and skills from one application to another.
Use HI standards when necessary.
2.Consistency

23. Human Interface Guidelines
The comfortable minimum size of tappable UI elements is 44x44 points!
3.DirectManipulation
Press and hold to learn Tap for primary action Slide to pan
Pinch and stretch to zoom Turn to rotate Swipe to refresh

24. Human Interface Guidelines
Assures people’s actions that processing is occurring. Keep in mind to use:
UI elements Animations Sounds
4.Feedback

25. Human Interface Guidelines
Metaphors help user to learn how to use the app
5.Metaphors

26. 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.UserControl

27. Human Interface Guidelines
7.Accessibility
Keep in mind Accessibility features!
For i.e. the App should be ready for the use of large font
sizes and text-to-speech technologies.

28. Human Interface Guidelines
7.Accessibility
Accessibility features must be
considered even when developing
code and UI assets!
Add proper names to each layer of
the Photoshop PSD files, assets
and image files.
Code has to be ready for
text-to-speech technolgies, too.
Connect native Android app to
Watson Text to Speech in under 10 minutes
https://www.ibm.com/blogs/bluemix/2016/11/
android-app-to-watson-text-to-speech-in-minutes/
7 Photoshop Master Tips to Boost Your Productivity
https://www.sitepoint.com/7-photoshop-masters-tips-boost-productivity/

29. "Whatworksgoodisbetter
thanlooksgood,because
whatworksgoodlasts."
—RayEames[aisleone.net]

31. UserInterface vs. UserExperience

32. UX
UserExperience
Guidelines

33. User Experience UX Guidelines
Focusonthe
PrimaryTask
• Clarity of purpose
• Ease of use
• Optimize required input

34. 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 No
http://insideintercom.io/product-strategy-means-saying-no/
Minimizeoptions
User Experience UX Guidelines

35. Userealism
(and skeuomorphism)
• Aesthetically
• Using physics
User Experience UX Guidelines

36. User Experience UX Guidelines
Alwayshaveareason
forcustomization
And remember: all apps need at least some
custom artwork, for example, the icon

37. User Experience UX Guidelines
Users usually spend
no more than a minute
or two evaluating a
new App!
StartInstantly
• 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. If not, showing before an
onboarding tutorial would be a smart choice.

38. User Experience UX Guidelines
Hierarchical Content/experience–drivenFlat (Tabs)
There are three main styles of navigation, each of which is well
suited to a specific app structure:
Navigation

39. User Experience UX Guidelines
• Preferably, use a single font.
• Use hierarchy:
- Font style (Bold, light, italic)
- Size
- Colour
- Effect (Only as a last resort!)
Typography

40. First Time Start-Up Tutorials types:
Sliding cards (Prefereed) Step-by-step (Games)UI Overlay (Simple UI)
User Experience UX Guidelines
OnboardingTutorial

41. "Ifyou'reaUIdesigner,youshould
bemakingUXdecisions.
Otherwise,you'rejustadecorator,
nothingmore."
—ScottJensen[iPhoneBlueprints]

42. Reference
Links
Universal Windows Platform (UWP) apps
developer.microsoft.com/en-us/windows/apps/design
Introduction to Universal Windows Platform (UWP) apps for designers
msdn.microsoft.com/library/windows/apps/dn958439.aspx
Apple Design Resources
developer.apple.com/design/
Google Design
design.google.com/
Material Design
www.google.com/design/spec/material-design/
Android Developers Design Guidelines
developer.android.com/design/index.html
IBM Design Language
www.ibm.com/design/language/

43. Reference
Links
Device Art Generator
developer.android.com/distribute/tools/promote/device-art.html
Android DP / PX Converter
labs.rampinteractive.co.uk/android_dp_px_calculator/
UX For Dummies
www.dummies.com/how-to/content/ux-for-dummies-cheat-sheet.html
Dieter Rams Wikipedia
en.wikipedia.org/wiki/Dieter_Rams
Typography in ten minutes
practicaltypography.com/typography-in-ten-minutes.html
Rethinking Mobile Tutorials
www.smashingmagazine.com/

44. GoodDesign
Principles
forApp
Developers