Beautiful UI Gestures

Check out this great collection of UI gestures. I really like the fold below.

Nice example of a “fold” gesture.

The Error Only Approach to Form Field Validation

Christian Holst’s article Form-Field Validation: The Errors-Only Approach outlines an interesting error message strategy. The idea is that when a form is submitted and errors are returned, only the fields that need to be corrected are (re)displayed to the user instead of showing them the whole form again.

This makes sense conceptually because the users only see the items they have to correct so it’s immensely clear. The problem, which is a show-stopper, is the loss of context. If the user wants to change their inputs based on their errors, they’ve already lost the context of the form itself.

It’s an interesting concept though and may have some specific use cases where it might be advantageous to minimize the amount of data displayed to the user, like in mobile contexts.

UX Resources for Project Managers

I’m leaving my current job for a new gig next week and one of my project managers asked me for resources to learn more about UX. Below is my response:

So with UX it’s pretty important to get a foundational understanding of the practice. The best book for this is “Don’t Make Me Think” by Steve Krug: http://amzn.to/QAz9Vu.

If you read one thing, make it that.

Other books I’d recommend:

• A Project Guide to UX Design: http://amzn.to/MZskZx
• The Elements of User Experience: http://amzn.to/L8hp5H
• Information Architecture for the World Wide Web: http://amzn.to/NKGwGP
• Neuro Web Design: http://amzn.to/OJvVSk

The main blogs I read that are just about UX:

• http://www.uxbooth.com/
• http://uxmag.com/
• http://www.alistapart.com/
• http://www.boxesandarrows.com/

Other “industry” blogs I read are:

• http://www.456bereastreet.com/
• http://www.lukew.com/ff/index.asp
• http://www.seomoz.org/blog
• http://weblog.muledesign.com/
• http://www.smashingmagazine.com/

Let me know if you need anything else!

-pb

What the Fuck do I Tell a Bunch of Project Managers About UX Design?

I’m giving a talk to a bunch of project managers about what I do, user experience design. In an effort to kill two birds with one stone, I thought I would just write a blog post to share with them and you.

The group of PMs that I’m talking with have a pretty thorough understanding about what I do and UX process in general. What they may not be as strong in, is the interactive design world in general. How do all the components fit together and how does UX help coral them all into a meaningful whole?

So the main areas we will cover are:

1. What is “interactive” anyways?
2. How does this world wide internet actually work?
3. What is user experience design?
4. UX and project management sitting in a tree
5. Let’s get healthy with lean UX

1. What is “interactive” anyways?

The term interactive is a catch all for anything that isn’t print or sculpture. Interactive is something you can touch and effect. So, a website is interactive, a billboard is not. The knobs on you washing machine are interactive, a commercial is not.

Marshal McLuhan classified mediums as a dichotomy of either “hot” or “cool” based on their ability to engage the user. Hot mediums include movies, radio, lectures, and print because they require little effort for the user to engage with. Cool mediums include TV, dialogue, and the internet or interactive design because they require more engagement on the user’s part to do their job.

Since we have to to work harder to engage and effect the user with interactive design, this means or projects are much more complex. With print design, a copywriter and designer alone can create the worlds best ads for the biggest brands, Mad Men style. Interactive design however, usually takes an army of specializations to work together to deliver something useful to the end consumer.

2. How does this world wide internet actually work?

Since 90% of interactive work winds up on the internet, it’s important to understand how the fundamentals of how it all works.

For us, this means that our job is to create the file that the viewer requests. This includes all of the the backend pieces to make sure it can be easily located among billions of files, that it’s in the right format so everyone can view it, and that it displays just the way we want it to. That’s why we worry about whether or not we are hosting the site or if the client is, or if it needs to be on Google App engine or Amazon’s Cloud Services because each of these creates it’s own layer of complexity in delivering our file to the viewer.

3. What is user experience design?

Wikipedia says that “UX is the way a person feels about using a product, system or service.” So then UX design is the act of designing a product, system or service with the goal of maximizing the positive feelings and experience that a user has.

In this regard, the user becomes the central figure in the design process. This is a shift from traditional marketing design, where catchy concepts reigned. Now, whatever the end product may be, it must fill a need for the user. For most functional websites these are generally specific tasks that the user wants to complete. In the case of many advertising projects, the goal is harder to discern. In general, the goal of advertising is to get the user to do something that they wouldn’t necessarily do on their own, like buy a specific toothpaste or get excited about SSD drives or submit their personal data into a lead gen form.

When it comes to the collection of things a UX designer does the list gets pretty long, but the core of the discipline is decision making. All of the deliverables from user research and analysis to wireframes and prototypes to content strategy all help us figure out what goes in that file the user asks for.

So, User Experience is the umbrella discipline with many sub-disciplines. A few of the more important ones are:

• IxD or Interaction Designer – these folks work on the behavioral components of a project. These behavioral components can range from how a button should behave to how an experience should be modeled off of real world interactions (like the metaphor of files as a navigation element). Their domain is wireframes and prototypes.
• Information Architect - these people are the ones who figure out the larger structure of the information in a website. They also love labeling all of the different components (pages, content types, actions, etc.) of a website so people can find them easily. Their domain is sitemaps, vocabularies, and page diagrams.

