Aesthetics and Web Design

Sholom Sandalow, Thursday, July 2, 2009 @ 10:51 am

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.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

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

Bernhard Kappe, Monday, June 29, 2009 @ 6:51 am

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?

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Integrating Design and Agile Development

Bernhard Kappe, Monday, June 22, 2009 @ 5:04 pm

If you liked my colleague Alice Toth's presentation on Agile Requirements, you'll like her talk on integrating design and agile development:

AGILE AND ME a story with just enough documentation.

A typical waterfall project produces pages and page of end-to-end requirements for the entire project as it is envisioned (but not necessarily as it will be built). The people compiling these requirements are, of course, part of an assembly with only the most cursory involvement with others outside their department. After all 9,238 lbs. of paper are heaved over the wall with a hearty “good luck!” and a cheery wave, the silos are once again in place and silence is golden.

While agile was taking hold of development, design was still stuck in the waterfall method. So why not blend the two and run the entire project in an agile fashion, starting with requirements? Here's how we do it at Pathfinder:

Like what you see? Check out more of Pathfinder's presentations, whitepapers and articles here.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Death to IE6

Alice Toth, Thursday, June 11, 2009 @ 6:43 am

“IE6 is the new Netscape 4. The hacks needed to support IE6 are increasingly viewed as excess freight. Like Netscape 4 in 2000, IE6 is perceived to be holding back the web.”

~ Jeff Zeldman, standards guru

Anyone who has worked with developing the presentation layer for web apps has become quite adept at creating workarounds in JS and CSS to try and give the user the same experience in IE6 that they’d have if they used an up-to-date browser. However, because of IE6's non-compliance with W3C Standards, a ridiculous amount of extra work (i.e., hacks) is needed in order to get the page to render correctly in this most outdated of browsers. And, as Dietrich mentioned in a previous post, the problem is that these deviations from the standard end up becoming the standard and increase the amount of time required to write and maintain code.
Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Safari’s Tabs on Top and Usability

Sholom Sandalow, Thursday, May 21, 2009 @ 9:31 am

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

• Digg
• Reddit
• del.icio.us

Comments (2)

user experience design

Just mow the grass

Alice Toth, Thursday, May 14, 2009 @ 5:32 am

photo credit: great_sea

Gauging a client’s wants and needs is as much an art as it is a science. Oh sure, establishing the requirements and needed features and potential limitations (hello legacy system) is pretty much a straightforward scenario. It’s when we get into the layout and behavior of the application that negotiating the waters can begin to get a little tricky. Bump it to the redesign of an existing application that users are accustomed to, and the trickiness factor is raised exponentially.

I’ve been lucky with Pathfinder in that my last couple of projects have been to design and develop new software. The clients come in with an idea for a better mousetrap and we build it. They’re excited, we’re excited and we get to build something shiny and new that gives the client a good experience and helps build their business. A win-win in my book.

Not all projects have such a glorious life. In a previous job, I was part of a team that was tasked with porting a legacy system over to a new framework. Naturally, there were the usual levels of complexity all projects of this type always seem to encounter. However, the most difficult obstacle to overcome was the inability of the decision maker to see anything beyond the existing user interface.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

user experience design

Clickless Pagination - Slashdot’s Bottomless Cup of Content

Matt Nolker, Thursday, May 7, 2009 @ 10:48 am

Photo by Jason Permenter

I haven't visited Slashdot's site in quite some time; blame it on my desperate addiction to my iPhone RSS reader. So I somehow missed their rather interesting approach to pagination - in place of the typical "Previous/Next" navigation controls found on most blogs, Slashdot detects when the reader has scrolled to the bottom of the page and uses an Ajax pattern to simply append more stories to the page. No clicking required - just keep on reading. Try it out for yourself. The overall effect is something like a bottomless cup of diner coffee. Just as you're about to run out of content, along comes Slashdot to fill up your page.

The implementation is not without problems - the Slashdot footer contains a daily quote and several navigation links. Which no longer stay in one position long enough to read/click, leading to the worst kind of link whack-a-mole. And the visual cue that new content is loading is entirely too subtle; the first time I reached the bottom of the page I was surprised and mildly annoyed by the way the browser suddenly stopped responding to my attempts to scroll. Perhaps the most interesting issue I experienced is entirely psychological. Having new, compelling posts suddenly appear (just as I thought I had finished reading the front page) has definitely resulted in more than a few oh-my-god-it's-2 am-already moments.

I'm not sure I'd include this particular implementation of clickless pagination in one of our designs just yet. That said, I'm looking forward to exploring it a bit further - particularly for long lists like search results. With better visual notification and a reconsideration of how to use a footer, I think it could be a winner. And the idea of removing yet another clickable item from a user interface is certainly a compelling reason to see how far we can take the basic concept.

• Digg
• Reddit
• del.icio.us

Comments (3)

agile ajax

