Topic: uxd

Wireframing with incomplete requirements

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).


Bridging the Gap Between Rails Developers and HTML Designers

5E22427E-BAAE-41A1-B7A8-B1FF4D55753E.jpg alt=

To make a cheap joke and paraphrase a common quote, web developers and web designers are two groups separated by common languages. In our case, the languages are HTML and CSS, which are the output of both the web design process and the web development process. Developers and designers produce their HTML/CSS in different ways and with different goals. Here are some ideas for bridging the gap so that the developers and designers on your team can work together smoothly.

Designers and developers obviously have different goals for their HTML -- developers have issues of reducing duplication, organization, and performance that are largely not the designer's concerns. The designer is primarily concerned with how the HTML looks and behaves to the user.

Continue reading »

Topics: ,

Facebook Connect

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.

Continue reading »

A First Impression of Flash Catalyst

Flash CatalystSpent 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).
Continue reading »

The Importance of User Experience – Do You Understand It in Your Bones?

Business Week had an article earlier this week on Cloud Computing that made a complete hash of the subject. However, there was one paragraph that was right on the money:

Apple and Google understand in their bones that simplicity and ease of use are essential to broad adoption of products and services. That lesson doesn't come so naturally to Microsoft and IBM.

That's why we integrate user experience design into the agile development process, and that's why we advise our clients to release the simplest software they can early, so they can learn from real user feedback and continue to make improvements based on that learning.

It's like John Gruber writes over at Daring Fireball:

“A complex system that works is invariably found to have evolved from a simple system that worked. The inverse proposition also appears to be true: A complex system designed from scratch never works and cannot be made to work. You have to start over, beginning with a working simple system.”
John Gall

If there’s a formula to Apple’s success over the past 10 years, that’s it. Start with something simple and build it, grow it, improve it, steadily over time. Evolve it.

Do you understand that in your bones?

Writing Agile Requirements

The beginning of a project generates a lot of great ideas. But until a structure or cohesion is applied to these ideas, they end up being a loose collection of separate ideas with no direction. Writing agile requirements brings cohesion and direction to the noise. We've been continually improving user driven agile for a while now. Click through the presentation below to see the approach that works for us.

Receive 10% off Web Form Design: Filling in the Blanks by Luke Wroblewski

Web Form Design cover image

Rosenfeld Media contacted me after I published my review of Luke Wroblewski's "Web Form Design: Filling in the Blanks." They offered Agile Ajax readers 10% off "Web Form Design" or any other purchase at rosenfeldmedia.com. To redeem, simply enter the code PATHFINDER at checkout.

Book recommendation: Web Form Design: Filling in the Blanks by Wroblewski

Web Form Design cover image

Usability and design guru Luke Wroblewski knows that web forms suck. More importantly, he knows why - and how to make them suck less.

For the past few years, the Yahoo! product design exec has been presenting his ongoing research into the humble HTML form at conferences and on his blog, Functioning Form. I attended Wroblewski's presentation at An Event Apart Chicago 2007 and came away super-impressed. His persuasive mixture of case studies, existing research and newly commissioned usability studies helped shed light on the patterns and anti-patterns that determine whether users successfully complete your forms or give up in disgust.

All of Wroblewski's preparation came to fruition earlier this year when he published "Web Form Design: Filling in the Blanks" (Rosenfeld Media). After finally taking the time to read the book cover to cover, I'm mad at myself for waiting so long.

Continue reading »

Push Button Phones and the Limits of User Testing

