For those that missed it, an app that we designed was selected as a finalist in the Disruptive Design category for the 2011 AdobeMAX Awards. Our friends at DevelopmentArc had the crazy idea to build Maque and fortunately asked us to handle the User Experience, Branding & Visual design side of things. You can read more about the app here if you want a deeper dive on what Maque is and how you can get your hands on it.

WE MADE ANOTHER APP!

Being in LA for the award nomination I got to spend 3 solid days with the boys from DevelopmentArc, Aaron & James , which is always a good time. When I say I didn’t walk away empty handed, these guys are largely to do with it. We had a free day on Sunday so at breakfast I threw it out there that we should build a mobile app since we had the day available. Admittedly a self-serving act, I had to throw it out there because Aaron & James are two of the brightest developers I’ve ever worked with and I wanted us to jam out another project while we were together. Luckily they were an easy sell. So we kicked the tires on a few ideas (which we’ll tackle later for sure) and ended up settling on building a lightweight dataviz android app for the conference. We initially wanted to pull in FourSquare and Flickr feeds as well but just didn’t have time and like any project we had to kill features and scope.

We headed back to the hotel and got to work. James and Aaron split up their dev tasks and I got to work on the design and branding. I’ve been part of a few other hack day opportunities back when I worked at Nitobi and was quickly reminded again how important it is for us to take some personal time away from our client projects to make things we like and want to bring to life. James had a prototype up within the hour and we were testing the interaction design immediately and already laughing at how fast it was all happening. Aaron, while grunting in the corner, managed to get the framework together in the same amount of time and was using Maque to grab real data from the Twitter API and pulling it into the app to test.

At that moment it finally came clear to me what Maque could do for every app and website developer in the world. A temporary service layer for any type of project. Genius. We were being rate limited or “throttled” by Twitter for hitting the API too many times while attempting to figure out what rate we needed to acquire data in order to produce the data visualization in the app in the way we were envisioning. The lights switched on when I realized the potential because you have to remember that I’m not a developer; just a UX guy but now I get it. So, rather than waiting for Twitter to reinstate our API requests, Aaron just ran the data through Maque and was easily able to randomize, increment & scale the data set without being online. Please tell me you now understand the importance of this. If you don’t, drop me a note. With the data in place we got about 80% complete on the app and went to dinner and came back to finish it up. As with any project time was a major constraint and we just didn’t have time to implement viewing of tweets within the app. Sorry but we’ll get it in there ASAP and make it cool. That said, we got the data-viz component to a good place and packaged up the app for the Android Marketplace around 1am. The app was elegant and the process was fun. Time to sleep.

The app is called Max Storm and you can grab it on the Android Marketplace.

Opening Keynote

What a show. Adobe arrived with a bang and had an impressive visual buffet for us to experience for 5-6 minutes. I managed to grab the last few minutes of it.

I could give you my thoughts on it or you could just watch the opening keynote here and others if you like and form your own opinion.

Shout out

I have to take a moment to say congrats to my old comrades at Nitobi on the acquisition! It’s huge. You guys deserve it. It was surreal watching it from the crowd knowing that it was something I was a part of at the inception of PhoneGap and could have been part of today if I hadn’t moved on. Very cool for you guys.

SESSIONS

I followed the ongoing discussion formed around the new series of touch apps that Adobe announced at the opening keynote (Photoshop Touch, Collage, Proto, etc.). As one might expect I gravitated to the sessions focused around discussing the interface and UX of the new apps. I wasn’t wowed by any of the sessions, but was very pleased by one in particular (Dave Hogue’s).

Ty Lettau’s session on “Interface Design for Modern Cloud Applications” was an insightful recount of their (Adobe’s) process for re-imagining the Adobe tools & controls for the context of tablet devices. I love that they have smart UX people driving the ship on these new apps. They’ll be light years ahead if they keep up that focus and don’t get last in crowded UI’s with a gazillion tools/toolbars. I am VERY curious to see how Adobe responds to the emerging market of tablet-based productivity solutions and how their core suite of products will or will not evolve based on the patterns being introduced in the new tablet apps. It seems obvious to me but then again I’m not tasked with potentially upsetting the apple cart if changes were made to products that have been around for 20 years, no matter how bloated they are.

