#UX People, how should I solve the interaction problem with this form layout?
via Seesmic
david mosher
personal and semi-professional opinions of a web designer and developer living in saskatoon, sk, canada
Filed underux
Facebook "Live Feed" vs. "News Feed" Interface is confusing
I was looking at this as I logged into Facebook earlier and noticed that when you click on "Live Feed" or "News Feed" it becomes first in the navigation list bumping the other one over. Does this seem really counter-intuitive to anyone else? Not to mention that I can't even decide which one I really want to look at and it doesn't remember my preference. My proposition would be to put this stuff into fixed tabs that don't "jump around".
via Seesmic
Prototyping step 2: hallway tested to discover flaws. (10 minutes is all it took). Then refine paper prototype.
via tweetie
Prototyping adding some links to a profile. Stage 1: paper
via tweetie
Usability failures in the wild: Lego and Petro Canada
I've been doing a lot of reading about usability. It's made me think a lot about the user experience when I'm designing and developing. It's also made me think a lot about the user experience when I'm NOT doing anything computer related.
Lego.com Usability Failure
I recently went to the Lego website to try and get a catalog sent to my house. I remember reading through these catalogs as a kid and coming up with all sorts of creative things I would be able to do when/if I received a certain set. Heck, half the fun for me was just looking at what the Lego designers had come up with. So yesterday I wanted to order a catalog for Andy, my 2.5 year old son, as he's been really enjoying our Lego collection. When I got to the last screen in the slideshow and tried to go back to re-enter my correct age, it wouldn't let me! It cookied me and I had to clear my cache to be able to re-enter the form information. Grrr..
[Here's the catalog request form, so you don't have to hunt for it] :)
Petro Canada Usability Failure
I went to fill up my car the other day, and wanted to pay at the pump. There were 2 icons to display the "right" way to insert my debit card... which one was the right one?
(As an aside, I realize the irony in posting about usability failures when Posterous won't even let me select a single image to display underneath my headings. It wraps them all up into this slideshow. Hey Posterous, if you're listening, how about an interface that allows me to select and insert single images that were uploaded as part of a bundle?)
Static design processes lead to usability failures
Since my excursion to AEA '09 in Boston I've been doing a lot of thinking about all of this "User Experience" stuff. Much of what Andy Clarke said in his Walls Come Tumbling Down presentation has been ringing around in my head, resonating with so much of my experiences over the last few years. Without diving into the entire presentations coverage of the current economic situation being a stimulator for workflow process change, I want to focus on a few thoughts from 1 slide in Andy's presentation.
"Designers work on static look and feel visuals"
There is a design disconnect problem when the medium we publish to (the web) doesn't match the medium we design in (static images). The web is dynamic, elastic, portable, modular and can be repurposed in any number of ways. Many web designers work in Photoshop and Fireworks to produce mockups that are static, rigid, not portable and often discarded after the initial design process. By designing in these static tools it is nearly impossible to answer the "what if?" type questions that we need to be asked in order to improve the efficiency of our design process and, most importantly, the usability of our websites and applications. What if the font size is increased by the user? How does that affect neighboring content? What happens if this column appears second in the markup? These things are all dynamic in nature and these questions cannot be effectively answered when the tool we use to produce mockups is static in nature.
"Designers and developers often work separately"
I firmly believe that if we are to improve the user experience of our applications that designers and developers need to work in harmony from the very beginning. Traditional "designer/ux" work processes such as paper prototyping, white-boarding and lo-fidelity mockup construction should be participated in by developers. In fact, the entire design process needs to have input from both designer and developers in order to be successful. Far too often designers pitch concepts and hi-fidelity mockups "over the wall" to developers once things have been finalized, creating a disconnect between the two; this promotes division and resentment. Designers often don't understand the limitations that might be imposed given the technology that developers have been given to work with, and developers often don't understand the usability considerations that went into design decisions. Developers might have insight into usability based on past experience that can go unheard because they aren't included in the design process, and designers might know what the best way to develop a certain feature might be. (You can see how this could go on and on).
In a perfect world we'd all be designer/developers with the capability to have enough foresight to solve all these problems before they happen; unfortunately this is not a perfect world. I think the solution to this disconnect isn't that complicated though; mutual respect for each part of the process is a start. If design and development can co-exist with unburdened communication in the early stages of a project things will be in much better shape. Part of this has to do with breaking down the traditional barriers that seem to exist between these two disciplines, but I believe Kent Beck covers this subject in much more elegance than I would.
"Testing, by users and for browsers and accessibility comes last"
It's interesting to me that the people we build websites and web applications for are often consulted last when it comes to design and usability considerations. Even when there are people on a project team who have usability experience it seems that _they_ are the ones consulted when really we should be pouring our initial efforts into getting feedback from potential users. It is so arrogant of us as designers/developers to make assumptions about what is "best for the user" without ever asking them. This can be a hard problem to tackle because many teams don't have dedicated testers and some teams utilize developers to do nearly all of the functional testing. Developers _can_ test, but they aren't the best testers in my opinion; developers are often working in an isolated area of a website/application and don't have the "birds-eye view" required to really understand how all of the components fit together. When developers are the primary people doing user/functional testing, and this testing comes at the end of an iteration it can lead to design implementations that often overlook simple usability problems.
These problems are all solvable, they just involve a lot of open communication and respect between developers and designers and the willingness to abandon processes that are based on static models. The web is dynamic and we should be in our design/development methods as well.
AEA 09, Themes and Perspective
I'm sitting in Boston's Logan International Airport because my flight was delayed. Normally I'd be tired and cranky but I'm just tired; the rest of me is so encouraged due to the emotional and motivational high I'm on after participating in An Event Apart: Boston, 2009.
Having not attended before, I arrived not knowing what to expect and was fairly intimidated by the number of people in attendance. My fear quickly dissipated after the first day of presentations and the opening night party, which brings me to the first of a couple themes I identified throughout the conference.
Connection
There was connection everywhere at AEA09; mobile devices, laptops, business cards, conversations and ideas that connected with each other to form a common framework for the event. The most important type of connection I participated in was personal interaction and meeting new people. At the opening night party I had the privilege to speak with some of the presenters including Jeremy Keith (@adactio), Joshua Porter (@bokardo) and Whitney Hess (@whitneyhess). All of them had really interesting things to say but what struck me was the common thread amongst them all: passion for the content, the standards, and the users. Even amongst non-presenters this seemed to be a common theme.
That evening I also had an engaging discussion with a Googler and two Facebook employees. We talked about MyFrontSteps and Homebook, development strategies, front-end unit testing, user experience and what the most successful types of social software are. An interesting point they raised was that the most successful applications are those that don't compete with what the Facebook platform currently offers users. I learned that Google and Facebook don't do any javascript unit testing. The Gmail team doesn't use GWT (as it was experimental when Gmail was being built). Facebook has a fairly small team of front end developers and 1 person was responsible for the Facebook iPhone application.
Pixel Perfection is Dead
For about a year now I've thought that being required to produce pixel perfect websites across so many different browsers is insane. This theme was definitely apparent throughout AEA09 as multiple presenters hammered this point across. It's almost like they wanted to really drill it into the attendees so that we can go back to our clients and continue to communicate the point. Dan Cederholm, Jeremy Keith and Andy Clarke all provided audience participation moments where they would yell "Do websites have to look the same in every browser?" to which the crowd would emphatically (and sometimes, not so emphatically) respond "NO!"
It definitely seems like a touchy subject; at one point someone in the crowd shouted "YES!" because she was convinced that her clients could never be persuaded that this was the way to go. I think it's inevitable that web developers and designers are going to get to a turning point where supporting 8 or 9 browser rendering differences is just not going to be feasible to clients from a monetary point of view. As Andy Clarke put it during his presentation, "your clients will quit worrying about pixel perfection when you convince them of the value you can offer by producing more features that make them money in less time." -(rough paraphrase). There was much talk of "visual rewards", basically offering the nice visual touches to the browsers that support them without worrying if IE looks good. Safari4, Firefox3.5 support border-radius, text-shadow, box-shadow and rgba; Internet Explorer doesn't. That's ok, IE can live without those flourishes because ultimately it's all about the content anyways, right? ;) In fact, Andy Clarke has gone as far as creating a style sheet that can be fed to IE6 that strips away all substance except the text and positioning.
Perhaps it would be more accurate to say that IE needs to die, but web developers have been saying that for years and it hasn't happened yet. We need to convince our clients that the time spent creating unsemantic markup and hacks to get things to work in IE just isn't worth it.
User Experience is Exploding
UX, IA, IxD: all these te
rms seem fairly new to me but there were so many people at AEA09 who were involved with these disciplines in one way or another. The importance of these positions should NOT be underestimated. Interaction Design, in particular, is an area I feel is severely underrepresented in most organizations. So many times design teams produce static mockups in a very high-fidelity mode through applications like photoshop or fireworks without giving any consideration to user interaction. It's virtually impossible to uncover problems with interaction usability through static mockups and often these issues are not extracted until late in the development process. The solution is to start with a much lower-fidelity solution like paper prototypes and then possibly interactive html mockups. Once these have been created usability testing should be performed at each stage and iterations in design should be rapid. Too often usability testing happens at the end of the development process and this needs to change.
Whitney Hess, a presenter and UX Engineer who I had the pleasure of meeting, encouraged me greatly in this area. Producing web interfaces that are clunky and unusable is a surefire way to limit revenue, but aside from the business concerns I feel that at the heart of UX there is a method to connect people with technology in ways that aren't limiting. I can't take full credit for that initial thought however, as a great conversation with Matt Ventre is what really prompted me to see the true nature of UX. If anything, we should be producing web interfaces that focus on providing great content that is portable and formatted in a standards compliant way, housed in an interface that makes the entire experience seamless.
Epiblog (yes, I made that up - think epilogue)
I head back to Saskatoon with a sense of determination and optimism. An Event Apart is truly a special place, one that empowers people to spread the gospel of standards, openness, user experience and excellent design. I think Andy Clarke is right when he says that we're in a transition time in the web development world. I tweeted the other day that I couldn't remember how I managed to develop before Firebug; I think it will be the same way 5 years from now except we'll be asking how we ever managed without making UX a priority ;)
