Design guidelines for mobile developers update.

Boutique product development company It is amazing what you can accomplish when you have a client-centric team to deliver outstanding products.

Boutique product development company It is amazing what you can accomplish when you have a client-centric team to deliver outstanding products.

Design Guidelines for Mobile Developers

Arslan Anwar | Software Engineer

“Good design is good business.” — Thomas J. Watson Jr

Design Guideline for Mobile Developers

• Design Principles

• Bad design approach for Android

• Best design approach for Android

<Full Name> | <Technology Role>

Design Principles

Supporting Multiple Screens on Android

Arslan Anwar | Android Mentor

• In past we have cover basic introduction to

android design. We discuss about

• Android Devices

• Dimensions

• Density Independence

• Screen Sizes

• Alternative Resources

• Range of screens supported

• Create Bitmaps, Gradient via XML

• Nine Patch Images

• Styles, Dimensions, and Layouts

Source: http://www.confiz.com/blog/android-supporting-multiple-screens

http://www.confiz.com/blog/android-supporting-multiple-screens







Design Principles

Simplify My Life

• Keep it brief

Use short phrases with simple words. People are likely to skip

sentences if they're long.


Design Principles

Simplify My Life

• Pictures are faster than words

Consider using pictures to explain ideas. They get people's attention

and can be much more efficient than words.


Design Principles

Simplify My Life

• Decide for me but let me have the final say

Take your best guess and act rather than asking first. Too many

choices and decisions make people unhappy. Just in case you get it

wrong, allow for 'undo'.


Design Principles

Simplify My Life

• Only show what I need when I need it

People get overwhelmed when they see too much at once. Break

tasks and information into small, digestible chunks. Hide options that

aren't essential at the moment, and teach people as they go.


Design Principles

Simplify My Life

• I should always know where I am

Give people confidence that they know their way around. Make places

in your app look distinct and use transitions to show relationships

among screens. Provide feedback on tasks in progress.


Design Principles

Simplify My Life

• Never lose my stuff

Save what people took time to create and let them access it from

anywhere. Remember settings, personal touches, and creations

across phones, tablets, and computers. It makes upgrading the easiest

thing in the world.


Design Principles

Simplify My Life

• If it looks the same, it should act the same

Help people discern functional differences by making them visually

distinct rather than subtle. Avoid modes, which are places that look

similar but act differently on the same input.


Design Principles

Simplify My Life

• Only interrupt me if it's important

Like a good personal assistant, shield people from unimportant

minutiae. People want to stay focused, and unless it's critical and time-

sensitive, an interruption can be taxing and frustrating.


Design Principles

Simplify My Life

• Get to know me

Learn peoples' preferences over time. Rather than asking them to

make the same choices over and over, place previous choices within

easy reach.


Design Principles

Make Me Amazing

• Give me tricks that work everywhere

People feel great when they figure things out for themselves. Make

your app easier to learn by leveraging visual patterns and muscle

memory from other Android apps. For example, the swipe gesture may

be a good navigational shortcut.


Design Principles

Make Me Amazing

• It's not my fault

Be gentle in how you prompt people to make corrections. They want to

feel smart when they use your app. If something goes wrong, give

clear recovery instructions but spare them the technical details. If you

can fix it behind the scenes, even better.


Design Principles

Make Me Amazing

• Sprinkle encouragement

Break complex tasks into smaller steps that can be easily

accomplished. Give feedback on actions, even if it's just a subtle glow.


Design Principles

Make Me Amazing

• Do the heavy lifting for me

Make novices feel like experts by enabling them to do things they

never thought they could. For example, shortcuts that combine multiple

photo effects can make amateur photographs look amazing in only a

few steps.


Design Principles

Make Me Amazing

• Make important things fast

Not all actions are equal. Decide what's most important in your app

and make it easy to find and fast to use, like the shutter button in a

camera, or the pause button in a music player.


Design Principles

Touch Feedback

• Use color and illumination to respond to touches, reinforce the

resulting behaviors of gestures, and indicate what actions are

enabled and disabled.

• Whenever a user touches an actionable area in your app, provide a

visual response. This lets the user know which object was touched

and that your app is "listening".


Design Principles

Communication

• When your objects react to more complex gestures, help users

understand what the outcome of the operation will be. For example,

in Recents, when you start swiping a thumbnail left or right, it starts

to dim. This helps the user understand that swiping will cause the

item to be removed.


Design Principles

Writing Style

• Keep it brief

