Slide 1

Slide 1 text

UI Design Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta

Slide 2

Slide 2 text

Some apps are just so shiny you want to lick them [cit.] [cit.]

Slide 3

Slide 3 text

Roadmap • Intro + Examples • Intro + Examples • Human Interface Principles • Platform Characteristics • UX Guidelines

Slide 4

Slide 4 text

Introduction Before focussing on UI…. in mobile you can always control Content Visual Content naming Visual Design

Slide 5

Slide 5 text

Content Naming Before you start reasoning on the UI… Define an APP DICTIONARY APP DICTIONARY APP DICTIONARY APP DICTIONARY Write down the terms and messages used in the app Ex. – tweets in Twitter – Likes in Facebook

Slide 6

Slide 6 text

Visual Design The direct representation of everything under your app your app The first impression first impression first impression first impression the user will have It is not only about layout & colors… It is not only about layout & colors… it it it it is is is is about about about about SENSORY SENSATIONS SENSORY SENSATIONS SENSORY SENSATIONS SENSORY SENSATIONS

Slide 7

Slide 7 text

Example 1 http://drbl.in/czjd

Slide 8

Slide 8 text

Anti-example 1

Slide 9

Slide 9 text

Roadmap • Intro + Examples • Intro + Examples • Human Interface Principles • Platform Characteristics • UX Guidelines

Slide 10

Slide 10 text

Aesthetic Integrity It’s a measure of how well the appearance of the app integrates integrates integrates integrates with its function the app integrates integrates integrates integrates with its function • Productive app order & clarity • Game gamish, frivoulous • … • …

Slide 11

Slide 11 text

Consistency Take advantage of the standards and paradigms standards and paradigms standards and paradigms standards and paradigms people are comfortable with people are comfortable with Does it use system-provided controls, views, and icons correctly correctly correctly correctly? Is the application consistent within itself consistent within itself consistent within itself consistent within itself? Does text use uniform terminology and style uniform terminology and style uniform terminology and style uniform terminology and style? Can people predict predict predict predict what will happen?

Slide 12

Slide 12 text

Direct Manipulation Try to let your users direct direct direct direct manipulate manipulate manipulate manipulate objects in your app in your app Users can experience direct manipulation when they: • Rotate Rotate Rotate Rotate or otherwise move move move move the device to affect onscreen objects • Use gestures gestures gestures gestures to manipulate onscreen objects • Can see that their actions have immediate, visible results visible results visible results visible results

Slide 13

Slide 13 text

Feedback Acknowledge Acknowledge Acknowledge Acknowledge people’s actions and assures them that processing is occurring that processing is occurring Users expect • immediate feedback • status updates during • status updates during lengthy operations

Slide 14

Slide 14 text

Metaphors Use metaphors for objects objects objects objects in the in the in the in the real real real real world world world world in your app your app Users will quickly grasp how to use the app Ex. Ex. – folders – photo sliders – …

Slide 15

Slide 15 text

User Control People, not apps, should initiate and control should initiate and control should initiate and control should initiate and control actions actions actions actions actions actions actions actions Apps can suggest suggest suggest suggest actions, but users must do them Apps can only infer infer infer infer data data data data from the context Users expect to be able to stop stop stop stop an operation that’s underway

Slide 16

Slide 16 text

Example 2 http://www.perspecdev.com/Faster/

Slide 17

Slide 17 text

Anti-example 2

Slide 18

Slide 18 text

Roadmap • Intro + Examples • Intro + Examples • Human Interface Principles • Platform Characteristics • UX Guidelines

Slide 19

Slide 19 text

Display is Paramount The DISPLAY DISPLAY DISPLAY DISPLAY is (usually) the only means that users use to interact with your app! to interact with your app! • The comfortable minimum size minimum size minimum size minimum size of tappable UI elements is 44 x 44 points • The quality quality quality quality of app artwork is fundamental • The user’s focus is on the content content content content • The user’s focus is on the content content content content

Slide 20

Slide 20 text

Display Orientation Users can rotate rotate rotate rotate the device at any time and for any reason any reason users tend to expect apps to launch in the device orientation they’re currently using TIP TIP TIP TIP. You can use the splashscreen image to let the user rotate the device

Slide 21

Slide 21 text

