The value of wireframing even with incomplete information

The task of wireframing in application development, as I’ve come to know it, should begin after user research has been performed, and a complete set of requirements gathered.  But what happens when, for whatever reason, you just don’t have access to user research, or a full set of requirements?  What if all you have are some rather unspecific, vague notions of what the user should and should not be able to do?  Is wireframing at this juncture useful?  I say yes.  With incomplete or even almost non existent information about target users and or requirements, wireframes can still be a valuable tool in the interface designers toolkit.

The key to a wireframe’s usefulness is that it is a visual document.  Presumably it will be presented to one or more product stakeholders, and they will have the opportunity to review it and comment.  Having something visual to respond to is one of the easiest ways to generate ideas, and identify incomplete specifications.  A good assumption is that if a product’s requirements are incomplete, someone at the wireframe review will notice the gap by responding in the context of the visual presentation.  “Where is the Cancel button?  Oh…not in the requirements?  Well it’s obvious that on this screen the user will need to be able to cancel, so we have to add that as a requirement.”

In this way, a wireframe can be an ever evolving document, which begins by starting the requirements conversation.  Of course ultimately, just prior to feature development, the wireframe should have all of the necessary specifics so that the developers can use it as a guide (along with the relevant user stories).

Share/Bookmark

I’ve just come across Yahoo’s new home page, which features a clean streamlined look, the ability to add your favorite pages as links right on the homepage, and most interestingly, a module that gives you access to (a subset of) your Facebook account. This module, which appears when you hover your mouse over the Facebook link on the let hand side of the page, will–after sign in–open up your facebook friend feed right there on the Yahoo home page.
Apparently Facebook has been giving third party websites the ability to connect to their users via Facebook for 8 months now (through a set of API’s collectively called Facebook Connect). But the Yahoo home page is the most high profile example yet. This is certainly the first time I’ve come across it.

The benefits of Facebook connect Facebook is obvious. It’ll gather more information about its users, and become more ubiquitous within the wider web, as users remain connected to its platform even while not actually on the facebook.com.

And the (potential) advantage of the relationship to third party sites, such as Yahoo are that those sites can become more engaged with their users by providing them with more relevant content as a result of having access to their facebook information. It’ll also potentially be used as a tool for enhanced direct marketing, although Facebook will have to be careful to to repeat it’s Beacon mistake.

The potential benefits to users of third party sites are that they’ll be able to tap into their network (or social graph, as Facebook calls it) as a source of information on those third party sites, and not just facebook.com. As a hypothetical example, if I’m looking for a movie to add to my Netflix queue, and I, and my friends were sharing our facebook information with Netflix, then the site could theoretically inform me of my friends picks–provided they granted Netflix access to share that information–and that would be more helpful to me than anonymous recommendations.

I like the idea, in theory, and it’s seems like an exciting new direction in the evolution of the way we use the web, if implemented properly. However there are some privacy concerns I have. In order to allow Yahoo to access my Facebook account, I had to give it the Ok on a couple of different requests relating to access to my information. The initial confirmation dialog:
Connect Yahoo! with Facebook to interact with your friends on this site and to share on Facebook through your Wall and friends’ News Feeds. This site will also be able to automatically post recent activity back to Facebook.

Related Services: User Experience Design, <Facebook and Open Social Applications

Another dialog asked me to confirm this:
Allow Yahoo! to publish posts or comments without prompting me.
Posts will appear on your Wall, in your friends’ News Feeds and in applications like Photos, Videos and Notes.

Now what exactly is Yahoo going to be posting on my Facebook wall? I don’t want all my activity, once I am logged into the Yahoo network, to be potential fodder for conversation among my friends. This to me seems a little scary. Yet I went ahead and gave it access. I do know that it’s possible to edit my privacy settings as it related to individual third party applications, including Yahoo. But I’m curious what kinds of Facebook wall posts Yahoo will make on my behalf so I haven’t changed the settings.

Share/Bookmark

Spent some time playing around with Flash Catalyst, which was released by Adobe as a public Beta yesterday. I downloaded it today and got started on some of the tutorials Adobe labs has put up.
My impressions:
It’s pretty neat stuff. I could see myself prototyping with it, although Keynote and Acrobat are my tools of choice at the moment.
From my limited time working with it, Catalyst’s main function is to make it very easy to take Photoshop or Illustrator compositions and turn them into fully (front end) functional interfaces, complete with animations, transitions, fades, buttons states etc. One of the tutorials had me import artwork of a scrollbar, in 4 layers. Creating an actual scrollbar and hooking it up to a canvas was as easy as selecting the individual layers and telling catalyst which part of the scroll bar it was (up button, down button, track and thumb). It;s also super easy to connect user actions to specific screens (or states, as Catalyst calls them).

