designforweb.co.uk/blog

Whether you call it blended search, 3D search (Ask’s name), or universal search, it has the potential to surface as many relevant results as other hot search topics such as personalization. At SES yesterday, I sat in the back of the Universal Search session. There are good write-ups on the PowerPoint and presentations, but not as much coverage of the questions.

Just to give you a flavor of the sort of questions that people asked afterwards, here are a few as I remember/interpreted them:

Q: (This was for David Bailey, the Google rep.) You showed a snapshot of metacafe.com entering Google’s search results via universal search. How can a video site get included in Google’s universal search?
A: Quite a few sites are already in there, and we would love to open that up more. Factors include things like reliable playability, lack of copyright concerns, no porn, etc. They’ll keep working to expand the sites that can participate.

Q: Do you expect to be crawling the web for videos?
A: Not right now. For the time being, you could submit your video to YouTube or other search engines if you wanted to.

Q: (for Yahoo’s Tim Mayer, I think) Do you expect to use 3rd party rating such as BizRate to help with ratings and abuse?
A: For now, we’re just using ratings on Yahoo.

Q: We have 20-30 videos on our corporate site. We wouldn’t show up in universal/blended/3D search?
A: Not right now, but you could always submit your videos to the different engines.

Q: (for Google) What other types of data do you expect to surface?
A: A good guess is the types of data that we already help search over, e.g. things like patents or code could be interesting, or Google Base has different feeds for real estate and jobs. Data that we already have is the most likely near-term, but most people probably care about well-known types of data like news, video, local, etc.

Q: Different IPs will see different search results? How can I see what someone in San Diego would see?
A: There’s not a great way right now. Some people use proxies.

Note from Matt: Google does provide quite a bit of this functionality. For example,
http://www.google.com/search?q=bank&gl=us searches as if you’re in the U.S., and returns Bank of America at #1. But http://www.google.com/search?q=bank&gl=uk does the search as if you’re in the UK, and returns Lloyds TSB at #1.

You can even look at ads based on lat/long, regions, cities, U.S. ZIP codes or U.S. designated market area (DMA). See this way informative post for more details.

Q: What future plans do you have to extract text from audio or video?
A: Everyone was silent for a while. David Bailey of Google gave the only reasonable answer that most search engine employees can give when you ask about future plans: we have researchers that work on such projects, but we have nothing to announce at this time.

Q: What are your three best optimization tips for video?
A: (various panelists answered.)
1. Choose a good title that describes your video
2. Tim Mayer from Yahoo mentioned exploring MediaRSS.
3. Erik Collier from Ask said “Make a kick-ass video.” Well-said, and a good reminder that compelling content makes optimization much easier.

Apologies if I’ve paraphrased any questions or answers incorrectly. Feel free to comment if you think I got something wrong.

Communicating design is tricky business. Designers have invented all kinds of deliverables to handle this job, but we continue to run into the same issues over and over again.

First, we forget things. We leave out some small element that, as it turns out, is absolutely essential to making an interaction work, so we need to revise our designs and send out a new set. Second, we run out of time in our busy schedules and never actually get around to presenting the design work to our clients (whether internal or on the other side of the planet). Third, we forget to include a few extra hours in our project proposals for the inevitable questions developers will have as they dig in and start trying to build the deviously brilliant designs we’ve concocted for them.

Fortunately, there’s a solution to this mess. But for several months now, I apparently couldn’t be bothered to tell you about it.

So today, I’m turning over a new leaf. I’m giving away my secret weapon. (But not until the end of the article.)

Introducing the Design Description Document (DDD)

A Design Description Document (DDD) is, essentially, a slide deck that shows detailed use cases alongside wireframes or comps in an effort to detail all the interactions in a design. And it has quite a few major benefits.

Typically, when an interaction designer completes a set of task flow diagrams and wireframes, she ZIPs it up and sends it off to whoever is pounding on the wall for them and hopes everything goes well. This method invariably backfires.

The ZIP gets sent to the boss, and the boss comes back with questions. The ZIP gets sent to the development team, and the developers come back with questions. The ZIP gets sent to the Documentation team, and the writers wait until something is in QA, because they know the final product won’t be anywhere near what you designed, and then they write their Help documents as quickly as humanly possible.

