Too many sites still do it, and yes it is an increasingly irrelevant point of reference. More and more people around the world move to broadband, even in parts of the world that have historically been lagging a bit in the ISP stakes.

Plus, how many people aged 25 or under do you know who have used a 56K modem (”Well son, it made a sound like “iiick-iii-ki-ick-iiikick” and it was rubbish but it was all we had in those days”)?

There has to be a better option to provide download time references.

The Better Option

Using a common broadband speed like 4MB as a point of reference would make more sense. Or better still, using the site visitor’s own connectivity type or speed to display a relevant download time.

Then again, does it even matter if this information is displayed on the web page?

If we want a file we’ll download it. Our browser’s progress bar or download window will provide a proper estimate of how long it will take or how much data there is to pull through the pipe.

As we download more and more of our entertainment we would argue that a majority of people have a good idea of how long it would take to complete a download, regardless of size.

The best option in our humble opinion would be to remove any download time or speed references from the web pages and let the browser do the work. Granted, as a site owner a little piece of control over the user experience (as in providing relevant information) would get lost that way. For the site visitor how ever it doesn’t matter who provides the info. As long as it is correct.

And between references to mostly outdated modes of connectivity and actual speeds, the latter always wins.

Adobe.com is one site that still references 56K modems to illustrate download time estimates.

The Problem

The iPad has arrived, and now everyone wants to get on it. But for those of us involved with UX, it is far from business as usual. There’s a very particular challenge involved with user testing on the iPad.

No one has ever used one before. In fact most people haven’t used or even seen any tablet in real life. Regular user testing is comparatively easy – everyone has been on the web or worked in a desktop app, and thus has a frame of reference.

Not so with the iPad. Or the WePad, ExoPC, Notion Ink Adam or any other pad, slate, tablet, screen, deck or thing.

The Solution

Luckily there is a solution to make any testing you do with an unfamiliar device a tangible, hands on experience for your team of testers.

You may not have a whole set of iPads to hand out but that’s not what’s needed. If you will be testing a set of wireframes, transferring the files on to an iPad would be overkill. Get the old cardboard, scissors and glue out instead. No, I’m not kidding.

Last weekend I prepared two upcoming iPad user tests in San Francisco. One for an app and the other for the accompanying website. I created a batch of cardboard iPads by scanning my device, printing it out, and gluing the sheets on to cardboard.

This way each person in the test panel will have their own “iPad”, something real to hold, turn and relate to.

When the wireframes are done I’ll print them out and attach them to the cardboard iPads with non-permanent mount spray (below). The testers can scribble and draw on the wireframes, and when they are done we peel off the printouts and replace with the next version.

When we’re done, the “screens” go on the wall for the dev team’s evaluation session. And then they get saved in the test logbook. Quick, easy and tangible.

I also made a few “3D” versions of the mock iPads, mounting a printout on stiff foam core. It’s not quite the same thickness as the real iPad but close enough. The testers will use these as an aid in thinking about the overall environment they are in, and actions they perform (like taking the tablet out of their bag), before interacting with the app or site.

This 3D part of the test is getting close to the world of hardware design, which is not my area of expertise. But as with all interaction work, I find results from on-screen UX testing for an unfamiliar device usually comes out better when there is a tangible component involved. Plus it makes it playful and helps the testers give more honest and unedited feedback.

There is a drawback with this approach. You can’t simulate multi-touch, gestures or any type of feedback. How ever as a first step, this approach can get you lots of important information to act on as you progress from concept to best selling App Store app.

Tools

Here is the scan I used (PDF) to create the cardboard iPads, feel free to download it and give it a whirl. The image is a bit rough on purpose, I want the tester’s focus to be on what’s on the screen, and not the device itself.

This is an action packed thrill ride of a video where I show off the cardboard dummies.

Good luck.