• Content Strategist - these are the people who worry endlessly about what content do we have, why does it matter to our audience, what should we get rid of, how do we create new content, and how do we get it from concept to live on the website. Their domain is really lengthy content inventories and super boring content strategy documents. However, these are arguably the most important people in the entire process because the audience is only coming to the website for the CONTENT.
• User Interface Designers – they are much closer to their graphic design counterparts than they let on. IMO a UI designer is 1 part IxD, I part graphic design. They are the ones who work in Photoshop to execute the final PSDs that move into development. Often a UI designer also has a working knowledge of HTML and CSS to help make their designs come to life. Their primary domain is the actual design file.

Also, bear in mind that all these practitioners will argue to the death about what they actually do. This is an ongoing, and slightly annoying, debate in the UX world. In the end, as our UX Jesus, Jesse James Garret has eloquently said, “we are all UX designers.” This is an important shift in thinking that most agencies don’t get. Every single person that touches a project helps shape the end experience. Yes, even project managers.

4. UX and project management sitting in a tree

For the most part this one is self explanatory. UX designers can’t get anything done without PMs and vice versa. I worked a few projects as a PM and the similarities between the two are obvious. When we work together well, the basis of the project is pretty solid.

Following are my list of demands from any PMs I work with:

1. Be engaged with the project. We can manage ourselves for the most part so unless you are going to help us make decisions, GTFO.
2.  Understand what you are working on. This means you have to understand why it is important that the button is justified right and red. You also need to understand why we had to build this application on Amazon EC2 and why that helped us resolve  server calls between two disparate services. This is the important stuff that we need help making decisions about. We need to know where the client is at and what they are thinking.
3. Set client expectations. All that UX deliverables really do is set client expectations. They let them know what to expect in the final product.  Your job is to tell them constantly how we get there. They should know exactly where the project is at every single day. No exceptions.

Other than that, we work pretty harmoniously. All the UX documentation is designed to facilitate the rest of the project so embrace that and familiarize yourself with our deliverables.

5. Let’s get healthy with lean UX

Lean UX is a relatively new concept that essentially argues that the UX deliverables business is slow and process heavy. Lean UX means that we don’t sell sitemaps and wireframes to a client because nobody needs or wants either. However, clients do want UX, and they want it bad. So what’s the best way to deliver on time and on budget? We get rid of the deliverable waterfall and move directly from concept to testable prototype. This doesn’t mean we skip all the important bits, it only means we don’t focus a month long deliverable around them.

Smashing Mag has a great article about it here

And lastly, Mike Tyson singing Ipanema is perhaps the best UX of all time:

Auto Complete vs. Auto Suggest

Auto complete and auto suggest are used in pretty similar ways these days but there are some key differences. In his article for UX Magazine, “Designing Search: As-You-Type-Suggestions,” Tony Russel-Rose explains exactly how the two differ.

The purpose of auto-complete is to resolve a partial query, i.e., to search within a controlled vocabulary for items matching a given character string.

The purpose of auto-suggest is to search a virtually unbounded list for related keywords and phrases, which may or may not match the precise query string.

Check out the rest of the article at UX Magazine

Thatcher

To me, consensus seems to be the process of abandoning all beliefs, principles, values and policies. So it is something in which no one believes and to which no one objects.

- Margaret Thatcher

Clear’s Gesture Based UI

The “to-do list” app market is pretty flooded by now with tons of great options but Clear’s interface is hands down the most elegant. My only concern is the interface gestures it uses don’t necessarily feel natural and intuitive. Instead they feel like they are a learned behavior. The simplicity is fantastic, but there is something to be said for interfaces that use metaphors and interactions modeled on real life behaviors.

Take a look at their promo to see what you think.

Wright

Art is like masturbation. It is selfish and introverted and done for you and you alone. Design is like sex. There is someone else involved, their needs are just as important as your own, and if everything goes right, both parties are happy in the end.

— Colin Wright

Getting the Experience Right the First Time

I was recently in a meeting about a mobile specific website design where the overarching strategy was being subjugated by our clients and account executives misunderstanding about our audience as well as the mobile medium. Fortunately, I was able to steer the ship back on course but there was a definite moment of resistance from the room to create the right experience that matched our audience’s needs.

It’s important that one is always willing to change direction and put in the extra effort to get the experience right from the get go. Honestly, what we’re doing is really expensive. Like hundreds of thousands of dollars expensive. Don’t be lazy when it comes to design strategy. Being lazy about a design decision, even once, will affect every aspect of the project. Project timelines will slip, engagement rates will fall, teams will become demoralized and everyone will have to work harder to make up for that one minute of lost vigilance. Real talk.

The Importance of Sketching

Ok, so UX people LOVE sketching. I think we love the the idea of sketching partly because it makes us feel more like artists. Back in the day, UXsters aspired to fit into the design process as intermeshed as their graphic design counterparts and sketching gave us a common artistic bond. Now that we’re a bedrock part of the big happy design family, why is it so important to sketch? Well, there’re lots of reasons:

1. Remove constraints of the digital medium
Working in design software like Axure or Omnigraffle makes you focus on the technology at hand and not the user experience. Stencils, widgets and pattern libraries all constrain the creative process by forcing you to think like them. In order to create something fresh, its essential to stare at a blank piece of paper because it’s easier to imagine and fashion an ideal experience.