The best discussion about the impact of tablet apps was the one that emerged from a panel session with creatives using the apps now daily. I completely agree that these devices and apps should be seen at most as an extension of the creative process, not a replacement for desktop solutions. Context is the biggest missing link when I hear people’s comments, questions, ideas, assumptions about new devices impacting a practitioner’s workflow or someone just using them for fun. These apps and devices are useless if not designed with all the new affordances dictated by a new set of device constraints and contextual opportunities available. We can now rapidly sketch with clients and share the information in new ways. This isn’t to say that I will now start sketching with clients. I already do. This just gives me a new opportunity to rapidly generate ideas and save them for later to assess and I can easily share them with my team or clients w/o having to scan my notepad or take a picture of it.

I had a particularly good time taking photos with my tablet during some sessions and placing them directly into my notes for the session and sketching around them to provide another point of recall and context for my notes. Huge. I’ve been skeptical about the productivity limitations of tablets since they arrived on the mass market. Turns out I just needed to find it for myself rather than someone trying to convince me of how many things I can do with one. The bottom line is that I should have bought a stylus sooner. I bought one at the beginning of the trip and it completely opened up the interaction for me. Using my fingers to draw or write just wasn’t doing it.

Dave Hougue’s session entitled “Design Better Experiences with Fireworks by Understanding How People Think” was my favorite and had very little to do with Fireworks. Nice code name Dave. ;^) I just met Dave a few nights prior and learned that he is a trained psychologist that made his way into UX and is now the VP of User Experience at Fluid in SF. Dave spoke about what Haig (my business partner) and I have been debating over the past 3 years, the undeniable importance of cognitive science disciplines as a key influence in user experience design. Case in point, which I did clarify with Dave after the session but, I happily raised my hand as the only person in the room that had ever designed an interaction/interface to ‘annoy the user’. What I couldn’t say at the moment is that I have only done that in the context of ideation when you play the advocate of ‘Bizarro World’, a term and approach I learned from Dan Saffer back at Interaction10. The goal is to identify the worst possible outcome you could create for a user of the product or service you are tasked with designing. Then you take those ideas and use them as guidance to uncover the inverse of that effect and the design strategy you need to consider to ensure that those things never happen. Make sense now? Sorry Dave for being the sore thumb but now you know what I was getting at.

As Dave’s session continued to unfold he touched on some foundational aspects of identifying the role of psychology in User Experience design, some of which were a welcome refresher and some new topics I’d only heard of in passing and will certainly explore more after this session. This is likely going to come off as a review pf a Psych 101 class reading list but hey, have you read all of this? I sure haven’t. Dave highlighted several of the many Cognitive Biases that we should all be aware of:

• Anchoring: the common human tendency to rely too heavily, or “anchor,” on one trait or piece of information when making decisions.
• The Framing Effect: drawing different conclusions from the same information, depending on how that information is presented.

In addition to the overview of several Cognitive Biases, Dave made valuable references to several other topics in psychology worth exploring:

• Sturgeon’s Law regarding the balance of Accuracy vs. Time.
• Occam’s Razor: The razor is a principle that suggests we should tend towards simpler theories until we can trade some simplicity for increased explanatory power.
• The Pareto Principle: states that, for many events, roughly 80% of the effects come from 20% of the causes.

I’d love to continue digging into Dave’s session as it does deserve deeper thoughts, but I need to get this blog post done! Clearly I’ll have to follow up at a later date. You might also want to follow Dave on Twitter if your into the relationship between cognitive sciences and UX.

BEING NOMINATED…

Was pretty damn cool. I was humbled by the nomination but it really hit me when we walked into the rehearsal for the awards ceremony and I literally saw how big this was going to be. Enter butterflies. Rainn Wilson from the office was a hilarious host. He was a great sport dealing with such a huge crowd of nerds and even had the developers and designers in mild opposition at several points, all for fun of course. It was amazing to see our work presented on a 50ft wide projection and though we didn’t win it I was still proud. For some reason our app was the only one of all the nominees that received crowd applause when it was announced. That was cool. The crowning moment was when Rainn called for a round of applause for the winners and then pointed directly at us and called for a bigger round of applause for the losers while muttering under his breath that he’d sat in those seats several times and never won a fucking award. Thanks Rainn. It was hilarious. Happy to be in the same company as you buddy.