Gestures Users Users Users Users don’t click, don’t click, don’t click, don’t click, they they they they use use use use gestures gestures gestures gestures – tap/double tap – tap/double tap – drag – zoom/pinch – swipe – flick Users expect all these gestures to work the same work the same work the same work the same, regardless of the app they’re currently running

Slide 22

Slide 22 text

One App at a Time (at the moment) One app One app One app One app is visible in the foreground at a time at a time When people switch from one app to another, the previous app goes in background and its user interface goes away Some applications might need to continue running in the background

Slide 23

Slide 23 text

User Help Keep onscreen user help as minimal minimal minimal minimal as possible In general, users don’t need onscreen help content to tell them how to use the device or the apps Remember of the Consistency Consistency Consistency Consistency human-interface principle

Slide 24

Slide 24 text

Example 3 http://kangarooband.it/

Slide 25

Slide 25 text

Anti-example 3

Slide 26

Slide 26 text

Roadmap • Intro + Examples • Intro + Examples • Human Interface Principles • Platform Characteristics • UX Guidelines

Slide 27

Slide 27 text

Layout It should be defined the first aspect to fix you need pure feedback on it you need pure feedback on it lo-fi wireframing Tablets Tablets Tablets Tablets http://bit.ly/GTp82Q Tablets Tablets Tablets Tablets content scrolled horizontally

Slide 28

Slide 28 text

Colors psychology Users react react react react to different colors differently Colors evoke emotions emotions emotions emotions BLU BLU BLU BLU productiveness, interiors, skies, peace, unity, harmony, tranquility, calmness, trust, tranquility, calmness, trust, coolness, confidence, conservatism, water, ice, loyalty, dependability, cleanliness, technology… http://mobiledesign.org/color

Slide 29

Slide 29 text

Color Palette Predefined number of colors to use consistently consistently consistently consistently in your app your app You can use tools tools tools tools like palette choosers, or palette pickers from images OR You can define your palette manually through the color color color color wheel wheel wheel wheel http://kuler.adobe.com

Slide 30

Slide 30 text

Color Wheel Complementary Complementary Complementary Complementary Complementary Complementary Complementary Complementary when you want something to stand out Analogous Analogous Analogous Analogous choose one color to dominate, a second to support, the third color is as an accent http://bit.ly/GTv7on

Slide 31

Slide 31 text

Color Wheel Triad Triad Triad Triad Triad Triad Triad Triad let one color dominate and use the two others for accent Square Square Square Square works best if you let one color be dominant http://bit.ly/GTv7on

Slide 32

Slide 32 text

Typography It is about: • selection of the correct font font font font • selection of the correct font font font font • understanding sizes sizes sizes sizes • applying conventional design methodologies conventional design methodologies conventional design methodologies conventional design methodologies (size, shape, contrast, color, position, space, etc.) http://bit.ly/GTvuzj

Slide 33

Slide 33 text

Readability guidelines 1. 1. 1. 1. Use a high Use a high Use a high Use a high- - - -contrast typeface contrast typeface contrast typeface contrast typeface – Devices are usually used outside – Devices are usually used outside 2. 2. 2. 2. Use the right typeface (font) Use the right typeface (font) Use the right typeface (font) Use the right typeface (font) http://bit.ly/GTwUtv

Slide 34

Slide 34 text

Readability guidelines 3. Provide decent leading leading leading leading – Leading = the space between two lines – Leading = the space between two lines 4. Leave space space space space on the right and left of each line 5. 5. 5. 5. don’t crowd don’t crowd don’t crowd don’t crowd the screen

Slide 35

Slide 35 text

Readability guidelines 6. Generously utilize headings headings headings headings 6. Generously utilize headings headings headings headings – Divide the content into paragraphs 7. Use short paragraphs short paragraphs short paragraphs short paragraphs – 2-3 sentences at most

Slide 36

Slide 36 text

Respect User-Entered data Input is hard, Users slip (and sleep!) Users slip (and sleep!) Do whatever it takes to Do whatever it takes to Do whatever it takes to Do whatever it takes to preserve user data preserve user data preserve user data preserve user data and plan for real-world behaviors

Slide 37

Slide 37 text

Realize That Mobiles Are Personal one device for one person one device for one person one device for one person one device for one person one device for one person one device for one person one device for one person one device for one person Don’t continuously ask for name, data, etc. Only implement passwords and clear personal information when required

