 Introduction

 Using the screen real estate efficiently

 Understanding Mobile Application Users
CONTENTS
 Social aspect of mobile interfaces
 Accessibility
 Design patterns
 Designing for the platforms
 Mobile User Interface Design
Design as a Craft:

 Design is akin to craftsmanship, where proficiency is honed

INTRODUCTION
through continuous practice and refinement.

 Often, developers prioritize solving functional challenges over

addressing design elements like color contrast and font selection.

 Mobile User Interface Design
Embracing Design Challenges:

 Developers should not overlook the opportunities presented by

INTRODUCTION
design puzzles.

 Investing time in interface considerations can lead to remarkable

design outcomes.
 Mobile User Interface Design
Evolution of Mobile Technology:

 Modern mobile devices boast portability, constant

INTRODUCTION
connectivity to voice and data networks, and contextual
awareness enabled by sensors and networks.

 These advancements allow devices to anticipate user needs

and perform tasks preemptively.

 Mobile User Interface Design
Current Mobile Limitations:

 Bandwidth constraints and intermittent access to wireless

INTRODUCTION
networks pose challenges for mobile usage.

 Mainstream mobile devices may lack certain technical capabilities

like Flash, limiting the scope of applications.

 Mobile User Interface Design
Leveraging Constraints for Innovation:

INTRODUCTION  Constraints in mobile technology present opportunities for

application creators to focus on specific features.

 Innovations in interaction design, such as motion and gesture-

based controls (e.g., zooming, swiping, tapping), offer avenues for

creativity.
 Mobile User Interface Design
Adaptation in the Face of Technological Change:

INTRODUCTION  The dynamic nature of technology means no device holds a

perpetual market dominance.

 Just as learning one programming language's syntax facilitates

learning others, good design principles transcend technological

shifts.
 Mobile User Interface Design
Understanding User Needs:

INTRODUCTION  Developers who grasp user preferences and behaviors can create

more effective and user-friendly applications.

 Developers who understand the people who will use an application

and the information users need will craft better applications no

matter where technology goes next.
 General concerns around using the screen real estate efficiently are:

A. Understanding Context of Use

 Identify users and their needs.

 Determine the reasons for accessing information.

EFFECTIVE USE OF SCREEN REAL ESTATE
 Analyze how, when, and where information will be accessed and used.

B. Challenges of Mobile Design

 Displaying a condensed view of vast information.

 Amplification of user experience issues on mobile interfaces.

 Increased cognitive load due to navigation, memory retention, and

context retrieval.
 C. Cognitive Load

Definition: Mental effort required to comprehend and utilize an

application.

EFFECTIVE USE OF SCREEN REAL ESTATE Factors: Inherent task complexity, information structure.

Effectively use screen real estate by embracing minimalism,

maintaining a clear visual hierarchy, and staying focused.
 Embrace Minimalism

 Limit the features available on each screen.

 Use small, targeted design features.

 Content on the screen should have a secondary use within the

EFFECTIVE USE OF SCREEN REAL ESTATE

application.

 Application designers should justify why a feature is taking up

screen space.

 Banners, graphics, and bars should serve a purpose.

 Use a Visual Hierarchy

 Help users fight cognitive distractions by establishing a clear

information hierarchy.

 Draw attention to the most important content with visual emphasis.

EFFECTIVE USE OF SCREEN REAL ESTATE
 Users are naturally drawn to larger items, more intense colors, or

elements highlighted with bullets or arrows.

 People tend to scan more quickly through lighter color contrast, less-

intense shades, smaller items, and text-heavy paragraphs.

 Establish a consistent hierarchy using position, form, size, shape,

color, and contrast.

 Stay Focused

 Begin with a focused strategy and maintain focus throughout

development.

 A smaller file size indicates faster application loading times,

EFFECTIVE USE OF SCREEN REAL ESTATE
making it essential to fight feature creep.

 Focused content ensures users won't leave due to slow loading

times or overwhelming images.

 Minimize frustration by reducing the number of links needed to

complete tasks.

 Avoid text-heavy pages to prevent user disengagement.

  People frequently use their mobile devices while waiting in line at

places like banks or restaurants for various purposes such as

UNDERSTANDING MOBILE APPLICATION