Although I’m not a Flex developer, It looks like it also works seamlessly with Flash builder (Formerly Flex builder). The workflow that Adobe is promoting is clearly Create designs in Photoshop or Illustrator, wire the interactions in Catalyst, then hand the file over to developers using Flash Builder to connect front and back end into a fully functional application.

I’m skeptical that the tools assume a rigid and defined workflow between design and development, which would make them useless for building applications in an agile iterative manner. Perhaps the format necessitated it, but each of the online tutorials I went through assumed that the front end interface would be completely finished graphically before any coding started. This is just not the case in any projects I have worked on. In reality, design iterates along with development. It evolves as new requirements are uncovered. Catalyst does maintain a dynamic link to its source PSD or IA files, and therefore conceivably designers could iterate on those files as developers are working on application logic. But I get the sense that Catalyst wasn’t created with that workflow in mind, and using it for iterative design/development would lead to major inefficiencies.

I hope to use it more as I have time, and hopefully get it involved soon as a prototyping tool on an upcoming project. Then I’ll learn some more about its strengths and weaknesses. I’ve only spent about an hour total on it as of this writing, so I’m not expert, but these were just my first impressions. Feel free to let me know what you think.

Related Services: Flex, Flash and Air, Custom Software Development

Share/Bookmark

Patrick Lynch over at A list apart has just written a great article about the role of aesthetics in web design.  In it, he specifically deals with the question of how much of a role visual aesthetic design should play in the design of web sites.  To answer the question, he delves into the somewhat controversial notion of visual decision making–the idea that aesthetics can help users in their decision making and aid in general website usability.

The article is written in response to assertions made by one Jakob Nielsson, who, citing numerous eye tracking studies that his team has performed over the years, concludes that any images, or other elements on a web page that are not integral to the site’s content or function are routinely ignored, and hence superfluous or even distracting.

But the author says no.  Aesthetic elements on websites, while not recognized as helpful in eye tracking studies, do perform a vital role in website usability.  Mr. Lynch cites the work of early 20th century Gestalt psychologists that have proven that the brain responds to images in milliseconds.  And more recent studies of web sites suggest that users make visual impressions of pages in less than 1/20 of a second–before eye tracking movements begin–and that those impressions more or less stay through the length of the visit.

He goes on from there about why “attractive things work better”, describing Don Norman’s three levels of human psychological processing (Visceral, Behavioral and Reflective), and why they all work together to create an impression of a product like a website.

Read the full article over here.

Share/Bookmark

Apple recently released a beta version of its Safari 4.  Naturally it has some really cool new features, including a helpful and slick start screen, and cover flow for your browsing history.  It’s also much faster than any other browser currently out there.  However there is one substantial “new feature” to the Safari 4 user interface that’s been generating lots of buzz (heat might be a better word).  Namely, in this new version of Safari, the tabs (which you use to browse multiple web pages simultaneously in one window) are physically located at the very top of the browser window.  The address bar, and all the other web page navigation controls are now situated underneath your tabs.

Now this makes more sense, given that all of the navigation controls apply only to the active tab.  In safari 3 and earlier (as well as every other Browser other than Google’s Chrome as well as Opera) tabs are situated in between the navigation controls and the content, which is visually misleading when you think about it, because it confuses the hierarchy of the user interface.

But making such a dramatic change doesn’t come without consequences.  As mentioned earlier, bloggers have been calling Apple out on what many see as a UI gaffe (and I’m inclined to agree with them).  The issues are discussed in more detail here, here and here.  But in summary, the new paradigm doesn’t conform to Apple’s own user interface guidelines, it makes certain actions more complex and delicate, and it’s frequently awkward and inconsistent with the way other application windows behave.  All of this diminishes the browsing experience, despite the good intentions behind it.

The lesson here is that its not as important for a user interface to make aesthetic and logical sense as it is to be usable.  What’s more, logic and aesthetics can sometimes blind a UI designer into making the wrong decision.  Apple’s decision to position the tabs at the top of the browser window is a logical one.  But by not taking into account the myriad consequences this radical move had, it’s decision was the wrong.  Yes, having the tabs run underneath the navigation controls makes less aesthetic and logical sense in the abstract than the new design, but unless Safari’s designers and engineers can fix the issues associated with the tabs on top, that doesn’t really mean all that much.

