Developing the UI
Designing to Meet User Needs
The user interface is the most important aspect of your application. It can either enhance or ruin the user experience, depending on how it's implemented. As I started designing the UI for this application, I kept several things in mind:
- The purpose of the application
- Where a user would be interacting with the Pocket PC
- How a user might interact with the Pocket PC
- The reality that many users would be first-time PDA users
- Real-world experience with using Pocket PCs
First of all, the Invisible Ideas application is meant to be a passive experience. A user wanders around several parks and has content presented to him. He doesn't make a conscious decision to seek the content. Based on this, I knew there needed to be a minimal amount of user interaction with the application. This translates to only a few menu buttons for the UI; the majority of the application is artist content.
Next, users who walk outside with these Pocket PCs shouldn't be distracted by any unnecessary information on the screen. The user wears headphones to hear the artist's content and any instructions, allowing them to look at and enjoy their surroundings. Also, since the participants use the Pocket PCs outside, the UI needs to have high contrast shapes and colors so it is easy to view when in bright sunlight.
I had to keep in mind the users' experience levels with Pocket PCs; some might personally own a PDA of some type while others would have no idea how to approach this new device. Because of the mixed experience levels, I needed to create a UI which required only minimal screen interaction with clear and concise instructions.
Finally, I've learned a lot about using Pocket PCs and developing Macromedia Flash content for Pocket PCs from my previous successes (and failures). For Pocket PCs, full-screen Macromedia Flash applications are the way to go. Here's why:
- They provide the best user experience.
- The device becomes the delivery mechanism for your application.
- You can easily distribute your application and know it will look the same on any Pocket PC device.
- They're easy to create.
If you're interested in learning more about developing content
for the Pocket PC platform, visit
the Pocket PC area of the DevNet Mobile and Devices Development Center.
Take a look at Standalone
Macromedia Flash Player 6 for Pocket PC 2002 for more information
about creating full-screen Macromedia Flash applications.
Using Your Thumbs
When developing Macromedia Flash content for non-PC devices, it's important to understanding the various input methods available to the user and how to use them effectively. Pocket PC devices have a "touch screen", which basically means the user can interact with the device by pressing different parts of the screen. The most common method for this functionality is to use a "stylus"—this is usually a small plastic stick which resembles a pen.
Knowing that different users would check the Pocket PCs in and out daily outside and would be using them outside, it seemed highly likely that someone might lose a stylus. How effective would it be if you're using the application and you don't have the stylus? Well I decided that for this application the user wouldn't even need to use a stylus, instead users would control the UI by using their thumbs on the screen. Nita Sturiale created the initial UI layout concept which I tweaked to create the navigation.
Determining the best way to implement this solution took lots of testing, trial and error, and feedback from others. The end result of this research is the final UI which we used for the Invisible Ideas application. Take a look at the "Walk Screen" in the sample version of the Invisible Ideas application to see what I'm talking about:
Figure 2. Invisible Ideas walk screen
Notice how we put all navigation along the left and right sides of the screen. Also, see how the buttons correspond to the relative angle of the left and right thumbs on each side. We did this intentionally to let users easily interact with the application without having to use a stylus.
If you're not used to designing and developing Macromedia Flash content for Pocket PCs, the idea of using your fingers to interact with an application might be new to you. That's the great thing about Macromedia Flash: It's available on a wide variety of platforms and each of them offers various means for user interaction.
Testing and Tweaking
Before we integrated the GPS functionality with the Macromedia Flash application, we needed to make sure the UI we had agreed upon was the best solution. Without a properly working UI, users wouldn't be able to appreciate the application.
To ensure user success, we tested the UI both indoors and outdoors on Pocket PC devices and noted what each person felt should be changed. Because there wasn't any real content for each section yet, we used some placeholder text to assist us. After making minor tweaks and refinements, we ended up with the final UI.
Creating the Shell
The "Shell" refers to the overall UI, which encompasses both the navigation, look, and feel. We wanted the look and feel to be simple and not to distract users from the artist content. We achieved this by deciding on predominant colors for the UI and by selecting complementary colors for the navigation buttons and the artist content.
Once we completed the UI testing phase, we took the UI shell and began adding functionality to the core application. This is where it gets interesting for developers.
Submit feedback on our tutorials, articles, and sample applications.
