Ux Ui Design for Mobile Apps
Post on 22-Jan-2018
1. UX / UI Design for Mobile Apps Madhuri Chopurala 05/01/2016 2. User Experience and Usability UX - How a person feels when they interact with Your products Your application Your business A persons 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 3. 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 4. 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 Designs Objectives Focusing on your Target Audience Discover and Crush Your Design Barriers Design Revision and Recreation 5. 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 6. 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. 7. 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 8. 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 9. 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 10. 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 11. 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 12. Mobile App Design - Trend Wearable - While designing for mobiles, dont 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. 13. Thank you Questions ?
View more >
UX Design Best Practices for Apps/Games & Mobile Websites with Responsive UI @shahedC WakeUpAndCode.com.