Transcript Document

“User-Centric Approach to MultiDevice Cross Platform Mobile
Solutions”
BENNETT ADELSON
Information Worker Solutions
At the forefront of facilitating productive, secure
communication and collaboration throughout enterprise.
Architecture & Development
A regional leader in the technology community since the
pre-beta bits of .NET 1.0 were released.
Mobility Solutions
Assists organizations to visualize, create, and/or
execute a mobility strategy.
User Experience
Engages all aspects of the customer’s interaction with
your brand, company, and products and services.
Advanced Infrastructure
Helping companies migrate, upgrade, and grow their
network capabilities leveraging Microsoft technologies.
Connected Systems
We help our clients connect discrete systems to make
business operations and partner interactions more agile
Business Intelligence
Our Business Intelligence team helps you gain insight
into your data. Our team offers skills that span the
range of the BI landscape, from Self-Service BI to
Enterprise BI to Big Data.
Dynamics Solutions
We specialize in delivering solutions that centralize your
customer touch points. A “Customer Hub“ that is mobile
ready and cloud enabled.
Experience team of consultants that
lead projects from analysis and
design through execution and
development.
PRESENTERS
Wendy Trem, Practice Director – UX Experience: Wendy possesses over 16 years
of corporate and agency experience in creative and user-centric based solutions. She
works closely with clients to map out digital strategies, identify user needs and application
pain-points and ensures each project is delivered with ultimate client and user satisfaction.
She works collaboratively and manages creative teams comprised of: creative directors,
user experience designers, art directors, developers, project managers and copywriters.
Wendy leads digital projects from initial creative conception through final production and
delivery on a number of high-profile consumer-focused and business-to-business projects.
Wendy’s client list includes: Nestle, Humana Medicare, Troy-Bilt, Speedway, Fisher-Price,
MTD Products, Cleveland Clinic, Invacare, Swagelok, Proctor & Gamble and The
Discovery Channel.
Mark Kramer, Senior Consultant – Mobile Practice: Mark is a member of the
Bennett Adelson Enterprise Mobility team and has 12 years of solution architecture,
system implementation, system integration, and software development
experience. Mark also has several years of experience in designing, developing,
and implementing innovative mobile solutions. Most recently, Mark has been
exploring new tools for developing cross-platform mobile solutions.
INTRODUCTION
Over 60% of internet access is accounted for through the use of
mobile devices. In order to be successful mobile marketers in 2014,
companies and big brands must stay ahead of the curve by delivering
content in concise and seamless mobile experiences. With a sea of
frameworks, platforms and technologies at our disposal, as
designers, technologists and developers, it is critical to understand
which of these tools may limit the design process and impact the
overall user experience.
In this session, we will review a user-centric mindset to mobile
solution design and how to deliver best-in-class user experience by
matching user needs and limitations to business goals and
objectives. We will demonstrate how user experience and
development teams collaborate to design and build a mobile app
that meets the requirements for cross-platform, multi-device
deployment (including Windows Phone and Store apps). We will
discuss the process of selecting the tools and the setup for building a
hybrid mobile application.
MOBILE STATISTICS
•
67% of consumers say they are more likely to
purchase from a mobile-friendly website than
they are from a website not optimized for
devices other than desktop.
•
4 out 5 consumers use smart phones to shop
•
52% of Americans user their devices
while browsing in-store in order to
research the product online
•
70% of mobile searches lead to online action
within an hour.
•
75% of Americans admit to bringing their phone
to the bathroom.
•
57% of users will not recommend
companies with poor mobile sites.
USER NEEDS DRIVE TECHNOLOGY SET
Our approach to mobile design is very user centric and collaborative. We
work closely with our clients to determine the following:
•
What are the business goals and objectives of the app?
•
What is the industry landscape (competitive research and analysis)? What
are their competitors doing, what’s working and what’s not?
•
Who will be using the app? We clearly define user demographics and user
limitations.
o
o
o
o
Age group
Level of technical aptitude
Environmental factors
Physical limitations
•
Are there specific limitations or inefficiencies that could impact the overall
design or layout?
•
What are the project requirements?
•
What are your technology requirements and limitations?
THE VALUE OF A UX DESIGNER
“With any great TV series comes great production. The sets need to be perfected
and the actors flowing through the scenes without error, ensuring that the viewer
feels that they are right there, sharing the experience with them. The same
situation needs to happen when providing a user with a great experience in their
application. The interface should be polished and pleasing to the eye, and the
architecture should allow a user to flow through the app without even needing to
think about what it is they should do next”. -Jessica Seiler, Solstice Mobile
The Bigger Picture Connections: The Visual UX Designer will ensure that they are
designing with the end user in mind. They will be able to translate this to the developer
discuss to ensure that the interactions work correctly and can be implemented in the way
that they were envisioned
Operating Systems: UX Designers are well versed in the standards of the operating
system they are designing for. They will know the differences between feature styles,
buttons and menu designs native to each mobile device.
Overall Application Flow: The overall flow of the application will be more seamless and
streamlined from action to action.
THE VALUE OF UX DESIGN
Color schemes: the ability to think through colors that
will work together as a cohesive unit. As well as the
ability to work with a client’s existing brand standards.
Icons: designing custom icons to represent the correct
topic or idea and ensuring the style matches the rest of
the iconography.
Visual Hierarchy: the organization and prioritization of
content as a means to communicate a message.
Prioritizing content in the correct order in which a user
would naturally consume information.
Responsive Design: understanding how the content
and imagery will fit, flow and look on the page by
considering the correct break points. Best practice
states to design for mobile first, so it can be determined
what content is the most important for the user.
THE VALUE OF UX DESIGN
Navigation: choosing the correct
mobile navigation structure that will
best accommodate the content and
how it needs to be organized.
Layout: creating a consistent look
and feel by using the same visual
elements, structural grids, and
general spacing rules across
platforms and screen sizes. As well
as creating structural and visual
consistency creates an environment
for the user that is recognizable
across products, which facilitates
usage by providing users with a high
level of familiarity and comfort.
Buttons: designing buttons
that are in the correct device
format and ensuring that they
visually work within the
overall design.
THE VALUE OF UX DESIGN
What happens when we leave design up to the developer?
TYPES OF MOBILE APPS
Native Apps:
•
•
•
•
•
•
Live on the device and are accessed through the icons on the device home screen
Installed through an application store (Apple Store or Google Play)
Developed specifically for one platform
Can take full advantage of all device features
They can incorporate gestures
Can work offline, they do not need a wireless connection
Mobile Web Apps:
•
•
•
•
Are not real applications; they are websites that look and feel like native applications
They run by a browser and are typically written in HTML5
User has the ability of “installing” them on their screen by creating a bookmark to that page
Development costs are typically cheaper with mobile apps and the maintenance is lower
Hybrid Apps:
•
•
•
•
•
Part native and part web apps and they can live in app stores
Allow for cross-platform development (which can lower development costs)
Take advantage of many device features
Rely on HTML being rendered in a browser, with caveat that the browser is embedded
within the app
Can be leveraged as a “wrapper” for an existing website, which the ability to still get
presence in the app store.
HOW TO CHOSE THE RIGHT APP
Native:
• Existing Native Skills
• Single Mobile OS
• Native functionality
• Rich/Native UI Requirements
• Access to Latest Features
Web:
• Direct Distribution
• Pilot Application(s)
• High Visibility
• In-house skills
Hybrid:
• Deploy to Multiple Mobile OS
• In-house skills
• Some Device Features Required
• GPS, Compass, Camera
• Prefer Common User Experience
• Performance is not a key factor
HOW TO CHOSE THE RIGHT APP
NATIVE VS. HYBRID VS. MOBILE
Score Care: Good, Better, Best Methodology
NATIVE APPS
MOBILE WEB
HYBRID APPS
Device Features
3
1
2
Offline Functioning
3
.5
1
Discoverability
1
3
2
Speed
3
1
2
Installation
1
1.5
1
Maintenance
1
3
2
Platform Independence
1
3
2
Content Restrictions
1
3
2
Development Costs
1
3
2
User Interface
3
2
2
criteria
1 = Good
2 = Better
3 = Best
MOBILE APP
• Are not real applications; they
are websites that look and feel
like native applications.
• They run by a browser and are
typically written in HTML5.
• User has the ability of
“installing” them on their screen
by creating a bookmark to that
page.
• Development costs are typically
cheaper with mobile apps and
the maintenance is lower.
HYBRID APP
• Part native and part web apps and
they can live in app stores.
• Allow for cross-platform
development (which can lower
development costs).
• Take advantage of many device
features.
• Rely on HTML being rendered in a
browser, with caveat that the
browser is embedded within the
app.
• Can be leveraged as a “wrapper”
for an existing website, which the
ability to still get presence in the
app store.
NATIVE APP
• Live on the device and are
accessed through the icons
on the device home screen.
• Installed through an
application store (Apple Store
or Google Play).
• Developed specifically for
one platform.
• Can take full advantage of all
device features.
• They can incorporate
gestures.
• Can work offline, they do not
need a wireless connection
FRAMEWORKS
• Sencha Touch
• JQuery Mobile
• Angular JS
• Kendo UI
• Backbone
• Twitter Bootstrap
• Etc…
TOOLS
SELECTING A SET OF TOOLS
• Cost
• IDE Preference
• Language
• UI Abstraction (Use of Native
UI Components)
• Build Environment
• Proprietary Technology?
Developer Economics 2013 report:
Developers most often use several cross-platform tools; on average CPT developers will use 1.91 CPTs,
confirming the lack of maturity and niche nature of cross platform tools much like we observed in our
dedicated CPT survey just over a year ago. Moreover, we found that one in four developers will use
more than three cross platform tools.
HYBRID APP DEVELOPMENT
Best Practices:
• Minimize Code
• Avoid Inline Styling!
• Minimize Use of Third Party Plugins
• Use A Framework
• Become Familiar with Platform/OS Requirements
• Asset size/format
• Required elements
• E.g. - App Certification Requirements for the Windows Store
Helpful Tools for Testing:
• Chrome Inspect – Remote Android Debugging
• Chrome Mobile Device Emulation
• GenyMotion Emulator
• iOS Simulator
• Safari
HYBRID APP PACKAGING & DEPLOYMENT
Android:
• Requires a signing certificate
• Follow instructions at http://developer.android.com/tools/publishing/appsigning.html
• Requires a valid Google Play Account for deployment to the Play Store
iOS:
• Requires a valid iOS Developer Account
• Need to Create a Provisioning Profile at the Apple Developer Site
• Requires a Mac for Building the Application
Windows Store App:
• Use Visual Studio to package and distribute
• Requires a Valid Developer Account
Windows Phone:
• Upload Packaged XAP File to Windows Dev Center
DEMO
WHAT HAVE WE LEARNED?
By including UX Design in to the development process it allows
for:
• A better overall user experience; navigation, style, visual
design and layout and content hierarchy.
• It increases overall user engagement (downloads).
• Increase brand confidence.
• From a development standpoint it increases clarity around
requirements.
• It allows for the developer to focus on the things they are good
at – LOGIC!
QUESTIONS?
QUESTIONS?