checking in, entertainment, and consuming content.
USERS
 Interface metaphors borrowed from the real world, like trash cans

or recycle bins holding deleted files, should align with industry

standards and suit the device appropriately.
 Applying Gestalt Principles to Design

 The Gestalt principles, originating from German psychologists in

the 1920s, greatly influence design by explaining how the human

mind perceives and organizes visual data.
EFFECTIVE USE OF SCREEN REAL ESTATE

Key principles include:

 Proximity

 Closure

 Continuity

 Figure and Ground

 Proximity:

 Users tend to group nearby objects together, forming unified

wholes.

 Icons and descriptive text should be placed close together to

EFFECTIVE USE OF SCREEN REAL ESTATE
indicate their relationship.

Fig. Proximity
 Closure:

 Users mentally complete shapes if enough information is present,

as illustrated by recognizing a triangle from incomplete lines.

 Icon design should prioritize strong primary silhouettes without

EFFECTIVE USE OF SCREEN REAL ESTATE
overwhelming detail.

Fig. Closure
 Continuity:

 Continuously perceived objects compel users' eyes to follow them,

aiding in smooth transitions through an application.

EFFECTIVE USE OF SCREEN REAL ESTATE  Visual cues like indicators can guide users through tasks.

Fig. Continuity
 Figure and Ground:

 The distinction between a figure (e.g., a letter) and its surrounding

space (ground) is essential in design.

 Mobile interfaces benefit from clear separation between primary

EFFECTIVE USE OF SCREEN REAL ESTATE
controls and application content.

Fig. Figure and Ground

 Similarity:

 Similar elements are grouped together based on visual attributes

like color, form, and size.

 Proper layout encourages the grouping of related objects and ideas,

EFFECTIVE USE OF SCREEN REAL ESTATE
avoiding confusion caused by strict visual grids linking unrelated
items.

Fig. Similarity
  Users desire connectivity and sharing opportunities.

 Social networking platforms enhance user experience by

facilitating content sharing globally.
THE SOCIAL ASPECT OF MOBILE
 Trust is built through established social networks.
 Connect with Existing Outlets:

 Sharing in-app content boosts app visibility.

THE SOCIAL ASPECT OF MOBILE  Integration with APIs simplifies content sharing and retrieval.

 Simplified interfaces prevent clutter and feature creep.

 Usability:

 Discoverability, readability, and usability are crucial for app

success.

 Real-world distractions and limited dexterity impact usability.

THE SOCIAL ASPECT OF MOBILE
 Continuous evaluation and iteration improve usability.

 Usability considerations include:

a. Determining and Reaching the Target Audience

b. Designing for Gestures

c. Error Protection and Correction

 A. Determining and Reaching the Target Audience:

 Researching target audience needs and preferences is essential.

THE SOCIAL ASPECT OF MOBILE
 Consideration of hardware and usage patterns is necessary.

 Mobile apps cater to various functionalities like social networking,

productivity, and entertainment.

 B. Designing for Gestures:

 Gesture discoverability enhances user experience.

THE SOCIAL ASPECT OF MOBILE  Avoiding swipe ambiguity reduces user errors.

 Consider actual versus perceived target areas for touch input.

Fig. Perceived Target vs Actual Target

 C. Error Protection and Correction:

 Touch-screen Navigation: Touch-screen navigation through

THE SOCIAL ASPECT OF MOBILE menus, buttons, links, and scrolling can lead to user errors more
easily than mouse navigation. Include an "undo" or "back" option
to mitigate this.

 Input Protection: Design every process to protect user input and

maintain a log to preserve input history.

 C. Error Protection and Correction:

 Implicit Data Protection: Implement measures such as a hard

stop between taps to slow down text deletion and prevent

THE SOCIAL ASPECT OF MOBILE accidental data loss.

 Explicit Protections: Provide an undo option for data recovery

and the ability to repopulate abandoned forms with recently

entered data.

 Frequent Data Saving: Save data frequently and in detail to

account for users' tendencies to become distracted or bored.

  Applications designed to accommodate users with poor vision,

limited dexterity, or cognitive impairments benefit all users.

 Accessibility enhances user reach and improves the experience for

ACCESSIBILITY existing users.

 Build features with the entire audience in mind to maximize