Heading Home

As I said at the beginning we may not have won but I didn’t walk away empty handed. I bought a stylus, we made an Android app that people actually downloaded and I get a new set of tablet based apps to beat up on and see how they work for our team and our creative process.

Thanks for reading. – Chris

I can take all of that in stride, but why change the global nav completely and introduce a significant amount of clicks for me to accomplish the same tasks?! And why change the way I have to navigate gMail? It’s now 2 clicks instead of one to get back to the inbox. What’s going on over there? Has the wild success of G+ gone to your head? (Joking about the wild success part, of course)

Exhibit 1. Old Header Navigation

Simple conventions. Clearly presented and easy to use.

Exhibit 2. New Header Navigation

All navigation hidden from view. Interaction to view navigation options increased by 100%.

Interaction to view navigation options increased by 200% if you want to view Calendar. See below…

Exhibit 3. New Header Navigation:Hover

Exhibit 4. New gMail Navigation:Hover

Two main issues here.
1) You replaced a very familiar interactive element inside gMail, the logo, which always linked to the inbox. In its place lie the new global navigation discussed above.
2) On top of that you turned the gMail logo/header into a drop down navigation menu as well! Now I have to hover + click to even get back to the inbox!

How much testing did you guys do before you rolled this out? Seriously.

.Define your goals

Where are you at in the project cycle? Delivering wireframes, testing the UI, conveying transitions, etc? Whatever the goal is, the point is to think about what you need to convey to the client or to your dev team and focus on the best solution for the milestone in front of you.

.But…. what tool? There’s so many to choose from

I tend to use clickable prototypes built in Adobe InDesign for expediting wireframe review and providing developers with and interactive design spec. There’s a slew of other options including HTML, Flash, Axure,  iRise, Fireworks, OmniGraffle and wait for it……good ol’ pen & paper.

Do you need a platform that generates specifications from the prototype and provides built-in collaboration? If so, then  perhaps Axure is the tool for you.

If you don’t need those integrated features, then you can look at thinner solutions like InDesign, Fireworks or OmniGraffle.

If you’re kicking off a project then nothing works better than pen, paper and a healthy supply of your favorite caffeinated beverage.

Regardless of the tools I’ve listed and missed, the point is that you should set a goal for yourself to understand your project and client well enough that you have a good feel for, at a baseline:

A) Context
B) Your skill set
C) Budget
D) Client Type

.Clearly, there’s a ton of things to consider in this discussion. What goes through your mind after reading this?

A Little Background

Earlier this year I found myself at a professional crossroads to turn my back on an old friend and great application, OmniGraffle, in favor of returning to Adobe InDesign for producing user workflows and wireframes. I’d use the app plenty in the past so transitioning back was painless and to top it off I stumbled upon a feature that seemingly, was brand new. INTERACTION. “WTF does InDesign have that for?” Yeah, that pretty much sums up my thoughts on the matter and surprise at finding it. Well it’s probably been there for years but I just now found it, which lead to one of the largest unexpected breakthroughs in my career as an UXD/IxD/IA (you choose the label, as long as I get to keep doing the work).

It turns out that InDesign has a simple and very straightforward way for converting any object into a button that can execute a myriad of navigation commands. Yeah yeah, I’m getting to the sexy part. The point is that within one click you, and I, can EXPORT TO SWF!!! Hell yeah. I flipped out when the realities played out in my head around FINALLY being able to generate rapid prototypes that could also support rapid iteration.

You get the point. Enough babble, let’s get to the example and the inherent benefits….

THE EXAMPLE – iPhone Application

1. Create a new InDesign project of any size. My example is for an iPhone app so it’s sized accordingly. On the workspace menu, select “Interactivity”.

3. Create at least 2 pages in the document so that you have at least one destination page to navigate to.

