Collaborating to Improve Performance

A colleague recently asked me: “Can we influence coding decisions or technology investments with some amount of UX prioritization around performance?”

It’s a great question for UX designers because yes, performance can make or break a delightful customer experience. Here’s how our team built an app with great performance:

Our team sees the user experience as a shared responsibility. Of course, this includes having great performance.

When our team was first starting out, the UX team had a seat at the table to ensure that we chose a platform that would allow us to create a great user experience. Performance was absolutely part of that discussion and that’s continued as we’ve made other tech decisions.

We work very collaboratively. I review my designs with my other teammates frequently, often multiple times a day. The engineers have all sorts of questions about the save model, when things are cached, desired behavior when the app crashes, what to display while information is loading, etc. Then we’ll brainstorm and decide upon the right approach for a given situation, and I’ll document the decision for future reference.

I also make myself highly available to the engineers as they implement the UI. I’m often answering emails and chat messages to clarify things, such as what should happen in an unanticipated edge case. Or I’m sitting next to an engineer and we’re trying out a few different animation options to see what feels right on a device.

I’m a big believer in this type of collaboration: I find that it takes me much less time to create a spec that helps the engineers build out what I’m envisioning. On the engineering side, we have far fewer UX bugs which means we can spend more time charging ahead.

Having a highly collaborative team also allows us to solve problems more effectively. When it comes to creating better app performance, here are just a few of our design/engineering approaches:

  • Interaction workflow tweaks
  • Adding “loading” screens
  • Changing how we export assets
  • Changing save/cache state
  • Loading things in the background before they are needed
  • Moving user to a new screen and loading in info piece by piece
  • Various back-end improvements

And why stop at improving app performance?

Collaboration is our greatest tool for crafting delightful user experiences.

Native vs. Mobile Web, 1 year later

Remember how a year ago everyone was asking “Native or Mobile Web Apps*”? At the time, the pros/cons list looked kind of like this:

Native App: allows device specific strengths (GPS, camera, notifications, etc.) but you have to build a separate app for each device & deal with app store overhead

Mobile Web App: can build one thing that will work across many platforms and you don’t have to deal with app stores, but you lose some device-specific capabilities and there was no clear winner w/ dev frameworks

Since then, the debate has shifted. It’s now generally accepted that when it comes to building apps, native wins.

Here’s what’s changed:

  • The top mobile players have emerged: as people retire their feature phones, they’re upgrading to iPhone, Android, and Windows smartphones. This helps app developers to make safe bets on where to invest their resources, rather than anxiously trying to guess what’s coming next.
  • The “big 3” (Apple, Google, Microsoft) are training users to choose native apps. They all have a clear incentive to do so: when a user downloads an app, guess who makes a cut of the profits?
  • Native apps are widely recognized by users as creating a better user experience:
  • 1. UI elements fit with user’s expectations for the device (I’ve heard many Android users complain about Android apps that look like they were designed for iPhone. Non-tailored experience in mobile web are just as off-putting)

    2. They feel “faster”: native allows you to minimize delays caused by having to download images/content

    3. When users lose internet connection, they can continue with their native app experience in many cases

  • I also loved this point from the good folks at N/Ng:
  • Finally, let’s consider the differences between Nielsen’s Law for Internet bandwidth and Moore’s Law for computer power. Over the next decade, Internet bandwidth will likely become 57 times faster, while computers will become 100 times more powerful

    In other words, the relative advantage of running native code instead of downloading stuff over the Internet will be twice as big in 10 years. One more point in favor of mobile apps.

No one knows what the next 12 months will bring. But for the here and now, “native” wins.

*Throughout this article I am referring to apps, not mobile-optimized websites. It always makes sense to mobile-optimize your website!

The problem with mobile app "Pretenders"

So true:

The iPhone browser already has a back button

This is a great explanation of why mobile web apps shouldn’t simply try to emulate a native app:

Users of pretender apps get an experience that falls squarely in the uncanny valley — it looks like a native app, but something isn’t quite right. Perhaps it doesn’t respond as expected or it doesn’t quite follow the conventions of a native app. Often pretender apps have both of these problems and then some. They simply don’t feel “at home”.

Another problem which we’ve heard in usability: non-iPhone users are put-off when they encounter mobile websites that “look too much like an iPhone”. There are interaction problems: should the Android user tap the glossy button or the hard back button to move to the previous page? There are also visual design problems: when a page screams “designed for iPhone,” non-iPhone users feel like they’re being treated as second-class citizens. Not good, considering that many users consider their choice of phone to be a mode of self-expression.

Recommendation: Focus less on “I’ve fooled them all into thinking this is native!” and more on “This is a great user experience.” A few tips:

  • Keep it clean & quick to load (consider your use of images, animations, etc.)
  • Streamline key workflows: keep in mind that each time the user navigates to another page, they run the risk of encountering slow load times
  • Optimize layout & visual elements to be appropriate for a small screen size (look to native apps for best practices about font size, line height, tap area, etc.)
  • By default redirect users to the mobile-optimized version of your site, but include a link to the full version of the website

What's new in iOS 5

According to iEatApples.com,

Apple mentioned 10 major features out of the 200 features they’ve claimed to have added in this latest version of iOS5.

The site has compiled a list of 165 of those changes, and will continue to add new ones as they are found.

From what I’ve seen thus far, the features which will most impact our app design will be Reminders, Twitter integration, and possibly iCloud.

Customer Care in Mobile Apps

Some tips from Mashable about customer support in mobile apps:

  • When building an app, acknowledge that some aspect of “traditional care” (support agents, phone help, help documents) may still be needed and plan for them
  • Streamline the experience - app could be used to immediately transfer the users to the right agent or schedule a callback while giving the agent proper context
  • Notifications can be useful for informing users about outages and other problems before they encounter them and have a bad experience
  • Use the info that you know about users of the app (usage history, etc.) to tailor the support experience to them
  • Take advantage of unique mobile capabilities (touch, voice input) to help users find what they need faster