I personally think prototyping is the way to go when creating a new software product (or any product really). You get to “blueprint” out how something is going to work, how the pieces fit together, and how it will really work once launched. I think most people are sold on the concept, so it’s a matter of how to build this close-to-real product that you can test with your user base. Do you use paper? Mock-ups? Tools like iRise and Axure, or get real and build a non-functioning ready to reuse front-end?

The first step is defining what you’re going to use this prototype for. Is it to drum out business requirements? Demo to clients before they write the big check? Or get something as close as possible to the real thing, so you can start the User Centered Design process and test your ideas on actual people that will be using your product.

Obviously I enjoy prototyping for the latter, getting real feedback that our team’s ideas were dead on, or widely off-base (never!). To do this, you really want to build the prototype in the technology you’re going to create the finished product in (usually HTML or Flex for web based software). This solves two problems: one, this truly is as close to the real thing as you can get. By using the actual UI technology you’ll be creating the final product in, you’ll know what can and can’t be done, users will get a real feeling for the responsiveness, animations, and interactions. It’s real, sans the months of backend development needed to power this prototype. And two, you can pass this finished front-end code off to the development team, taking pressure off backend developers who may not be well versed in front-end development.

Microsoft when working on Office 2007 did this very thing:

“if you’re trying to build a prototype that you want use as a blueprint, it should exist in the same medium as the final product.”

In the past when I’ve run prototyping projects, the teams usually consist of just one designer/IA, one developer, and a small amount of a backend developers time (to get some fake system data up and running). Depending on the maturity of your front-end development group, you may have sets of UI widgets and code ready to go, this will help speed up the overall process.

Dave Cronin from Cooper recently wrote an article titled “Industry trends in prototyping” – which I agree with about everything in the article – he lists out four reasons for creating prototypes: prototypes make your designs better, help facilitate communication, enable user input and usability assessment, and help assess technical feasibility and reduce development time. He’s also a fan of creating “real” prototypes where it makes sense.

I love this comment from Philip Fierlinger:

Prototypes, on the other hand, let people feel the flow and experience the relationships. Building prototypes allows architects and interaction designers to quickly identify broken pathways and iterate quickly to find better flows – by feeling the experience, rather than thinking about it in the abstract. Developers, designers and clients also get a much more tangible sense of what the end product will be.

Again, I can’t stress enough how a “real” prototype will give you the best feedback for the effort. We’ve also used these prototypes to help sell ideas to business groups. Imagine trying to sell an idea for a mobile app by letting your VP access it directly on their phone. This will beat out any PowerPoint presentation.

Garrett wrote on this topic years ago, and the technology is now easier to use than ever before. There are frameworks, open source systems, and reusable icon sets ready to be molded into your own prototype.

Using wireframes or paper for low-fedility prototyping is not necessarily a bad thing. Maybe your just testing internally, or you’re limited with your technology skills. There are discussions about what fidelity wireframes should be (both form and function). There are many tools at your disposal for creating wireframes and prototypes, and they’ve really just recently gotten easy to use. No longer are you stuck with Visio – here’s a list of some tools, ranging from very expensive to free with varying sets of features:

• Axure
• Pencil Project
• Balsamiq Mockups
• Adobe Flash Catalyst
• iRise
• OmniGraffle
• Lovely Charts
• Rapidrabb.it
• iplotz.com
• Prototype Composer
• fluidIA
• WireframeSketcher
• MockupScreens

Boxes and Arrows has an article from 2006 written by Scott McDowell, that goes over some of these options, but what’s really interesting are the comments below the article where designers talk from real world experience. And Russell Wilson from Dexo Design compares 16 prototyping tools (2008) and again, the comments are interesting.

I tend to use wireframes to quickly get across ideas and interactions. Something that could possibly be thrown away, or will be changed a number of times. Once the idea seems to stick, I move to high fidelity mock-ups, sometimes merging the mock-ups together in a slide-by-slide presentation showing the page flow with faked interactions.

GUUUI posted some links to videos showing lo-fidelity prototypes in action. Again, this can work to help guide overall concepts, but to get true feedback – you really need to have a higher level of fidelity.

If you’re in a good situation where you’re ahead of the product timeline, prototyping is your next step. Just like how a architect moves to a model, build out your prototype and test, iterate, improve, and in the end launch a successful product!

