Archive for the 'HCI topic' Category

Google Chrome’s Design Comic

Tuesday, September 2nd, 2008

So the big news on the internets today is Google’s new browser: Chrome. It’s only available for Windows as of today, and since I’m on a Mac I haven’t been able to play with it yet. But that’s ok, because Google hasn’t completely left me out of the loop. I have access to the comic interpretation of their engineering decisions.

Google Chrome Design Comic

Google Chrome Design Comic

Comics have been a topic of discussion in the Interaction Design Community for a while now. With Scott McCloud providing the art for Google’s message, they really couldn’t go wrong. McCloud has quite literally written the book(s) on creating effective comics. (Of course, you can create your own design comics too, thanks to projects like Martin Hardee’s Design Comics.)

One thing that I’d like to applaud Google for with this comic is their use of actual Googlers as the narrators of the story. Naming names like this gives credit to the actual thinkers behind the work. All too often in the business world today, we hide individuals behind a big corporate brand. In this example, these Googlers will feel real ownership and responsibility for their product, and they’ll be motivated to continue working on the project even if (and when) they leave Google. Of course, I’d also like to call out the fact that no User Experience team members were named in this document, even in the section titled “Search and the User Experience.” This is strange, and I hope there was a User Experience team dedicated to this project.

And another thing Google did well here was in not trying to over-engineer their explanations of highly technical processes. They simplified their message down to bare essentials, and I felt enlightened after reading this document. Most technical documentation talks down to people, assuming that all the basics are already understood. Google removed some barriers to entry by explaining their new technologies in a way that almost anyone with a little technical know-how can understand. This is something almost every other open source project out there fails at. Technical documentation is far more than simply documentation…it’s an implicit invitation to take part in the experience.

Browser Threads Vs. Processes

Browser Threads Vs. Processes

At the end of the day, I’m really impressed at the quality of this documentation. I actually read the entire thing, which is much more than I can say about the technical documentation for any other software I use. Who knew that I could find the difference between multiple threads and multiple processes interesting?

Well done, Google. Now I just have to find a Windows computer…ugh. I swore off those things months ago…

Generate Design Ideas. Rinse. Repeat.

Tuesday, August 12th, 2008

Adaptive Path’s Kumi Akiyoshi blogged a quick piece about the visual design of Aurora. I really love the exploratory designs that were created before deciding on the one we saw in the videos. I don’t necessarily love all of the features within them, but it is so important to create multiple design options before settling on the one that will be developed.

Aurora Design Option

A visual design option for Adaptive Path’s Aurora, by Kumi Akiyoshi

Another Aurora Design Option

Another design option (see more)

These examples show different options for the visual design, but you can generate ideas for anything you design. I do this all the time when I’m designing exactly how a feature will work. Anyway, go check out Kumi’s post. There’s lots more to see.

Aurora, the Future of the Browser, and Agile Envisionment

Friday, August 8th, 2008

As your local Interaction Design opinion one-stop-shop, I feel obliged to weigh in on Aurora, Adaptive Path’s newest concept series in collaboration with Mozilla Labs. First off, if you haven’t watched the videos they’ve published so far, do that first:


Aurora (Part 1) from Adaptive Path on Vimeo.


Aurora (Part 2) from Adaptive Path on Vimeo.


Aurora (Part 3) from Adaptive Path on Vimeo.

There are a few more videos on the way, but those should be good enough to kick off a little commentary.

First off, it should be noted that envisionment videos like these have become an often used tool for Interaction Designers. When you’re intent on creating an experience that does not yet exist out in the world, an envisionment video invites viewers to see how people might be impacted by new technologies, and allows technologists to begin to build the future. Bill Buxton describes Envisionment Videos in his already classic Sketching User Experiences:

As their name suggests, these are clips that are created to communicate some holistic view showing an envisioned system in context. Unlike many of the examples that we have seen, they go beyond just presenting a demo. Rather, they usually are built around a narrative that tries to capture a way of working with technology, as opposed to the design specifics of the device itself…Overall, they are very much part of the story-telling tradition of design.” - Bill Buxton

If you’d like some more examples of envisionment videos, I recommend checking out the ones Buxton discusses in his book:

One of my favorite envisionment videos is HP’s Cooltown, which is extremely polished, but a cool look at the “future” nonetheless. Unfortunately, it seems that the concepts in HP’s video have not come to fruition, at least in a way that impacts HP’s wallet. That’s the way of many of these videos, though. They tend to be so forward looking that one company could not hope to build tools to enable all of the concepts in the sketch, at least in the short term. But, the videos can be used as a guide to the company’s long term future. For example, we’re seeing concepts from Apple’s Knowledge Navigator come to fruition only now, many years after the release of the video.