The Design Description Document cures all of this. First, it communicates to the boss how each interaction will occur, so he has no questions. Second, it tells the developers exactly how things need to work so they know what to build and can immediately start cranking it out. Third, it gives the Documentation team something they can start writing about sooner than later. After all, if the developers know exactly how everything needs to work, odds are much better that the final product will be in line with the original design.

Do you see a trend here? DDDs are good for everyone. Oh wait, what about the designer?

Well, DDDs are designer-friendly, too. They take very little time to create, they’re wickedly easy to update, and, well, they can be branded, and what designer doesn’t love that?

And in addition to answering questions, it helps prevent you from making mistakes and sending them to everyone you know. Because a DDD includes detailed use cases (more on this in a few), you have to actually write down the steps to complete each interaction. As you do this, you can continually check the wireframe to make sure each step can be performed as you’ve written it. If not, you probably forgot to add something to the wireframe. Now you can fix the wireframe, update the DDD, and send out mistake-free design deliverables.

The elements of a DDD

The Cover slide (the first slide in the deck) of every Design Description Document includes a few key elements. Here’s the list:

• Client name
• Project name
• Version number of the application
• Designer’s name
• “Last modified” date

Each subsequent slide of the DDD includes a few more essential elements:

• Wireframe for a single screen, or a storyboard for a complete interaction (you will likely need to scale this down to fit it on the slide, hence the inclusion of a full-size version of each wireframe in your design deliverables)
• Detailed, written use cases for each interaction shown in the wireframe or storyboard
• The file name of the accompanying full-size wireframe image (e.g. 01-Homepage.jpg)
• Notes (if needed)

And if you find that you need some extra room for longer explanations, you can always add Notes slides to the equation, either mixed in with the wireframes or at the end of the slide deck.

The low-down on the how-to

To put one of these babies together, you need the right software. Fortunately, it’s probably already on your machine. As I said, DDDs are slide decks, which means you can put them together in Microsoft Powerpoint or Apple Keynote. You could, in theory, also use Adobe Illustrator or even use keyframes in Adobe Flash.

I created templates in Powerpoint and Keynote to get you started. I use the Keynote version often, and I find that it’s the easiest, but not everyone is lucky enough to own a Mac.

Both versions make use of “master slides”, and this is where the graphics are located. So that I don’t have to reformat text every time I create a new DDD, I keep a version that has three slides by default: the Cover slide, a Design Description slide, and a Notes slide.

To create a Design Description Document, simply pop open one of these files and do a quick Save As to make a copy without affecting the template. Then:

1. Access the Cover master slide and replace the ClientName, ProjectName, Version#, DesignerName, and DD/MM/YYYY text with the name of your client and the project, version number, designer name, and date.
2. Open the Design Description master slide and replace the AppName and V# text with the appropriate info.
3. Go to the second slide in the deck and copy and paste it to make new empty slides - as many as you need to show each wireframe you created. If you have 20 wireframes, create 20 Design Description slides.
4. Next, either insert a wireframe image or paste one in, and then start writing out use cases in the sidebar for each interaction on that screen.
5. When you’re done, either send it off as is, or turn it into a PDF. (This is good for preventing people from editing the document.)

In Keynote, you can simply export the entire document as a PDF, directly from within Keynote, by choosing File > Export and selecting the PDF tab in the resulting dialog box.

In Powerpoint on Windows - well, you’ll have to figure that out yourself. I’m allergic to Windows. Can’t go near the darn thing.

Use cases 101

These templates are designed to help you write effective use cases, but here is a quick crash course.

First, replace the term “Use case” throughout your Design Description slides with tasks. For example, “Sign in” is a very typical heading for a use case. “Retrieve password” is another.

Next, write out the steps to complete each interaction in the wireframe.

Finally, go back over each step in the use case and look for exceptions. Exceptions are things that can occur if a user doesn’t execute your use case exactly as you intended it. A user who enters an incorrect password on a sign-in screen, for example, needs to be shown an error message. The use case exceptions are where you detail these facts.

To do this, explain which use case step is being excepted, then write out the steps for the alternate use case. In the example shown here, a user can enter an incorrect user name (Step 1 in the use case). To remedy this, we show an inline error message, the user enters the user name again, and clicks the Sign In button.