Share/Bookmark

photo credit: jcestnik

I’ve been using Keynote–Apple’s version of Power Point–for at least a year now.  It provides multi slide functionality with an easy to use drag and drop interface for creating objects of pretty much any kind.  It also works great at any level of fidelity.  I can do quick sketches during the early phase of a project, and when the time comes I can also build complete full color, pixel perfect mockups of an interface.  Apple gives me more creative control over my objects with Keynote than Microsoft does with Power Point, which frustrated me to no end every time I needed to place something with precision, or build a custom shape.

Pretty much all of my design projects will include some sort of user testing.  It is at this point that I must transform the wireframes I’ve built into a clickable prototype.  Now this step can and frequently does get messy, at least the way I used to do it.  I used to create my wireframes, one slide for each screen, or state–which is much more common now as RIAs take over more and more of the landscape–and then export them to PDF.  I would then take that PDF document into Adobe acrobat, which has a hyperlink tool, thus allowing me to add the interactivity to the wireframes.  The problem is that the  workflow is slow and inefficient because the tasks involved require two different programs.  As long as the wireframes themselves are perfect, I have no problem.  I’m done with Keynote.  However, any time I want to make a change to a wireframe, I must go back into Keynote, make the change, re-export the entire document as a PDF, take the page or pages that I’ve changed and, one at a time, place them into my existing hyperlinked PDF.  Also, Acrobat is not great at making the process of replacing pages very usable.  I frequently have to double check whether a page replacement actually worked because it’s not clear during the action.

Now, instead of using acrobat to add the interactivity, I simply use Keynote, which allows my to hyperlink any object to any slide number (or, for that matter any webpage, or even another Keynote slideshow).  That way I can make changes to both the underlying objects in the wireframes as well as the click-flow in the same program.  Keynote will automatically embed the hyperlinks into an exported PDF as well.  That way, the end user of the test needn’t actually have Keynote.  The whole process is much more manageable as a result, especially since my prototypes typically involve dozens of individual wireframes.

Share/Bookmark

A peek under the hood of google’s design apparatus.

In an interview with Newsweek magazine, Irene Au, User Experience Director at Google discusses her responsibilities, and in the process, reveals some telling things about the way design decisions are made at the multi-billion dollar internet company.  Perhaps not surprisingly, she makes it clear that Google takes a data driven approach to interface design just as it does to everything else.  The subjective opinions of art directors or visual designers don’t play a key role in the design of their products.  As she states, “A lot of our design decisions are really driven by cognitive psychology research that shows that, say, people online read black text against a white background much faster than white against black, or that sans serif fonts are more easily read than serif fonts online.”  No argument here.
But is a completely empirical approach to interface design desirable, or even realistic?  Isn’t it more likely that the left brain culture at google puts greater weight on the opinions of engineers, even if they are being just as subjective? One blog commenter put it this way, regarding Au’s interview with newsweek:

She says on the one hand that they rely on cognitive psychology research to improve the design, then in the next answer says that their pages have high information density, which cognitive research has shown to slow people down. She also says that they do what’s best for users, but that the founders believe there should be one way to do things (presumably whether that’s the way that performs the best or not). Sounds to me like what she’s really saying is that they rely on human judgement when it comes to certain people (Larry and Sergey), but when professional designers try to use their own judgement (to suggest more line spacing, etc) that judgement isn’t enough. That’s less a coherent approach to design and more a hierarchy of who’s opinion counts. And not surprisingly in a tech company, sounds like designers lose.

Douglas Bowman, Google’s first lead Visual Designer recently blogged about this very issue as he discussed why he was leaving the company.  According to him, Google always has relied on an empirical approach not just to how their products should behave internally, but how they should look and feel to the user, down to the pixel level.  However this reliance on data for every minute detail of the user interface is no substitute for true creative design.  And the culture at google which thrives in a numbers only game is stifling the visual design talent that Google has hired, leading to a vacuum of true visual design leadership.  Although gathering and analyzing data regarding interface decisions is definitely a good thing, Google has reached the point where it has become a crutch, and without leadership from people that understand visual design principles there is a creative vacuum that will negatively impact user’s enjoyment of the products that google ships.  Ultimately Mr. Bowman left because when it came to promoting a new design thinking, it felt like “Google was a massive aircraft carrier, and I was just a small dinghy trying to push it a few degrees North.”
By data driven design, I am referring to the approach that says, anything at the GUI level needs to be tested with users and measured empirically using standard metrics like speed, efficiency, error rate, etc.  I don’t disagree that given a problem, the more data I as a designer have, the better my design solution will be.  However, I don’t think it’s even realistic to think that every little nook and cranny in on a web app can be tested on, and even if it were, I agree that that type of thinking can create design paralysis under the wrong conditions.
As it turns out, although Google may suggest that it’s product’s interface designs are completely performance and data driven, that isn’t possible.  The subjective, aesthetic decisions are made, it’s just a matter of who makes them.  Those with an engineering or hard science background will invariably have more say in the direction the company takes, including the way it goes about designing its products. One such person is Marissa Mayer, who controls the look and feel of the search engine and related products.  According to a New York Times article recently written about her, and her role at the company, “Almost every new feature or design, from the wording on a Google page to the color of a Google toolbar, must pass muster with her or legions of Google users will never see it.”  The article makes it clear that although they like to test as many design decisions as possible, Mrs. Mayer makes many design decisions absent any hard data.  For instance,

