Website design

Website design


Nielsen Norman Group Report on Accessibility Available for Free

Get your accessibility holiday gift now — Jacob Nielsen's 148 page PDF report Beyond ALT Text: Making the Web Easy to Use for Users With Disabilities is now being offered for free.

[via GUUUI]



Enterprise Software Still Suffers From Basic Usability Problems

It's something of a cliché to criticize the usability of enterprise software. Big, complex software is always going to have some idiosyncracies and usability issues here and there.

However, when it takes me 16 steps to submit my time card each week, I'm beginning to wonder if those ERP vendors couldn't learn a thing or two about user-centered design.

Here's the process I have to follow to submit my time:

  1. Open IE (of course, you can't use another browser)
  2. Login to our extranet
  3. Click on the time reporting login link
  4. Login to PeopleSoft
  5. Click on the "Time report" link
  6. Click on the "Create/update" link
  7. Click on the "Add a new value" link
  8. Click on the "Add" button
  9. Choose "Copy from previous time report" radio button and click on the "Continue" button
  10. Click the "Select" button next to my most recently submitted time report
  11. Complete the fields in my time report
  12. Click on the "Update totals" button (optional) to see the total hours worked
  13. Click the "Submit for approval" button
  14. Click "Ok"
  15. Click "Ok"
  16. Click the "Sign out" link

I can only imagine the opportunities for error or to learn bad practices when it takes this many steps to do something as simple as submit a time card. Hint: ever heard of shortcuts?



How to Objectively Measure Emotional Response to Your Web Site's Design

UXMatters recently posted an excellent article about using a more structured method for soliciting user feedback than the traditional user interview.

The goal of this technique is to avoid the dangers of bias that can creep into regular interviews and also to help you to ensure you are asking the right types of questions — i.e. ones that are relevant to the interviewee.

Unfortunately, the article is titled "The Repertory Grid: Eliciting User Experience Comparisons in the Customer?s Voice" which doesn't exactly scream 'must read.'

Repertory Grid

In any case, the Repertory Grid on which the article is based is a psychological interviewing technique that is a way to objectively measure the way people emotionally respond to something.

For example, in the field of web design, this might be a home page design.

Using the home page example, following the Repertory Grid methodology will result in a grid of emotional responses to the page being viewed by the user, each plotted on a scale.

Each of these responses is plotted on a scale of polar opposites — examples of which might include ugly/pretty, light/heavy, professional/amateur.

As you add in the ratings of more users you can start to see trends appearing, where certain designs are seen as being more professional, more cluttered, more friendly, or more impersonal.

Because this technique involves reviewing multiple examples it is also a useful tool for conducting competitive analysis.

Bipolar Emotional Response Test

The BBC's web team used a version of this technique in the 2002 redesign of their home page, famously documented in The Glass Wall (PDF 6.7MB). They used the term "bipolar emotional response test," which is at least a little more meaningful.

See pages 11-13 of the PDF for more about the bipolar emotional response test and examples of their results diagrams for different web sites.

By the way, this is a must read for anyone interested in how a very popular, content rich home page is redesigned (oh, and there are lots of pictures).

We used bipolar emotional response testing when we were redesigning Seattle Children's Hospital's web site as a way to objectively evaluate comps of the new design against competitor home pages.

Not only did it help us to get objective user feedback on the designs, but it also enabled us to present findings and recommendations to our stakeholders that were backed up with data.

This made it difficult for someone to disagree with us based purely on their own subjective viewpoint. Thanks to Brian Fling for introducing me to this technique.

Not much has been written about the application of the Repertory Grid or bipolar emotional response testing to web design, which is surprising given how useful a component it is of any user experience design toolbox.

I highly recommend giving it a try. There's even a free online tool developed around the Repertory Grid method.



Comments Are Broken

It appears that sometime on Friday my comment system broke. It may have something to do with my running out of disk space (which happened on the same day), although when I freed up some space on my server, comments were still not working.

So now, if you submit a comment not only does it not appear under an entry, but it causes all the other comments for that entry to disappear as well! The meta data for the entry still shows the correct number of comments, but you just can't view them.

What's strange is that the new comment does not show up in the Movable Type admin interface, whereas the previous comments still do. Except for when you try to view the comments for an individual entry, in which case none show up.

I have no idea what the problem might be, although I have yet to properly research it. If you have any suggestions, please let me know via my contact form.

In the meantime, I'm just going to have to try life without comments — which already feels rather lonely.



Hacking Netflix's Navigation

I'm a huge Netflix fan. I love their site and have spent many hours rating and finding movies and fiddling with my queue.

Given that fact, I thought it might be fun to write a post about 10 things that Netflix could do better on their site. Unfortunately, my list quickly degenerated into nit-picking, so I gave up.

However, there is one area I think is open to improvement, and that is the primary navigation.

Here's the current navbar:

Netflix navigation

A number of issues stand out:

1. Why are three of the tabs large and three small? Obviously, Netflix is trying to assign importance based on the size of the tab, but based on whose criteria?

I doubt whether many people use the "Watch Instantly" tab more than "Movies You'll Love" (which takes you to your recommendations page). Netflix is trying to push their online movie service by positioning it prominently in the navigation.

However, navigation shouldn't be used as a marketing tool and I'm not aware that this size differential follows any known web convention.

2. There are two home buttons — "Browse DVDs" and "Home" beneath it. There's simply no need to have both; one of them should go.

3. Navigation labels are not consistent. For example, you can "Browse DVDs" but the recommendations tab only mentions "Movies You'll Love." However, when I click on this tab I'm recommended movies, documentaries and TV episodes. This label is clearly inaccurate.

In addition it's a little misleading to call this tab "Movies You'll Love." I don't have to love every movie or show that is recommended to me to want to watch them, so there's no need to sell it as if I will.

4. Navigation labels are overly wordy. Take "DVD Sale $5.99," for example.

The word "sale" implies a price drop from the regular price. Therefore, you can't have a permanent sale as all you have is permanently low prices. So, you can't really use this word in global (i.e. permanent) navigation.

5. There's no reason for the navigation labels to be presented as graphics. Given the breadth of Netflix's audience, it would be better to use actual text so that it can be resized.

Based on these points, here's my stab at a revised navigation:

Netflix revised navigation

Although you can't tell from the graphic, the labels and the tabs would now be resizable. In addition the tabs are as wide as they need to be for the labels on them.

I'd move "Queue" to be next to "Home" as I imagine it is the second most used tab.

The labels are also shorter and more to the point:

I realize that it's pretty arrogant to redesign any part of a site — let alone the navigation — when you don't know any of the issues behind the decisions that were made.

However, I think it's interesting to try, even if it's based on the opinion of one user.

Update: there's an interesting discussion about the validity of my redesign over at Hacking Netflix.



Future-Proof Your Web Site Design by Planning Your CSS In Advance

A web site is like a building. Over time it gets lived in.

And, regardless of the initial intentions of the designer for how everything within it should be arranged, things get moved around, stuff gets added, some things get taken away, more stuff gets added, the occasional renovation takes place, and yet more stuff gets added.

Many web sites are not really designed to be 'lived in' — i.e. to support all these changes by different owners with various intentions. After a while they bear little resemblance to any sort of coherent design and are likely to become increasingly hard to manage.

Of course, it's impossible to plan for all the 'home improvements' that will happen to a web site between major redesigns.

However, it is possible to be prepared so that the addition of something new to a page doesn't break its design.

A good way to future-proof a web site is to create styles in advance for the most common page elements, even if they are not yet being used. This is called 'planning ahead' ;-) and is an activity often overlooked by web designers.