Click here to download

Ha! Made you click.

So, you’re sold? You want the templates so you can create your own Design Description Documents and stop sending out mistakes and answering questions long after a project is over?

Well, then download the template already.

For just a few cents a day, you can help a designer break the habit

Once you get the hang of creating your own DDDs, spread the word. The more designers use these templates, the easier life will be for all of us in the future. I can’t tell you how many times I’ve been sent a set of wireframes designed by someone else and had to go hunt them down and ask questions.

With the DDD, life is richer and more rewarding. It’s like one of those commercials where everyone is happy.

For a full collection of templates, visit www.rhjr.net/ddd.

And if you happen to create a new template in something other than Keynote or Powerpoint, send them to me at “robert at rhjr dot net” and I’ll add them to the collection. (Be sure to give yourself credit in the template. You deserve it.)

osCommerce is an open-source (free) fully featured e-commerce website. It's one of the most popular online stores due to its features, price, additional modules, and the massive community of helpful developers and users. This tutorial goes through the basics of installing the store from scratch onto your website.

Let’s dissect the parts of a URL (uniform resource locator). I’ll tell you how we typically refer to different parts of a URL at Google. Here’s a valid URL which has lots of components:

http://video.google.co.uk:80/videoplay?docid=-7246927612831078230&hl=en#00h02m30s

Here are some of the components of the url:

• The protocol is http. Other protocols include https, ftp, etc.
• The host or hostname is video.google.co.uk.
• The subdomain is video.
• The domain name is google.co.uk.
• The top-level domain or TLD is uk. The uk domain is also referred to as a country-code top-level domain or ccTLD. For google.com, the TLD would be com.
• The second-level domain (SLD) is co.uk.
• The port is 80, which is the default port for web servers. Other ports are possible; a web server can listen on port 8000, for example. When the port is 80, most people leave out the port.
• The path is /videoplay. Path typically refers to a file or location on the web server, e.g. /directory/file.html
• This URL has parameters. The name of one parameter is docid and the value of that parameter is -7246927612831078230. URLs can have lots parameters. Parameters start with a question mark (?) and are separated with an ampersand (&).
• See the “#00h02m30s”? That’s called a fragment or a named anchor. The Googlers I’ve talked to are split right down the middle on which way to refer it. Disputes on what to call it can be settled with arm wrestling, dance-offs, or drinking contests. Typically the fragment is used to refer to an internal section within a web document. In this case, the named anchor means “skip to 2 minutes and 30 seconds into the video.” I think right now Google standardizes urls by removing any fragments from the url.

What is a static url vs. a dynamic url? Technically, we consider a static url to be a document that can be returned by a webserver without the webserver doing any computation. A dynamic url is a document that requires the webserver to do some computation before returning the web document.

Some people simplify static vs. dynamic urls to an easier question: “Does the url have a question mark?” If the url has a question mark, it’s usually considered dynamic; no question mark in the url often implies a static url. That’s not a hard and fast rule though. For example, urls that look static like http://news.google.com/ may require some computation by the web server. Most people just refer to urls as static or dynamic based on whether it has a question mark though.

Meta Tags, which include Title, Description and Keywords, are an important part of On-Site Optimization. On-Site Optimization means what you do to your website to make it search engine friendly (getting to the top of search engines). I teach clients about meta tags in one of my lessons so I thought I’d write out a few of the basics to use as a checklist. In the Search Engine Optimization world, there are many different opinions about what’s the “right way”. Here are guidelines I try to follow on all my sites.

But if you set your site up in the right way, or the way Google prefers, it can really help you get out of the Google “sand box”.

Here are the tips:

Meta Tag Titles

• 6-10 words maximum: the main reason I keep it at this length is because this is about all the room Google gives you. If you have more words, some of them won’t be seen.
• Minimal keyword repetition: why waist space using the same word over and over again?
• No domain name: remember, the reason we use specific keyword phrases in our title tag is because these are the words we want people to search for to find us. If they already know our domain name, they probably won’t type it in a search engine.
• Use keyword phrases that you want people to use to find you in a search engine: see the previous explanation.
• Use “byer phrases” instead of “browser phrases”: when I started www.ClogOn.com, I used phrases like “clogging information” or “history of clogging”. I was getting traffic to my site but realized that no sales were coming in. I discovered that those phrases were not ones people were using if they were looking to buy something. However, phrases like “clogging shoes” and “dance bags”, which are tangible products, have really helped me make sales on my site.
• Every page of a website can have its own unique meta tags: use you best keyword phrases on different pages. Ideally, if you use the keywords effectively, you could be found on the first page of Google for many different phrases.