When it comes to long-term vision, I believe that the “just-in-time” philosophy causes Agile methods to fall apart. See, from the Interaction Design point of view, technological innovation occurs to solve big & ugly human problems. Agile methods encourage developers to build the simplest thing that works in the hope that incrementally (and sometimes iteratively) big & ugly human problems will be solved. But the whole solutions to the big & ugly problems are often not the sum of their parts. More often than not, it takes a long-term strategy to solve these issues.

I’m not saying that the Interaction Design and Agile Development points of view are too incongruous to come to terms. Quite the opposite, in fact. Long-term visioning Interaction Designers and just-in-time Agile developers should be able to come together to solve those big & ugly human problems, but must agree that their day-to-day goals are not the same. I’ve seen too many Interaction Designers called in (myself included) to tweak an already developed application’s interface when the entire vision of the product is unclear.

I just returned last night from the Agile 2008 conference, and if there’s anything I learned there, it’s that Interaction Design and Agile Development are friends, not foes. However, we need to work together to understand our separate goals and outputs. At the end of the day, both groups need to be successful if we want to build great software.

So Agilists, let’s think about long-term vision a little bit. Let’s create some quick & dirty visions of the future. Then let’s build the heck out of them.

And finally, to return to Aurora, I simply want to say that I am really enjoying the videos. Is this what the future of the web browser will really look like? If the other videos I mentioned are any indication, probably not. Still, there are some fantastic concepts packed into those short videos, and we have a lot to learn from them. I wouldn’t be surprised if many of those concepts do see the light of day, and at the same time I won’t be holding my breath.

The Elements of Design (Part 1)

Wednesday, May 21st, 2008

(If you’re reading this from a feed reader, you’ll want to jump to my site so you can see the images.)

Today I want to talk about something a bit academic. More of a thinking game than anything else. I chose to start with Graphic Design because, well, it seems a bit more established as a field than Interaction Design and I think there’s a lot we could learn from them.

In two-dimensional graphic design, a core set of elements have been defined to specify the designer’s most basic toolset. These three elements can be combined to create a rich array of visual objects that give the designer near limitless options. Let me explain visually:

Consider the Point

point

A Point simply denotes a position in space. Many points in space can show contrast, and from an appropriate height will tend to show texture. This is the most basic of the basic graphic design elements. But oh so much can come of this simple dot.

Many Points Make a Line

line

If a Point is made the first time a piece of chalk is touched to a chalkboard, then a Line is created as that chalk is dragged across the surface. That Line is an infinite chain of Points, or the connection between two starting and ending points.

Lines create Shape

shape

Moving the chalk perpendicularly to the original line creates an intersection. Multiple intersections eventually create shape. That is, when multiple Lines are strung together, they take Shape. Shape is where we begin to embrace the power of visual imagery. People will create meaning out of multiple shapes strung together, and the meaning that is elicited is the core goal of Graphic Design.

Where are my elements?

Of course, this is by no means all a Graphic Designer must know to be successful. This is just the start. In Part 2 of this series I’ll consider Dan Saffer’s Elements of Interaction Design. Prepare yourself for that.

Design for a messy world

Wednesday, March 5th, 2008

So often we assume that the problems we are solving for are “pure”, even if they are somewhat complex. The images we see in advertisements help this base assumption survive, and so we don’t think to go a little deeper in our analysis of a problem before we jump right in to offering a solution.

The things we see in an Ikea showroom assume pure use patterns

The things we see in an Ikea showroom assume “pure” use patterns

But problems in the real world are almost always more complex than we can initially imagine. Deep down, we all know this. Our actions and activities are filled with complexities that we rarely think about. Real patterns of use are never represented the same way as they are on the Ikea showroom floor. We all accidentally leave books on the table…to the disappointment of those we live with. Sometimes it helps to look at an extreme case. Check out Possessed, a video about people who suffer from Hoarding:


POSSESSED from Martin Hampton on Vimeo.

Sure, these people are an extreme case, and as such they make up a case that is rarely ever considered by Ikea. Still, I’d imagine that there is a little Hoarder in all of us. This is why I recommend that my clients do user research before we begin designing solutions. I want to see the imperfections that exist out there…all the little “tricks of the trade” that people use to get things done. Yup, the real world is messy, but by getting out there and seeing some of the mess, we can design solutions to better support our users.

