Guest post from Anders Larsson – Ed.
When designing and developing the BlackBerry® 10 UI and our native BlackBerry applications, one of the overall guiding principles has been flow. Most people have a gut feeling of what flow is in a mobile context. When designing our applications and UI framework, we needed a more concrete definition, so we broke it down into these four principles:
- Eliminate Barriers to Actions and Information
- Put the User in Control
- Provide Structure and Focus
- Give Compelling Feedback
By keeping these principles in mind when designing your application, you can create an astonishingly user-friendly flow. These principles have also been packaged in the Core UI components in Cascades™, and by using them in your app you will get a head start. In this third Cascades Beta released at BlackBerry Jam Americas 2012 in San Jose, we have reached a stage where the flow features have come together and are ready to be used. Also, since we are now showing you some of our own apps, you can see how we use the features.
Let’s look at each principle individually and find some examples where they’re used in the apps.
Eliminate Barriers to Actions and Information
This is about making the common workflow in your application fast and avoid unnecessary stops, re-navigations or modal states.
Example: The BlackBerry 10 context menu. There are a couple of different aspects of the context menu touching this principle. First of all, the context menu allows users to perform actions on list items, without having to do a drill down navigation. The user can quickly work through a list, deleting or performing actions on items, without having to navigate into each item individually. By using the multi select feature built into Cascades, you can also allow users to work even more effective. This is not rocket science, of course, but deserves to be mentioned. Taking advantage of the context menu could be a simple way to improve the workflow of your app.
Another aspect of the context menu that’s worth pointing out is that it’s non-modal. What does that mean? Well, when the context menu is open, you can still scroll and interact with the content. We chose this design to avoid unnecessary stops in the UI flow; for example, when invoking the context menu by mistake. The user can just keep on doing what they were doing and dismiss the menu with a gesture when appropriate.
When the context menu is opened in its compact state, you can still interact with the content. This avoids unnecessary modal states in the UI.
Put the user in control
This principle is about creating the sense that, as a user, you are interacting directly with the application, not through some intermediary tool or device. It’s like driving a car when you are an experienced driver. You stop paying attention to your steering wheel or the pedals and how your body is interacting with them — you simply drive your car to the place you want it to go. You are in direct control of the car. An app with a good flow should have the same feeling. If you have to look for buttons to push hoping they will perform your desired action, you are not in control.
Example: Using the navigation pane in Cascades, you automatically get peek actions for free. This is new in Beta 3 — it gives the user control. A left-to-right swipe when you have drilled down through the navigation pane will take you back to the previous page. But it’s not only a simple gesture; it is a continuous movement, which the user can pause or regret while it is still ongoing. It’s simple and available for free in Cascades, and gives the user a feeling of being in direct control rather than having to look for buttons that will initiate a navigation.
Content Peek is a sloppy way to navigate or peek back in the navigation history. It’s a continuous movement making the user feel in control.
Provide structure and focus
As applications are becoming more and more complex, this principle is getting increasingly important. Bad structure can make what could have been a great app extremely frustrating to use. Poor focus can cause your users to miss the most unique features in your app. By using the Core UI components, you get a lot for free, in terms of structure. TabbedPane, NavigationPane, and so on provide a shell for your app, and in terms of consistency, users will recognize the UI paradigm you are using.
Example: A great way to get a well-structured Cascades app is to use the tabbedPane wisely. With Beta 3 we have introduced the “back button peek.” This gesture reveals the sidebar from anywhere in a navigational flow, providing “shortcuts” to the entry points in your app (the “tabs”). When using a tabbed pane in your app, try to figure out which the main entry points in your apps are. Which are the main flows the user would want to switch between? Also note that the back button peek is continuous so the user can choose to do a small peek, just to see if something interesting has happened in a different tab. You would indicate that using splats.
Example: A simple example of focus that can be found in BlackBerry 10 is the camera app. When taking a picture in manual mode, all UI for settings just disappears from the screen, helping the user to focus on the most important thing – taking the picture.
Taking a picture in BlackBerry 10. All settings are hidden away in the “…” button in the lower right corner.
This is a very human principle. When we interact with something we want a reaction, and we want a sensible reaction that fits our interaction. We also expect the reaction to come in a timely manner so we can connect it to our interaction. By providing compelling feedback, an application developer can hide away unavoidable loading time, let the user know when doing something right or wrong, and make the application experience enjoyable and flowing in general. Also, an unexpected moment of charm baked in as feedback in your app can make your app go from “When I think of it, this is a pretty useful app” to “I freakin’ love this app!”
Example: Compelling feedback can also be used to let the user understand what’s going on and how to interact with the application. An example of that is the time warp feature in BlackBerry 10. When adjusting the timeline in a local area of a picture, the result of the operation is immediately fed back to the user. It’s a great example of compelling feedback, inviting the user to fine-tune the photos even more.
Example: Another example is the virtual keyboard in BlackBerry 10. The keyboard suggests words based on predictions, and when the user swipes the words upwards they nicely animate to the text field where they will end up. It’s a nice moment of charm and gives BlackBerry 10 a unique input experience.
The BlackBerry 10 virtual keyboard. When selecting a prediction using a gesture the text animates towards the text field.
These were a few examples of what flow means to us and how we use it in our own apps, as well as a few tips on how to incorporate them in your app. There are more examples and other flow features in Cascades that will be covered in upcoming blog posts, and I’m sure you may have some ideas yourself on how you achieve flow in your app. Good luck, and if you want to share your own flow learnings or want some tips, feel free to comment or drop me a line on Twitter®.