Google’s home page — spartan white embroidered with splashes of blue, red, yellow and green — mirrors her Wausau home and her penthouse.
“It used to be people would come over to my apartment and say, ‘Does your apartment look like Google or does Google look like your apartment?’ ” she says with a staccato laugh that has earned a following of its own in Silicon Valley. “I can’t articulate it anymore. I really love color. I’m not very knick-knacky or cluttery. My place has very clean, simple lines. There are some elements of fun and whimsy. That has always appealed to me.”

So it’s clear that google does rely on the subjective decisions of some people when it comes to product design.  I have no problem with that.  But they should be honest with themselves about how they design, and stop insisting to us and to themselves that everything is numbers driven.   Embrace design as a distinct culture within Google.  Discourage the culture that would require designers to prove every design decision.  Realize that visual designers have something important to provide and then give them leadership positions so they can have the influence google needs them to.

Share/Bookmark

Change has come to America, and so, too has it come to whitehouse.gov, the official website of the President of the United States.

One minute into the 44th Presidency, the website sports a radically new look (I’d love to hear how that was handled), and all the neccesary updates as a new administration moves in have already been made.   But the changes promise to be much more than cosmetic.  According to a statement on the White House Blog, Macon Phillips, the Director of New Media for the White House, “Millions of Americans have powered President Obama’s journey to the White House, many taking advantage of the internet to play a role in shaping our country’s future. WhiteHouse.gov is just the beginning of the new administration’s efforts to expand and deepen this online engagement.”

Efforts will be made so that whitehouse.gov “puts citizens first” through three main priorities.  Again, from the same statement:

“Communication — Americans are eager for information about the state of the economy, national security and a host of other issues. This site will feature timely and in-depth content meant to keep everyone up-to-date and educated. Check out the briefing room, keep tabs on the blog (RSS feed) and take a moment to sign up for e-mail updates from the President and his administration so you can be sure to know about major announcements and decisions.

Transparency — President Obama has committed to making his administration the most open and transparent in history, and WhiteHouse.gov will play a major role in delivering on that promise. The President’s executive orders and proclamations will be published for everyone to review, and that’s just the beginning of our efforts to provide a window for all Americans into the business of the government. You can also learn about some of the senior leadership in the new administration and about the President’s policy priorities.

Participation — President Obama started his career as a community organizer on the South Side of Chicago, where he saw firsthand what people can do when they come together for a common cause. Citizen participation will be a priority for the Administration, and the internet will play an important role in that. One significant addition to WhiteHouse.gov reflects a campaign promise from the President: we will publish all non-emergency legislation to the website for five days, and allow the public to review and comment before the President signs it.”
Read the full statement

I may have visited whitehouse.gov three or four times in my life, but I’ll be back quite a bit after reading this, excited and hopeful about the ways that the new administration will use technology to connect to the people.

Share/Bookmark

Drupal, the popular open source Web Content Management System, has got a massive and passionate community of developers, designers and webmasters.   Drupal.org, their official website was faltering under the weight of this growing community of diverse users, so this past summer the powers that be at Drupal  decided to hire an outside agency to do a complete redesign of the site.  The firm they hired decided to take a “design by community” approach to the project.  They wanted to get as many Drupal users as they could to participate in the redesign.  So, through a number of collaboration mechanisms–setting up a Twitter account to follow mentions of Drupal, opening a Flickr account where the community could post pictures, and actively engaging the existing Drupal forums–they opened the design process up so that anyone in the Drupal community could share in the process.

