What becomes difficult is explaining the concept that the phone represents a bus that is attuned to real locations and that each user has autonomous characters that are out in the world in real locations (but not real characters). Users who are familiar with digital games or a certain type of lateral thinking have no trouble understanding the nature of having independent and dependent representatives in real life locations. The difficulty is trying to explain this to new users to whom this concept is completely foreign.

We are currently trying a tutorial approach for new users (with some hand-holding) to walk them through the game the first time through. Tweaking copy here and there (to account for the fact that users simply skim over instructions) has had mixed results. Our next approach is to try it with graphical overlays over the interface to explain how things work without so many of those pesky words.

At the end of the day, I don’t think anything could beat a great info graphic that simplifies the experience even more. Time will tell.

I’m open to suggestions.

Is it fun?

It has been a guess and check process since I became involved in the project. That’s not to say that it isn’t progressing, because it most certainly is. The trouble is that it is difficult to measure fun. The methodology isn’t all that much different than it would be on a standard project.

• Speak to users;
• Come up with some wild idea which we presume would add to the fun-factor of those users;
• Implement;
• Conduct usability test (and fun testing?);
• Fix pitfalls, bugs, usability issues;
• Then do it all over again.

The problem comes in between the fixes and the iteration. Did we actually add any value to the game or just add complexity? It’s hard to tell on a small scale.

Maybe engagement is somehow correlated to fun. This was a hypothesis that I quickly learned would not work. My thinking was this: What is it that would make a user open thn app during their idle time? What would make the user go out of their way to stop their lives to open the app and engage? What would engage users enough to transcend their mobile experience, and explore the game through their browser through the web interface?

Solution for measurement: Notifications. We could test the quality of key events in the game by measuring the engagement based on notifications that are sent out about game occurrences that affect the user. Notifications of passive events that occur in the game while they are not using it will possibly increase the chance that they will be reminded of its existence. This is no measure of engagement or even desirability, but rather succumbing to an alert that demand attention. This type approach has two sides:

• Either the user opens the app upon receiving a notification and enjoys what they see;
• Or they become increasingly annoyed at the notifications because the experience tied to it is predictable and not satisfying.

Once again. It doesn’t solve the problem or measure the solution accurately until the app is truly fun.

Iterations and time will tell. Until then, it’s a race to iterate quickly with a guess and check philosophy where the guess is incredibly subjective to a small sample size. Once my experience in this domain grows, I will hopefully be able to make better educated guesses and ultimately come to solutions more effectively and efficiently.

For this guide I will be using Axure RP 6. This technique should work in previous versions to some extent since it uses basic interactions. Download a free trial if you don’t already have it.

Step 1: Make a primary navigation bar (as a master) using the Menu Item, table, or arranged static text.

Step 2: Place a Dynamic Panel the width of the page that generously extends across the navigation in every direction. Name it something meaningful like “MegaDrop”. Make sure it is layered on top of the navigation.

Step 3: Add a state to the Dynamic Panel for each primary navigation item and name them appropriately for easy reference.

Step 4: Enter the edit mode for the first state. Place an Image Map Region that fills the Dynamic Panel region. This Image Map Region will act as a sort of negative space since it will close the dropdown when the user moves their mouse away from the navigation area. With the Image Map Region selected, and the widget properties visible, go to the Interactions Tab (Ctrl + 2). Select OnMouseEnter and click Add Case… Select Hide Panel(s) under Dynamic Panels. Then select “MegaDrop” (or whatever you called it in Step 2) and hit OK. You can add an animation to make it flashy, but I’ve found it can be a little buggy if the user is mousing over and out of the navigation items too fast.

Copy and paste this Image Map Region onto every navigation state.

Step 5: Make a box in the first state that will hold the dropdown content. The top of the box should away from the edges of the Image Map and in front of it. Populate the mega dropdown with whatever it needs for the navigation item it’s associated with. The tricky part is getting it to align with the top level navigation. You can try moving it to the top of the state list with the dynamic panel set to visible. Then it’s just a question of going back and forth between the state edit tab and the primary navigation view to get it right.

Repeat this for every state and navigation item.