Using the 'planning ahead' method, if a content author wants to add something to a page — say, a definition list — you've already planned how it will look so that it fits within the overall page design and will coexist with the other elements that may be present.

Let's take a look at the more common page elements a future-proofed site should plan for.

Headings

Even though you may only be using H1s and H2s, it's worth creating styles for H1 down to H4.

I'd question whether you need to go further than that (perhaps just make H4, H5 and H6 look the same). If a content author feels the need to use heading levels all the way down to H5 or H6 the structure of their content may be in question.

You might also want to create a style for a byline or a page summary as it's not uncommon for these to be used below the main page heading.

Lists

Lists can be quite tricky from a layout perspective, especially when you take cross-browser display issues into account.

Therefore, it's essential to plan for different implementations of lists in advance.

Of course, you'll create styles for the standard ordered and unordered list. But, what about nested lists? I would at least plan for the following variations:

I wouldn't worry about more than one level of nesting. If the content requires this, from a web readability standpoint it should more than likely be rewritten.

Definition lists are a great way to display lists of resources. You'll often have a link to a resource (such as a PDF) and a summary sentence below it. Take the time to set this style up and you'll stop users from littering your 'resources' pages with <br /> tags.

Web pages often start with a list of jump links to the various sections on the page. It's worth considering a style for this type of link list, to visually separate it from the regular content on the page.

A list of links with thumbnails plus a summary is quite a popular approach for gallery pages, so you may want to create such a style in advance.

Tables

Tables can be very time-consuming to build and style. However, with a little forethought at least the styling part can be made easier.

Be sure to plan for types of data other than numerical that tables can contain — such as text and images.

Here are the common table elements that you should consider:

