mobile usability & designfiles.meetup.com/1698110/almstead - mobile_monday.pdf · ux/ui best...
TRANSCRIPT
March 2015
Mobile Usability & Design
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
From Start to Finish UX/UI Best Practices | Involving Developers Closely Knowing Research and Trends | Seeing Projects Through
"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
Of users will switch to a competitor’s app after a
negative experience
34%
Of users won’t recommend a business with a poorly
designed app
57%
The Cost of a Negative Experience
8 iOS releases 12 major Android releases
Wearable Technology
78%
2.9x
303%
Higher Resolution Screens
Increase in Screen Size
Larger Processors
2008 HTC
Dream
2014 Galaxy Note4
Wearable Technology
57%
2.5x
340%
Higher Resolution Screens
Increase in Screen Size
Larger Processors
2007 iPhone1
2014 iPhone 6+
Technology’s Changing Fast are you Keeping up?
iPhone 4 iPhone 6+
Stay Current. Stay Relevant. Stay Connected.
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
iOS
The Result iPhone
Stay Current. Stay Relevant. Stay Connected.
In the past, Android users often had to make do with
inconsistent or poorly designed apps.
Android 4.0
With Android 5.0, users will expect an experience in
line with the new Material Design language.
Android 5.0
The Result Android
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 150 5 star ratings in the Apple store 2014 Webby Peoples Choice Award
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.
Usability Quality Components
Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
Satisfaction: How pleasant is it to use the design?
Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
Efficiency: Once users have learned the design, how quickly can they perform tasks?
Memorability: When users return to the design after a period of not using it, how easily can they re establish proficiency?
Understanding the users/needs of the current product/concept. Observe the layout and flow of existing software and make enhancement suggestions.
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, 2014 http://searchengineland.com/google-may-add-mobile-user-experience-ranking-algorithm-205382
What is UX?
• User Experience is users
• that occur before, during and after use of product, system or service.
emotions
beliefs
preferences
perceptions
physical and psychological responses
behaviors and
accomplishments
What is UX?
Research & Strategy
Interaction & Visual Design
Usability
Few techniques used: • Competitive Analysis
• Contextual Inquiries
• Focus Groups
• Interviews
• Questionnaire/Surveys
• Consultation/Recommenda
tions
Few techniques used:
• UX flow
• Wireframes
• Mockups
• Visual assets
Few techniques used: • Heuristic Evaluation • Usability Testing
UX Stand Alone Services
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
Research & Strategy
• Interview / Contextual Inquiries • Persona
Research & Strategy
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
Interaction and Visual Design
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.
• UX Flows • Wireframes
SplashCreate New
Customer
Products
Existing
Customer Login
Shopping
Cart
Previous
P.O.
Client Info.
Scan From Catalog
CategoriesSub Categories
QTY
Product Info./
Selling Features
Add To Cart
Individual Product
Submit
Edit
Remove
Signature/ Name
Save PDF
Thank You pageHom
e
Update Info
Contract
Terms
Alternate Product
Interaction and Visual Design
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.
Usability
• Heuristic Evaluation Example - Help Users Recover from Errors Report Example
Heuristic Evaluation Issue
Usability
Mobile Visioning
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.
Imagine the future and utilize the creative application of technology while collaborating with our clients.
Seeing Projects Through till the end
Keeping up, think in versions, & always think of the end users
Keeping up
Keeping up
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-to-
date 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
Tre n d s
Think in Versions
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.
Approaching a Mobile Refresh
iPhone 4s iOS 6
Redesign assets to fit guidelines for current operating system and
screen dimensions
iPhone 6+ iOS 8
Endless Possibilities based on the business and users needs
Blake Almstead [email protected]