Welcome.5 Considerations for EnterpriseMobile App User Experience

March 20th, 2014

We’ll start promptly at 1:02pm EDT!@propelics

Propelics Background – About Us

2

• 15+ year track record• Fortune 500 clients• Global experience• 100% focused on mobile

for the Enterprise• San Jose, Boston,

Pittsburgh

Propelics creates mobile strategies and world class

Apps for the Enterprise.

Trusted by some of the largest global brands:

Enterprise Mobile Strategy Services• Enterprise Mobile Strategy• Mobile App Portfolio• Mobile App Scoping & Planning• IT Readiness for Mobility• Innovation through visualization• Center of Excellence Creation

Mobile Advisory Services• Mobile Mentoring• Executive Education• Speaking Engagements

Managed Services• Application Oversight• Application Development, Maintenance and Support• Managed Mobile Center of Excellence• Onshore and Offshore App Development

What We Do

4

WHAT IS THE MOBILE RESEARCH COUNCIL

WWW.MOBILERESEARCHCOUNCIL.COM

We will give you the edge.

Our Objective:Driving innovation and business value with mobile software and solutions.

Our executive guidance helps members to quickly and effectively deliver high-impact mobile experiences to employees, partners and customers.

MRC has no sales angle or vendor bias. Members benefit from insider access

to real-world mobile experience, and gain privileged access to market intelligence and resources that would otherwise be difficult to attain.

From Market Trends to Action at the Speed of Mobile

Research. Advisory. Community.

Steven Brykman - Digital Strategist and UX Architect

Since joining the Propelics team, Steven has

helped a wide range of Enterprises determine the

direction of their Mobile Apps, including Amway,

Family Dollar, and Bright Horizons.

He spent much of the last decade as Creative

Technologist/Lead Strategist for his own design

company, Got Your Nose, improving user

experiences for such companies as Scholastic,

Bell, Guinness, and Nintendo. Additionally, Steven

co-founded Apperian, a Boston-based technology

startup focused on Mobile Application

Development, and served as Lead UI Architect

and Strategist.

Agenda

6

• UI / UX in the Enterprise

• The Impact of Consumer Applications on Enterprise UX

• Top 5 UX Considerations for Enterprise Mobile Apps

• Q&A

UI – User Interface (mobile)The layout and design of content, buttons, tabs, sliders, links, forms, etc.—anything the user digests and/or interacts with.

UX – User Experience (mobile)A broader term that encompasses the actual usage of an interface: animations, screen transistions, alerts, brand identity, language consistency (tone, voice) as well as elements of human psychology (user-expectations).

Defining our Terms

Seriously lagging.

When it comes to UI/UX, Consumer apps have about a 5-year head start over their Enterprise counterparts.

Relatively new:

The idea of a company hiring a person or team devoted solely to UI design and User Experience.

For years, Enterprise has suffered the fate of building applications without dedicated UI/UX designers.

Thankfully,The tide is turning.

“In the last decade the consumerisation of IT has had a huge impact on enterprises. Workforces now demand the same technology they have in their personal lives in the workspace, and don’t understand when this cannot be delivered.”

UX is no longer an afterthought.

*The Global State of Enterprise Mobility: www.enterprisemobilityexchange.com

What’s wrong with not hiring UI/UX Designers?

1111

Typically you wind up with an application built:• In whatever way is easiest for developers to code • In whatever way is fastest to code.• Using language only other developers can understand

Why the Great Divide? (between Enterprise & Consumer Apps)

1212

Consumer Apps• Great UI/UX is part of the

sell• Users will complain

(iTunes)• Competition

Enterprise Apps• Traditionally, Developers

handled Interface Design

• No competition• Poor UI is Par for the course• Onus is on the user to

understand the application• Obfuscation and complexity

often mistaken for sophistication

• No pressure on companies to ‘sell’ an app to its own employees

• Employees less likely to complain

Development Priorities in the Enterprise

1313