It's also worth adding in advance any table-related functionality (often JavaScript-based) that you will likely be using. This can include:

If you're managing a corporate web site it's a good idea to also think about financial data such as that in an annual report might be displayed.

Images

There aren't too many variations on how images are placed within content, so they're pretty easy to plan for. Try incorporating options for the following:

Links

As well as the standard link states, consider whether links to external sites and to downloadable files should be treated differently (i.e. indicating the target of the link).

It may also be worth planning for how to style an A to Z index.

Forms

It's impossible to plan for all the layout complexities that forms can require.

However, do plan for all the standard form elements — for example, that are present in a registration form — as well as how error messages will be presented.

JavaScript

I'm no JavaScript expert, but I do know that it's often a good idea to choose a JavaScript library upfront rather than cherry pick individual scripts and hope they all work well together.

Doing this will help you to avoid functionality clashes and bloat that can come from using scripts from a variety of sources. I've used jQuery in the past, which is well established and has a good selection of plugins.

Pull Quotes

Pull quotes are a great way to call out important information or lines from quotations. I'd highly recommend creating styles for these common pull quote variants:

Other Things to Consider

If you're not already using Flash, plan for how you will embed it into your site. Also, consider creating styles for displaying sidebar content such as boxes of related links or featured resources.

Don't forget to create a print style sheet and maybe even a mobile style sheet (and remember to keep them updated).

How Does Everything Fit Together?

Lastly, it's important to test the interaction of different combinations of page elements.

It's simple enough to separate headings and paragraphs appropriately. But what about a heading followed by a table? Or, a heading preceded by a list? Or an H2 followed by an H3?

The same is true for other page elements — for example, lists followed by tables.

It's worth taking the time to try out these different page layouts (including the more unlikely ones) to make sure that your spacing is set up correctly.

It's much easier to do this in advance than to incrementally tweak your CSS as content gets moved around and added.



Cheap Alternative for Web Site Usability Testing

Just came across UserTesting.com — a company that conducts remote usability testing for only $19 per user study. For that you get a 15 minute video of the tester using your web site and a short written report.

Compared with the cost of running traditional usability studies, that's a good deal.

If they can find users with the right demographic characteristics, this could be a great service.

Side note: The last question on the FAQ page made me chuckle:

You didn?t answer my question. How come?
Probably because this FAQ was written by a PR person. Please ask us your question using our contact us form.

Oh, and if you like spouting your opinions about web sites, you can always apply to be a tester and get paid (a little) for the privilege.



Book on User-Centered Web Design Available Online for Free

I just discovered that Sarah Horton, one of the writers of the Web Style Guide has published a book on designing usable web sites — Access by Design.

Even better, the book is available online for free in the form of a very usable web site.

To quote:

In this book, we primarily address universal usability at the functional layer, focusing on the challenges of designing pages that are accessible and usable on different devices by diverse users. We concentrate on the functional layer because, without it, the other layers are irrelevant. An intuitive interface and informative content are useless if the basic functions of a site don?t work. Like a car that doesn?t start, a Web site that does not function is of no value to the user.

Excellent stuff and a valuable resource for dealing with the misconceptions of clients and stakeholders.



Flash Video Player Design Showcase

I'm working on a project to develop a video solution for a web site.

As part of my research I've been looking around the internet to see what design conventions are becoming established and what functional elements we should think about including.

I collected 50 Flash video player examples and put them up in my Elements of Design showcase. I hope you find them interesting / useful!



Best Buy Doesn't Want My Money

Today I finally decided to splurge for an Xbox 360. I did some research on Amazon and then thought I'd check out another site or two to compare prices and deals.

The first site that popped into my head was BestBuy. So, I popped on over to their site to try and buy my new console.

  1. Scanning the global navigation, I quickly spotted the "Games & Toys" option.
  2. I hovered my mouse over it and immediately saw "Xbox 360" at the top of the fly out menu — click.
  3. On arriving at the Xbox 360 page I scrolled down past the main promo area telling me that "The future is now" and offering to show me how to connect my video game system to my HDTV, looking for a list of consoles.
  4. I scrolled down past the "Featured Offers" which all appeared to be game-related. Once I've got my console I might be interested in this area.
  5. I scrolled down past the "Games for Everyone" banner which looked like some sort of ad.
  6. I scrolled down past the "Featured Games" and the "Coming Soon!" sections.
  7. I scrolled down past the "Need Help?" section.
  8. And arrived at the bottom of the page, with no console in sight to buy.
  9. So I gave up and bought it from Amazon instead.


11 Reasons Why You Should Write Long List Posts

It's no secret that lists are a popular blog post format. Long lists of resources, in particular, can be a very successful type of post in terms of driving traffic and raising awareness of your site. Just check out Smashing Magazine for numerous examples.