LinkedIn looks so fresh & clean clean

Thursday, February 28th, 2008

One of my little delights in life comes when I see a website or tool that I use has been refreshed. This morning, I was surprised to notice that LinkedIn has a new look. Check it out:

New LinkedIn

There’s a nice entry up on the LinkedIn Blog that talks about the three major changes:

  1. System Navigation
  2. Profile Snapshot
  3. Customizable Widgets Panel

Of course, I don’t think the redesign can really be summarized by these 3 independent features. The fact is that the site has a completely new feel, and I doubt if you asked an everyday user what changed since yesterday they certainly would not list those three items. Instead, they would likely remark about the sweeping changes overall…then they would perhaps notice the feature changes.

Fighting the Backlash

Redesigns like this can be extremely challenging to implement for a company like LinkedIn. Not so much in the sense that they’re difficult to build technically, but for the backlash that is sure to follow. Already one user has commented on the blog asking for the ability to access the old version:

I was shocked by the new interface cause I was addicted to former layout for 4 years as I was shocked by the new layout of Office 2007 … I’m still using Word 2003.

So … Is it possible to have for some time to come (3 or 4 months) the choice to switch on and off the new interface.”

Carmelo Cutuli
Technomanager
www.cutuli.it

I never really understood the mentality that one would want to switch back and forth between old and new versions of a tool in order to learn the new one. So often in the physical world we leave our old junk behind, like when we trade in an old car for the updated model. But I guess that’s the difference between physical and digital: if you really wanted the old version back you’d be able to get it. Alternatively, there’s no way to get the old version of LinkedIn back. It’s completely gone (until LinkedIn decides to give access to it).

I’ve often thought about whether it would be possible to truly incrementally release design changes like the ones LinkedIn did. If they released small changes each week, would it have the same desired effect? I doubt it. Sometimes you just need to release a new design upon the world…it is jarring to some, but others will be impressed.

Count me in among the impressed. Well done, LinkedIn.

View Josh’s LinkedIn Profile

Am I the only one who gets lost at Target?

Sunday, February 24th, 2008

Target Logo

Every other weekend or so I take a trip to my local Target store to stock up on necessities. Let me start by saying this: I love Target. For the most part I have a wonderful experience there…well, except for one section: the toiletries area. For some reason, I can never find the things I’m looking for in this section. Yesterday it was shampoo. I looked for minutes and could not locate my Pert Plus. The visit before it was my face wash. And before that it was the soap that I like.

My question is, does anyone else have this problem in this area of Target? Or is it just me? If it’s not just me, then perhaps Target is ready for a little reorganization.

Assuming it is a problem others have as well, it wouldn’t be all that difficult to reorganize this section of the store based on the needs of shoppers. First, I would want to do some user research, likely by bringing people into the store and asking them to find the things that they would normally buy. This would yield a few different results:

  1. We would confirm whether others can find the products they’re looking for, and assuming it is still an issue
  2. This would shed light on navigation patterns through the aisles
  3. So that we could restructure the contents of the aisles

In effect, this is a little like what I do every day. Of course, I’m sure the people at Target work hard to make sure items are as easy to find as possible. I just wonder if they’re doing any contextual research to find solutions. It’s important to see people in the act of finding items…be they real items, or links on a webpage. Otherwise the solutions are based simply on theory. And when I’m desperately trying to find my Pert Plus, that’s not good enough.

You should see my sketchbook

Sunday, February 17th, 2008

It is truly one of my favorite design “tools:” A good notebook. Personally, I like the full size Moleskine models, but whatever you can manage to carry around will work best. I carry mine everywhere with me, always with a pencil attached.

Check out these notes, if you dare, which preceded my recent talk with Jeff Patton at Interaction08.

Sketchbook pageHere’s a first page of general notes about what could happen during the talk.

Sketchbook page 2
The crux of my thoughts here is that many Designers, Interaction Designers included, don’t really tend to think about software development methodologies in their day-to-day life. Thus, they may need a little brush-up on what a development methodology is, with some examples.

sketchbook page 3
Still, it’s important for IxDers to understand why software is developed the way it is in their organization, and to be a stakeholder in this process.

Sketchbook page 4
The prevalent development methodology in use today is waterfall. It should probably look familiar to most designers & developers.

