5 Considerations for Enterprise Mobile App User Experience


Published on

What do today's consumer mobile apps teach us about tomorrow's enterprise mobile apps?

When it comes to user experience, Enterprise applications are just beginning to catch up with those geared towards the consumer market. Thankfully, the “mobile maturity” of the general user, along with the dawn of the “mobile first” philosophy has helped hasten a new renaissance in Enterprise design. The ubiquitousness of mobile devices along with Apple’s new iOS 7 prove users now possess a profound understanding of mobile technology and interactions—one that represents a significant shift in how we organize, consume, and interact with information. Mobile design has advanced far beyond the kitsch and clunkiness of skeuomorphism and today treats the devices on their own terms, as a medium all their own.

The revolution in consumer App UX must not be lost on Enterprise mobile applications. No longer are users satisfied with an app that simply does the job. These days, an Enterprise app deserves to be as simple and intuitive as any other. Not only will a great interface increase productivity and boost morale by making your product a joy to use, it may in fact be the single most significant contributor to the success or failure of your Enterprise mobile strategy.

Come hear Steve Brykman from Propelics discuss recent UI/UX innovations in the consumer App space and how they apply to Enterprise applications. This webinar will discuss the top 5 user experience considerations your team should employ in 2014 to deliver great Enterprise mobile Apps.

By watching this webinar you will learn:

-How Apple's iOS 7 has changed UI/UX design in 2013 and where user experience is going in 2014 and beyond
-How this new design paradigm will impact your mobile applications - and Enterprise mobile strategy
-The top 5 user experience considerations for Enterprise mobile App design

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

5 Considerations for Enterprise Mobile App User Experience

  1. 1. Welcome. 5 Considerations for Enterprise Mobile App User Experience March 20th, 2014 We’ll start promptly at 1:02pm EDT! @propelic s
  2. 2. 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:
  3. 3. 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. 4. WHAT IS THE MOBILE RESEARCH COUNCIL WWW.MOBILERESEARCHCOUNCIL.C OM 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. 4 From Market Trends to Action at the Speed of Mobile Research. Advisory. Community.
  5. 5. 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.
  6. 6. 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
  7. 7. 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
  8. 8. Seriously lagging. When it comes to UI/UX, Consumer apps have about a 5-year head start over their Enterprise counterparts.
  9. 9. 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.
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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)
  14. 14. 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 UI http://techday.com/start-up/news/intel-smbs-burdened-by-aging-pcs/172487/
  15. 15. 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.
  16. 16. 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-oriented 2. Rather, they revolve around the organization and display of information 3. 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.
  17. 17. Top 5 UI/UX Lessons for Enterprise Apps
  18. 18. 1. Keep it Simple
  19. 19. 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 organization The #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. 20. 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. 21. 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. 22. 22 iOS Example: Weather iOS 6 iOS 7
  23. 23. 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.
  24. 24. 2. Keep it Familiar (and consistent)
  25. 25. 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/conceptu al/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.”
  26. 26. 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. 27. 27 iOS Example: Table Cells iOS 6 iOS 7
  28. 28. 28 iOS Example: Buttons iOS 6 iOS 7
  29. 29. 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. 30. 30 Avoid the unconventional: eBay (product view screen) Why?
  31. 31. 31 The Propelics Approach: Speak the Language Using established paradigms helps make a mobile interface seem familiar, friendly and easy to understand.
  32. 32. 3. Treat Objects Like Objects
  33. 33. 33 3. Treat Object like Objects iOS 6 iOS 7 Example: iOS Picker Wheel While 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. 34. 34 iOS Example: Email – iOS 6 Design • Buttons with borders • Chrome framing Interaction • Swipe to delete Email (email remains fixed)
  35. 35. 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. 36. 36 iOS Example: Email iOS 6 iOS 7
  37. 37. 37 iOS Example: Down-swipe Refresh Paradigm
  38. 38. 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. 39. 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. 40. 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
  41. 41. 4. Push Interactivity Forward
  42. 42. 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. 43. 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. 44. 44 Global Search — iOS 6 Interaction • User must swipe back to reach search screen (or tap home button, then swipe)
  45. 45. 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. 46. 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. 47. 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. 48. 48 iOS Example: Calendar iOS 6 iOS 7
  49. 49. 49 3rd Party Example: eBay iOS 6 iOS 7
  50. 50. 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.
  51. 51. 5. Create Space
  52. 52. 52 5. Create Space 3rd Party Example: yerdle • Conceal elements when not in use
  53. 53. 53 iOS Example: Safari Native iOS 7 Safari both conceals and resizes interative elements to free-up space.
  54. 54. 54 3rd Party Example: Slide-in Navigation Interaction • Best to reinforce slide behavior with a redundant nav bar button
  55. 55. 55 The many faces of Facebook
  56. 56. 56 The many faces of Facebook
  57. 57. 57 The Propelics Approach: Saving Space Lessons • Expandable Spaces • Economizing the UI (history implied by thin lines)
  58. 58. 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. 59. 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.
  60. 60. (bonus!) 6. Ground the User
  61. 61. 61 6. Ground the User • ‘Sticky’ headers help ground the user while scrolling.
  62. 62. 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. 63. 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. 64. 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
  65. 65. 1. Keep it Simple 2. Keep it Familiar & Consistent 3. Treat Objects like Objects 4. Push Interactivity Forward 5. Create Space 6. Ground the User
  66. 66. 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.
  67. 67. Conceptualization & Planning Approach Business Drivers Market Opportunity Envisioned mobile Scenarios High Level Requirements Step I: Benchmarking & Requirements Step II: Visualization, Readiness & Roadmapping Step III: Planning and Budgeting Build & Deploy Scope Finalized Competitive Analysis App Prototype App Roadmap Ongoing Support Technical Approach Development Approach, Budgeting, & Release Plan Customer Feedback Step IV: App Creation
  68. 68. 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 Prototyping IT Readiness for Mobile Kickstart Prototype Factory Mobile App Scoping & Planning Kickstart
  69. 69. Thank You
  70. 70. 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