(additions)
Great post over at Adaptive Path: Rapid Prototyping Tools

Last month I gave a talk here at our Customer Experience University about what I call “Emerging Interface Patterns”. Very often we get buried in day-to-day work and miss out on new experiences, new things that are going on in interaction design just pass us by. This is tragic for those who don’t take the time to stop smell the pixels ;-) Everyone should be paying attention because these new experiences are great creative stimulus for innovative ideas.

In the below presentation I try to run the gamut of what’s new in User Experience, and Interaction Design – scouting ahead for what’s changing the landscape. As someone who is passionate about these topics, I love discovering new interaction patterns, and better ways to do something that was thought adequate before. And by consuming all these new patterns, you can blend them into current projects, and even synthesize something new.

What’s going on in Game Design? What are some of the newest UI trends? How is information design contributing to the interaction design practice? How are we bringing the real world into applications? These are just some of the questions I explore below:

Download PDF

At the end of the presentation I featured the recently revealed Adaptive Path Aurora concept “browser”. I was actually mostly done with this presentation when Aurora was revealed, and thought it was the perfect closing to my presentation. Why? Because it is the product of many of these emerging patterns we see in other areas of product and interaction design. You could say the design is somewhat reminiscent of the Sugar UI in the OLPC computer, or that having things fade away into the distance is bringing the real world into the experience. The way you can quickly type in a search, or the contextual menu that pops-up to reveal more actions. These are all things we’ve seen before, just not together in this new and innovative idea.

While you could of lived in a cave for the past couple of years and had the same ideas, I theorize that by observing these trends you are “building on the shoulders of giants” and can better combine, iterate, test, and innovate.

I did want to mention a combination I’ve had in my head for awhile :-) on page 30 I have a shot of the Prius fuel consumption screen. I think by using game design and comparing this to other drivers (not just Prius, but all cars) people would instinctively want to “win” by having the best gas mileage. If we could get a mandate for all car companies to include a version of this, with a way to transmit “scores” to a central database, I think we could be off foreign oil in no time! The elevator pitch would be “It’s like Nike+ for fuel consumption” ;-)

via: http://flickr.com/photos/88262773@N00/2525850407

Last, things change fast. Since presenting this we’ve seen new patterns in Google’s Chrome browser, and Mozilla’s Ubiquity. Remember to keep up, stay informed, and absorb as much as you can.

Starting in 2005 when returning from SXSWi a coworker and I would put together a trends presentation talking about up-and-coming technologies, patterns, websites, etc… and 2008 is no different. The presentations keep getting longer and longer, as innovation keeps building on the previous year, moving faster and faster. This year my co-presenter was Dustin Askins of Travelocity, and we gave the presentation internally to our UX groups, and just this week at the Dallas UPA Chapter.

Why SXSWi? I think it’s really good for getting a pulse of what’s going on in the User Experience field. You get to meet with a wide verity of people from different practices, and hear from some of the top web professionals. An while there are many great conferences (like UIE, IA Summit, UX Week, etc…) SXSWi is consistent on it’s wide ranging topics (great for “T-Shaped” People).

When looking at trends across technology, marketing, UX, and business you start to see patterns of what the leaders in their respective groups are expecting for 2008 and beyond. Things I keep seeing rise to the top: Mobile, Open Platforms, Data Control, Mixing Virtual and Reality, Semantic Web, Interoperability, and Location Based tools (see slide 33). None of these are unexpected, I sure we’d all agree these are hot items that will effect multiple areas.

I’ve never posted these presentations before, so I have 2005, 2006, and 2007 to post along with 2008. So if you’re new to the web and User Experience, now is your chance to catch up on a couple years worth of knowledge.

So say hello to 2008:

| View | Upload your own

2007 On SlideShare

2006 On SlideShare

2005 On SlideShare

I also have most of this presentation in a podcast (I think my recorder battery went dead…), so listen in. Hopefully I will continue to keep this trend of my own, it’s always interesting to look back…

[EDIT 05/12/08]
Here’s some video from our UPA talk:

Me & Dustin speaking @ Dallas UPA from Jeremy Johnson on Vimeo.