Congratulations, your client the Think Vitamin Dairy have had a few weeks to mull over what you presented and are now fully on-board. They are super excited about how you will help them sell more orange flavored milk. So exited in fact that they seem to be rushing it a bit.

You always want a client to drive their project forward but sometimes you need to slow them down. Preparation and double checking every aspect of the plan is crucial. You don’t want to pay for sloppy prep later on in the project.

It is What’s on the Inside that Matters

If you read the previous post you may have spotted Darryl’s comment about helping clients stick to the plan. He is absolutely right, that is part of your work, and you need to do it early on.

There are many ways to help clients stay on track, two of the most important ones are:

1. Making sure the strategy is tied to the client’s business goal
2. That the plan has internal approval and backing.

In the case of the Think Vitamin Dairy we know point #1 is covered. Point #2 is a tad unclear.

When a client rushes something it can indicate they are not sorting out their internal bits as they should. Sometimes it is because they assume everyone is on the same page and at other times they don’t want to deal with internal politics.

While you don’t want to get involved with the latter, you have to make sure a few key steps have been taken. If not, your project will not be seen as the success it undoubtedly has the potential to be.

The Bare Minimum

Make sure you always talk to your client about these four things early on.

Stakeholder Support

Are all the people or departments that will be affected by the project fully on-board? Have their concerns been addressed and issues resolved? It is not your job to run the Think Vitamin Dairy, but at the very least you need to know people are on-board and able to provide you with what you need in order to do your job.

It is fair to assume you will be working with people from marketing, sales, maybe logistics and IT, and certainly customer support during the life of the project.

Resource Planning

How will these people and departments be affected, and what steps have they taken to prepare? Highlight risks throughout the process and make sure you come back to them with an intent to resolving them if your can (like demoing the app to your client’s sales and customer support teams).

Measurable Goals

Set and stick to clearly measurable goals, and split them in to clearly defined categories.

For the Think Hiking campaign it would be one category for the activities (number of apps downloaded, hikes shared) and one for actual sales (increased sales from existing resellers, sales from new resellers and so on).

Advantage/Adjustment Planning

This one goes by many names, A/A is just one of them. Regardless, the idea is always to plan for two different scenarios: the good and the bad.

Once the project has launched you may see that it does incredibly well from day one. Make sure you and your client have a plan to take advantage of it. Maybe you’ll celebrate the 10,000th bottle sold with a marketing… something. Like what? Think about it now so you’re not put on the spot when it happens.

If the project doesn’t take off, and app downloads barely brake the two digit mark, you need to make adjustments. Having talked this possibility through with all the relevant stakeholders (say, marketing and sales) beforehand, you will have a contingency plan in place.

Not only will your client be happy that you turned things around, but you’ll look like an absolute star for thinking things through from the start.

If you cover these four areas, your client will be better prepared to steam ahead with the project as a whole. And your success is if not guaranteed, than certainly a very likely outcome.

In Conclusion

These four points might sound like a lot, but by addressing them with your client you will be a better professional, a better web designer.

Your client wants to work with someone who understands their challenges, and showing that you grasp the basics of how successful projects and businesses are run will be to your advantage.

If the client doesn’t commission you to do the strategic work for them they might still pick you for the project team. Why? Because you think beyond the components you yourself will deliver. You care and you take responsibility for the project by speaking intelligently about it as a whole.

In combination with your incredible design or coding skills that will help you beat your competition.

Now, please pass us another bottle of that orange flavored milk

Strategy. You hear about it all the time. One must have a strategy/work on a strategy/follow a strategy and so on. Business types like to say “strategy” a lot as it sounds big, complicated and important.

And it is important, but there is no need for it to be complicated. Quite the opposite.

At the heart of it all “strategy” is just about having a plan for the thing you are working on. Or as Wikipedia puts it “a strategy is a plan of action designed to achieve a particular goal”.

Getting the Strategy Right

If there is ever a time to look at what’s important in a project, it is early on, in the strategy stage.

