Mobile Usability & Design. March 2015

Transcription

1 Mobile Usability & Design March 2015

2 Lochbridge Digital & User Experience Studio With over 30+ years of collective UX/UI experience the team has created designs for many of the most respected organizations in the country including GM, Ford, ESPN, Disney, OnStar, VW of America, American Greetings, NetJets, The Henry Ford Museum, Dole Fresh Fruit and many more. Each role in the department plays a key part in this creative process

3 From Start to Finish UX/UI Best Practices Involving Developers Closely Knowing Research and Trends Seeing Projects Through

4 "Mobile app design is often overlooked in the development process, but companies are finding that most mobile apps fail because of lack of user adoption caused by poor design and experience," said Kony Executive Vice President and CMO Dave Shirk

5 The Cost of a Negative Experience 34% 57% Of users will switch to a competitor s app after a negative experience Of users won t recommend a business with a poorly designed app

6 Technology s Changing Fast are you Keeping up? 57 % Increase in Screen Size 78 % Increase in Screen Size 2.5x Higher Resolution Screens 2.9x Higher Resolution Screens 340 % Larger Processors 303 % Larger Processors Wearable Technology Wearable Technology 2007 iphone iphone 6+ 8 ios releases 12 major Android releases 2008 HTC Dream 2014 Galaxy Note4

7 The Result iphone Stay Current. Stay Relevant. Stay Connected. ios Original app designed on ios 6 guideline standards. Since app has been developed iphones have increased in size by 58%. ios Redesigned assets to fit guidelines for current operating system and screen dimensions iphone 4 iphone 6+

8 The Result Android Stay Current. Stay Relevant. Stay Connected. Android 4.0 Android 5.0 In the past, Android users often had to make do with inconsistent or poorly designed apps. With Android 5.0, users will expect an experience in line with the new Material Design language.

9 The Good or Successful UX/UI Put articles, videos or pretty much anything into Pocket. Save directly from your browser or from apps like Twitter, Flipboard, Pulse and Zite. Over star ratings in the Apple store 2014 Webby Peoples Choice Award

10 The bad or a UI/UX Failure Facebook Backlash The avalanche of protests over the Facebook Messenger app has gathered pace and users are flocking to review pages to vent their fury. Over 140,000, or 73 percent of users gave the Facebook Messenger app a one star rating across Apple's App Store and Google Play -CNBC "So now I have two apps on my phone to do the work of the one old app? Wonderful. I'd like to leave zero stars but it won't let me," one reviewer wrote on the Apples App Store review page.

11 Usability Quality Components Understanding the users/needs of the current product/concept. Observe the layout and flow of existing software and make enhancement suggestions. Memorability: When users return to the design after a period of not using it, how easily can they re establish proficiency? Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Efficiency: Once users have learned the design, how quickly can they perform tasks? Satisfaction: How pleasant is it to use the design?

12 Is Mobile UX A Ranking Factor Now? Not yet. Google sees what users see, and if that is a bad mobile experience, it may impact your rankings Barry Schwartz on October 8,

13 What is UX?

14 What is UX? User Experience is users emotions beliefs preferences perceptions physical and psychological responses behaviors and accomplishments that occur before, during and after use of product, system or service.

15 UX Stand Alone Services Research & Strategy Few techniques used: Competitive Analysis Contextual Inquiries Focus Groups Interviews Questionnaire/Surveys Consultation/Recommenda tions Interaction & Visual Design Few techniques used: UX flow Wireframes Mockups Visual assets Usability Few techniques used: Heuristic Evaluation Usability Testing

16 Research & Strategy User research focuses on understanding user behavior. Based on the client s business and objectives we can provide analysis and recommendations. Benefits: protects from designing product that is not useable removes assumptions from the design process cheaper if done at the beginning gets clarity within the team gets entire team to buy into the experience

17 Research & Strategy Interview / Contextual Inquiries Persona

18 Interaction and Visual Design Visual and Interaction Design focuses on satisfying the specific goals of well-defined users, structuring visual elements and aligning tone with overall strategy. Benefits: Present and review ideas early in development Communicate design effectively across team

19 Creative Approach Flow Wireframes Mockups We will work closely with clients to create a user friendly flow to increase customer satisfaction and decrease customer support demands. Our design department will create wireframes which are a skeletal framework of your website. These are concentrating solely on the arrange of elements on your pages. Before we begin to code your project our designers will provide you will full color mockups which will be a representation of your final project. 19

20 Interaction and Visual Design UX Flows Wireframes Existing Customer Splash Login Home Create New Customer Products Shopping Cart Previous P.O. Client Info. Scan From Catalog Categories Sub Categories Submit Signature/ Name Edit Remove Save PDF Update Info Contract Terms Alternate Product Individual Product QTY Product Info./ Selling Features Thank You page Add To Cart

21 Usability Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process. Heuristic Evaluation (HE) Test products on usability/domain expert Deliverables: Testing scenario scripts, evaluation data Usability Testing (UT) in Designated or Portable Lab Test products on real users Deliverables: Quantitative and Qualitative data collected in the lab, analysis report.

22 Usability Heuristic Evaluation Example - Help Users Recover from Errors Heuristic Evaluation Issue Report Example

23 Mobile Visioning Imagine the future and utilize the creative application of technology while collaborating with our clients. The use of animations and clickable prototypes are used to help you imagine what it could be like to use and interact with a possible app. We make sure to provide strong visuals to help businesses to imagine what an app could look like and help provide a clear image of future goals.

24 Seeing Projects Through till the end

25 Keeping up, think in versions, & always think of the end users

26 Keeping up

27 Keeping up Tre n d s L o c a t i o n L o c a t i o n L o c a t i o n Taking advantage of knowing where you are T h e E n d o f S ke u o m o r p h i s m Looking at what style has to say about how up-todate you are H i d i n g M e n u s Using real estate to it s full potential S i m p l i c i t y Creating a minimalist environment that encourages ease of use and understanding

28 Think in Versions

29 Thinking Responsive Responsive design is an approach aimed at crafting apps to provide an optimal viewing experience easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices. Targets the adoption of a mobile-first strategy. In Responsive Design we target Flexible content. Don t sacrifice content for a new medium. Make it usable. Prevent (or at least minimize) similar problems in the future.

30 Approaching a Mobile Refresh iphone 4s ios 6 iphone 6+ ios 8 Redesign assets to fit guidelines for current operating system and screen dimensions

31 Endless Possibilities based on the business and users needs

32 Blake Almstead