(more…)

OK, Part Two of our ‘client issues answered’ series. For those who don’t know what’s going on, read the questions and Part One.

And for those of who are up to date, let’s go straight to the good stuff:

Please can you make our website Number 1 in google?

The simple answer is yes you can. When asked this question, I always think to myself, “Yes, I could could get you to #1 in Google for the phrase “yellow pyjamas for cats” - but sarcasm probably won’t win over the client.

Explain that there should be research carried out in the planning stages of the project. Identify what kind of visitors they hope to draw, what kind of phrases these visitors will use and what areas of the website will relate to particular phrases. Essentially, this is an SEO101 session for the client.

The good thing is that this is an opportunity to obtain an SEO contract (if you wish to be involved in this aspect of the project that is) and you also really get the client to plan out their website - not that they know that at the time. Sneaky.

Win-Win? Absolutley. You can get some recurring income by means of a juicy SEO contract you get an easy method to plan out the site with the client. They get more of an understanding of the project as a whole and are more likely to make better decisions armed with this SEO knowledge.

Please can you out-date your design so it fits in with our out of date logo?

This is an opportunity in disguise. Going back to our builder analogy (in the previous part), ask the client whether they would do the following:

Get a builder/decorator in and decorate the room to match your drear/drab sofa. Make the room unstylishly out of date just to match the sofa you could easily replace. If you did replace the sofa for a new designer one for a small(ish) cost, the décor could be designed to be uber cool.

Make them understand that it is pointless to launch something that is dated. It will only date quicker and they’ll need to fork out more cash again in the short term.

Win-Win? Yes. You can snag a re-brand of the client’s company if you so desire. And they get a total renewal and ultimately save money because your design will stand the test of time much better.

How do you get a client to pay when they stopped answering your phone calls and emails as soon as you sent the invoice?

This may be better answered by the legal bods out there (please chime in) but I’d suggest (and I’m assuming the relationship with the client has gone sour) waiting a short while before commencing legal action. Check your contracts, email, prior invoices to the client (if any) and see if you’ve done everything on your side of the deal. You’re a great designer so obviously you have.

Now, send them a letter (if you don’t know what this is ask someone not in the web industry) announcing that the invoice must be paid by XX/XX/2007 or action will be taken. Explain that you’ve done your bit and you deserve to have your services paid for. Maybe suggest that they will not get their website launched (and they won’t get any branding material) without this payment. Assuming this doesn’t work, seek legal help.

Win-Win? Well…ummmm…oh. You found out what a letter is? Seriously though, this one is of those chalk it up to experience things your Dad told you about. You live and you learn. Maybe you learnt that one payment at the end of the project has its flaws and that spreading the invoices across the project would ensure you get paid better.

~~~

That’s the end of Part Two. Look out for the next instalment soon. Thanks for asking these tough, but necessary, questions.

Share This

We have all had clients who want the impossible — and never more so than when it comes to homepage design. They have a never-ending list of requirements, which mainly revolve around cramming as much content in above the mythical fold as is possible.

This desire to display everything on the homepage is born out of a perception that it is the most valuable real estate on a site. A perception perpetuated by the numerous design galleries, books and other media that always show screenshots of the homepage, rather than the numerous other pages on a site. This can lead to individuals and departments within an organization fighting to ensure their interests are represented on the homepage.

Unfortunately, in this fight for the spotlight, usability and design aesthetics are often the first causalities.

In this article I’ll explain 4 techniques which I have used to bring some sanity back to the process of homepage design. These techniques are not clever tricks to get the client to see things your way. Rather, they are about educating the client in order to allow him or her to make more informed decisions. They may still make choices you do not like but at least those choices will be made from a place of knowledge rather than ignorance and misconception.

The changing role of the homepage

The first step to homepage utopia is to help those with a vested interest to recognize its true value, rather than the current misconception they have of it.