Step 6: Go back to the primary navigation view and add an Image Map Region on top of each navigation item. It helps if they extend between each item to touch to make a solid area of separate Image Maps. Make sure that all of these Image Maps are in front of the “MegaDrop” dynamic panel with the dynamic panel extending in every direction outside of the Image Maps. We want to make sure that if the user moves their mouse above the primary navigation, they will hit the negative space.

Step 7: Get to the interactions view for one of the Image Maps you just created (similar to how you did it in step 4). Add a case for OnClick. Select Hide Panel(s) and then “MegaDrop” under the Dynamic Panels heading. Also, select Open Link in Current Window under the Links heading and find the top level navigation page the navigation item is associated with. Click Ok

Add a case for OnMouseEnter. Under the Dynamic Panels heading, select Show Panel(s) and then “MegaDrop”. Under Dynamic the Dynamic Panels heading, select Set Panel state(s) to State(s) and select MegaDrop. Then in the dropdown (at the bottom) select the state associated with the top level navigation item. Click Ok

Repeat this for each Image Map Region on the primary navigation bar.

Final Step: Generate a prototype and test it out!

Each new version of Ubuntu has some surprising new interactions.  I love to watch the interface features that work, show up years down the line in commercial software. Particularly when they receive buzz for their “Bold Innovations.”  And yes, your shiny new version of Windows is far behind. They are naturally slow (and rightfully so) to adopt new experimental design and interaction. By the time the average user gets to play with multiple virtual desktops and snapping windows, Linux users have been testing and perfecting the interaction for years.

One such innovation that drew my attention is the proposed new scrollbar for Unity. I know I’ve written about scrollbars in the past, but this is pretty cool and makes a lot of sense. We waste a lot of screen real-estate on scrollbars. We know where they are and we know how they work. Why do I have to waste my precious screen space on it? The open source community took, from what we are learning with mobile devices, and applied it to a desktop environment.

Take a look at this demo video. Then think about the benefits of a scroll bar:

• It tells us that there is more content on the current page
• It shows us where we are in relation to the size of the page
• It allows us to slowly or quickly scroll to different parts of a page

This proposed interaction accomplishes all of these things while saving screen real-estate for what we really need windows for: the content on the screen. With the growing number of touch interfaces each day and shrinking screens, why waste precious pixels on such an archaic interface element?

So what does the future of your operating system look like? Do yourself a favor and download an Ubuntu live cd and take a look.

A few weeks ago I was at the grocery store, and saw this amazing deal. Buy one Thomas’ English Muffins, get 2 free!

So I bought them… and some eggs.

I then went on a breakfast sandwich kick for 3 weeks. It was probably the greatest few weeks of my life. I laughed, I sang, I got a lot of protein.

But then one day the english muffins ran out. Things got a little stale in my food cabinet.

I went back to the grocery store looking for more english muffins and I saw another deal! Buy one get one free

But this time… it was store brand. I thought, how bad could this be? Let me tell you some thing dear blog readers.

It is bad.

Real bad. 

They taste like bread that’s just pretending to be an english muffin. When I bit into that egg sandwich, we both knew, the egg and I,  that this is was no english muffin.

Ladies and gentlemen of the Internet. Do not under any circumstances, trust the marketing ruse of the store brand english muffin.

I’ll have to let the “muffins” off easy.

Maybe a donation to a hungy roommate, or a mutation into a french toast of sadness.

We brave the snow storms, the traffic, and the taxing exhaustion from the week. We wake up (sometimes) early enough for first chair/tram. We live in squalor during of the week to pay for our gas, food, and passes. We bundle up, and freeze on The Flyer which is easily the coldest lift on the east coast. We scrape our gear on windblown summits. We hike when it’s too windy for the lifts to run. We hold our secret stashes sacred. We live in between the trees both on the mountain and in the back country. Then we wake up the next day, and finish what our bodies and the lift operators wouldn’t let us on Saturday before making the grueling drive back to Boston running on fumes and redbull.

Why do we do it? For weekends like this one. We were ready for a warm slushy spring weekend. There were no expectations for quality snow in the woods. Flurries were in the forecast. Maybe a dusting of a half of an inch. To be honest, I was happy for anything extra after the 340 inches we were blessed with this season. The clouds decided to stick around all day. We woke up Saturday morning to a foot of fresh dry “champagne” powder with it still coming down. The kind that explodes with each turn. The kind, your snowboard and skis float on rather than cut through. The kind that carries the unrestrained laughter and woops of adults as they regress into childhood excitement in the howling winds of Jay Peak.