As a Designer, I sometimes need to evaluate different technologies and platforms from a Designer’s perspective. Why is it important to get a Designer’s view? As Designers we can quickly be boxed in with inflexible UI layers, unusable sets of standard patterns, and the inability to create a great experience. By reviewing and testing, we can determine the pros and cons of a given technology solution. In honor of Eclipsecon 2008 ;-) I’ve put together a presentation on a popular application platform – the Eclipse RCP.

Eclipse has it’s roots as a development IDE, and while that’s very efficient for developers, for non-developers it’s not very user-friendly. For this particular technology I broke up the potential problems into four groups: Visual Style, Structure, Usability, and Focus. These were four areas where Eclipse had problems, when looking across a large number of Eclipse based applications.

The Designers View of Eclipse:

| View | Upload your own

To be fair, they are trying to fix these issues, and some very smart developer/designers are creating good applications using Eclipse. But, projects without proper UI layer specialists (Designers and Developers) will default to the problems listed out above. From a Designer’s view, it’s not easy to get a great application out of Eclipse.

One great presentation out of Eclipsecon 2008 is from Morten Moeller, titled: “Designing Business and Technical User Interfaces in Eclipse RCP Applications” which basically states current Eclipse User Interfaces could use some work, and how to made them better – with technical examples of how the presentation layer works.

This is not to say that Eclipse, as a platform is not capable of great things, but just that current popular Eclipse patterns that seem to be prevalent across most Eclipse based applications are not great from a Design/usability perspective

Remember, while the Designer’s view is very important (after all I’m a Designer ;-) there are other business needs that weigh the overall solution. Such as: development time, current skill set, scalability, etc…

With experience becoming an important factor in differentiating products, having a flexible UI layer is becoming a major factor when choosing a technology to base your product on, so if you’re part of a team evaluating different technologies, make sure your team takes into account the Designer’s view.

If you’re an Interaction Designer, I’m sure you’ve noticed a new design pattern in the past year – one that doesn’t really seem to have a proper name yet. In fact, you’re probably already incorporating this pattern into your designs. It seems like almost every major redesign is leveraging this pattern to help hide complexity: Amazon, Linkedin, TripAdvisor – and sites like Target, Google, and Yahoo have been using it for awhile. It’s a design pattern I’m calling “Revealing Interfaces”.

| View | Upload your own

I have a habit of taking screenshots of interesting UIs. I have a large collection that I browse through for inspiration when creating something new. I started the above presentation to help provide some context for what I was trying to do with some of my own Designs. I’d been interested in reveling interfaces and recently I came across a couple of pieces that when put together gave me the idea to help better explain this pattern.

The first was when John Maeda came to my work to give a talk. While reading “The laws of Simplicity” I came across this quote:

“Hiding complexity through ingenious mechanical doors or tiny display screens is an overt form of deception. If the deceit feels less like malevolence, more like magic, then hidden complexities become more of a treat than a nuisance.”

I like the fact that while a revealing interface could harm traditional usability heuristics by “hiding” away functionality, once someone actually uses the interface, they could be delighted by the options revealed to them.

The second was when around the same time I saw a post “Hiding Complexity” over at one of my favorite blogs (future perfect by: Jan Chipchase). These two photos so elegantly demonstrate what the purpose of a revealing interface is: removing initial complexity.

At it’s most basic, it’s really something as simple as a drop down menu on a website. But in the last year or so, with more highly skilled people at the helm, pushing the limits of XHTML/CSS/JavaScript/AJAX it’s becoming much more.

No longer are the days of waiting for a full page load just to update your status. With a single click you have access to power user features that used to be buried three pages deep. An entire site can be navigated from the main page, without overloading the front page with tabs or links.

The interface becomes more fluid, interactive, and more like a conversation. In some places it can even read your mind ;-) “Yes, Netflix I was wondering what the plot of “reign over me” was, thanks!”

Along with these new reveling interface patterns comes a new budding visual language to denote when something can reveal more information – and when does it just take you to a new page? I’m sure there are a new pile of accessibility concerns with the extra levels of DHTML and JavaScript – and how does usability change, when you can’t really ask the question “where would you click…” or “what do you expect…”?

Please take a look at the embedded presentation, hopefully this post can help start defining this pattern and get the conversation going – and feel free to start that conversation below in the comments :-)

