ux ui design for mobile apps
TRANSCRIPT
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
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
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
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
App Design - Mobile DevicesAdaptive 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.
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
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
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
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
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
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.