Fire represents a huge leap forward in mobile UX (user experience). As a developer, you’ll want to design the best customer experience possible for this new platform. To help you achieve that, we’ve outlined the core design principles that will allow you to take advantage of Fire’s unique Dynamic Perspective features. The good news is that if you are an Android developer your app will work on Fire with little or no work, and as you will see, just a few modifications to your app’s UX will let it better take advantage of what the Fire SDK has to offer.
At the core of the Fire UX is the following principle: connect the real world to the digital world, with immersive experiences and rewarding moments. While it’s easy to dive into the deep end and use everything the Dynamic Perspective SDK and Firefly SDK have to offer, the real question you should be asking yourself is: “how will each Fire feature improve the user’s experience?”
Here are three best practices for designing with the Dynamic Perspective SDK.
Supporting One-Handed Shortcuts with Dynamic Perspective
One way users will interact with the UI elements in Fire-optimized apps is through one-handed shortcuts. You are probably already familiar with incorporating gestures into your UX designs, but what makes Fire unique is the one-handed shortcuts that are driven by a user’s physical interaction with the device. The unique head tracking capability tracks the position of the user’s head relative to the device and when combined with other sensor inputs enables the entire UI to respond to how the device is held, moved and where the user looks.
To help illustrate this, let’s look at the orientation of the device itself.
Here you can see we have the three axes you’ve come to expect in 3D space: x, y and z. By moving the phone along a particular axis the user is able to trigger a gesture. There are three main gestures the user will come to rely on.
A Peek is triggered when the user subtly rotates the phone around the Y-axis. By slightly angling the device, the perspective of the Dynamic Perspective UI shifts to reveal contextual content.
Here you can see on the home screen, the device is being held at the default orientation directly facing the user and the top status bar is hidden.
When the user angles the phone to the right, it enables the peek gesture, which will begin to display contextual information such as the top status.
It’s important to keep the following in mind when adding peek experiences to your own app:
- Show things that help the user in the moment. The best way to think of this is mouse-overs on desktop computers that reveal contextual tooltips.
- Reveal secondary information that the user may be looking for, but don’t ‘hide’ primary information on peek.
- Reward close inspection.
- Peek gestures work best in the primary panel.
Rotating the phone around the Y-axis will trigger a Tilt. While Peek is a subtle movement, Tilt is at the far end of the movement’s spectrum. Tilt is designed to pull open the left and right panels.
Tilting the phone to the far right on the home screen you will pull up the Left panel. Left panels are typically used for menus and navigation, such as in the below example from the Fire home screen:
For many, this will represent a totally new way of interacting with a digital device and its intention is to invoke a sense of playfulness and delight for the user. In addition to the left panel, there is a right panel, which we’ll talk about more in the next section. You can use a tilt gesture in the opposite direction, moving the right side of the phone towards you, to pull up the right panel. These gestures become intuitive for users since they are facsimiles of how we would interact with physical objects in the real world.
While it’s important to be playful in your design, it’s critical that you don’t make the user work too hard to understand your app’s UX. The key goal is to make the primary UI clean and visually easy to scan by distilling it down to only the essential information.
Working with Fire’s Panels
Fire apps consist of three different panels that help tie the entire experience together for the user. These are the Left Panel, Primary Panel and Right Panel. Let’s take a look at each one and how they work.
The primary panel is the main application space where most of the action takes place. Here you can see in the Maps app that we are presented with a standard Android View that displays the main UI of the App.
As we discussed in the previous section, the left panel contains quick navigation, refinement controls, sort controls, and other contextual controls. User actions on this panel change the view in the primary panel.
The left panel should contain your app’s actions that are not key to the primary interaction of the app. Core UX should always be contained within the primary panel.
The right panel helps users discover new things or perform essential tasks more quickly without leaving the current context.
The right panel is always contextual whereas the left panel is constant throughout the app. This means that the right panel can also be used for quick summaries, actions tied to what is being displayed on the primary view, or additional shortcut actions that wouldn’t make sense to be exposed in the left panel. The right panel is a good place to positively surprise the user with information that is delightful in the moment, but which they didn’t know to expect. For example, the Amazon MP3 app surfaces song lyrics in the right panel.
By taking advantage of these panels, you’ll also be integrated into the system-wide gesture events. A great place to start is by going through the phone’s default apps such as Email, Maps, Messaging and even the Silk Browser to see how they are setup.
Designing for the Home Carousel
The next important thing to also consider is how your app will look on the home screen carousel. Each app is represented in the carousel with two parts—an icon on top and a widget below the icon.
In the image above, the highlighted red area is your app icon and the area highlighted in green is the widget area. The widget allows you to expose content without needing the user to launch the app. Text and images can be presented in a grid or list.
The widget communicates with your app using an intent. When the user taps an item in the grid or list, the intent you defined for the item is sent. If you do not provide a widget for your app, the system displays a default widget that shows “Customers Also Bought” content related to your app.
Be creative with this space and use it to drive user engagement. You could use it to help users quickly launch your app. Or, use the space to expose a summary of past activity the user may be searching for again.
Now Is the Time to Submit Your Apps for Fire
Create immersive apps that respond to the way a customer holds, views and moves the phone. We have updated Appstore Developer Select, Amazon Mobile Ads API, and Amazon Testing Services with more incentives:
- Amazon Developer Select: Optimize your apps for Fire phone and get enhanced merchandising and 500,000 Amazon Coins incentives for your customers. Get the details here.
- Amazon Mobile Ads API: Developers earn $6 for every thousand interstitial ads displayed across any supported device in August and September (up to one million impressions per app per month) when they distribute their apps on Fire phones and send the first ad request from a qualified app. Get the details here.
- Amazon App Testing Service: Most android apps just work on Amazon devices. Test your app's compatibility in 90 seconds by dragging and dropping your Android APK into our testing tool. Sign up for a free developer account to test your app's look and feel on devices and get the results within 6 hours. Test your app now.
Now is the time to submit your apps and games! Apps that are submitted by July 18 and approved will be in the Amazon Appstore when Fire ships on July 25.
Fire Developer Resources:
Jesse Freeman (@jessefreeman)