The reality is that the role of the homepage is changing. It has long since ceased to be the primary point through which people enter a site.

Jakob Nielsen recently wrote the following in his book “Prioritizing Web Usability”:

Despite the importance of the homepage, however, interior pages accounted for 60 percent of the initial page views. A Web site is like a house with a thousand doors, and visitors can enter anywhere.

Users are relying increasingly on search engines to find the content that they are looking for. As a result they are much less likely to enter a site through the homepage.

I believe that the figure of 60 percent will continue to increase over the coming years. And it won’t just be search engines that cause this to happen, RSS feeds will have a significant impact too. As RSS becomes mainstream we will see an increase in users clicking directly through to relevant content, bypassing the homepage altogether.

That is not to say the homepage is unimportant. It continues to be a navigational tool enabling users to orientate themselves and helping them establish if a site has the content they are looking for. Every good web designer knows that the homepage should allow quick access to killer applications, search, site map and other relevant shortcuts. But it should also help the user orientate himself by confirming he is on the right site to meet his needs.

A good example of this approach is the current Apple website. Internal politics do not rule here. The homepage is not shared out among the various departments. Before last week it was completely dominated by the iPhone and now its all iMac. Apple knows that the majority of users currently coming to the site are after information on their latest announcement and so they make sure the latest “killer app” is front and center — literally. Users are left in no doubt that they have found what they are looking for and know exactly what to do next.

The perception that the majority of users never progress beyond the homepage is unfounded and the current competition for homepage space is unjustified. Just as many users will have searched for iMac on Google and come directly to the iMac section as will have entered via the homepage. That is why the iMac section stands very much on its own, making complete sense even without the broader context of the site.

Do not rush into the homepage

It seems to have become standard operating procedure for us as web designers to start look and feel development with the homepage. But starting with the homepage might not be the wisest move. Instead consider beginning the design process by developing lower level pages such as a standard text page. Not only do these account for 60 percent of initial page views they also make up the majority of pages on the site. And, more importantly, they don’t attract the same degree of opinions as the homepage.

By starting with a standard text page you have the opportunity to establish the design style, usability and accessibility of a site before it gets diluted by the land grab for homepage real estate.

If you work with the client to establish the look and feel of a site on a lower level page then they will be invested in the design. If they feel a sense of commitment to the design they will perceive it as more important and so are less likely to allow it to be railroaded by other content demands when the homepage is finally tackled.

Delaying the home page development isn’t just a “strategic” move — it is also the right thing to do. A home page should reflect the sites content at the highest level and signpost the user to key content deeper in the site. In my experience, the client often hasn’ t finalized all of the content in the initial design stage. It is hard to create an effective home page until you have a full understanding of what content it is meant to signpost and represent.

White space: The heart of the problem

When you do finally come to developing the homepage make sure you clearly communicate the importance and role of white space.

As designers we all know how important white space is and yet we are often extremely bad at explaining this in language that resonates with our clients. Comments like “it just looks better” or “everybody knows white space is important” do not help our cause.

So how do we explain white space to a client? I believe the answer is not in expounding its virtues, but rather in explaining the impact of too much being added to a page.

In his book “The Laws of Simplicity” John Maeda writes:

The opportunity lost by increasing the amount of blank space is gained back with enhanced attention on what remains.

Or to say it another way: the more you add, the more you detract from what is there. I think this should be the key to our approach when explaining white space to clients. Instead of selling white space on the fact that it looks better we should be selling it by pointing out that every element added to a page detracts from the rest.

To help the client grasp this concept I would like to propose an exercise you can complete with them.

Start by helping them list all of the elements they would like to see included on the homepage. Keep it simple and ignore standard navigations elements like the menu bar, site tools and search box. There is rarely debate about the importance of these elements so nothing is added by including them in the exercise.

Once you have completed the list, the next step is to assign values to each item. The value assigned equates to the amount of attention the client would like the user to pay to a particular item. Since a user only has a finite amount of attention to give we must therefore assign the client with a finite number of points to distribute among the items. Each item on the page has to be assigned at least 1 point — although if the client wishes to give more emphasis to a particular element they can assign it more points.