Yesterday I got to hear John Maeda speak at Sabre as part of the Wundermind series of speakers. I’ve read John’s book (The Laws of Simplicity), and really enjoyed it. He gave a great presentation – it’s rare to hear someone who really gets both technology and design (and he’s met Paul Rand!).

So when is simple, too simple? A great quote near the beginning of John’s book reads: “Imagine a world in which software companies simplified their programs every year by shipping with 10% fewer features at 10% higher cost due to the expense of simplification.” Maeda uses the iPod as an example of a product that has succeeded with this model. I also see this in the iPhone. As a new iPhone owner, I’ve been able to discover some great ways Apple’s removed features, without diminishing the experience, and simplified the iPhone UI.

As part of a User Experience department that supports products that are 10-20 years old, you can imagine the complexity that has crept into the products over the years (and most of those years were without a Designer’s touch!). Every year new features are “needed” to keep-up with the competition and look good in a comparison matrix. As someone who strives to simplify UIs, and create great experiences, I’ve learned a thing or two from the iPhone.

The iPhone has really delighted me at every turn. I’ve read a lot about what people feel was left out of the iPhone. I’d like to show how in one case removing a feature, actually improved the experience.

Copy & paste. The iPhone does not have any copy & paste functionality. This always shows up on the list of iPhone “wants”. How can a Smartphone work without it! Smartly, Apple reinvented what copy & paste should be on a phone:

1) Phone Number in a SMS

When you get a phone number in a SMS, it’s blue and underlined. This is the standard click (or tap I guess) to call you see on the web. But, what if you don’t want to call the number? Maybe you want to copy it to a contact, or SMS the number. Added to the UI only on lines with a phone number is a little blue arrow that when tapped shows the most common tasks you would do with a phone number: call, SMS, add new contact, add to current contact.

2) Emailing a link to someone

Sharing is built into the phone, no need to copy and paste. When you’re on a page just tap “share” and a email is started for you! In this case – the traditional method would be: copy link, switch to mail app, open new mail, paste link – that’s four steps reduced to one.

3) Emailing a YouTube link

Same as #2, you’re able to share a youtube link as well.

4) Common address information

The iPhone “knows” you. It knows you from your address book, notes and more.

5) Content from Notepad

It even surprised me by autofilling something I had just typed into notepad!

By looking at tasks people perform on a mobile device – Apple has created a “smarter” device. Something small, that hides the complexity and “just works”. Although I’m sure someone will point out – this is really a “forced workflow” leaving out power users. I think it’s a fare trade-off, simplicity is a feature. Tell marketing to add it to the comparison matrix :-)

Also check out Fellow Sabre employee Stephen Anderson’s 7 User Experience Lessons We Can Learn from the iPhone

SXSWi has come and gone again, this was my fourth time to attend and it just keeps getting bigger every year. When I first visited in 2003 (or was it 2002?) Bruce Sterling was still throwing SXSWi parties at his home and FROG Design hosted everyone in their office, unfortunately that doesn’t really scale to the size of the conference today. But, the panels were as diverse and interesting as ever – and I came back with the following brain-dump:

(note to readers, I tend to take notes in bullet-point format, which is reflected below)

Emerging Social and Technology Trends

(More detailed notes here)

• Check out: http://outside.in/
• Check out: http://www.indie911.com/
• The age of sharing your information publicly is here to stay, it’s normal for “kids” – they wonder why you are not blogging what you had for lunch
• Room to add more control, maybe you only connect with people you’ve met with in real life (RFID to Linkedin?)
• In india you can send an email to a post address, and a post to an email address

Getting to Consistency

(More detailed notes here)

• If working on a suite of applications, look for “connection points” – the apps don’t need to be 100% consistent
• You don’t need to be consistent just for legacy sake
• There is room for some discovery within a UI
• Sometimes a clean break is the best way, when upgrading applications
• Remember: Goals no Features!!!
• Integrate what is valuable and saves time
• See when your users evolve. Adobe noticed things like RAW workflow, widescreen monitors, etc… Breaks based on user habits
• Watch out for reusing objects if they don’t provide the same experience
• Design for workflows
• Capture what the user wants to do
• Adobe found users all most always select the advanced mode when given a choice, they feel like they are missing out on something if the don’t
• Pick up on user patterns
• BMW has consistent “signatures” from the MINI Cooper to the top of the line BMW
• All about goals, again – goals not features
• Make it easy for developers and designers to stay consistent with guidelines and toolkits
• Use peer review to pick up on problems in consistency

