Tara Calihman - July 01, 2014
VictorOps is a mobile-first company, so our mobile clients for iOS and Android are designed for constant daily use and are updated frequently. There are some challenges when designing software for a small screen, mobile device, without the seemingly unlimited resources of a desktop computer. Our mobile apps also have the need for constant network access so you can monitor your mission critical systems in real time.
In our mobile app, performance is a high priority. We wanted to minimize the lag time when you moved from one screen to another. The straightforward way to load a new screen, or “view”, in an iOS app is to load it from scratch and populate the contents right before the view appears on screen. When you leave that view, it is unloaded. This is great for conserving memory and resources, but requires that the view be reloaded each time you navigate to it.
Instead of that conventional approach, we load all the views during startup and keep them in memory all the time. The views that you aren’t looking at are just hidden. We show and hide different views when you navigate, so you see what you want to see immediately, without unnecessary delay.
Another performance decision we made was to use a persistent WebSocket rather than opening and closing a conventional network connection. We need to be able to handle many messages arriving in a short period of time, so this gave us the best performance. It’s tougher to handle network traffic that can spill in at any time like water from a hose, but once you work out the kinks of parsing that data, it works quite well.
When our app is in the background, we don’t read from the network, in order to save on the battery life of the iPhone or iPad. Users are notified of important events by push notifications, text messages, and/or emails. When the app is brought to the foreground, we refresh the status and get a new data dump from our server.
Studies have shown that apps using animation and subtle effects to enhance the user experience are more popular, because they are just more fun to use. Animation can reinforce to the user the relationship between views and give a sense of “space”.
The VictorOps mobile iOS app has 5 primary views, and you can just “swipe” left and right to see your data in different ways. As you swipe, you can see the current view slide off screen while the new screen slides on, using a nice animation effect to give a feeling for the different layers and spacing. Of course, since we preload all the views, you see the most current data animating onto the screen without delay.
Here is a code snippet showing how we slide a page off the screen after a swipe:
Subtle use of color can also enhance the user experience. Obviously some users are color blind so you shouldn’t rely too heavily on color, but even light and dark shading can be used to provide more information without cluttering the screen.
When a new item like an alert or chat message appears in the timeline, we color code the item with a bright orange color bar on each side. At a glance, you can see that new messages have appeared. We don’t stop there, however – we even animate the color! Over time the orange color bars slowly fade away so you can watch messages grow old. Through the use of color shades, we give you a sense of time without forcing you to read text and calculate this in your head.
Another way we use color shades is with our “engagement scores”. One of our main views is the People screen, where you can see all the other people on your team(s). We mark each person who is currently on-call with our classy and distinctive oak leaf icon. Other people are marked with a green circle to show how “engaged” they are, or how recently they interacted with the VictorOps system. A bright green dot indicates recent activity; the color fades to a lighter and lighter shade over time.
To change the brightness of the engagement icon, we just set the alpha value like this:
When you design an iOS app, you should set your goals up front and implement the code accordingly. For VictorOps, our goals were top-notch performance, and a nice clean user interface that conveys what you need to know right away without too many distractions. We achieved this by having persistent views that we show and hide, and subtle use of color. We also threw in some animation to make the entire experience more enjoyable. We hope you appreciate our attention to detail when using our app, and remember, history is written by the victors!