Friday, January 9, 2009

Deconstructing: Financial Services Sample Application

The purpose of this kind of post is to analyze the user experience presented in NUI demo videos. I will keep in mind that videos do not show the entire experience. The goal is to pick out what seems to work well and what doesn't, then figure out what might be better for future applications.

Application: Financial Services Sample Application
Author: Razorfish

Microsoft Surface Financial Services Application - Razorfish Demo from razorfish - emerging experiences on Vimeo.

Continue below for feature analysis...

Feature:Drop coins to display marketing facts
Time:0:03 - 0:13
Good:Serves as an attract mode, prepares user for interacting with the Surface using real objects
Bad:If there are no coins available, this interaction is not possible. The only clue that the user can do that is background text "Drop a coin."
Suggestion:Provide visual feedback from finger and blob contacts as well as coins. Provide a "ghost coin" visual that prompts the user to put a coin down rather than textual instructions. Upon further review, this idea is already implemented, but really hard to see in this video. There are bubbles that pop-up and say "Place coin" (I think.) After a short time the bubbles pop and appear somewhere else. Below are screen captures from a few of the 20 frames or so that show the coin bubbles.

Feature:Select tasks by placing a products or services token then dragging options to the center circle
Good:Consolidating multiple options into a removable visual component keeps the UI free of menus and clutter
Bad:Can the application still work if the tokens get lost? In an unguided public-facing application, this may be an issue.
Suggestion:Consider an alternative way to access the product and services items using just touch, secure the tokens from leaving the Surface, or have a bunch of extra tokens. Perhaps make the tokens fridge magnets or something that customer are allowed to take.

Feature:Drag products and services onto activity wheel. Wheel lets you select from chosen services. Tap on a service on the wheel to remove it.
Time:0:19 - 0:28, 0:53-0:55
Good:Only having a few products/services in the wheel simplifies the user choices. The animations are very good: highlighting the wheel when the user is dragging indicates the user can drop the service and it will stick. There is "life" in the wheel as it bounces and the tasks move around if the user has not touched anything for a while. The physics of the repeating list box snapping to an item while scrolling are well developed.
Bad:Part of the program flow seems awkward -- an unnecessary level of indirection. The number of choices goes from many (the tags on the tokens) to few (the selected services), which feels like it goes against the scaffolding principal of progressive disclosure. If the wheel was used for directly comparing products (like phones or cars), it might make more sense to narrow the selection down, but it seems the wheel is used as a list of activities.

Tapping on the wheel services to remove them is not obvious. That gesture is more likely to happen accidentally while exploring the application. It seems like dragging them off would be the appropriate thing to do, since dragging them on put them there in the first place. (That may be an option but is not shown.)
Suggestion:I'd like to see other options, maybe expanding the token tabs when selected.

Feature:Zooming the wheel from activity selection to activity cards
Good:Zooming gets everything irrelevant out of the way and focuses attention on the activity.
Bad:Using the zoom gesture at this point is very much a learned action and not natural. If the user doesn't do anything, hands pop up on the screen and show the interface can be zoomed. (This isn't in this video -- it's in another non-public video.) While it is good to guide the user to the next step, it would be much better if they do not need guided. Without the hands, how would a new user figure out this action? There is no perceived affordance for zooming the wheel. Similarly, zooming out is accomplished by the pinch gesture or by double tapping the outside of the wheel, which is not obvious.
Suggestion:Keep the method of clearing irrelevant UI elements, but design the interface so the user can clearly and easily understand that there is a path and how to get there (and back.) Maybe it would be better if the user could select tasks from the scrolling task list the same way the application launcher works. It would at least be a more familiar action than waiting for ghost hands to show you what to do. Putting a button on the wheel to go back would make it more obvious how to get back.

Feature:Activity cards, graphs, information
Time:0:30 - 1:05
Good:Appropriate use of scatter view and excellent graphics simplifying the complex banking concepts.

Feature:Dropping a flyer with byte tag as a shortcut to the contents of that flyer
Time:0:42 - 0:44
Good:Taking a shortcut to the content is a good idea.
Bad:The business value of this feature is unclear. If they got the flyer in the mail, it's unlikely they will drive to the bank to use the Surface to read similar content. If they grabbed it in the bank, what does Surface bring to the customer's experience?
Suggestion:Try to integrate the Surface application with the user's normal experience and make the value-added more clear. In this application, Surface seems to be an interactive flyer. There is some cool-factor that may get foot traffic in the door, but once that wears off, this application will sit in the corner. If Surface was used to actually apply for loans or otherwise integrate with the normal business of the bank, it will have a much higher value.

Feature:Interact with a map to view ATM and branch locations
Time:1:09 - 1:23
Good:The map interaction seems clean. There is a button at the bottom of the map to get back to the wheel, though the video shows her zooming out to the wheel. If that wasn't an accident, how does it tell the difference between zooming out the map and exiting the map? The pushpin selection and interaction look good. I like the spin when the information appears.
Bad:The same comments from above apply here regarding dragging the map icon to the wheel to enter the map. It would be more direct to just tap a button on the map icon. The wheel isn't involved in the map interaction so why drag to the wheel?
Suggestion:Allow more direct interaction to enter and exit different application modes. Provide opposite gestures to do opposite actions. Drag to enter and tap to exit (similar to the token products and services) is not intuitive.

Overall thoughts: The application is highly polished and looks professional. The interactions as designed have good feedback and animations. The selection of gestures and program flow could use some work to make it more intuitive. The feature design could use some more analysis to make it work better and have a higher value if it were deployed in the real world. It works well as a demo, though, discounting the wheel zoom gesture, which I rather dislike.


  1. Thanks for posting this!

    I started looking at videos with the same purpose. I was thinking of creating a rubric/chart so I could keep track of each application in a systematic way.

  2. That's a good idea. I was working on a post with more details about the important features or properties of NUI applications. (I'm waiting for approval to reference part of the Surface UX documentation, though, not sure if it's NDA.)

    If you have some ideas or work up a rubric I'd love to see them.