Be concise, simple and precise. Start with a 30 character limit

(including spaces), and don't use more unless absolutely necessary.


Design Principles

Writing Style

• Be friendly

Use contractions. Talk directly to the reader using second person

("you"). If your text doesn't read the way you'd say it in casual

conversation, it's probably not the way you should write it. Don't be

abrupt or annoying and make.


Design Principles

Writing Style

• Put the most important thing first

The first two words (around 11 characters, including spaces) should

include at least a taste of the most important information in the string. If

they don't, start over.


Design Principles

Writing Style

• Describe only what's necessary, and no more

Don't try to explain subtle differences. They will be lost on most users.


Design Principles

Writing Style

• Avoid repetition

If a significant term gets repeated within a screen or block of text, find

a way to use it just once.


Design Principles

Confirming & Acknowledging

• Confirming

is asking the user to verify that they truly want to proceed with an

action they just invoked. In some cases, the confirmation is presented

along with a warning or critical information related to the action that

they need to consider.


Design Principles


• Acknowledging

is displaying text to let the user know that the action they just invoked

has been completed. This removes uncertainty about implicit

operations that the system is taking. In some cases, the

acknowledgment is presented along with an option to undo the action


Design Principles


• Confirmation is unnecessary

If the user +1'd by accident, it's not a big deal. They can just touch the

button again to undo the action.

• Acknowledgment is unnecessary

The user will see the +1 button bounce and turn red. That's a very

clear signal.


Design Principles



Design Principles

Bad design approach for Android

Most developers want to distribute their apps on multiple platforms. As

you plan your app for Android, keep in mind that different platforms

play by different rules and conventions. Design decisions that make

perfect sense on one platform will look and feel misplaced in the

context of a different platform. While a "design once, ship anywhere"

approach might save you time up-front, you run the very real risk of

creating inconsistent apps that alienate users.


Design Principles


• Do not stuck user

Do not stuck user to wait until your background task completed. This

not only waste user time but also irritate user. Keep your app simple

and efficient so that user can perform other operations while you do

your task in background


Design Principles


• Don't mimic UI elements from other platforms

As you build your app for Android, don't carry over themed UI elements

from other platforms and don't mimic their specific behaviors.

Android's most important UI elements and the way they look in the

system default themes. Also examine Android's platform apps to get a

sense of how elements are applied in the context of an app.


Design Principles


• Don't carry over platform-specific icons

Platforms typically provide sets of icons for common functionality, such

as sharing, creating a new document or deleting.

As you are migrating your app to Android, please swap out platform-

specific icons with their Android counterparts.


Design Principles


• Don't use bottom tab bars

Other platforms use the bottom tab bar to switch between the app's

views. Per platform convention, Android's tabs for view control are

shown in action bars at the top of the screen instead. In addition,

Android apps may use a bottom bar to display actions on a split action

bar.


Design Principles


• Don't hardcode links to other apps

In some cases you might want your app to take advantage of another

app's feature set. For example, you may want to share the content that

your app created via a social network or messaging app, or view the

content of a weblink in a browser. Don't use hard-coded, explicit links

to particular apps to achieve this. Instead, use Android's intent API to

launch an activity chooser which lists all applications that are set up to

handle the particular request. This lets the user complete the task with

their preferred app.


Design Principles


• Don't use labeled back buttons on action bars


Design Principles


• Don't use labeled back buttons on action bars

Other platforms use an explicit back button with label to allow the user

to navigate up the application's hierarchy. Instead, Android uses the

main action bar's app icon for hierarchical navigation and the

navigation bar's back button for temporal navigation.


Design Principles


• Don't use right-pointing carets on line items

A common pattern on other platforms is the display of right-pointing

carets on line items that allow the user to drill deeper into additional

content.

Android does not use such indicators on drill-down line items. Avoid

them to stay consistent with the platform and in order to not have the

user guess as to what the meaning of those carets may be.


Design Principles


• Don't use right-pointing carets on line items


Design Principles

Best Design approach for Android


Best Design approach

for Android

Coming Soon…

Design Principles

Questions


Design Principles

Thank You


Design Principles

Reference

• Android Design

http://developer.android.com/design/index.html

• Design Principles

http://developer.android.com/design/get-started/principles.html

• Pure Android

http://developer.android.com/design/patterns/pure-android.html


http://developer.android.com/design/index.html







Design guidelines for mobile developers update.

Technology

Transcript of Design guidelines for mobile developers update.