The number of points you give the client is entirely up to you — although I’ve found that 15 works well on average. If the client has specifically asked for a clean design then give him less. If he wants something busy and dynamic give him more.

What is important is what it teaches the client. He will quickly realize that the more elements he adds to the design the less he can emphasis any individual item and the less impact they have. Consequently, the fewer elements he adds the more impact they will have and so, indirectly, he will learn the value of white space.

There is no fold

The problem of white space is made worse by a client’s perception that users do not scroll. This misplaced belief means that they often insist that most, if not all, of the content on the homepage sits above this mythical line called the fold.

I refer to it as a mythical line because that is exactly what it is. It is a term borrowed from the newspaper industry and yet the analogy quickly breaks down. A newspaper fold comes at a specific point while on the web the point at which the user begins to scroll varies based on browser, resolution, window size and number of toolbars. But mythical or not, many clients are obsessed by it.

My final technique for bringing sanity to homepage design is to release the client from the constraints of the fold by convincing them that users do in fact scroll. In order to do this we need to understand where this myth originates.

It would seem that the idea comes from the very early days of the web, when users were unfamiliar with its conventions. I suspect this perception has primarily come from the early reports of Jakob Nielsen. However, this is unfair, because by 1997 he was already saying that things had changed. What is more, a recent report seems to indicate that over three quarters of users will scroll a page at least to some extent, with 22 percent scrolling all the way to the bottom. While 22 percent may seem low, the report actually suggests it is quite high. It argues that the results are distorted by repeat visitors who would have previously already scrolled all the way to the page bottom and be familiar with its content.

By demonstrating through up-to-date research that the scroll does not need to be feared, the homepage can both maintain its design aesthetics and handle additional content. Another area of conflict is resolved.

In conclusion

The bottom line is that we need to take the time to educate our clients. We need to explain how the role of the homepage is changing, demonstrate the value of white space and dispel the myths surrounding scrolling. We also need to pick our moment, knowing when best to tackle the subject of homepage design.

However education is not always easy because we need to be educating not just our point of contact, but also other stakeholders in the organization who are fighting over a place on the homepage. Getting access to these people can be more challenging.

How you decide to tackle this problem is entirely up to you. One approach I find very effective is the stakeholder workshops proposed by Shane Diffily in his recent A List Apart article “Educate Your Stakeholders”.

If you would like to learn more about effective homepage design I would recommend reading anything on the subject by Jakob Nielsen. His book “Homepage Usability” is excellent as well as various articles he has written. Finally, Derek Powazek has written an excellent article that mirrors much of my thinking on what every homepage should contain.

Suppose you worked at a search engine and someone dropped a high-accuracy way to detect malware on the web in your lap (see this USENIX paper [PDF] for some of the details)? Is it better to start protecting users immediately, or to wait until your solution is perfectly polished for both users and site owners? Remember that the longer you delay, the more users potentially visit malware-laden web pages and get infected themselves.

Google chose to protect users first and then quickly iterate to improve things for site owners. I think that’s the right choice, but it’s still a tough question. Google started flagging sites where we detected malware in August of last year. This February, the webmaster console team and Google’s anti-malware team took a big step toward closing the loop for webmasters:
- The webmaster console started listing example urls with suspected/detected malware.
- Google began attempting to email site owners when we detected malware.

Today, the two Google teams added even more functionality into the webmaster console:

- New: Request a malware review from Google and we’ll evaluate your site.
- New: Check the status of your review.
* If we feel the site is still harmful, we’ll provide an updated list of remaining dangerous URLs
* If we’ve determined the site to be clean, you can expect removal of malware messages in the near future (usually within 24 hours).

I like that Google will keep updating the list of dangerous URLs for a site, and that they’re working to remove malware warnings even faster when sites clean up malware. That will help site owners diagnose their problems and get them fixed faster. What’s just as exciting to me is that while I have written about malware unofficially in the past, Google has ramped up official posts about malware on Google’s online security blog.

I’m glad that the Google’s anti-malware team has been doing all this stuff to alert site owners if they’re hosting malware. I don’t think it generates any money for Google (if anything, it costs machine resources and engineer cycles to tackle malware), but it does improve the web as malware gets taken down faster. I guess there could be an indirect effect as people trust the web more and maybe surf more, which is good for everybody.