User Experience

Developers, UX Is Your Business Too!

My first article on UXMag.com has been posted! The article is a general overview of some of the basic things that developers can do to improve the user experience of their applications. http://uxmag.com/technology/developers-ux-is-your-business-too

Working with a great team of interaction and visual designers, I have learned a lot in the field of UX design. I also know that as the programmer, I need to give the same attention to the application’s UX. Love to hear your feedback on it.

D2WC Short Recap & Slides

Designer / Developer Workflow Conference

I am a little late in getting around to writing about the second Designer/Developer Workflow Conference (aka D2WC) in Kansas City, Mo. This is the second time I had the pleasure of speaking here. This year’s topic was on Designing Great Mobile Apps. This was an expanded version of the talk I gave at 360|Flex. I had a wonderful time presenting it, and enjoyed all the follow up conversations.

The conference was fantastic! All the sessions I attended were well done and informative. In many cases I had to make hard choices between sessions. I only hope the recordings turn out. It was great to have some wonderful chats with the attendees.

I want to thank Dee Sadler for hosting yet another great event, and look forward to next year’s (where ever it maybe).

For a deeper write up on the conference, take a moment at read Chad Udell’s post (who I also enjoyed his preso at the conference) and Mark DuBois’ as well.

Designing Great Mobile Apps

I had the extreme pleasure of speaking at the recent 360|Flex Denver conference. The conference was incredibly well done, John, Nicole, and their assistants did a fantastic job!

Besides working on the mobile apps for the show ( we are still trying to figure out the session survey upload issues), I presented on “Designing Great Mobile Apps” on Tuesday afternoon. I had a lot of fun giving the presentation, even with two Adobe evangelists and one Adobe product manager in attendance (and the great Dee Sadler as well)…

I hope these slides are useful, the session was recorded by the folks at ZaaLabs, so I will let you know when it is ready. Please feel free to ping with questions or comments.

Now go build something!

[Update]

If you are interested in some resources on mobile design I would also suggest they following books:

Integrating maps into your mobile application

For many mobile applications, having some form a location-based capability is a requirement. This article will show how you can add a mapping solution to your mobile app. Most of the major map providers (Google, Yahoo, MapQuest, and Microsoft) provide ActionScript solutions that you can easily incorporate into project. Unfortunately, none of the currently available are designed for touch.

Recently, I developed the attendee guide for the recent 360|Flex East conference, and needed to add a map of the conference location, along with nearby restaurants. The application was being developed using Flash Professional CS5 (with AIR for Android extension), as the Flex 4.5 mobile framework was not yet available. My first attempt was to use the existing swc from Google. I had used their APIs before, and was familiar with the setup.

It took almost no effort to integrate the latest swc and have a working Google Map in my AIR for Android application. But there were issues to deal with…

The SWC version

 

One of the first issues I encountered was the default map controls were not optimized for touch. I had a feeling that this would be the case. Also the initialization time for the component was extremely long (30 seconds or more). I decided to address the load time first, since if I couldn’t bring up the map quickly, I would need to find a different solution. Looking at the code revealed no clues as to where I might be able to streamline the initialization. One of the issues of the long load time was there was no feedback given to the user while the component performed its initialization. Once the component was added to the stage, it assumed the top most layer and you could not overlay any elements (like a loading spinner). The screen would just show a grey rectangle where the map would be. Not the best user experience.

Since there was nothing I could do while the map did it’s thing, I decided to see if adding something before the map was actually loaded might give enough feedback to the user to make the experience acceptable. I knew from my years of prototyping that this type of solution just might do the trick. So I added a standard spinner and some loading text to the frame before the map, and a simple 5-second timer. I demonstrated each version around the office, and confirmed that folks thought the map did load faster on the version with the loading screen. In Apple’s Interface Guidelines, it refers to this illusion when talking about the splash screen.

Loading Animation

So, with the loading distraction in place, I could now address the touch-ability of the default map controls. Typically there are both pan controls and zoom controls to interact with. Since users could directly pan the map by dragging, I did not need to create a touch-friendly version of that control. I did still need to address the ability to change the scale of the map.