4. Create a simple object with some text in it. For this example I created a rounded rectangle with some text.

3. Select the button. On the right hand side menu panel you should see a menu labeled “Buttons”. Select that next. Within that menu you will find everything you need to make a simple clickable prototype.

You can name your button and specify normal, rollover, and on-click states for the object. We can get into that more later. The main point is that once you have selected “normal” in the state appearance selector you can select an event to specify.

4. Click on the Event list selector and choose “on release”. Then click on the (+) next to the “Actions” label and select your desired navigation transition. For the purpose of this brief example, I want the button to take me to another page in the layout so I select “Go To Page”.  An input box will be displayed where you can specify the destination page for the on-click event.

5. Repeat this step on page 2 and cross link the pages to each other.

6. Once you have your two buttons and on-click events defined you will want to click on the File Menu and select Export. Select “SWF” as your export format.

7. Selecting the SWF option will bring up this menu. I suggest leaving it at it’s default setting sfor now. You’ll have plenty of time to tweak it later.

8. Click “OK” and you’re done, simple as that. The SWF will launch in a browser window and you should be able to click back and forth between

THE BENEFITS

I immediately saw positive results from presenting an interactive prototype as a supplemental deliverable during a meeting for delivering wire frames. The meeting was shorter by more than 50% because our client could subjectively experience the app workflow rather than relying on my explanation and their ability to visualize the interaction. They could walk away with a clickable version of the wires and use the actual wireframe docs and notation to better understand the intricacies of interaction not noted in the prototype. Sometimes I think we put the onus on a client to step into our shoes to envision things in the same manner that we might, which is quite unfair and honestly why they hire us/you.

OK, BUT WHEN?

One thing that’s hard to articulate is when it’s appropriate to use a prototype and at what level of fidelity? Well, it depends. You have to have a good understanding of the project goals, where you’re at in your design phase and what works best to communicate your goals. This is a long conversation that is worth of a blog post on it’s own. I should probably do that next…

So, for those of you that feel you don’t have time or $$$ for prototyping I present the following:

Exhibit A.
Reduced meeting time for presenting your deliverables = more time and budget for design or simply moving to dev sooner

Exhibit B.
You now have an interactive design spec for developers to reference when building the app

Exhibit C.
Allows you to deliver a behavioral representation of otherwise static documents. Wires provide tangible value as reference docs but the prototype tells the true story and allows for a rapid feedback/iteration cycle

Exhibit D.
You can easily insert .ai / .psd . / .fw files for rapid skinning of the prototype, if necessary.

So tell me again, why aren’t you prototyping?

Goals:

The intent of the workshop was to stimulate the conversation around what our local Interaction Design pals are using day-to-day on projects and take our first real strides into skill set based events driven by the local community. We opened it up to include anyone that wanted to present but it turned out only being the local leaders that presented, which was a bit of a bummer but provided good insight. It was by far our best showing since starting the chapter a year ago so there must be something to this prototyping thing. ;^)

Structure:

In terms of the actual presentation, it seemed like allocating 30min to each presenter was a healthy amount of time when you consider the ensuing discussions that took place. We started off the meeting with an overall discussion as to the value of prototyping to the best of our collective understanding and it got a great discussion going right away. That made for a smooth transition into the first presenter, and host, Haig Armen (@haigarmen), which was on Flash Catalyst and a comparison to Flash. I presented using InDesign to create clickable prototypes and then Shaun Bergmann (@Corvidael) presented on his world of prototyping for hardware specific touchscreen devices using a TERRIBLE system that he’s forced into due to the device and using Fireworks for various parts of his practice. Leading up to the event there was some conjecture from a few folks, with semi-arrogant tone I might add, about this being an Adobe marketing event and bitching about us only referencing prototyping in terms of web/desktop/mobile apps. Needless to say, I invited both of those people to present on what tool they use and, big surprise, never heard back from them.

With the event wrapping up we like to ask people what might have made this event better and also ask what topics they are interested in learning more about or even presenting on. I really want this to be an open forum for all of our local IxD peeps to come together to talk shop and hopefully start mentoring eachother, or at least brainstorming.

Insight:

I learned that we need to be constantly brainstorming on ways to increase participation and that might be best stimulated by having a full-participation workshop event sooner than later where to decrease the barriers that might be hindering people from public presentation. I think we all face a similar situation where people aren’t willing to give themselves enough credit as “expert enough” to be presenting. To that I call bullshit and will focus on encouraging everyone to share what they’re doing because I’m not interested in having the discussion about right/wrong ways to be a UX/IxD practitioner, but rather how we expose each other to as many skills as possible and, equally important, WHEN to utilize the skills.

One of the spontaneous discussions that quickly took shape was around WHEN to use particular types of prototyping and the importance of HOW you present. Selling/framing the utility of a prototype for your goals at a particular stage in the project is huge and led to some pretty cool insight from the crowd. It was arguably the most spirited part of the evening.

The overall feedback form the event was outstanding and everyone was fired up for the next one.

Links:

» Haig Armen on Twitter (@haigarmen)
» Shaun Bergmann on Twitter (@Corvidael)
» My ramblings on Twitter (@stony)

So, in the name of Process here goes…

1. Paper Prototyping Workshop

It’s hard to put into words how excited I was to dig into this project and there was certainly a buzz around the office anticipating it’s start. Being my first touchscreen project my mind immediately started thinking “cool! now, where to start?”. Knowing the scale of the application it only made sense to me that we dive headlong into a paper prototyping workshop to get the juices flowing and have everyone involved from the beginning. That said, I put together a 3-4hr Paper Prototyping workshop with our client Jeff Heywood, Yohei (Nitobi Interaction Developer) and myself. The application is a commenting system for Aquarium visitors to ask questions or make comments about the Arctic and respond to existing questions/comments.

Supplies for the workshop included: 3×5 index cards, sharpies of many color, post-it notes, 5×8 index cards, scissors, MARS Drafting Dots, a roll of butcher paper,  some simple pens for sketching and a fresh helping of warm caffeinated beverages.

I covered our boardroom table with white butcher paper so we could all embrace our inner child, drawing outside the lines w/o repercussion, and I also cut out a handful of full size versions of the 46″ monitor and taped them to the walls. After describing the context of the design challenge we were to consider I passed out (6) 3.5 index cards to everyone and set the timer to 60sec. The importance of this exercise is to essentially force us out of our comfort zone of pre-conceived design patterns that spring to mind and get to storming up some new ones. As I’ve observed in the 2 times experiencing this process, ideas 3-5 tend to be very interesting as that seems to be a regular point where our minds often run out of easy answers and start coming up with new ideas. NOTE: I can’t overstate the importance of communicating that it’s the process that’s more important than coming up with genius ideas. Everyone is equal in the workshop and there are no “wrong” ideas, just ones that are more appropriate than others given the constraints of the project.

6minutes = 6 Sketches
So here we go! Off and running with one sketch per minute. Love it. Remember… no wrong ideas, just sketch something! As I expected, we all came to a natural sticking point at rounds 3-4. No matter. Once we finished the 6 minute exercise we went around the room briefly explaining the meaning of each sketch with the opportunity for fellow participants to comment and/or ask questions. For cards that stirred up decent discussion I asked everyone to flip the card over and note a theme or some key words that emerged from the feedback.

Go Big!
We’re about 1hr in at this point after discussing all 6 rounds of cards (18 cards) and it was time for everyone to pick their concept that they wanted to GO BIG with on the full size interface prototype! Without moving to the full size interface we would essentially be trying to pick paint colors by holding paint chips up to your wall and envisioning the possibilities at a much larger scale (we all know how that goes). The importance of this step was to get an appropriate understanding of the scale that users will be interacting with at arms reach, attenuation from 30-40ft to draw users into the application and to get a feel for the possibilities of content arrangement. Yohei, Jeff and I all spent the next 2hrs or so drawing out the small sketches on the large sheets and using the 5×8 index cards to draw and cut out shapes for defining the interactions on the display. While this was happening I asked everyone to step back as far as possible from their designs and evaluate the concept under the given constraints and again talk through the idea with the group. We could do this because it was a small group.

