Good Design Principles for App Developer (UAB) 2014

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!