Let us assume that your client doesn’t have a strategy for their next web project.

Before you build, design, code or write anything you need to think about what the project needs to achieve.

This is in part because strategy can mean almost anything, depending on the needs of the client, the size of their audience and ultimately the goal of your client. And it will mean different things at different times during the life-span of a project: you may have one strategy to launch with, another for the ongoing management of the site and so on.

Thinking the project through, seeing how one thing leads to another on the way to the project’s goal is a very healthy thing to do.

The one thing all strategies must have in common is that they tie in with your client’s overall business goals. (You’d be surprised how often clients themselves forget this simple fact!) If it doesn’t, the client will never be happy with your work even if they were the ones who ignored the business goal connection.

That’s why you should be thrilled when a client asks for your help in developing their web project strategy (or asks you to help them find someone who can create it for them).

It is an excellent opportunity to make sure that you, or the people you choose to collaborate with, create a to-the-point strategy that helps the client reach their goals and in the process makes you look like an absolute star who deserves lots more commissions.

Strategy as a Sales Tool

Before we continue, you may wonder if you really need to bother with all this strategy stuff. The answer is yes you do, especially if the client asks you to help craft it.

A strategy, even one that is just a paragraph in length, shows that you have understood the task at hand. It shows the direction you will take the project, and it is an effective way to put your client’s mind at ease.

How to Do It

A good web strategy should always cover the following five points.

1. What you are doing
2. Who you are doing it for
3. Why you are doing it
4. How you are doing it
5. When you are doing it

Here is an example:

Your client, the Think Vitamin Dairy, tell you they want to sell more of their orange flavored Think Vitamin Milk.

To make sure you have enough information to cover the five points above you ask the client loads of questions, including:

• Who currently buys the Think Vitamin Milk?
• Why and how do they buy it?
• When do they drink it?
• What do they think of it?
• Have the sales changed over the past year, if so how and why?

The client tells you that Think Vitamin Milk is mostly gulped by web people who like the energy kick they get from it. They buy it online in crates of twelve bottles and according to their tweets some of them have started drinking it when they go hiking in the Cotswolds on the weekends.

After a spot of thinking you come up with a plan, a strategy, which suggests the client invest their budget in creating a smartphone app to reach a new audience instead of buying advertising. You flesh it out with a few pointers:

• Think Vitamin Dairy should build an iPhone app aimed at ramblers to help them plan hiking trips – The Think Vitamin “Think Hiking” app. (A new audience, with existing customers mixed in is golden.)
• The app lets users plan hikes and share them with their friends to get everyone ready for the excursion (virality – always a good thing!).
• The app would show where along the trail the energizing Milk can be bought and plot the local independent dairy farms who provide the cow juice. (If you like hiking you probably care about food sustainability too.)
• The app is supported by a small teaser and signup site that, after the app has launched, displays tweets from hikers and shows where the most popular trails are.

Instead of throwing money at advertising, the client’s milk brand would be known for a very useful app that is associated with good friends, good times and days off in the country.

There it is, a good simple and easy to understand strategy tied to the goal of selling more orange flavored milk.

In Conclusion

Strategy is important, but it’s not rocket science. It is really just about having a plan.

The more you work with strategy, the more you learn and the more you will want to learn. You will find new ways of approaching old problems, and it can be just as addictive as the work you are already passionate about.

This post was all about the basics, but to be honest that’s where many clients and us web creators go wrong. Get the basics right, and keep your eyes open and you will become an even better web professional in no time.

Best of all, the more comfortable you get with the strategy portion of your work the better you will be at understanding the client’s needs and the more valuable you will become to them.

With these two things in mind, it is surprising how often charities miss the mark when it comes to their online donation screens. Fiddly pull-downs, peculiar microcopy, trillions of steps, and minimal transparency.