Formerly ‘Important’ Cost Savings• Time required to build application

(time is money)• Resources required to build application

(the fewer the better)

Formerly ‘Unrecognized’ Cost Savings• Employee training• Steep learning-curve• Sloppy UX results in inefficient usage, forgetfulness• User-frustration (Help Desk calls)• Crashes, errors from inappropriate usage (IT calls)

Why use good UI?

1414

It’s Simple.In addition to the aforementioned additional time & resources needed to accommodate a confusing interface, an intuitive User Experience actually increases your employees’ desire to use the application.

Work literally becomes less work, more fun.

When you eliminate frustration, users will enjoy their work.

Consider the case of airport employees who often still work on monochromatic green monitors with dot matrix printers

According to a recent Intel study: “Old PCs cost employees more than a week of work annually”

Old PC’s = Outdated UIhttp://techday.com/start-up/news/intel-smbs-burdened-by-aging-pcs/172487/

What’s changed?

1515

The playing-field has (literally) narrowed!• Smaller screens• More data• No input device (keyboard, mouse)• Device-specific interactivity (accelerometer, multi-touch)• (and widened) Multiple OS’s, formats (screen sizes, pixel

densities)

Enterprise can no longer afford to treat UI/UX as a lesser priority.

Given HTML 5 and Responsive Design, it is more imperative than ever that companies hire UI/UX designers who specifically understand the unique demands particular to the mobile environment.

Mobile speaks a language all its own.

Enterprise vs. Consumer Apps

1616

While the end-users for both app-types are the same (people), the difference between designing for Enterprise vs. Consumers is that with Enterprise interfaces:

1. Enterprise apps are typically less graphics-oriented2. Rather, they revolve around the organization and display

of information3. We’re not trying to impress the user with a radical new

interface(a rotating spherical 3D navigation, for example)

4. We don’t want to reinvent the wheel.Priority #1 is building an application that’s immediately usable and requires no training or in-app instruction.

Top 5 UI/UX Lessons for Enterprise Apps

1. Keep it Simple

1. Keep it simple

1919

Proposed Windows 8 UI (2011)

Enterprise apps typically contain far more information than consumer apps.

Don’t get too clever or fancy.

Biggest challenge: Data organizationThe #1 priority for Enterprise apps is comprehension and ease-of-use, not titillation.

According to a 2013 Harvard study:the more visually complex a website is, the lower its visual appeal.

http://www.eecs.harvard.edu/~kgajos/papers/2013/reinecke13aesthetics.pdf

20

iOS Example: Weather – iOS 6

Information Delivery• Unnecessary (assumed) info ("local weather")• Relevant info lacking (current day, conditions)• Requires user-tap for hourly forecast

Layout• Dark color pallette• Wasted space (images, chrome)

21

iOS Example: Weather – iOS 7 (feel lighter?)

Information Delivery• Obvious cues removed: "local weather”• Update info removed (animation = updated)• Emphasis on text cues: “Mostly Sunny”• “Today,” “Now” added (time vs. space)• Addition of horizontally scrolling content • No interaction required to view (some) hourly info

Layout• Zero wasted space, no ‘chrome’ • Simplified current temp layout • Images used as background • Energy, movement achieved through animation• Screen color palette determined by content

(the weather itself)• The Medium is the Message (content = design)• Integrated Status bar

Graphics• Line graphics replace realism

Fonts• Helvetica Neue

22

iOS Example: Weather

iOS 6

iOS 7

23

The Propelics Approach: Negative Space = Positive UX

Negative space gives the user’s eye breathing room and makes the interface easier to digest and understand.

2. Keep it Familiar(and consistent)

25

2. Keep it Familiar (and consistent)

Stick to established conventions. Leverage the standards that already exist.

Remember: Apple/Google have done much of our work for us. By creating a rich, intuitive new interface language, they’ve trained us all on how to operate in a mobile environment.

Apple recommends we follow their Mobile Human Interface Guidelines, available as a free download here: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

