ux ui design for mobile apps

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

Upload: vishal-kirti

Post on 22-Jan-2018

343 views

Category:

Education


4 download

TRANSCRIPT

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

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.

Thank you

Questions ?