Slide 38

Slide 38 text

Ensure That Lives Take Precedence Don’t interrupt people’s life! Don’t interrupt people’s life! Don’t interrupt people’s life! Don’t interrupt people’s life! Don’t interrupt people’s life! Don’t interrupt people’s life! Don’t interrupt people’s life! Don’t interrupt people’s life! Differently from desktops Mobiles are glanced at, used in gaps between conversation and driving and watching TV conversation and driving and watching TV

Slide 39

Slide 39 text

Use Your Sensors Whenever possible, perform actions for the perform actions for the perform actions for the perform actions for the user based on sensors and user data user based on sensors and user data user based on sensors and user data user based on sensors and user data user based on sensors and user data user based on sensors and user data user based on sensors and user data user based on sensors and user data Ex. Why should you have to silence your phone for a meeting, when the phone knows where you physically are and knows from your calendar that you have a meeting in that room right now? calendar that you have a meeting in that room right now?

Slide 40

Slide 40 text

Focus on the Primary Task you need to determine what’s most important in each context or screen and… each context or screen and… focus on focus on focus on focus on it it it it exclusively exclusively exclusively exclusively! ! ! ! Your app definition statement will help you Your app definition statement will help you focus your app on its primary task

Slide 41

Slide 41 text

Elevate the Content that People Care About Give Give Give Give your your your your users users users users what what what what they they they they need need need need most most most most! ! ! ! For example, in a game, people care about the experience, they don’t expect to manage, consume, or create content • Minimize the number of controls in the UI • Customize controls so that they integrate with your app’s graphical style • Fade controls away after people have stopped interacting with them for a little while

Slide 42

Slide 42 text

Think Top Down Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information Put the most frequently used information near the top near the top near the top near the top Because users hold the device in the following ways: • In the left hand In the left hand In the left hand In the left hand and gesturing with a finger of the right hand finger of the right hand • In one hand In one hand In one hand In one hand, and gesturing with the thumb of the same hand • Between their hands Between their hands Between their hands Between their hands, and gesturing with both thumbs

Slide 43

Slide 43 text

Logical Path Make the path through the information you present logical and easy to predict logical and easy to predict logical and easy to predict logical and easy to predict present logical and easy to predict logical and easy to predict logical and easy to predict logical and easy to predict – put markers to let them where they are – put a back-button Give users only one path to a screen only one path to a screen only one path to a screen only one path to a screen

Slide 44

Slide 44 text

Easy Usage Your app must be instantly instantly instantly instantly understandable understandable understandable understandable by users you cannot assume they want or they have time to learn you cannot assume they want or they have time to learn how to use your app Make the main function of your app immediately evident evident evident evident

Slide 45

Slide 45 text

User-Centric Terminology use terminology your users understand understand understand understand use terminology your users understand understand understand understand avoid technical jargon – This does not hold if your target user is a technical guy

Slide 46

Slide 46 text

Minimize the Effort Required for User Input Inputting information takes time and attention, minimize it minimize it minimize it minimize it minimize it minimize it minimize it minimize it TIP TIP TIP TIP. If your app asks users a lot of input data, you have to revise your design! Balance any request for input by users with what Balance any request for input by users with what Balance any request for input by users with what Balance any request for input by users with what you offer them in return you offer them in return you offer them in return you offer them in return you offer them in return you offer them in return you offer them in return you offer them in return Get information from the OS Get information from the OS Get information from the OS Get information from the OS, when appropriate – for example: contacts, address, events in the calendar…

Slide 47

Slide 47 text

Enable Collaboration Push for collaboration and sharing sharing sharing sharing with others When appropriate, make it easy for users to interact with others – allow them to share things like their location, opinions, and high scores For tablets For tablets For tablets For tablets: think of ways to allow more than one person to use your app on the same device

Slide 48

Slide 48 text

Brand Appropriately Incorporate a brand’s colors or images in a refined, Incorporate a brand’s colors or images in a refined, unobtrusive unobtrusive unobtrusive unobtrusive way Avoid taking space away from the content people care about – Alternative: subtly customize the background of a screen – Alternative: subtly customize the background of a screen

Slide 49

Slide 49 text