Design Guidelines for Android can be found here:http://developer.android.com/design/index.html

UI Guidelines for Blackberry are here:http://developer.blackberry.com/native/documentation/cascades/best_practices/uiguidelines/

Windows Phone Design Principles can be seen here:http://dev.windowsphone.com/en-us/design

As Apple very explicitly commands: “Don’t use system-defined buttons & icons to mean something else.”

iOS Example: Elements

26

Table-view Element iOS 6 iOS 7

Checkmark

Disclosure indicator

Detail Disclosure button

Row reorder

Row insert

Delete button control

Delete button

27

iOS Example: Table Cells

iOS 6

iOS 7

28

iOS Example: Buttons

iOS 6

iOS 7

29

Tip: Avoid the unconventional

The Lesson• Our designer had the idea to save space by utilizing a horizontal

format for scheduling• Client opted for a more conservative approach more consistent

with the existing UI, this was deemed too confusing

• Client ultimately chose to integrate in-app appointment scheduling with Native iOS Calendar

30

Avoid the unconventional: eBay (product view screen)

Why?

31

The Propelics Approach: Speak the Language

Using established paradigms helps make a mobile interface seem familiar, friendly and easy to understand.

3. Treat Objects Like Objects

33

3. Treat Object like Objects

iOS 6

iOS 7

Example: iOS Picker WheelWhile we’ve seen a maturation of mobile UI Design, this doesn’t mean we’ve stopped treating on-screen elements as objects.

We’ve simply become more sophisticated about the execution.

34

iOS Example: Email – iOS 6

Design• Buttons with borders• Chrome framing

Interaction• Swipe to delete Email (email remains fixed)

35

iOS Example: Email – iOS 7

Information Delivery• Number replaced by >>• Swipe R to L for Delete and More (email animates)

Design• Bigger inline buttons• Button borders removed (Done, Back)• Better integration of top Nav Bar, Status Bar

36

iOS Example: Email

iOS 6

iOS 7

37

iOS Example: Down-swipe Refresh Paradigm

38

3rd Party Example: YouTube

Interaction• Screen as object

Downswipe from video scales entire screen, revealing previous screen ‘behind’ it (vid keeps playing in corner)

• Upswipe scales it back up.

• Cool, but purpose?Lets user watch a video while searching, surfing for other videos…

39

3rd Party Example: CNN

Interaction• Earlier versions used horizontal swipe

for sections, vertical swipe for articles• CNN simplified the user-interaction by

increasing the consistency

section-swipe article-swipe iOS 6

40

The Propelics Approach: Simple = Intuitive

The challenge:Create an interface that would enable the user to perform complex interest calculations instantly that would also be immediately intuitive

The solution:Two rotating dials elegantly replaced several Excel spreadsheets of data!

These dials are instantly familiar and utilize the multi-touch capabilities of the iOS interface.

General Tip:Use interactive graphics in lieu of chrome, gradients, etc. to create visual interest

Wherever possible, use direct interactions over buttons

4. Push Interactivity Forward

42

4. Push Interactivity Forward

iOS Example: Email• Number replaced by >>• Swipe R to L for Delete and More (email animates)• Move options included in More

Information Delivery• iOS 6: user must view email to access add'l features

iOS 6 iOS

7

43

iOS Example: Control Center – iOS 7

Interaction• Finally! An easy way to get to Bluetooth• User swipes-up from bottom of screen

(this leaves a swingboard up-swipe gesture free)

44

Global Search — iOS 6

Interaction• User must swipe back to reach search screen

(or tap home button, then swipe)

45

Global Search — iOS 7

Interaction• Search now accessible from any springboard screen • 1st of 2 top-pulldown options• User down-swipes anywhere below Status Bar

46

iOS Example: Calendar (month) – iOS 6

Interaction• Segmented button to switch views• Confusing Inbox button (download?)• User must tap month to month

Information Delivery• No year view• Copious chrome

47

