I was in New York meeting with some clients awhile back, and man, there are a lot of people up there. I did also notice the amount of people with bikes, which is crazy because of the way cab drivers drive. I would be absolutely terrified to be on a bike there, though with the price of gas and parking cost, biking is probably one of best ways to get around in New York and most major cities. But It seems that the NYPD has been cracking down on where these cyclists are riding their two wheeled leg powered vehicles, by handing out citations to offenders not in the “bike lane”. Here is a great video on why people are not always in the “bike lane”. This reminds me of user experience in so many ways. So, you create a solution for a user, but the solution is broken, and then you punish your user for trying to avoid hazardous road conditions? Now if you ask me, that is a terrible user experience.
Obviously this guy’s video is sarcastic and funny but it’s also very dangerous. But It makes a perfect point and gives me a great visual representation to the issues that user experience and design agencies face, metaphorically speaking. I’m going to go through some of the things we do at Lift to provide the best user experience for our projects.
User experience design is a lot like what I mention above. It’s a solution to a problem. You have a particular user, in this case a cyclist, who is trying to get to point A from point B. The solution that cities have provided are “bike lanes” to inform vehicles that their is a dedicated area for cyclist’s and to ensure safer trips for those that use them.
Now the problem above is that there are obstacles that need to be removed so the cyclists experience isn’t what you see in the video. Judging by this guys frustration he’s having a terrible experience because the NYPD is handing out tickets to the cyclists for avoiding the obstacles. Needless to say they are just trying to find a better solution to complete their task.
That’s like me getting punched in the face by a waitress because I asked to have my broccoli cheddar soup a different way, with bacon on it. Which by the way, is amazing. Just because it doesn’t come that way doesn’t mean the waitress can’t make my customer experience/user experience better, right?
The worst she could have said was I’m sorry, but unfortunately we don’t have bacon like that to place on your soup and offer another solution. That’s a heck of a lot better than getting socked in the face. Much like getting a ticket for avoiding the possibility of being thrown from your bike or breaking a femur bone. Ultimately the NYPD should be fixing the solution by removing the obstacles, no?
How Can We Make It Better?
What’s my point here? Well when user experience agencies design interfaces they are doing exactly what needs to be done to allow users to complete their task in the most simplest way possible. By removing unnecessary obstacles to keep the interface clean and intuitive. So users don’t have to change their normal path to get their tasks accomplished. That’s the goal.
Granted this subject has been discussed many times but I’d like to share what we do at Lift. We spend a lot of time with our clients discussing their needs and outlining their expectations. During our discovery sessions we develop multiple deliverables, well, at least the ones that make the most sense to the client and the budget. Lift provides this documentation because we want to articulate on how to execute the best user experience possible to our clients. Lets go through those now.
An Information Architecture, also known as an “IA”, is by far the most important piece to the puzzle. It’s a basic diagram that explains the representation between each page, template, content type, etc. I know that if two items are connected in this diagram then the content will have some sort of relationship. It’s the fundamental building blocks of building a general content strategy. Having this deliverable will ultimately prepare the path for where content goes and how you can move your users through your site. Not every web project requires an IA, and I’ll touch on that a little more in a moment, but for the people that would like a a great example, below is an IA diagram I did for a client recently.
Task Flows & Use Cases
Now dynamic applications are a little different here. As mentioned above they may not benefit with an IA but something more detailed than that, Task Flows and Use Cases. Web and iOS apps require more structure and more of a defined flow. Some apps have even physical gestures involved like the shaking of an iOS app to clear the page or flipping the phone upside down to have something happen in your application. As a lot of the apps today have very unique tasks they need to be thought out appropriately for the best user experience possible.
Now, Use Cases are great! Very closely related to Task Flows, but a little different. I like creating them because a) their fun, b) I can make them really quickly, c) they are so very helpful with very large web applications. Use cases can be a simple documentation with basic tables that outlines the user tasks available for the application. Each task could have the following information.
- Instructions to complete the tasks
- Related Task Flow
- Target Iteration/Version/Release
That is just a few examples of information that can be within a use case. You can make whatever items you would like for each uses case. I find my self using that list above when I create them. What’s great about these documents is that you can reference the task flows by just dropping in the diagram right into the document and that can be extremely handy.
Well, by far, one of my favorite deliverables are Wireframes. I feel that a lot of designers have been moving from this and going directly to HTML, CSS because of how much interaction they can show. Believe me, I do not disagree with that. Faster is better, and it’s always great to be able to show the client a working prototype. In the book Hardboiled Web Design by Andy Clarke he really pushes this method. I actually think it’s a great method….but there are times where the client needs to have that time to chew on things and be able to make fast changes. I think that Wireframes provide that for Clients. It also provides a faster approach to organizing layouts for content before you are even in the creative phase.
Here is a list of software out there that I would recommended.
- Invision App – I use this the most and at Lift we use Photoshop as the tool of choice
- Omnigraffle Pro
- Balsamiq Mockups
Now, when we wrap up the discovery phase we usually try to propose the creation of a functional specification document. This is a document is what we compile that houses the IA, Task Flows and Wireframes and puts it into a nice document for client sign off. This document will also contain annotation for interactions and how the site will function. Our team reviews this during a Technical Analysis meeting and we make sure our plan fits well with the technology and budget. This document can be extremely crucial for us as it also contains specific business rules and requirements that were defined during discovery meetings. This is something I really like to push to our clients as it gives us a way to track changes as well as the ability to develop a road map for their project for the future.
Ultimately, you have to find what works for you and your clients. These deliverables have been a huge help for our team to gather requirements and develop a better understanding for the client’s needs. They are the standard deliverables for our projects and I think they will help your next project. Give it a shot!