Make Search Quick In apps with a lot of data, SEARCH can SEARCH can SEARCH can SEARCH can be be be be a a a a primary primary primary primary function function function function primary primary primary primary function function function function Build indexes indexes indexes indexes of your data so that you are always prepared for search Live Live Live Live- - - -filter filter filter filter local data so that you can display results more quickly more quickly Display a search bar search bar search bar search bar above a list or the index in a list Display placeholder content placeholder content placeholder content placeholder content right away and partial results as they become available

Slide 50

Slide 50 text

Be Succinct Think like a newspaper editor, and strive to convey information in a condensed, headline style information in a condensed, headline style information in a condensed, headline style information in a condensed, headline style information in a condensed, headline style information in a condensed, headline style information in a condensed, headline style information in a condensed, headline style When your UI text is short and direct text is short and direct text is short and direct text is short and direct, users can absorb it quickly and easily Give controls short labels short labels short labels short labels, or use well well well well- - - -understood understood understood understood Give controls short labels short labels short labels short labels, or use well well well well- - - -understood understood understood understood symbols symbols symbols symbols users should tell what they do at a glance

Slide 51

Slide 51 text

Use UI Elements Consistently Follow the recommended usages recommended usages recommended usages recommended usages for standard user interface elements interface elements you can build on users’ prior experience Avoid radically changing Avoid radically changing Avoid radically changing Avoid radically changing the appearance of a control that performs a standard action Never use the standard buttons and icons to mean something else

Slide 52

Slide 52 text

Make Targets Fingertip-Size Display may change, but the average size of a fingertip does not! fingertip does not! Give tappable elements in your application a target area of about 44 x 44 44 x 44 44 x 44 44 x 44 points If you create smaller controls, the app becomes much less If you create smaller controls, the app becomes much less enjoyable or people may focus on the interface only, rather than the content

Slide 53

Slide 53 text

Ask People to Save Only When Necessary People should have confidence confidence confidence confidence that their work is always preserved unless they explicitly cancel or always preserved unless they explicitly cancel or delete it Never Never Never Never ask ask ask ask for for for for saving saving saving saving data data data data, it should be done automatically – You can ask to either edit or delete data – You can ask to either edit or delete data

Slide 54

Slide 54 text

Make Modal Tasks Occasional Modality prevents users’ freedom by interrupting their workflow and forcing them to choose a their workflow and forcing them to choose a particular path Keep modal tasks fairly short and narrowly short and narrowly short and narrowly short and narrowly focused focused focused focused focused focused focused focused Always provide an obvious and safe way to exit exit exit exit a modal task

Slide 55

Slide 55 text

Start Instantly Avoid displaying an About window About window About window About window or a splash screen splash screen splash screen splash screen Avoid displaying an About window About window About window About window or a splash screen splash screen splash screen splash screen Avoid asking people to supply setup information setup information setup information setup information Delay a login login login login requirement for long as possible: – Focus your solution on the needs of 80 percent of your – Focus your solution on the needs of 80 percent of your users – Get as much information as possible from other sources – If you must ask for setup information, put it in your app’s settings

Slide 56

Slide 56 text

Always Be Prepared to Stop Save user data as often as reasonable Save user data as often as reasonable Save the current state Save the current state Save the current state Save the current state when stopping

Slide 57

Slide 57 text

Example 4 http://instagr.am/

Slide 58

Slide 58 text

Anti-example 4

Slide 59

Slide 59 text

A Final BAD example Layout & icons http://www.androiduipatterns.com/2011/11/ cautionary-example-of-bad-design.html

Slide 60

Slide 60 text

A Final BAD example Navigation buttons http://www.androiduipatterns.com/2011/11/ cautionary-example-of-bad-design.html

Slide 61

Slide 61 text

A Final BAD example Error Handling http://www.androiduipatterns.com/2011/11/ cautionary-example-of-bad-design.html

Slide 62

Slide 62 text

A Final BAD example Data Handling http://www.androiduipatterns.com/2011/11/ cautionary-example-of-bad-design.html

Slide 63

Slide 63 text

And maybe a good one… http://www.musicatch.info …developed in one single night…

Slide 64

Slide 64 text

References Chapter 8 http://bit.ly/H4GnKZ http://bit.ly/H4Gqq5

Slide 65

Slide 65 text

BRAINSTORMING