iOS Example: Calendar (month) – iOS 7

Interaction• Calendar as interactive object (tap into week, day views)• Consistent animated feedback on "Today" tap (highlight bounce)

Information Delivery• Relevant week still visible• Inbox icon replaced by "Inbox"• List View under Search icon (but no add new)

(both functions added back in iOS 7.1)• Year view

48

iOS Example: Calendar

iOS 6

iOS 7

49

3rd Party Example: eBay

iOS 6

iOS 7

50

The Propelics Approach: Forward UI = Ease of Use

The challenge:Create an iOS interface that saves users (and the company) time entering product data for inventory cycle counts.

The solution:This app better accommodated the way users actually interacted with the data by providing a SKU-first approach, using the device camera to let users scan package SKUs to make data entry as effortless as possible.

General Tip:Think about ways device-specific functions (e.g. camera, accelerometer, multi-touch) can be used to simplify interactions.

5. Create Space

52

5. Create Space

3rd Party Example: yerdle• Conceal elements when not in use

53

iOS Example: Safari

Native iOS 7 Safari both conceals and resizes interative elements to free-up space.

54

3rd Party Example: Slide-in Navigation

Interaction• Best to reinforce slide behavior

with a redundant nav bar button

55

The many faces of Facebook

56

The many faces of Facebook

57

The Propelics Approach: Saving Space

Lessons• Expandable Spaces• Economizing the UI

(history implied by thin lines)

58

The Propelics Approach: Creating Space

• When functionality relates to specific table cell items, consider using sliding cells that reveal a set of tools underneath.

• In this example table cells slide horizontally and expand vertically to reveal a panel containing additional options and info.

59

The Propelics Approach: Taming a Complex UI

• Here, we combine sliding panels and table cells with downard-expanding panels to create almost unlimited real estate without overwhelming the user.

(bonus!)

6. Ground the User

61

6. Ground the User

• ‘Sticky’ headers help ground the user while scrolling.

62

3rd Party Example: CNN – Section level

• Current section made more obvious• Tip: don’t break up navigational

elements with content

iOS 6

iOS 7

63

3rd Party Example: CNN – Article level

• Navigation united with labels• Labels added to help ground the

user (“1 of 26”)• Content separated from image• Fonts cleaner, more readable

iOS 6

iOS 7

64

Cross-Platform Design

• Designing across multiple devices is difficult and labor-intensive, requiring screen to screen customization of the design for each device (plus one more for mobile web)

iOS Android Mobile Web

1. Keep it Simple2. Keep it Familiar & Consistent 3. Treat Objects like Objects

4. Push Interactivity Forward 5. Create Space 6. Ground the User

This change does not happen overnight:

Begin with a single App. Set the tone for UX for the Enterprise.Measure Success & Iterate.Capture Best Practices.Develop Competency.

Conceptualization & Planning Approach

Business Drivers

Market Opportunity

Envisioned mobile

ScenariosHigh Level

Requirements

Step I: Benchmarking & Requirements

Step II: Visualization, Readiness & Roadmapping

Step III: Planning andBudgeting

Build & Deploy

Scope Finalized

Competitive Analysis

App Prototype

App Roadmap

OngoingSupportTechnical

Approach

Development Approach, Budgeting,

&Release Plan

Customer Feedback

Step IV: App Creation

Propelics Kickstarts

68

Special Offer

Free 1 Hour Mobile Advisory

Call

info@propelics.com

888-405-2820

Mobile App

Roadmap

Mobile COE

Kickstart

Mobile App Rapid Prototypin

g

IT Readiness for Mobile Kickstart

Prototype Factory

Mobile App

Scoping &

PlanningKickstart

Thank You

70

Designing for Mobile Web

Interaction• Mobile site keeps left sliding panel

(in lieu of Tab Bar)• Button-triggered only (gesture

conflicts with iOS 7 Browser swipe• Sort replaces right sliding panel

• Tapping News Feed header reveals Sort in App