Sketchbook page 5
With Agile Methodologies, we have the opportunity to get our software working, and out in the real world quickly. This allows our concepts to see the light of day, so that they can be improved upon. Of course, these methods do have their drawbacks…

Sketchbook page 6
Some snapshots of what agile methods look like.

Sketchbook page 7
So, the big question is whether Interaction Design methods can fit within the Agile Context, or vice versa. The answer to this is complex, but I think the talk covered the topic well.

Back to the point — Sketching really helped me sort out these topics in my head. Sure, it took longer than just bullet-pointing out a PowerPoint…but I was able to visualize my thoughts, and look at them later with clarity, and pass them on to others to digest. Visualizing my thoughts really helps my process, and maybe it’ll help yours too.

How do you visualize your thoughts?

Super Tuesday 2008 Infographic Design

Tuesday, February 5th, 2008

As I’ve mentioned before, election night is one of my favorite nights of the year. All the big media outlets pull out their infographic design “big guns.”

One of my favorites for the Super Tuesday 2008 Primary results is at the New York Times:
NY Times Primary 2008

It simply describes the current situation in the largest states that vote on Super Tuesday. I can quickly tell what percent of precincts are reporting, and know instantly which results should remain stable. One thing that I find a bit strange about this graphic, however, is the fact that the states are laid out in alphabetical order, rather than a more informative order. My preferred order would probably be a descending order starting with the state with the most delegates. The alphabetical order has led me to ask myself the question, “Why didn’t Obama focus more on the states following ‘I’ in the alphabet? And likewise, how come Hillary focused on ‘M’ through ‘Z’?” Strange coincidence.

Now, for a little compare and contrast, check out the live results from CNN.com’s homepage:
CNN Primary Results

This graphic just seems to be lacking a whole lot of substance. Unlike the NYTimes graphic, it’s hard to abstract the big picture. We don’t know as much without looking a little deeper at the numbers. They even went out of their way to include a legend in the bottom right, as if we didn’t know what the check stands for. There is also very little contrast between the state abbreviations and candidate names. The state abbreviation is only one pixel larger than the candidate name, certainly not enough to denote a difference in meaning (most people won’t notice they are different sizes at all).

Finally, just for good measure, let’s have a look at NPR.org’s entry:

NPR.org primary 2008

The information that NPR adds here is the closing time for the polls in each state. I don’t know if this is really all that important. Really, what most people want from a graphic like this is to find out who is winning in each state. A nice addition is the number of delegates committed from each state. I would have liked to see these numbers tallied up at the bottom, because that’s what this race is really all about. Also, this graphic makes it somewhat difficult to tell if there is a clear winner on either side. For all I know, McCain and Huckabee might be neck-and-neck (which they’re not). Overall, not bad.

My personal fav is the NYTimes graphic, but judge for yourself. I’d love to hear (and see) your favorite Super Tuesday infographics. Send me a link in the comments.

Civil Twilight and User Observation

Saturday, January 5th, 2008

You know how it feels when a song just sort of hits you? You’ve liked the band for a while, listen to their music frequently, but then all of a sudden you’re completely struck by a particular song? That happened to me tonight.

Perhaps I’m just tired from the holidays, work, and life, but I don’t think that’s it. The song I’m speaking of is Civil Twilight by The Weakerthans, my Canadian band of the moment.

What I love about the song is the story it tells. As I listen, I suddenly picture myself in the shoes of this every day bus driver. Just a regular Joe…who notices every day, normal things. Of course, he’s also dealing with a breakup throughout the song. The parts I really appreciate are when he remarks about his experiences on the bus, like how the song starts:

My confusion corner commuters are cursing the cold away
As December tries to dissemble the length of their working day
And they bite their mitts off to show me transfers, deposit change

I love the description. I can really see the people biting their mitts off. I do that. Check out this part where they describe the driver’s ordinary thoughts:

For the most part I think about golfing and constantly calculate
all the seconds left in the minutes, and so on, etcetera
Or recite the names of provinces and Hollywood actors;
Oh, Ontario! Oh, Jennifer Jason Leigh!
This part of the day bewilders me

I wonder if I could write a song like this. Part of my job is to observe ordinary people doing ordinary things, and then design for the problems & inefficiencies I see. I’m sure it wouldn’t be as poetic, but maybe one day I’ll write a song about a guy named Rob and his experiences and problems as an Insurance Underwriter. Or a gal named Lisa and her rituals as a Hotel Manager.

Could be a fun way to document my findings, no? One day…

Check out Civil Twilight, by the Weakerthans.