inclusivity.
 Mobile Web Best Practices (MWBP):

 MWBP, akin to Web Content Accessibility Guidelines (WCAG) 2.0

POUR (perceivable, operational, understandable, and robust)

principles, outlines five checkpoints for mobile accessibility.

 These checkpoints encompass various aspects:

ACCESSIBILITY
 Overall Behavior: Guidelines for a universal mobile experience.

 Navigation and Links: Ensuring ease of interaction with hyperlinks on

mobile interfaces.

 Page Layout and Content: Designing content for accessible

consumption.

 Page Definition: Defining content areas for mobile interpretation.

 User Input: Considering available input methods on mobile devices.

 Hearing:

 Moderate to profound hearing loss poses challenges for telephone

communication, but mobile devices offer promising solutions.

 Features like adjustable volume control aid those with moderate

ACCESSIBILITY
hearing loss.

 Solutions focus on visual alerts such as incoming messages, missed

calls, and blinking lights.

 Vision:

 Users with low vision or blindness benefit from hardware

modifications and software adjustments.

 Recommendations include adjustable font sizes, color contrast,

ACCESSIBILITY
backlit displays, and tactile markers.

 Haptic feedback and audible notifications provide confirmation and

alerts.
 Speech:

 Text features like messaging, email, and predictive text assist users

with speech-related accessibility issues.

ACCESSIBILITY  Personalized outputs enhance user experience, allowing for reuse of

saved text inputs.

 Dexterity:

 Challenges with fine controls are addressed through hands-free

modes and voice recognition.

 Autocompletion and minimizing complex gestural interactions

ACCESSIBILITY
improve accessibility.

 Reducing error correction and enabling simplified functions aid

users with low dexterity.

 Cognition:

 Clear navigation and simple instructions benefit users with cognitive

accessibility issues.
ACCESSIBILITY  Features to reduce cognitive load, such as associating images with

information, are helpful.

 Anticipating user needs, allowing shortcuts, and offering

customization enhance accessibility.
  Hardware and operating systems become irrelevant quicker than

user-centric design.

 Design patterns recycle and repurpose components, leveraging

DESIGN PATTERNS
refined ideas.

 Patterns are refined by usage and contribute to time efficiency.

 Maintain a pattern library tailored to your needs, prioritizing user

and design purpose over best practices.

 Annunciator Panel:
DESIGN PATTERNS
 Provides information on mobile device state.
Navigation
 Developers can modify or suppress the panel

within applications.

 Users typically do not interact directly with

the annunciator panel as it displays

notifications.
 Fixed Menu:

DESIGN PATTERNS  Useful for immediate access to frequently

Navigation used functionality across screens.

 Considerations for usage include lack of

controls, conflicts with interactions, and

screen real estate limitations.

 Avoid stacking multiple fixed menus and

carefully consider placement based on device

and application scope.
 Expandable Menu:

DESIGN PATTERNS  Provides selectively available options

when all function options cannot fit on the
Navigation
viewport.

 Activation methods include gestures, soft

keys, or on-screen icons.

 Exit methods include back buttons, close

buttons, or toggling gestures.

 Scroll:

 Scrolling is necessary when content exceeds viewport size.

DESIGN PATTERNS
 Limit scrolling where possible and ensure clear communication of
Navigation scrollable areas and context.

 Incorporate gestures for immersive scrolling experiences.

 Users may scroll by gesture, device tilt, or on-screen buttons.

 Choose appropriate scrolling patterns based on user interaction

capabilities.
 Scroll:

A. Vertical List:
DESIGN PATTERNS  Foundation of information display on mobile devices.

Navigation  Enables efficient presentation of textual information.

 Endless lists manage large data sets within viewport sizes.

 Scroll:

B. Thumbnail List:
DESIGN PATTERNS
 Displays graphical data with visual importance indicators.
Navigation  Use default icons for unavailable images and prioritize clarity over

personality in graphics.
 Scroll:

C. Expandable List:
DESIGN PATTERNS  Reveals additional content for selected list items without changing

Navigation the current view.

 Utilize animations for smooth content expansion.

 Highlight priority information with size, color, or contrast.

 Scroll:

D. Thumbnail Grid:
DESIGN PATTERNS
 Suitable for image-centric information with little to no text.