We can complain about how much of a disgusting resort Jay Peak is becoming with its ice rinks, hotels, water parks, and parking garages… Yea there’s a freaking parking garage (so you don’t get snow on your car). Gross. They even started selling green cards to rich foreigners to pay for all of this. But at the end of the day, no amount of greed can ruin the splendors that nature rewards to those who are dedicated (to use the term lightly).

I was setting up a reoccurring automatic transfer from my checking account. I wanted it to take money out every pay period. In my case, this is always the 15^th and last day of the month. Having set this up with other bank sites in the past, I was prepared to set up a transfer every 15^th and a separate automatic transfer on the 1^st of every month. Because of the nature of the calendar, every 2 weeks wouldn’t work in my case and selecting a specific date at the end of the month would not apply to every month (since they have different number of days). 

I was pleasantly surprised to see that ING had done their research on when people get compensated and how they manage their money. A custom solution of “Fifteenth and End of Month” saved me from trying to mold the functionality the best I could to my specific need. Instead, the opposite happened. My specific need was natively supported by the functionality.

• A CMS should fit an organization’s needs and improve the overall process without causing the organization to reinvent the wheel for existing processes that aren’t broken. This can mean:
  • Fitting into an existing CRM system;
  • Hooking into a current database, or helping to improve data collection.
• A CMS is a tool to help manage a website that reflects the organization.
  • The same way your materials should reflect what your are building;
  • It’s still going to rain regardless of how you build your house, so don’t skimp on the roof.

If your CMS is hurting the organization’s process or the end user’s experience, then your CMS does not work. The CMS should be able to bend and mold to work as a tool that reflects your needs and alleviate kinks in the chain. Not the other way around.

… End Rant

In previous versions of Axure, the user could select an object and still copy/paste it. The pasted duplicate would not inherently be locked. The new version does not allow for this.

What are the reasons why a user would lock an item?

• To ensure the attributes of an object or group of objects
• To be able to manipulate nearby objects without cursor hinting interference
• To be able to select all intersecting objects while excluding the locked one

It comes down to our definition of what “locked” is. My colleague’s interpretation is that a “locked” object is locked from all manipulation besides “unlocking.” When I think of “locked,” it means that the object is locked from all destructive manipulation. I use destructive to mean anything that changes the object in any way from its current state. This would include any interaction besides unlocking and copying.

Maybe I’m just cranky I have to change.

Last night, a group of my friends got together to watch the Pats game. It came time to order a pizza. As the new owner of an iPad, my friend opted to order the pizza using an online ordering service. As a user experience geek (even on the weekends) I rolled my eyes as it took 40 minutes to place the order. I didn’t say anything since I can appreciate the novelty of being able to order without having to pick up the phone.

Beyond novelty and potential incentive through deals, what can these services offer the user? Certainly there can’t be any utility in making the order process take longer than just a phone call. It’s nice that you can have an account and not have to type in your credit card or address every time you order, but is that worth the effort of having to step through an order process wizard?

What is it that makes ordering food for delivery different from ordering a book on Amazon?

• There are likely to be several end users
• It’s a service and not just a product

How do several end-users pay for a single service? Sure, you could distribute cash, but out of a room full of people what percent of them carry cash. Furthermore, what percent carry small bills?

Here we have a common problem, with a tool that can offer a unique potential for a solution. Let us split the bill and tip during the ordering process.

Ugh, can’t you just picture the size of the credit card entry form and the complexity of splitting the bill evenly? What would such a design pattern even look like? The first thing that came to mind was the way Mint handles this. It’s ugly, complicated, and you have to keep track of each iteration within the split.

Ok. I’ll just jump right into my sketch of what I think this interaction should be like.

The thinking here is that the user sees a slider of the entire amount due. The assumption is that the primary user has an account / is logged in. Every time the user clicks ‘Split +’ the slider bar splits the total evenly, and adds a user to the table. Clicking on “New” or “New Card” will bring up a modal dialogue for credit card information without the user having to leave the page.

The user can use the slider to move the amount for each card in either direction. In the case of more than two cardholders, there will be two points on the slider that the user can move. As an alternate, the user can click on the value either along the slider or next to the credit card list and manually enter a value. All other values will update on exit of text box.