Conventional wisdom says that design doesn’t work as a democracy.  It takes the genius and inspiration of a small team or one person to understand what the customer needs, and design the right solution.  As Henry Ford said it best, “If I’d asked my customers what they wanted, they’d have said a faster horse.”  So I’m not surprised that according to Mark Boulton, the lead Designer on the project, many people though that this type of open process would fall flat on it’s face.  I’m not convinced that it won’t, but from what I’ve seen, the site is looking good.

It’s still in prototype phase, so it remains to be seen if the redesign, once implemented, will be a success.  but you can get a look at the evolution of the design here, and of course follow the links to the discussions.  It’s a fascinating look at one designers experiment in design by community.

Share/Bookmark

As I’m sure most of you do, I am spending more and more time online watching video.  So I thought I would take some time and rate the various video players I use on a frequent basis.
I’m using a 10 point scale, and I’m rating based on a both functionality and visual look and feel.

ESPN.com 7 out of 10
Fairly simple, two color, semi transparent control bar, appears only when moused over–a design pattern I’m seeing more and more lately.  It’s there when you need it, it shows you what you want and it gets out of the way quickly.  It’s got a single play/pause button, a timer, a playback countdown, a volume control which displays only on mouseover, reducing clutter, and a menu which when clicked brings up some additional options for embedding sharing and the like.  A nice touch: Mouse over any point on the timer and you get a little tooltip that displays the time at that point.  Another nice touch: the small (no morethan 10 pixels vertical) bar at the bottom which displays how much has already played as a portion of the total.

Youtube 7 out of 10
Gets the job done.  Period.  Simple consistent interface.  Youtube also allows publishers to add annotations and captions to their videos, and naturally allows viewers to turn either on or off, with a simple hover menu at the very right side of the control bar.  Youtube is actually doing some really cool stuff to allow publishers to make their videos more interactive, including adding hyperlinks within a movie.  The evolution of online video will be interesting to watch (and maybe take part in) but that discussion is beyond the scope of this post.

NYtimes.com 6 out of 10
Elegant interface, but could be better.  The control bar stays present throughout the video playback, and occupies a significant portion of the total video player.  However its muted style–3 shades of grey–makes it easily ignored when not needed.  The playback control is done superbly.  When moused over, a small draggable button smoothly and elegantly appears, it’s affordance as a scroll mechanism to move to any point in the video is crystal clear.  The volume control is nice and large, with the same measure of affordance, however it looks like it was designed separately, as it doesn’t conform to the rest
of the control bar’s aesthetic.  Also, I may be nit-picky, and I’m sure this won’t bother 99% of nytimes.com viewers, but there’s a large empty space in between the play button on the left, and the full screen button
on the right, creating an odd asymmetry which, the more I look at it, the more it bothers me.

MTV.com 6 out of 10
Nice minimalist design.  Allows you to change the video quality during playback.  Also nice, allows you to choose from 3 sizes; standard, large and full screen.

Viddler.com 6 out of 10
Lets the video publisher skin the player interface.  This great tools allows users to comment on and tag the video in the timeline.  The interface is ugly, though, and some of the buttons aren’t self explanatory, nor do any of the buttons have tooltips.  At the end of the current video it automatically plays the next video, whereas most other players present a menu of videos to choose from.

MSNBC.com 5 out of 10
Slick looking.  I like the fact that the playback bar is given the entire width of the video, allowing the viewer to be more precise in navigating to a specific point in the video.  The other controls are slightly confusing.  It looks like the interface was over designed.

Virb.com 5 out of 10

Beautifully minimalist design.  No full screen mode, but it does have a cool feature that “turns off the lights” on the rest of the page.
Facebook 5 out of 10
Fairly simple interface.  Standard controls, done adequately.  Its got none of the useful social media features of Youtube. No ability to tag or comment in the timeline.  Pretty basic for such an important part of such an important website.

Metacafe 3 out of 10
Poorly designed.  It’s distracting when trying to watch video, and ugly to look at when interacting with.  The big blue shiny play and stop buttons look unprofessional, and why is there even a stop button.  The draggable playback scroll mechanism moves from left to right as the video plays, but it could have been made much more subtle.   There’s no need to see it unless you want to move navigate the video.  And why does the entire playback bar glow when I mouse over it?  Also not cool is the visually loud menu underneath the control bar.

As with any list, much o this is subjective.  I’m looking forward to hearing your opinions.  Also, there are so many web video players out there, this is just the tip of the iceberg.  Let me know which ones you find especially appealing, or truly horrible.

Share/Bookmark