Navigation  Utilize visual indicators for in-focus or selected items.

 Ensure accessibility considerations for visual distinctions.

 Notifications and Feedback:

 Application creators utilize notifications to provide users with new

information.

DESIGN PATTERNS  Notifications pause ongoing tasks and enable users to adapt their

processes and behaviors based on feedback.

Navigation
Feedback:

 Feedback is the user's perceived result of an interaction.

 Immediate confirmation feedback, such as color changes or messages,

is crucial for user experience.

 Delayed feedback can lead to frustration and errors.

 Confirmation feedback should be distinct and indicate a change in

state.
 User Authentication:

 Users may need to log in to access application features.

 Security concerns should be balanced with user experience, especially on mobile

devices.
DESIGN PATTERNS  Displaying characters briefly before masking them can enhance security without

compromising usability.
Navigation
 Users should only need to log in once on personal mobile devices.

Confirmation Prompts:

 Confirmation prompts are essential for decision-making and risk mitigation.

 Options should be clearly presented to users.

 Excessive confirmation prompts can lead to user frustration.

Attention-Grabbing Notifications:

 Notifications catch user attention and indicate further action or completion of tasks.

 Visual design and notification tones enhance user awareness.

  Use standard controls to shape positive user perceptions of the

DESIGN PATTERNS application.

 Consider incorporating custom graphics or textures on controls to

Content and Controls
encourage touch interaction.

 Ensure controls are large enough for easy finger press, considering

variations in touch point size across mobile platforms.

 Place frequently used controls within comfortable reach, especially

for one-handed use, considering thumb placement.

  Design controls to accommodate both left-handed and right-handed

DESIGN PATTERNS users.

 Display less commonly used functionality at the top of the screen,

Content and Controls
while placing primary controls within thumb reach.

 Minimize the need for text entry to access application features,

considering time-consuming and frustrating aspects of data entry.

 Scale content for various screen sizes and resolutions to address

cross-platform touch control differences.

 Revealing Content:

 Choose between full-page layout and in-context design for content

DESIGN PATTERNS
display.
Content and Controls  Ensure necessary information is displayed on the same page to

reduce bouncing between pages.

 Use quickly revealed, in-context designs such as pop-up boxes when

content aids decision-making.

 Maintain association with the current screen and task when using

pop-up boxes.
 Displaying Information:

 Present narrowed-down content concisely and effectively based on

user requests.
DESIGN PATTERNS
 Utilize an array format, including graphics and text, such as ordered
Content and Controls lists.

 Contextually present information, prioritizing and sorting as

needed.

 Structure large amounts of data with precise labels and distinct

hierarchies for readability.

 Employ expandable panes to reveal additional content within the

current screen context.

  Incorporate application branding on intervening screens.

 Do not display information from previous screens during loading or

device lock periods.

DESIGN PATTERNS
Home and Splash Screen:
Intervening Screens
 Ensure clear differentiation between the home and splash screens.

 Minimize wait times with efficient splash screen design.

 Consider using the splash screen image as the application background to create

the perception of quicker access.

 Implement parallax scrolling to enhance user engagement and understanding of

application depth.

 Avoid overdependence on the home screen for primary features and minimize

idle screen usage.

 Loading Screen:
DESIGN PATTERNS
 An in-progress, "loading" screen signals when new data is loading
Intervening Screens
during various user interactions such as logging in, entering search
criteria, or receiving automated alerts.

 Develop applications to load as quickly as possible to minimize the

display of the loading screen, while also designing them to

accommodate application limitations.
 Loading Screen:

 Include the estimated progress indicator and avoid displaying

DESIGN PATTERNS
information from the previous screen while newly requested data is
Intervening Screens
loading.

 To influence user perceptions of load times and create the illusion of

quicker data retrieval, position the progress indicator over a

screenshot of the last screen.

 Utilize the loading screen for displaying advertising when there is

sufficient delay.
  Project stakeholders often rely on advertising revenue to sustain

DESIGN PATTERNS applications, but creators must find a balance between attention and
integration.
Advertising
 Avoid two common mistakes in advertising: making it too obvious

and confusing it with application content.

 Set apart advertisements using techniques such as a strong border,

different color or texture for the background, full-width box, or

distinct alignment compared to application content.
  Adherence to advertising styles and guidelines varies across