I recently went through the (fairly lengthy) process of gathering and organizing articles for a list post of my own about working with web design clients.

However, it was only after I published it that I really thought about the many benefits (beyond the obvious) to this type of post.

Let's take a look at why long list posts make a good blog post format.

1. Good Linkbait (the obvious)

There's no denying that list posts can be extremely popular. My own post on CSS Rounded Corners has been driving a steady stream of traffic to my site ever since it went up.

You only have to glance through social bookmarking sites like Digg or Delicious to see the prevalence of these types of posts and their popularity.

Within the various flavors of linkbait, long list posts fall into the 'resource hook' category.

2. Improves Your Research Skills

The most time-consuming element of writing posts that gather together a large collection of resources is the research piece. This typically goes beyond typing a few phrases into Google and looking through the top three pages of results.

If you want to be thorough you're going to need to refer to a variety of search engines, social bookmarking sites, industry forums, and online magazines in your research.

By broadening your research methodology you'll not only catch the best resources on the web, but also hopefully some less well known nuggets that will set your list post apart.

3. Forces You to Read Widely on a Subject

In order to create a long list post you have to read and understand the source material you intend to reference.

This process of self-education means that there is as much to be gained from the activity of writing a long list post as there is from the publishing of the actual post itself.

Researching a post that requires you to read widely gives you a reason to catch up on all that reading that you wouldn't otherwise get around to.

If you ever want that post to be published, it also forces you to focus — to avoid going off at a tangent when you come across interesting, but non-related, articles (which you naturally save as source fodder for future posts).

4. Discover New Sources of Information

If you ever get tired of reading the same old web design sites, it's always a refreshing change to discover a new source of quality content.

Researching a long list post makes this typically infrequent process of discovery happen more quickly and more often.

For me it was Graphic Define Magazine, which focuses on the business side of running an interactive design agency.

5. Good Reference Tool for Yourself

One of the reasons I write certain posts is so that I can refer to them in the future.

Not only do I use my blog as a way to create these 'quality' bookmarks, but the process of writing helps me to better understand and remember the information I'm referencing than if I just bookmarked those sites and resources in Delicious.

It works — I often find myself searching for an old post on my site in regards to something I am involved with for work.

On the other hand, although I still save things to Delicious on a regular basis, I find that new bookmarks tend to get swallowed up among all the others.

This has happened to such an extent that I rarely remember what I have bookmarked and frequently find myself starting searches on Google rather than in my Delicious account.

6. Promote Your Site to Others in Your Field

One outcome of writing a popular long list post is that you will send a lot of traffic to the sites you reference.

If the owners of these sites — your respected peers — are checking their traffic stats regularly, they'll see the traffic coming from your site and will most likely check out what you've written about them.