Unfortunately, here is where I ran into an actual hardware issue. At the time I was developing the application on the Google Nexus One (one of the few devices running FroYo, a requirement for AIR for Android), but there is a known issue with Multitouch on that device. This meant that a pinch and zoom gesture would be problematic. I needed to find a different solution to allow the user to change the scale of the map.

I created touch-friendly zoom in and zoom out controls and added them to the screen once the map finally loaded. Now I had a basic functioning map in my AIR for Android application and had it running on a device.

Google Map - Completed swc version

Now I needed to add the markers for the restaurants and the conference venue to the map. Creating markers is a fairly straightforward process of converting my graphics into MovieClips, enabling them for Export for ActionScript, then adding a bit of code to properly place them on the map. I manually geocoded (Update: Thanks to Randy Troppmann for spotting I had the term reversed) the venues into their latitudes and longitudes, so I did not need to look up that static information every time the map was accessed. The next test was to see how the info-windows would function. What good is seeing the marker for a bar if you can’t see the address?

This is where I hit the proverbial brick wall. The info window would appear, but the controls were far from usable on a touch device. Despite my best efforts, I could not modify the info window enough to make the controls usable on a mobile device.

So now what?

I decided to investigate using a new feature in AIR for Android called StageWebView. A little background on StageWebView; this is a new API that allows AIR developers to embed HTML content into their mobile applications and render it using the platform’s native rendering engine.

I removed the Google Map SWC from my project and added the following code:

var webView:StageWebView = new StageWebStage();
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 100, stage.stageWidth, stage.stageHeight);
webView.loadURL(http://map.google.com);
addChild(webView);

I recompiled the project and loaded it onto my mobile device, and a touch-friendly Google Map was displayed.

The load times were acceptable (I still kept my fake pre-loader, as there was a bit of load time ). I had touch-friendly zoom controls and scrolling. With this technical proof of concept validated, I quickly wrote a custom web page to house my map and markers.

Completed HTML version

I was still unsure how the info-windows would appear. To my pleasant surprise, the info-windows were quite touch-friendly . They were not as nice as the native elements, but certainly more usable that the ones in the SWC’s.

Info Window

So, now I have a mobile friendly map solution in my AIR for Android application. Hopefully this solution will work for you when you need to add a map to your mobile application.

Sample HTML map.

Creating Lightbox Galleries with Flash Catalyst

One of the more popular uses of Flash Catalyst by designers is to create rich and engaging portfolios. However, many can quickly become frustrated as they try to convert their visual designs into the world of components. In this tutorial I will show the how to quickly build a “lightbox”-like gallery.

Here is the basic look of our final application.

and with an image being displayed

The first step is to convert each of the six thumbnails into a button. Select each thumbnail and either use the Heads Up Display (HUD) or the contextual menu to transform it into a button. We are not going to add any interactions to these buttons yet, but now is the best time to rename each of the buttons in the library. Keeping your assets well named and organized is one of the best workflow tips that a team can have. I named each button Photo_1, Photo_2, and so on. Note: You cannot have spaces in the name.

Now let’s turn our attention to the overlays. Many first time users of Flash Catalyst would take the approach of creating a new page for each full size image and then link each button to that specific page. This solution will work, but you will quickly discover that Flash Catalyst only allows a maximum of 20 pages/states. If you have a large portfolio, you quickly will hit this limitation.

The solution within Flash Catalyst is to create what is known as a “custom component”. By encapsulating a portion of project within a custom component, we can usually avoid hitting the 20-page limit. It also allows us to keep the project in a more manageable state.
We are going to apply the same idea that we would have done by placing each photo on a separate page in main application, but now we are going to do it within the context of a custom component.

On main page, let’s add a basic rectangle using Flash Catalyst’s drawing tools. This rectangle will serve as our dimming effect. Set the width and height to match the applications (800×600). Remove the rectangle’s stroke and change the fill to black. Then adjust the opacity of the mask to 50%. All of these can be set using the Property Panel.

Now let’s add the white frame that the photo will sit on. Again, use the basic rectangle tool to draw. The photos are 640×480, so make the rectangle 680×520 pixels and then center the white rectangle on the artboard. Next place the large version of the photo that matches the first photo button, and align it to the center of the artboard. The final step for this template is to add the close button in the upper right of the white frame. Select the close button graphic and convert it to a button using the HUD.

Now select just the mask, the white frame, the photo and the close button. Using either the HUD or the contextual menu, “Convert to Custom Component”.

In the library panel, rename this component to “LightboxComponent”.

Now we can add the individual photos within this component. Double click the newly created component, and then use the Duplicate State button on the Pages/States panel.

Rename the first state to “Off” and the second state to “Photo_1”. With the elements now duplicated, we can delete them from the Off state. Select the Photo_1 State. Now let’s add the interaction to the close button. Set the interaction type to On Click, and choose the Off state as the target.

With this interaction added, you can keep duplicating the photo states as needed.  Since the portfolio only has 6 images, only 5 more states are needed. Rename each of the states to match the names of the buttons, as this will make connecting the interactions so much easier in a moment.

With the all the full sized images properly inserted, we can now add the interactions to each of the thumbnails. Using the breadcrumbs, navigate to the top level of the application. Select a thumbnail, and then using the interaction’s panel, add an On Click interaction. From Choose State select the proper state within the Lightbox component. Finally, set the “When in any state” to Off. That last setting keeps the thumbnails from working while an image is being shown.

With that our basic Lightbox style portfolio is done. You can take this further by adding transitions within the custom component.

Download the fxp.

Adobe MAX session online!

My session, Creating Compelling Mobile User Experiences, is now available for viewing on tv.adobe.com. The session focused on introducing prototyping into your mobile development and how it can help your design and development process. I also went into some of the common issues the people encounter as they transition from developing for the desktop to mobile.

Here is the session description from conference:

Explore the role of prototyping in designing and developing compelling mobile applications. We’ll examine the forms that prototypes can take (from paper prototypes to rich, interactive simulations), their advantages and costs, and how Adobe tools can be used to create them. Then we’ll walk through creating a user interface for a mobile application using Adobe Illustrator, Photoshop, Flash Professional, Flash Catalyst, and Flash Builder. This presentation also covers best practices for UX, as well as developer-focused tips and tricks.

The slides are supposed to with the recording, but I have uploaded them to slideshare.net. I had a blast presenting it!

Speaking at Adobe MAX!

I have been accepted to speak at this year’s Adobe MAX conference in Los Angeles. The session is titled “Creating Compelling Mobile User Experiences: What You Need to Know” on Monday afternoon at 5pm. I did not blog about the session earlier because the session filled up. Well, the powers that be moved the session to a larger room, so there are now seats available!

The talk is going to focus on how to use prototyping as part of your workflow to help discover issues when developing mobile applications. I will be giving examples of how prototyping resolved various design challenges when creating mobile apps.

I hope it will be an informative session. The session will be recorded and on Adobe TV sometime after the show. I will post that information once I know.

On Tuesday, I will be presenting at the FiTC unconference about the process of creating the Adobe MAX unconference application. This will be a more code level type of talk. Hope to see you there! If you have an Android device (running Froyo), you can down the app from the Android Market.

Databinding for Designers

Quite often a prototype that you are quickly building needs just a touch of realism. This recently happened to me while building a sample web application. The app followed standard login pattern, but I knew that having a placeholder <username> onscreen once the user had signed in might bother the client as they walked through the prototype. I know some will say, “Can you just explain that it is just a placeholder?” Maybe, but I have had experiences in the past where the simplest things (like this) have tripped up the client and spent an entire meeting trying to move past it.

Prototype UI without databinding

So, to avoid this issue, I’m going to show you how to add just a few lines of code to your Flash Catalyst project and build a more realistic prototype.

Here is the start of the original Flash Catalyst project. A few elements converted into buttons, and text inputs. The entire project is 3 scenes. You can download the project here.

If you purchased one of the Creative Suites you should have Flash Builder. If not, you can download a trial from Adobe.com.

Launch Flash Builder, then go to File>Input FXP.

Flex Project Import Dialog

You will be presented with a dialog that gives you two choices; pick File, then locate the DataBinding.fxp file.

Import Flex Project Dialog 2

The settings on the next dialog can be left alone, and just click Finish.

Once the Catalyst project has been imported, you will see your project in the Package Explorer on the left.

Flex Package Explorer

Open the project folder if not already open, then navigate until you find Main.mxml. This is your main file for the project and the one we will be editing. Double-click this file, and the code window will automatically open for you.

I am sure to a designer, this entire markup might be unnerving. But we only need to make a few changes. We need to locate the markup for the user in put text input.

<s:TextInput skinClass="components.userNameTextInput"
x="526" y="72" d:userLabel="User Name Input"/>

and add

id=”usernameTextInput”

It should now look like:

<s:TextInput skinClass="components.userNameTextInput"
x="526" y="72" d:userLabel="User Name Input" id="userNameTextInput"/>

This gives the element a unique identifier that we will be able to reference later.

Now, we need to locate the text component that displays the <username> text once the user has signed in.

<s:RichText color="#ffffff" fontFamily="Myriad Pro Semibold" fontSize="12" kerning="off"
lineHeight="350%" d:userLabel="&lt;username&gt;" whiteSpaceCollapse="preserve"
x="605" y="25" visible.SignInForm="false">

Here we can attach the linkage (or data binding) between the username input and text label.

One of the features that the Flex framework offers is databinding – allowing two components to share values between them.

To this component we need to insert the following:

text. Home={usernameTextInput}>

The markup should now look like:

<s:RichText color="#ffffff" fontFamily="Myriad Pro Semibold" fontSize="12" kerning="off"
lineHeight="350%" d:userLabel="&lt;username&gt;" whiteSpaceCollapse="preserve"
x="605" y="25" visible="false" visible.Home="true" id="richtext1" 
text.Home="{userNameTextInput.text}">

Let’s break down exactly what we added. First is the Text.Home attribute. This uses the revised state system in Flex 4. It says that text attribute in the “home” state is going to have a specific value. This allows the same component to have different attributes in different states. The next portion of the statement is establishing the actual databinding. This is done by the addition of the { }. The item surrounded by the { } will be automatically replaced by the actual value.

So here is where we will use that ID we added to the text input. Between the curly braces, we place the reference to the text inputs text value usernameTextInput.text.

That’s it!

Run this project and you should see the username you entered on the signin screen appear on the final screen. By adding two little items to the markup, we have added a touch of realism to our prototype.

One last touch up

Now the real application would contact some server, validate the user, and return the response, then display the proper page. But, this is a prototype and we can fake that part.

There is one more thing we might want to fix. If you noticed, the password field displays its unmasked contents when you transition form the signin screen to the home screen. Again, this is a simple fix. Locate this component:

<s:TextInput skinClass="components.PasswordTextInput"
x="526" y="127" d:userLabel="Password Input" displayAsPassword.SignInForm="true"/>

and change the

displayAsPassword.SignInForm attribute from
displayAsPassword.SignInForm="true"

to simply

displayAsPassword ="true"

Now this component will always use password masking in any state, not just in the SignInForm state.

A more realistic prototype

I hope this simple tutorial has shown you that a little time using Flash Builder can produce a more realistic prototype.

Speaking at Web 2.0 Expo San Francisco!

It looks like I will be speaking at the Web 2.0 Expo in San Francisco. My talk is entitled “Prototyping for Richer User Experiences“. Here is the description of the talk

Today’s web and mobile devices are full of examples of great user experiences. But what is the key to those experiences? Is it using Flash? AJAX? Silverlight? Who knows? The true key to the success of those projects is that they first were prototyped. By building prototypes of a project, designers and developers are “able to explore strange new ideas and to boldly go where no project has gone before”.
As Todd Zaki Wafel wrote, “Prototyping is a great way to communicate the intent of a design both clearly and effectively. Prototypes help you to flesh out design ideas, test assumptions, and gather real-time feedback from users.” I would add that equally important, prototyping can help you avoid costly mistakes in your project by discovering issues early enough to correct them.
This talk will introduce you to the concepts and roles of prototyping within your workflow. It will examine the various forms that prototyping can take (from paper prototypes to rich, interactive simulations), their advantages and costs, and explore some popular solutions used in creating them.
Now to start working on the slide deck!

Design tips for creating mobile RIAs

Dave Zuverink from Adobe has written a great article on Design tips for creating mobile RIAs. I can tell you from the recent 360|Flex conference the interest is running sky high.

The article explores what a mobile RIA is and why you should build one. It then provide several tips for making your mobile RIA a compelling experience for your users. If you are considering developing for the mobile space, this article is a great resource.