platforms, but generally, advertisements must:

 Be clearly differentiated from application content.

 Remain unobtrusive to application features.

DESIGN PATTERNS
 Allow user interaction and be actionable.

Advertising  Maintain legibility.

 Maintain consistent styles and layout throughout application screens.

 Advertisements may scroll within application content or be locked to

the viewport but avoid animated advertisements that distract from

primary tasks and information.

 Regardless of whether the content is paid advertising, curated by

application administrators, or serves as a help screen, the most

effective content is always useful content.
  Developers can leverage native functionality on various mobile

devices such as Android, BlackBerry, WP7, or iOS.

DESIGNING FOR  Mobile devices offer more than just a smaller, web-like interface; they
MOBILE PLATFORMS
can also make phone calls and capture and transmit contextual
information like geolocation.

 While it's natural to gravitate towards familiar platforms, it's

important to acknowledge the drawbacks of such fragmentation.

  Comfort zones and favorite platforms can hinder marketing, design,

and user experience.

DESIGNING FOR  Fragmentation poses challenges for application creators seeking to
MOBILE PLATFORMS
innovate and tackle new problems.

 Awareness of comfort zones and the willingness to adapt are crucial

for staying relevant in the ever-changing landscape of mobile

development.
DESIGNING FOR
MOBILE  Android is known for its diverse ecosystem, offering fewer
PLATFORMS
institutionalized restrictions and a wider variety of mobile devices
Android compared to other popular systems.

 Led by Google, the development of the Android operating system is

backed by a global and growing user base.

 Despite its strong competitiveness in the mobile market, the

flexibility of Android design can introduce new issues.

 Interface Tips:

DESIGNING FOR  Android convention suggests placing view-control tabs across the top
MOBILE of the screen rather than at the bottom.
PLATFORMS
 Utilize the main application icon for temporal, hierarchical
Android
navigation, instead of relying solely on a "back" button and a main
icon to link to the home screen.

 Avoid mimicking user interface elements or recycling icons from

other platforms. For example, list items should not use carets to
indicate deeper content.

 Parallax scrolling is a common feature in Android applications.

 Android development can extend to home-screen "widget" tools.

DESIGNING FOR
MOBILE Accessibility:
PLATFORMS  Google offers guidelines and recommendations for accessibility,
Android including testing with TalkBack, which is often preinstalled and
always free.
 iOS Design Standards and Resources:
DESIGNING FOR
MOBILE  Apple maintains strict design standards for iOS, which are regularly
PLATFORMS updated and documented online.

iOS  Detailed iOS interface documentation and general mobile design

strategies can be found on Apple's website.

 Interface Tips for App Development:

 Application rejection from the official App Store can occur due to design
DESIGNING FOR
MOBILE issues.
PLATFORMS  It's crucial to adhere closely to the current design guidelines provided by

Apple.
iOS
 Some key tips to follow include:

 Ensure main navigation items are within reach of user thumbs, as iPhone users
typically hold their devices from the bottom.

 Maintain target areas for controls at a minimum of 44 x 44 points.

 Support standard iOS gestures, such as swiping down from the top to access the
Notification Center.

 Avoid relying solely on non-standard gestures for accessing important features on

larger iPad screens.
DESIGNING FOR Accessibility Considerations:
MOBILE  Refer to Apple’s Accessibility Programming Guide for detailed
PLATFORMS
guidelines on accessibility features.
iOS  Apple offers accessibility features such as VoiceControl, Speech

Synthesis, and VoiceOver.

 Accessible touch and gestural controls are available on iPads and

later-generation iPhones.

 Additional accessibility features include screen magnification and

color contrast adjustments.

 ONLINE RESOURCES

Android

 Google maintains user interface guidelines in an online repository at

http://developer.android.com/guide/practices/ui_guidelines/index.html

 Accessibility design guidelines are available on the Android Developer website

http://developer.android.com/guide/topics/ui/accessibility/index.html
 ONLINE RESOURCES

iOS

 Visit the link below for access to design strategies, case studies, and interface guidelines.

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

 Access the guidelines at

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html

 Access the guide at

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/iPhoneAccessibility/Accessibility_on_iPhone/Accessibility_on_iPhone.
html
THANK YOU!