Here are some of our step-by-step notes and drafts from a concept exercise on behalf of a well-known charity. The goal was to create a screen that encourages more site visitors to give, and give larger amounts.

We don’t know if these ideas will ultimately be used, but they illustrate ways of evolving the user experience in a way that should increase the amount of money collected.

The starting point

(Disclaimer: we combined two screens in to one to have a truly poor starting point for the exercise.)

The centre of the donations page has the words “Charge me” followed by one drop-down menu with well over fifty options starting at $2.00 increasing by one dollar up to $30 and then in larger increments up to the $1000 mark. The second menu has only one option: zero cents.

Round 1

First of all we remove the second menu. It offers literally no value and, worse, has a negative effect on the overall impression of the charity at the point of transaction.

And it is a transaction, even if some people might object to using that word in the charitable context. I believe calling something by its real name makes it easier to resolve any issues that surround it.

Also changed the copy from “Charge me” to “I am donating”.

Round 2

Online donations come in at an average of $17. Not bad but comparatively not good enough. I am certain the very long drop-down menu is part of the problem. With over 50 options it takes a lot of scrolling to get anywhere.

I cut the donation options from 50 to just seven. This offers a good range, and makes sure all the options are always visible on screen.

The amounts represent those the charity know, based on both offline and online experience, are likely to make people whip out their credit cards. The new amounts are $20, $30, $40, $50, $100, $150, and $200.

This intentionally puts the minimum donation amount over the $17 average. It is a slightly risky move but with large potential upside.

I also did away with the drop-down menu and replaced it with a clear display of all the amounts plus radio buttons. Clear and simple.

Round 3

Until now focus has been on tweaking what is already there. It is time to make a big change.

A problem with donating is that even when we are giving a relatively small amount, say $10 or $20, the money suddenly feels like $100 or $200 and we might hesitate to give it up.

To work around this I remove the seven donation amounts, and replace them with a large bold field with “$20″ in it. This establishes the giving of something tangible like a twenty-dollar note as the normal, logical thing to do; “Of course I should give a twenty, anything less would be silly”.

Before I visualize the effect of the donation I put a nice big button with the copy “+20 I can help more” next to the amount field. Each click raises the amount to be donated by 20 dollars. It shamelessly (for a good cause) plays on pride and generosity.

Under the “I can afford…” button I add a text link option: “I can’t give more than $10″. This lowers the amount in the field and displays the message “Giving, not the amount, is what matters.” Making it possible for people to give, even if it is a bit less, makes perfect sense.

Round 4

Another challenge with charity sites is that one rarely gets a really good idea of how the money will be used. Food for poor people in my city, or schoolbooks for kids in a developing nation, or tools for farmers, sound good but they are still quite abstract.

In this round we fix this problem by visualizing the result of the donation.

To the right of the donation amount I add a headline: “30 families in this area need your help”. Underneath it 30 family icons (with different numbers of parents and kids) represent the families.

The idea is that for each 20 dollars one of the icons would be highlighted, i.e. your money benefits these people.

Still I didn’t feel this was clear enough. So for each icon that lit up, I added a call-out listing what a family would receive for the money. For example a bus pass, seven breakfasts and a weeks worth of lunch boxes to take to school.

Much better. Plus, imagine if you are the person donating money and suddenly changed your mind… It’ll be a lot harder to do when you have to picture a family missing out on breakfast and lunch for a week.

Conclusion

The goal with the exercise was to create a screen that encouraged more visitors to give, and give larger amounts. At the end of it we had two alternative solutions. The first one (round 1-2 above) used small improvements to create a better experience.

The other completely re-imagined how online donations look and work (round 3-4).

Time will tell if these ideas ever get used, but at the very least they illustrate ways of evolving the user experience in a way that should increase the amount of money the charity collects.

To learn more about designing for charities, including the importance of having a funding goal, stating a clear mission, offering other ways to help and so on, please see “8 tips to design a charity website” at the Webdesigner Depot.