3 UX donkeys your users will love

  The more we work on CloudBees Feature Management.io, the more we find that in technological products that are built from two or more components (in our case SDK + dashboard), the experience can be daunting. SDK installation, onboarding process, the first text to make sure it all works... A lot to take in! With many other SDKs in his app, and several dashboards to use, we had to make sure our user (the developer) is not hitting any barriers when using CloudBees Feature Management.io. Obviously, it's a constant effort, but some of our findings might help you with your own product. Lets start with the big one:

1. Full screen popups

Popups are often considered as a bad UX practice, but in many cases are unavoidable. We tried looking at the reasons why people hate them so much:

• We just interrupted the user, so we are starting on wrong foot

• The content is usually constrained in a tiny white rectangle that optically looks even smaller on a dark background

• In a lot of cases, users have to do something that takes a bit of time. If you remember you interrupted them, now you're keeping them hostage

• Also annoying - “accidental click in the background” that closes the popup and requires the user to start again.

Add all of this to the fact that CloudBees Feature Management.io's users mostly use the product in times of crisis.. and the popup's is the last thing they want to see. We started ripping our popups apart to try and come up with something that is “not a popup” but still retains the idea that the user needs to finish this task before continuing. Our best result was a full-screen experience, where the content is centered on top of a “frosted” effect we applied to the background layer (we tastefully “borrowed” that from iOS7). The background is no longer a giant “cancel” button, its a canvas to work on. And boy did this change everything! We now love our popups and many of our users too. The cost: This is probably the most time-consuming change we did, as we needed to change all existing popups to match this new appearance. Took us about two days to implement (single developer).  

2. Small animations for guiding the user’s workflow

Although sounds like an overkill, animated UI helps users gain perspective of how the product is built and what are they supposed to do next. The level of animation is up to you, you can opt for a fold-out 3d effects with real time shading, which will certainly get you some “wows", but this a lot of work and is usually recommended for smaller apps. when you have less UI to deal with, you can spend more time perfecting it. In our case, CloudBees Feature Management.io is a medium-sized product - so we opted for something simple that requires minimal effort - slide-out effects. When the user is in the “empty” state of a panel and clicks something, the animation kicks in, showing what was opened and where is the focus right now, and the flow is much easier to understand. For our popups, we also made the background "blur" effect gradual, so it wont feel out-of-nowhere. The cost: This took us about 15 minutes to implement.  

3. Shortcut keys

Really, the easiest pony to add is some clear shortcut keys in strategic locations. We added “escape” to get out of popups of any kind. And since CloudBees Feature Management.io lets users search for functions in iOS apps, we kept similar shortcuts to Xcode for quickly finding/adding a hot-patch to a function. Here are some of the handier shortcuts we added:

• “~” or “§” will open the “add function” bar

• Added “just start typing” for popups (the first text box in each popup is in focus)

• Up/down keys to navigate inside lists

• “Esc" - close popups

• “Return” inside a list will close the list. another “Return” will “confirm" the popup

The cost: This took us about 1 hour to implement. the complicated part is the "up/down" arrow keys, tricky if you're lists are also custom-built.