Are You Building an Application or an Antique Web Framework?

Dietrich Kappe, Tuesday, May 5, 2009 @ 5:47 pm

photo credit: dave_7

A few years ago, a friend of mine asked me to help him estimating the conversion of a client/server application to the web. He came armed with a spreadsheet of features, I came armed with Ibuprofen and a red pen.

My usual approach to estimating involves breaking down the features into things that can be implemented by a pair of developers within a two week period. I give these a complexity factor of 1-5, then run them through an empirically derived formula to come up with an estimate in terms of person-iterations. (It's actually a little more complicated than that, but this is the main effort). Getting the count and size of these mini-features right is the key aspect of this technique. His spreadsheet had almost 300 features listed, and so we settled in for a day of fun.
Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Visual Heuristics

Alice Toth, Thursday, April 30, 2009 @ 7:47 am

Heuristic reviews are a great tool for finding usability issues in any existing interface, from web-based to desktop. It's a quick and relatively inexpensive way to uncover, document and prioritize usability problems.

From usability.gov:

The goal of heuristic evaluation is to find usability problems early in the design of a Web site so that improvements can be made as part of the iterative design process … The result of this analysis is a list of potential usability issues or problems.

While I use heuristic reviews and find the results to be very helpful, I've never been too thrilled with the final documentation. Even when formatted nicely, they’re nothing more than a laundry list with a bunch of words and numbers and no hints or ideas on how that information can be grouped together and translated over to an application. Quite frankly, after the second page my eyes do tend to glaze over. And if my eyes glaze over, I can't even imaging how it affects the client. So I was challenged to come up with something better.

My co-worker, John McCaffrey, wanted to give his client some ideas on how to improve their site -- a heuristic review but with a sort-of Cliffs Notes component that could highlight the value of the review but not induce eye fatigue. He was also looking for something more visual to grab the interest of the client and keep them there long enough to start looking at the data. He mentioned that he really likes our annotated wireframes and an idea was born. Create a mashup of annotated wireframes and heuristic evaluation.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

user experience design

Touch Screen Kiosk in Adobe Air

Bernhard Kappe, Monday, April 20, 2009 @ 3:09 pm

We recently launched a new Touch Screen Kiosk deployed in both Adobe Air and Flex. Touch Screen Kiosks pose some interesting usability challenges, some of which overlap with those for the iPhone. Take a look at a video demo or read the longer case study on the Pathfinder site.

Touch Screen Kiosk Demo

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Prototyping with Keynote

Sholom Sandalow, Thursday, April 16, 2009 @ 8:02 am

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.

• Digg
• Reddit
• del.icio.us

Comments (2)

user experience design

Writing Agile Requirements

Bernhard Kappe, Monday, April 13, 2009 @ 7:48 am

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.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Adopt a non-techie. Help your business team move faster

John McCaffrey, Wednesday, April 8, 2009 @ 4:00 am

I've been spending some time with our internal sales and marketing team to hash out some of our goals for the year, and it became quite clear to me that non-developers are on their computers all day long facing some of the same technical challenges we do.

Some of the tasks they have to do:

• "take the data out of the spreadsheet for last quarter and compare it to this quarter"
• "gather the bounced emails from our newsletter posting, and update our list, pulling out duplicates"
• "replace all the names and addresses from our NDA agreement each time it is sent to a new client"
• "slice and dice google ad-words and google analytics data"

So I've resolved to take some time each week to 'Adopt a non-techie', and help them spend less time 'screwing around with the computer' and more time on the most valuable tasks they do.

In the same way that developers need to be as efficient as possible with the tools they use, Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Data Driven Design and the Culture at Google

Sholom Sandalow, Thursday, March 26, 2009 @ 8:27 am

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:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Week in Review

Dietrich Kappe, Sunday, March 15, 2009 @ 6:56 pm

Some interesting posts from around the blogosphere:

• The GWT Plugin for Grails has been stuck in version 1.4.x of GWT for forever. Michael Galping has published a two part (one and two) series at IBM Developerworks on integrating Grails and GWT 1.5.3. Extensive, well illustrated with full source code available for download.
• InfoQ has published an interesting conversation about Ajax and COMET versus HTML Web Sockets, i.e. hacky COMET versus real bi-directional communication mechanisms between the server and browser.
• UXDesign.com has a concise summary of an Alan Cooper Interview video from 2008. User Experience Design, baby!
• David Hamill has some provocative musing on the difference between usability and user experience design. Not sure I agree with everything he has to say, but it's a question that comes up often and is worth thinking about.
• A bit older, but I just came across it: the original ScrumMaster, Jeff Sutherland, has an interesting article about ROI and incremental development. The conclusion? Incremental is better. But seriously, we don't have enough rigorous thinking and writing about how good design and process reduces the cost of software in the long term (while perhaps increasing it in the short term).

These were some of the posts that I found valuable over the last week. Please share yours in the comments.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax