Madhuri's slides on the Ux Ui Design

1. UX / UI Design for
Mobile Apps
Madhuri Chopurala
05/01/2016

3. User Experience and Usability
UX - How a person feels when they interact with
● Your products
● Your application
● Your business
A person’s perceptions and responses that result from the use or anticipated use of a
product, service or system.
● Making a task meaningful and valuable
● Creating emotional connection, what users feel
Usability - Minimizing steps, removing roadblocks, making a task easy and intuitive.
What users do / how they do it

4. Why you should care about UX / UI Design for
your mobile Apps ?
Design unique mobile app of your requirement
Rule of thumb: Every dollar invested in the ease of use returns $10 to $100
● Visitor traffic
● Conversion rate
● User loyalty
● Social engagement

6. Great Products have great Designs
Intentional Designs are Innovative
● valued Design, business wins, opportunity taken, risks and payoff in the long run.
USER centered designs are focused on best User experience. A strong user interface(UI) is invaluable as the
battle for what users wants intensifies day by day. It's important to spend time investing in researching,
defining, and building your design.
● Developing Your Design Strategy and Determining Your Design’s Objectives
● Focusing on your Target Audience
● Discover and Crush Your Design Barriers
● Design Revision and Recreation

8. User Research
● Know the USER.
● You are not the USER
● Who your users are ?
● What are they doing ?
Live and breathe USERS world
● one-on-one approach
● focus groups
● surveys

9. App Design - Mobile Devices
Adaptive Design approach - Smooth transition from one device to another while ensuring a consistent
performance. That is, whether users operate an app via small-screen wearable, or large-screen tablet, the
application must deliver persistent and pleasing performance.

10. Mobile App Design - Flow charts
Map out flow chart details
● What choices users have ?
● What pops up when
○ App is loaded
○ User Clicks
○ User swipes
● Create User Stories for
different personas

11. App Design - Usage of graphics & Animation
● Use High-resolution images
● To ensure consistent image
quality on mobile devices of every
size.
● Integrate background blurry
images will make visual content
easily readable and more
effective.
● Icons - only minimal, shaded and
thin Icons that are intuitive enough
to represent their role.
● Effective communication with
better icons and typography

12. Mobile App Design - Navigation and Engagement
● Gesture-based apps - smart and easy navigation
● Call to Action (CTA) buttons - captivating and easily accessible. They generate great conversions
○ Recommended button / touch target size ( make your buttons using CSS rather than images)
■ Apple - 44 x 44 px
■ Android - 48 x 48 px
■ Windows phone - 34 x 34 px
● Parallax Scrolling - This will make the application easily navigable and easy-to-read, while
adorning its visual appearance.
○ Intuitive and dynamic user experience while keeping the users actively engaged
● Engaging potential customers - Integrate and reduce the Number of clicks on the application
● Touch friendly UI Elements - drawers, carousels, off-canvas flyouts usage enhances usability

13. Mobile App Design - Navigation and Engagement
● Progress Indicator or loading / processing graphics
● Recommend font size 14 px or above
● Key touch interactive UI elements are easily accessible and non-essential UI
elements are in the footer
● Avoid switch buttons or arrows - small navigation touch targets are hard for
the user to select

14. Mobile App Design - Keep it Simple
● Simple and minimalist designs - integrate a subtle color palette
● Simplification of content with depth
● Use consistent design patterns that will help organize
● Build on design principles
● Design for Future functionality

15. Mobile App Design - Trend
● Wearable - While designing for mobiles, don’t forget to include the wearable in your list
of targeted devices.
● Personalization/Customize - Users often prefer products that can be tailored to suit
their needs - App Themes.
● Parallax illusion - With HTML5 and CSS3 it becomes possible to create more
interesting and eye-catchy effects in browsers.
● Parallax Scrolling - Involves the background which is moving slower than the
foreground creating an amazing 3D effect while you scroll down the page.

16. Thank you
Questions ?