I loved this mental_floss blog blog item showing user testing from 1960 of the layout for a push-button phone. (Though I'd be interested to know where mental_floss got the data...) By now we're all used to the layout, and even used to the fact that the phone and calculators have almost directly opposite layouts.

One other thing about the mental_floss article -- the writer suggests that mechanical calculators were around long before this user test. This is true, but as far as I can tell, those calculators did not use the 3x3 layout. I don't think the 3x3 layout became standard on calculators until after 1960.

That detail out of the way, the phone testing data is interesting, both for diagrams of the 18 semi-final designs. Some of those designs are clearly the result of a fevered brainstorm session -- a cross, two diagonal rows, or a circle with the zero in the middle.

Continue reading »

Topics:

Icons are evil; so are menus – unless you do them right

Menus and dropdowns seem like attractive design choices because they conserve screen real estate while providing users access to a potentially large number of commands. But if you resist the easy out of menus and dropdowns, you may find that your applications become far more usable.

Survey the software you use for yourself, both browser- and desktop-based. Think about which applications provide the most invisible, effortless interfaces. I doubt it will be the ones that hide commands in complex menus and dropdown systems.

For some negative examples, let's look at Firefox and its more social cousin, Flock. Each app offers an advanced bookmark management mechanism, but the usability of that mechanism suffers in each due to over-reliance on cryptic menus.

Continue reading »

Where is Flash at?

For some time now, I've been using the same site to see how much has Flash content advanced - www.thefwa.com

Continue reading »

Topics: , ,

Facebook apps: Not too late to compete on the user experience front

Despite the hype, Facebook's a frontier rather than an established metropolis. There's still room to ride into town on a white horse and save the day, earning yourself a healthy reward in the process. Exhibit A? The so-so user interface standards of the social network's most popular applications.

Scrabulous

I recently, belatedly started playing Scrabulous with various friends and I'm shocked at the just-okayness of its UI. The lack of an on-screen legend for the mechanics of the variously shaded bonus squares? Puzzling. The drag-and-drop interface for shuffling tiles around in your tray? Maddeningly persnickety. The mismatch between the word lookup feature, which uses thefreedictionary.com, and the application's own, internal whitelist of valid words? A real bummer.

Scrabulous provides an adequate ripoff of a venerable and justly loved board game. But the rough edges of its user experience suggest that Facebook still has plenty of room for folks who know how to polish a UI till it gleams. Sure, first-to-market advantage gets magnified on social networks. But as these new application platforms mature, I'm convinced user experience design can provide a compelling means of product differentiation.

Topics: , ,

All the news that was fit to print

TimesmachineThe New York Times has unveiled an archival service called Times Machine which archives the past 100 years of the newspaper of record. Along with the benefit of seeing ads for trusses, we see a very sophisticated and robust interface using HTML + CSS + Javascript of a very easy way to scan large amounts of printed text. There have been so many of these kind of apps, almost always using Flash with proprietary back end processing, it's refreshing to see these sorts of interfaces with the code all public and easy to steal learn from.

In this case, the clever interaction design (and a hurdle for HTML) is to pair the actual article image (spanning multiple columns) with the text summary. The implementation makes scanning the paper a breeze and has a great visual clue of highlighting the image and overlaying the summary text. I'm delving into the markup to see how they managed to dynamically pair the images with the representative text, and seeing what other magic is under the hood.

Another nice feature was the rotating 'share' button, which takes care of not prominently promoting digg or reddit, but subtly reminding users that if they like to vote, here's where to do it. The only bad feature is that this is for paying customers only, but NYT has made free its online articles, hopefully in time this will follow suit, the days of microfilm readers may be numbered.

Topics:

Upcoming Talk at RIApalooza: Fast. Smart. Agile. User Experience Driven Agile Development

Look Ma, no Powerpoint! My colleague Matt Nolker will be giving a talk entitled Fast. Smart. Agile.  User Experience Driven Agile Development at the upcoming RIApalooza to be held at the Illinois Technology Association (ITA), 200 S. Wacker Dirve, 15th Floor, Chicago, on Saturday, May 31st.

The event has an interesting restriction: no Powerpoint. So no snooze fest sales presentations with endless bullet points. Since UXD (User Experience Design) has some visual aspect to it (you can only wave your hands and speak to a point for so long), we will be making due with "more primitive visual aids" as Tom Lehrer put it.

See you at the networking even on Friday.

A case study in Flash UI annoyances: style-card.com

Maybe I read too much Victorian literature, but I've always wanted a personal calling card. Recently, I decided to get one: a little something to help new acquaintances remember my phone number, email address and important URLs. Based on a recommendation from Time Out Chicago, I turned to Style Card, a slick consumer service that promises a less generic riff on the basic business card.

Here's how the company describes its product:

It's a social networking card created by you for the purpose of sharing your details and your style. Let people get to know the real you – or the not-so-real you.

Sure, I could have fired up an Adobe product, used a commercial printing service and gotten 1,000 copies of my own design for about $25. But owing to my lack of graphic design mojo, I decided to shell out $59 (plus shipping) for a mere 80 shiny, round-cornered Style Cards. The 3,000 percent markup is ridiculous, but I wanted to see whether I could benefit from the company's idiot-proof design interface. Besides, I figured I could get a blog post out of the experience. I wasn't wrong.

Style Card

Continue reading »

Launch: Pathfinder Newsletter

    Get a monthly update on best practices for delivering successful software.

    Subscribe via email


    Subscribe via RSS      RSS icon

Topics

Search

WordPress

Comments about this site: info@pathf.com