Stop designing products

(More detailed notes here)

• Design from the outside in
• Check out: http://www.flickr.com/about/

Designing for Convergent Devices

(More detailed notes here)

• 10ft design vs. 2ft design vs. 6in design
• Control, Branding, Standards, Trust
• Check out: http://www.zannel.com/
• Look for the “Golden Pathway”
• Remember the ecosystem (not just your product)
• Support: Environment, Activities, and Device (Display, Input, and Platform)
• Remember things like: Screen, Font and Colors, Input Devices, Focus States, User Feedback, Task Complexity, and User Expectations
• Have the web be a companion for mobile. If possible have users fill out information on the web, then interact with the mobile experience.
• Keep it simple, get only NEEDED data upfront – and continue to fill out a user profile as your “relationship” goes on

Mobile Design

(you can download the full presentation here)

• 60% mobile users access mobile data once a month
• XHTML-MP is WAP 2.0
• Common devices to test for: Nokia S40, RAZR, Treo, “Give-a-ways”
• Check out: http://www.deviceanywhere.com/

Moving Corporations to Accessibility

• Use tools like: Contests, Awards, and Classes
• You need a evangelist within the company
• Have guidelines and resources for your developers
• Check out: http://www.webaim.org/

Get Unstuck

(More detailed notes here)

• Make sure your team feels like they are doing good work, being productive, and fulfilled
• Have an open process, open up to other teams in your organization
• Work with Design towards a goal
• “Just add value”
• Stop too much process
• Find the middle ground between user needs and business goals
• Have one member of your team always focused on the end solution

Mobile Application Design Challenges

(More detailed notes here)

• Check out: http://radar.net/
• Remember to be aware of the number of clicks in the UI
• Check out: http://www.smallsurfaces.com/

Design Patterns

(More detailed notes here)

• Focus on solutions, encourage good behavior, and remember – “reusable…”
• Most of the good design work is done in the “fuzzy middle” (hard to provide guidelines for)

Customer Service is the New Marketing

(More detailed notes here)

• Check out: http://www.zappos.com
• Zappos has a “Culture Book” they put out each year
• A recurring job title I keep seeing from the panelists is “Community Manager”
• Find ways to get closer to the customer, let your call centers talk to design/development
• Admit mistakes
• On one forum 60% of questions are answered by users
• 30boxes – 3 employees, 30,000 users, forum only help – they spend about 4-6hrs a week on customer service

Truth about Mobile

(More detailed notes here)

• Does your mobile strategy substitute, or complement your experience?
• Advertising is not ready yet
• Data usage is almost there (currently 32%), better to be ready sooner then later

SXSW also had a good mix of keynote speakers, with Will Wright’s being my favorite of the bunch.

Overall it was a great experience – I learned a lot, while being inspired to do more.

So there you have it. My brain dump, remember podcasts and vidcasts will be available here in the near future.

Yes, I just happened upon a Wii the other day (and by “happened upon” I mean waited in line for 45mins at a Best Buy last Sunday). The verdict? Pretty cool. I’ve been a fan of gaming since my Dad’s Atari – you know the kind that took the 5 1/4 discs (remember those kids?). But what’s different this time, then the other 10+ gaming machines I’m sure I’ve owned over the years – it’s not just about the graphics, it’s about the experience.

And by what the press is saying and lack of Wii’s in the wild, I’d say it’s working for Nintendo. “Businesses must orchestrate memorable events for their customers” (via the Experience Economy“), and that’s just what Nintendo set out to do. In fact if you visit wii.com, you might expect marketing slogans, demos, flash games – but what you get are Experiences. The camera is turned on the gamers using the Wii, not the Wii itself. This is selling with just the experience.

How many products can you turn the camera on the users and get a equally impactful result? Maybe the first time someone uses a iPod? Or the first time someone gets into a Mini? How about when you found you could drag a map with Google (and talk about passion!). I’ve been saying for some time that the experiences we have today are greater then ever before, on and off the web. Mike Rundle had a recent post “The User Experience Bar Is Now Sky High“, referring to the great round of advanced web applications on the horizon. As someone who creates web applications and strives for “a killer interaction design experience”, not only do we as UX professionals need to look to the web, but there are so many great experiences off the web we need to compete with also.