They'll notice you and, who knows, maybe you'll gain a new RSS subscriber (and a link back — see #1, above).

7. Easy to Write

Posts that pull together large amounts of resources certainly take a lot of researching and organizing — which may take place over a period of weeks — but they're pretty straight forward to write.

They certainly won't be challenging your grammatical abilities. If you're like me and write your blog in the evening, after a long day's work, collecting and organizing resources is often a lot easier than actually writing something from scratch.

8. Easy to Read

Long list posts are popular partly because they're easy to read. By their very nature the content is broken up into easily digestible chunks and these posts tend to be easy to scan.

9. Makes You Think About Your Audience

If you're going to go to the time and effort to pull together a large list of resources on a topic, you'd better make sure that the topic is of interest to your audience.

Planning and writing these types of post forces you to focus on what subjects your audience might find interesting and useful.

Furthermore, it makes you think about what constitutes quality content for this audience within the subject area you've chosen.

10. Drive Discussion

Long list posts are easy for people to comment on. More often than not comments will be of the "great post, thanks" variety, but these types of post often encourage readers to add their own favorite resources.

If reader interaction is one of the goals of your blog, long list posts can be a great way to get readers more involved in the conversation.

11. Source of New Articles

In researching a long list post you will inevitably come across interesting but unrelated information and insights that make good source material for other posts.

In addition, after you've published your post you can still save other relevant resources as you come across them. Once you've gathered enough, you can publish an update to your post (maybe 6 months later) and hit a whole new group of readers.



Working with Clients

Whether you work for an agency or an internal web team, working well with clients is integral to the success of your web projects.

Here is a collection of articles to help you do it better.

Jump to a section:

Understanding Clients

12 Breeds of Client and How to Work with Them

There are loads of different types of clients out there and chances are at some point you'll get to meet all of them. So let's take a look through some typical clients and see if you recognise a few of your own in there!

Cheaper Over Better: Why Web Clients Settle for Less

Why clients hire bad web designers — and what good web designers can do about it.

Understanding Organizational Stakeholders for Design Success

A design must meet the business needs of the company, and must be supported by disparate members of the management team, in order to be actually implemented.

Stakeholder Analysis: Winning support for your projects

Stakeholder analysis is the technique used to identify the key people who have to be won over.

How To Think Like A Client

Having trouble getting clients to see things your way? Maybe it's time you spoke their language. When it comes to commercial web design, it's all about the business case.

Communicating with Clients

It's Not About The Website

There is no more crucial step in a client's project than the initial creative discovery meeting.

What Web Design Clients Need to Know

Sometimes web design clients don't understand that building a successful web site doesn't fall solely on the shoulders of the developer.

The Dumbest Guys in the Room

Getting design approval and then a project completed for a large corporate client is usually about trying to keep the dumbest people in the room from shooting themselves in the foot.

Design Questions

The discovery meeting is likely the most important moment in the life of a project. There is another vital aspect to this initial meeting: the specific questions asked.

Some key questions to ask your clients when designing quality sites for them

Many web designers have a terrific opportunity to shift from being web designers to being marketing consulting for their clients.

Documenting work keeps clients informed of and satisfied with your performance

Here's how one consultant lets his clients know about the tasks he completes on their behalf using a Work In Progress sheet.

Educate Your Stakeholders!

If you spend the time to educate your clients or managers at the beginning of the project, it will be repaid many times over by better decisions later on.

Using Site Evaluations to Communicate with Clients

Performed as part of a sales proposal, a site assessment can help you speak knowledgeably about solutions to your potential client's problems.

Ten Quotable Moments: Challenges and Responses for UI Designers

The following ten things have been said to me by actual clients and represent common and very human reactions to a new wrinkle in the process of building software: design.

Stakeholder Management & Planning: Planning stakeholder communication

Stakeholder management is critical to the success of every project in every organization. By engaging the right people in the right way in your project, you can make a big difference to its success.

Design by Metaphor

If a client says he wants his new auction site to be "like eBay," what does that mean? An artist hears "It has a tacky color scheme." A developer hears "It's scalable to 20 million users." A user hears "It has feedback ratings on all sellers."

Why is it so Hard to Make Products that People Love?

Personas provide the shared vocabulary that bridges the different points of view within the company.

Remove These Words From Your Vocabulary

These words tend to put the client on edge and can form a barrier across the relationship that you are trying to form with them.

The One-Minute Test

Often, when we meet with design teams, we'll reserve a few minutes at the tail end of the meeting to do an unusual type of wrap-up.

The Client Relationship

When the designer/client relationship should begin

I have been considering the point at which this relationship starts and wondering whether the designer should actually be engaged earlier in the development cycle.

How a Core Relationship Strategy Can Help You Increase Profits

A practical strategy to identify and enhance relationships with your best clients - and resolve your issues with the others.

What's Your Client Relationship Like?

Client relations aren't easy, just as personal relationships can be challenging. But are they that different? When looked at closely they seem pretty similar.

Beyond Strictly Business Relationships

Many of us tend to keep our clients at an arms length. I've had more success and enjoy my work a lot more by moving beyond the "strictly business relationship".

Five ways to keep a client

Five suggestions to keep your business running smooth, your clients happy, and your reputation on a pedestal.

The Client Cycle Explained

Developing a relationship with a client takes work. You need to be actively building a relationship with that client, beyond just the project.

The Resistance: Designers and Clients Go Head-to-Head

As no military plan survives contact with the enemy, no design concept survives contact with the client.

Proposal + Engagement = Marriage

I recently took the time to notice that the various terms we use in the early stages of a project closely resembles one of life's greatest and scariest moments. Marriage.

Process

Never Get Involved in a Land War in Asia

Throughout these projects, one thing has remained a constant: those with clear, well-written, strategies ran smoother than those without — and ended up pleasing everyone, including the client.

The Problem, the Balloon, and the Four Bedroom House

Without a problem, there is no project. Where there is a problem, however, there is a stakeholder who is desperate for a solution and who has a delivery deadline. Find out how a good process can tame even the most unruly project.

What's the Problem?

One of the biggest problems in delivering a website, and yet probably the least talked and written about, is how to decide, specify, and communicate just what, exactly, is it that we're going to build, and why.

Use Cases Part II: Taming Scope

The use-case model can be a powerful tool for controlling scope throughout a project's life cycle.

The Ultimate Design Brief

The best projects are borne from briefs that are open enough to inspire ideas, while being specific enough to feel workable.

How to Write a Web Site Creative Brief

Writing a clear, well-structured creative brief will get your web project off to a good start and keep it on track.

Get Out from Behind the Curtain

When used at critical points in the design process, these sessions build strong, respectful relationships. Since clients directly experience the design work, you don't need to sell clients on an idea — they were with you the whole time.

Questions to Ask at Kick-Off-Meetings

It is important to understand perceptions of the scope, vision, goals, users, and content in order to work out any differences and to move everyone into the same plan for your new site.

Stand and Deliver

The good news is that designers already have what it takes to deliver gracefully under fire. It's baked right into the job.

Successful Creative Briefs: Linking Business Objectives and Creative Strategies

The creative brief is one of the most valuable tools in the design process, providing a vital connection between business objectives and creative strategies.

Successful Web Development Methodologies

Web development need not be a hit-and-miss proposition. A unique development methodology, which allows the Web team to deliver complex projects on-time and on-budget.

Setting Up Business Stakeholder Interviews, Part 1

Interviewing is both art and science, and it is something that any UE practitioner with a little additional time and moderation skills can employ to extract clear business requirements.

Communicating Design Concepts Without Getting Skewered

A reminder to designers to not get so caught up in idea generation and specifying details that we lose sight of creating a coherent big picture for the design.

Avoid Edge Cases by Designing Up Front

Better planning and a beefed-up style guide may be exactly what you need to avoid markup derangement or, worse, a dysfunctional product.

Bridging the Gap with Requirements Definition

How do you ensure that your new product doesn't flop? One effective method is to conduct a requirements definition phase before developing a new product.

Effective Project Management for Web Geeks

The basics and tools to control the phases of a project, prepare contingencies, manage client expectations, and effectively hand over the finished product.

In Defense of Scope Creep

Scope creep distorts our carefully structured schedules, making project managers weep. Have we run out of strategies for fighting this evil scourge? Is it hopeless? Maybe not. Maybe it can even be beneficial.

Walking Through Your Product Design With Stakeholders

It's time to walk through your design approach with the project stakeholders, including management, developers, and users. What do you need to do to prepare for your presentation?

Using research to end visual design debates

Relying on subjective feedback to make design decisions can be disastrous and will result in a design that may be acceptable to your team but has no appeal to users.

Tips for Design Reviews

My thoughts on effective design reviews with product stakeholders (clients, business units, etc.).

Conducting Successful Interviews With Project Stakeholders

Interviews work very well for gaining insights from both internal and external stakeholders, as well as from actual users.

How to Manage Scope Change in a Web Project

Learn the standard techniques for defining and controlling scope, why the standard techniques seem to fail for most Web projects, and the latest best practices that seem to work for the Web.

Early and Often: How to Avoid the Design Revision Death Spiral

Through well-managed client collaboration, our designs are stronger and are more likely to serve our clients' needs and satisfy the goals of end users.

Principles of Collaborative Web Development

The basic principles of collaborative web development: identifying stakeholders, recognizing the "Chaos Zone," distinguishing the development and production phases of operation, identifying source assets, building direct feedback into work processes, and more.

Deliverables That Work: Design Description Documents

You know those things you're supposed to deliver to a client during a big project — use cases, wireframes, etc? The DDD is a tool used to package them all.

Difficult Clients

Coping with Difficult Clients

There is no magic bullet to turn your difficult clients into dream clients. However, you can learn new skills that will make them much easier to work with, so you can be spending your time delivering service and products.

Learn to Love Complaining Clients

Explains the true value of client complaints and provides a step-by-step guide to complaint resolution, showing how to make complaining clients a part of your competitive edge.

Firing a Client

You've certainly read about great ways to salvage your relationship with a problem client. But what do you do when you just want to get rid of a client?

In Defense of Difficult Clients

It's only by being forced to question our beliefs that we can be certain they're right.

How to disarm 10 difficult client observations/requests

Some of the best responses we have to questions that can often derail an otherwise effective solution.

The Client Did It: A WWW Whodunit

On the fine art of telling bad clients to buzz off.

Four Easy Lessons and a Simple Truth

A new perspective on why some of your clients are difficult and what you can do about it.

Getting Your Clients to Pay Up

Tips to help you develop a hassle-free payment strategy that's fair to both you and your clients.

What Happens if Your Clients Don't Pay?

No matter how much you guard against it, no matter how much you attempt to prevent it, you'll end up with this question.

Dollars & Sense: Setting the Perfect Rates

How much do I charge? How much is too much? How much is too little? I wonder if they will they pay that? Is my time worth that little?

Nine Factors to Consider When Determining Your Price

Part guesswork, part experience, part number crunching — how ever you look at it, determining your price is a difficult task.

Pricing Web Work — What Should You Charge?

Drawing up a quote is no simple task. Your client wants the cheapest price, but you have to make a profit. A break down of the quoting process.

Top Ten Signs You May Be Charging Too Little

Finding that pricing sweet spot where you make a great income without scaring clients away is one of the most asked about issues.

Legalese for Freelancers: Creating a Contract

Creating a contract is a vital step in ensuring a professional business that runs smoothly.

Bulletproof Web Design Contracts

Covers the issues that even the most basic Web work agreement should address, and explains why you need to make sure they're in every agreement you sign.

Writing Web Design Contracts for the Non-Legal

Learn what's the difference between a proposal and a contract, what to include, and download a sample to get you started.

Who Are You Dealing With? Client Background Check Essentials

Before you jump into an agreement with that hot new business prospect, spend a little time on research. How likely is the client to pay your invoice? Will you be legally able to enforce your contract?

The Business Case for Web Standards

The Business Value of Web Standards

Do Web standards give organizations a return on investment? Does the transition to XHTML and CSS make financial sense? The answer to those questions is yes.

Web Standards For Business

Highlights the benefits of using Web standards for business sites. It is aimed at stakeholders from the marketing, communication and IT departments.

Why tables for layout is stupid

The use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

The Business Benefits of Web Standards

Discusses how adhering to web standards, and leaving behind proprietary markup and technologies, can contribute to a company's business goals.

The business case for Web standards-based development

Building Web sites with modern standards-based techniques can reduce bandwidth costs, enhance accessibility, and facilitate content management. This article prompts you to ask whether your Web techniques are stuck in the 1990s.

Wrapping Up

Designing For Clients Made Easy

Astute designers use a number of tactics to ensure they keep the project in control, on time, and on budget … and have some creative fun along the way!

Contractor or Scapegoat? Keys to Successful Contracting

The contractor is not always to blame for project failure, despite what the project manager may say. A look at why the contractor is the perfect scapegoat — and what they can do to protect themselves.

The 10 Biggest Mistakes Freelancers Make, and How to Avoid Them

A look at some of the most essential mistakes that freelancers, new and old, often make, and how to avoid them.



10 Reasons Why Your Web Site Sucks

E-consultancy has an amusing list/rant of top 10 web site annoyances.

Although many of these items have been brought up before, it's never a bad thing to be reminded of what not to do.

While I agree with most of the points raised, I disagree about the use of 'intrusive' advertising such as overlays and interstitials on some sites.

Of course, I would rather that these forms of advertising did not exist.

However, I understand that as people expect content to be provided for free and users increasingly suffer from banner blindness, marketers are having to move to more intrusive forms of advertising in order to be sure that their ads are being seen.

I'd also like to add a couple of my own peeves to the list.

11. Poor Site Search

One method I often use to assess how well a site is built and managed is to try out the search.

If the results number in the hundreds, are poorly presented, and lack relevance then I know that the site owner has not spent much time thinking about the web site's usability.

It's even more of a red flag if the search results page shows a percentage relevancy number for each result — you know, result #4 is 58% relevant while result #5 is only 52% relevant. What does this information actually mean and how is it supposed to be used?!

This was a useless feature when it was introduced 10+ years ago and it remains so today. Get rid of it.

12. Lousy Typography

One of the easiest ways to improve the design and usability of your web site is to have good typography. That's why it's so frustrating when I come across sites that suffer from small text, cramped paragraphs and lists, and hard-to-read text and link colors.

There are so many examples of good typography on the web — MSNBC, The New York Times (funny Stephen Colbert column), Slate, and Time to name just a few — that there's really no excuse for poor typography.

It's also easier than ever to compare fonts and typographic layout than ever.

That's my 2c. Any more pet peeves to add to the list?



Customer Reference Checklist / Questionnaire

I recently had to conduct a customer reference call for a web services vendor we are considering. A quick web search brought up Adam Kalsey's excellent list of customer reference questions.

I've taken these and added my own questions and some from other sources to come up with the following customer reference checklist:

Overview

  1. What is your name/title/dept, etc.
  2. How long have you been using [product]?
  3. Describe how you are using [product] (e.g. enterprise-wide, single dept, pilot?).
  4. Are you personally a user of [product]?
  5. What?s your company?s relationship with [product vendor]?
  6. Does your company receive anything from [product vendor] in return for being a reference?

Product

  1. What other products did you consider when making the decision to use [product]?
  2. Why did you select [product] over its competitors?
  3. What are the best features of [product]?
  4. What are the limitations of [product]?
  5. Describe any manual processes and workarounds you follow in order to use [product]?
  6. Is there anything that surprised you (positively or negatively) about [product]?

Implementation

  1. How long did implementation take?
  2. What went well during your implementation?
  3. What went poorly during your implementation?
  4. What did you learn during the implementation that you would have liked to know before you started?
  5. If you were doing the implementation again, what would you do differently?

Professional Services

  1. How many of [product vendor's] consultants were required to implement the product?
  2. Did the consultants customize [product] for you? If yes, describe that customization.
  3. Did the consultants work on-site or remotely?
  4. Who provided project management for the implementation?
  5. What training was provided and how would you rate it?
  6. What type of consultants worked on the implementation (developers, analysts, project managers)?
  7. What did the consultant not do (i.e. what did you have to do yourself)?
  8. Were your expectations for the implementation met?
  9. Was the project finished on time and on budget? If not, why not?

Production

  1. How many users use [product]?
  2. How well does [product] integrate with your production environment?
  3. How many people do you need to manage and support [product]?
  4. What new processes have you created to support [product] in your production environment?

Support

  1. How often do you request technical support from [product]?
  2. Describe the process of asking for technical support and receiving a resolution.
  3. When you have a support question or issue, how long does it generally take them to respond to you?
  4. Who do you receive resolution from (developers, tech support, professional services consultants, or someone else)?
  5. How do you find out when a bug fix or update is available from [product vendor]?

Conclusion

  1. What was the ROI time frame for [product]? How does this compare to what you expected?
  2. What should we know about [product] and [product vendor] before we make a decision?
  3. Would you choose [product] again?
  4. Can you provide the name of any other customers I can speak to about [product] (i.e. who are not on the vendor's customer reference list)?

Assuming you use most of these questions (or some variant of them) you'll need 45-60 minutes to complete the call, so plan accordingly.

When it comes to making a major product evaluation it's worth not skimping on this step — the information you can gain can be invaluable.

Further Reading



Review of Web Site Development Tool Design Dot Fly Publishing

The following is a paid review. Please note: my time is being paid for but my opinions are my own.

Every now and again I come across web applications the purpose or market for which I struggle to understand. Designer dot Fly Publishing is one of those apps.

What It Is

Designer dot Fly Publishing (D.FP) is a browser-based WYSIWYG app that enables you to create simple (as far as I can tell) web sites without using HTML or CSS.

It is billed as an alternative to traditional web site creation tools which tend to create bloated, invalid code.

Basically, you build the site within the tool, export your web pages and CSS as a zip file and then FTP the files to your web server.

How It Works

I should mention that the tool manages user access by forcing you to login through Facebook, so if you don't have a Facebook account or if this causes any security concerns this is not the app for you.

D.FP is a modal editor based on or using (I can't tell) the text editor, vi.

It works via something similar to a command line interface. You layout your page by entering shorthand commands into a text field, like 's' for 'select' and 'a' to 'add' content areas (rows or columns depending on the direction you have chosen to add them).

You can string commands together by adding a '/' at the start. For example, '/sh' will select the header.

It's certainly not at all intuitive to use. In fact, according to D.FP's home page that is seemingly the intention:

Some programs have UI's designed to be intuitive so first time users can easily figure out how to use it. This isn't one of those programs. The UI is purposely cryptic because with simple text commands and modal editing comes great power.

Personally, I'm not a fan of tools that are solely geared towards power users — I believe that a well designed application should be usable by beginners and should grow with you as you become more proficient and start to learn shortcuts and more advanced functionality.

Furthermore, it would appear that the use of modes is frowned upon in interface design due to the input errors they create.

I must admit that I watched the demo video and read through the help and still found it difficult to perform even basic functions with the tool.

Organizing the web pages of my site appeared straight forward until I found that I couldn't see how to add sub-pages to my test site.

Unfortunately for anyone trying to learn D.FP, the demo video only provides a high-level overview and the help page is not especially helpful. It's one thing to create a tool that demands a steep learning curve but to do it without providing any real documentation seems rather shortsighted.

Conclusion

This leads me back to my opening comment about struggling to understand the audience for this application.

I thought it was interesting that the first commenter on the YouTube version of the demo video said

A fun little tool, but wouldn't it be alot easier to just learn html?

My thoughts exactly. Given that this tool has a very steep learning curve it clearly is not aimed at novices wanting to build their first web site.

But for web designers, given how difficult it is to learn to use — can you say 'trial and error'? — and the limitations in terms of functionality (adding images, tables, forms, etc), I just can't see the point.

Hand coding in HTML and CSS really isn't that hard (the basics at least) but if I wanted to use a tool that allowed me to see and edit my page without dipping into the code, I would prefer a more modern (i.e. easy) WYSIWYG approach.

I don't think it's insignificant that vi, on which this tool is based, was developed in 1976. In this age of elegant and sophisticated online UI design, D.FP seems like something of an anachronism.



>>