Reflections
In spending roughly 4 hrs with our client we were able to give Jeff a glimpse into the thought process that we at Nitobi go through when brainstorming on design strategy and concepts. On more than a few occasions Jeff stood back and exclaimed “You know, at first I thought this was kinda weird and couldn’t see where you were going with it. Now I see the value in this process and where we’ve gotten to is great. And in such a short period of time.” Yohei, who was also skeptical of my plan, came out of the session wanting to do this for every project. I couldn’t agree more, when it’s appropriate. Here’s a video of the output from the session » Paper Prototyping Workshop

Next Steps
We (Nitobi) took the 3 concepts and mock up design prototypes for the application, with 3-4 interaction states and then presented them to our client on the touchscreen itself the following week.

2. Design Prototyping

From a design and development perspective we had a tremendous advantage in being able to utilize the actual hardware at our office for roughly 4 weeks of the 6 week project. That said, Yohei and I got to work on fleshing out fairly high fidelity designs pertaining to the prototype concepts in order to get a feel for how the application “could” look based on each concept. This was important on several points. One being that we needed to mock up some of the basic interaction and interface views that we didn’t have time to address in the prototyping workshop. Another, being that the layout of our conference room doesn’t allow us to get more than 10ft from any wall so we needed to put some physical distance between us and the display to give it a healthy “squint test” and also get a good feel for how the app would look from a “fun” perspective.

Yohei and I both presented our design prototypes and, because it was on the actual touchscreen, we were able to run the presentation as a slide show that would naturally progress by tapping the screen. Brilliant! The goal of that meeting was to pick one design to move forward with, which we did successfully and placed the fate of the application in the trusty hands of Yohei to apply his combination of developer and designer magic to bring this application to life. Here’s a glimpse at the 2 themes…

3. Reflections

All in all, I found this process to be very appropriate for quick ideation of design concepts that would fit into the 6wk window of opportunity that we had to start from scratch and deliver a functioning application. I’m proud to say that the “Arctic Questions” touchscreen application successfully launched on October 8th for the grand re-opening of the Arctic Exhibit at the Vancouver Aquarium.

I would be doing a disservice if I didn’t highlight the initiatives put in place by the Aquarium’s president John Nightingale and executed on by Jeff Heywood. The folks at the Vancouver Aquarium made a conscious choice to push the boundaries of traditional aquarium exhibit interactivity in hopes of creating an exhibit that utilizes new technologies to create an exhibit based around dynamic content generation and visitor interactivity. I feel quite fortunate to be a part of this shift and have high hopes for the future that other aquariums around the world will take notice of what’s going on at the Vancouver Aquarium and embrace interactive, technology-enabled exhibit designs of their own. Who knows, maybe we’ll find a way to connect them someday?

4. Resources

For those interested, you can watch a video interview that LiFT Studios put together highlighting various aspects of the project. They also developed an interactive application for the exhibit.

Video: Interaction Design at The Vancouver Aquarium

I’ve also posted design comps and photos/video updates on the progress of the application as we went through it » Flickr gallery for the project

The web version of the application is hosted here » Arctic Questions Website. It’s wired to the touchscreen application and the iPhone application that is being built as I write this entry.

Links:
» Follow Yohei’s blog
» Jeff Heywood on Twitter (@heywood)
» My ramblings on Twitter (@stony)

The panel event, Entrance into the Industry: Design, Media Arts, and Informatics, is being organized by the SFU TechBytes program that provides students in IAT and TECH courses with software & technical support to enhance learning needs across the SIAT curriculum.

Arguably and obviously there are many ways you could employ to trigger the copy/paste interaction. I chose the “3 finger tap” for this example. “Pressing” the screen for a set duration is another viable option that would trigger the copy/paste feature that came to mind, but I liked the “3 finger tap”. I’m sure there are tons of viable ways to launch the interaction and I’ve already had some questions about the ease of executing a “3 finger tap” as I put this together but the goal for me isn’t to be right, it’s to have the conversation. So here ya go! What’s your solution?

The movie

The initial sketch

http://technoracle.blogspot.com/2008/12/building-service-clients-with-flex-and.html