As an example, every Wii has an email address and can send and receive email. That’s pretty cool. But the UI for the email interface is something I’ve never really seen before. Is it the most efficient email app I’ve ever seen? No. Is it intuitive? Maybe. Does it extend the experience of the Wii? Yes. And now we’ll have 4+ million kids using the Wii for email in the upcoming year, sending and receiving emails and photos to friends and family. So what happens when the next google/yahoo/Microsoft email client targeted at 8-18 is released and doesn’t measure up to the Wii?

I’ve recently taught my two year old to use the computer (it’s a Mac), and before understanding what the mouse was, he always wanted to touch the screen. If a two year old wants to touch the screen, then isn’t that the most natural interaction? The Wii may let you feel like a kid again, bringing the sensation of “feeling” to your TV. It mimics your twists and turns as well as vibrates when you hit a ball into the outfield. It elicits feelings, and brings you into the experience like never before (at least not in the home…).

They also created a level of personalization with the Mii, a virtual you. Or a virtual anyone really. Already people are creating celebrities and political figures to insert into their games. How about boxing with George Bush? Or a scene from Big Lebowski with Wii bowling…

So when was the last time you actively sought out a new interaction? Are you taking into account all the interactions with designing interfaces? iPods, GPS Devices, PDAs, DVD players, Kiosks, Games, toys???

And… if you have a Wii post your friends number ;-)

In web design there are a couple things that are for the most part consistent across sites to provide a more uniform experience. Things like most logos tend to be on the top left of a page (as well as link to the homepage) and the search goes somewhere near the top right. Besides browsing the web, something most internet surfers do is shop. It could be clothing, electronics, jewelry, whatever – but this common experience has becomes very inconsistent when it comes time to buy.

I’ve sampled around 30 different product pages to see where the “action” is.
First, It’s not always called the “buy” button, I’ve seen:

• Add to Cart
• Buy this item now
• Add to Shopping Cart
• Buy Now
• Add to Bag
• Buy it
• Order
• Add to Shopping Bag

Some buttons have been crowded around product information, while others enjoy a nice amount of whitespace. The locations very, but as you’ll see here, groups do begin to form and a clear majority is formed:

(download as a PDF 1mb)

You can also click on any of these images to view via flickr

(download as a PDF 1mb)

Looking over these 25+ product pages, the thing that stands out the most are the visual design treatments. The amount of whitespace, color, size, etc… This is what draws the eye on a page, and keeps the visitors on your site from getting confused or lost.

Over the past couple of months I’ve seen some new user interface ideas on some popular websites. Some were improvements, others a bit awkward to use. I’ve collected screenshots of these new UI elements and talked a bit about each of them below.

Hover Bread-crumbs:
view: http://www.apple.com/macpro/intelxeon.html

I’m actually not a big fan of bread-crumbs, but adding it as an interaction when hovering over the logo is a great idea. Visitors typically go for the logo when they are lost or can’t easily find a home button. So displaying the site path at this time is perfect. I hope to see more of this interaction.

iTunes Navigation:
view: http://beta.blockbuster.com/online/home

I like the iTunes style navigation, but here it’s not working. A combination of navigation conventions being ignored and the fact that it’s slow and poorly implemented make this a big don’t. This type of navigation can be done well like on the radiotime.com site.

Under-tabs:
view: http://maps.google.com/

I like the interaction of having quick options when searching Google maps. the quick transition from map, to business, to directions is usable and easy to understand.

Browsing
view: http://beta.blockbuster.com/online/home (as well as wetpaint.com signup and iTunes)

When browsing something visual like templates, CD covers, DVD covers, etc… this is a great way to browse a selection with out taking up too much screen real-estate.

The Disappearing Main Nav!
view: http://www.yourpsp.com/psp/
also seen: http://www.brainsonfire.com/FIRE/

I’m not sure about this one. I know the two examples above are more “experience” sites so it’s ok to bend the rules, but in most cases removing the main navigation is not a good idea. At least on the PSP site, when you hover over “Home” you get the main nav items without having to go back to the homepage.

All of these are still too new to be trends, but it’s something to keep your eye on…