Category Archives: Web Design

User experience is one of those new trendy terms that is becoming a valuable area of expertise as a web designer.Unfortunately it’s one of those things (like usability) that is so vague and covers so many aspects that it’s hard to define or pin down to just a few key points. In this post I’m just going to look at the user flow options of linear or mesh structure.

It’s important to note at the outset that each project needs to be evaluated individually to determine which structure is most appropriate, but I feel that this is one of the options that’s usually overlooked.

What’s the difference?

A mesh structured website is what makes up 99% of the web. A website that links to multiple pages and they generally all link back to each other. There is no set order and your experience ends when you are done. Going to a theme park would be an example of a mesh experience.

Similar to a hose, a linear structure guides the user through a direct (usually pre-determined) flow of pages, then directing them out the other end of the experience. Watching a movie is an example of a linear experience.

Within many online store sites there is an element of both structures. The main site and shopping gallery would use the mesh system while the checkout process would revert back to a linear experience.

Mesh structure pros and cons.

Pros

Web users are very familiar with the mesh system. It allows them to quickly find areas they need or want quickly. Lots of information can be provided, providing users the freedom to see what they want and move on. Sites can be expanded with growth quite easily.

Cons

Users can miss important content. Relies heavily on information layout and page structure to make sure the user understands the key areas. Only a few key areas can be emphasized.

Practical linear user flow.

The most common (although basic) form of linear flow used to be a splash “click here to enter” page, but currently, a linear flow is generally used for any systematical information gathering – such as the Amazon Checkout process shown here.

You start by signing in to verify the user, confirm the address you want the order shipped to, select the shipping type/cost you want, decide how you will pay for the item, enter your billing details, select any of the available options (like gift wrapping), confirm the order, see order confirmation.

Every order follows the same process. Prior to the payment you can bail back out to the shopping area and product gallery, but you always have to go back through the same process (in sequence) to complete the order. Why do they do that? Because each step is important and can’t be missed. Amazon need the information that is collected at each step.

Why would I use a linear flow for a website?

As a designer of interactive promotions, we have found that linear flow is the best way for both the client and the user to gain the benefit they need. The client gets some kind of brand or product placement in front of the user and the user ultimately has a chance to win something.

Here’s an example of an interactive promotion user flow.

But I hear you asking when it would ever be useful in a regular website? While I doubt many content-heavy websites would ever ‘work’ in a linear flow, you can consider adopting a linear flow for sections of your site.

This might be for sites where people are only coming for 1 purpose, or for sites that have some payoff to the user for staying within the flow.

Advantages of a linear experience

You can guide a user through the experience with very few distractions, buttons or options. You can get users to see something they wouldn’t otherwise have seen. It’s something different. It can provide a very fast user experience.

Warnings

If you’re going to attempt to lock people into a linear experience make sure there is a payoff for the user. If they get bored you may experience what is called ‘dropoff’, especially when you reach a barrier page like a form or a page where they need to read a lot of text. Always let the user see the pot of gold at the end of the tunnel, and it can be a good idea to show progress.

—

Have you ever used a linear process within a mess structured site? Let us know how it went for you.

Legally protecting yourself (as a freelancer or agency), is one of those things that sound good, but few people actually do anything about.

We place in the ‘it must be expensive’ or the ‘I’ve been fine without it so far’ basket, and it stays there and looks at you with geico-cash eyes – begging for your attention. It’s just one of those things we know we need, but it hasn’t made it high enough up the priority list to do something about it.

UNTIL… that day when a client from that ‘big job’ turns around and wants to take you to court for some kind of misunderstanding or wants ANOTHER set of revisions after you’ve already done 25. Once you’re in a hole with no back door there’s really no place to go and no way out – UNLESS you’ve covered yourself with some form of legal contract.

Disclaimer

Please note that I am not a lawyer, and I have no formal legal education o the comments and observations in this post are merely ideas and collections of knowledge from various people in my experience.

Contracts in a nutshell

Basically a contract is any agreement between 2 or more parties. The majority of the time contracts are printed documents with a few signatures on the bottom, but legally. Interestingly, even a verbal agreement is legally binding – however infinitely harder to prove if anything makes it to a courtroom.

Why use a contract?

A contract (although somewhat daunting) is a very professional way to start a professional relationship of work/service. A contract should clearly contain the expectations of the initiating party, and their expectations of the client. It will often include clauses covering instances where either party may want to terminate the contract and the consequences of that.

Most of the time, contracts we sign are locking us into a payment expectation and the period of time those payments will be required. Statement of work (SOW) contracts are similar, but detail the terms for a specific project.

What you CAN do in a contract?

You can actually include almost anything within the law. This may include (but not limited to);

• Payment outlines and dates
• Project expectations and deliverable dates
• Failure to meet payment or milestone results
• Expected behavior or appearances
• Expected confidentiality, disclosure or exposure
• Limitations of liability
• Outline of potential additional charges

What you CAN’T do in a contract?

No matter how committed you are to an agreement, any contract which includes breaking any law may be deemed null and void in whole or part regardless of the context or intent.

You also can’t deliberately confuse or mislead people. Any contract that is deemed to possibly have an alternate meaning may void something you have included. With the motto of Google – Don’t be evil.

Don’t include unrealistic expectations. You should always be writing an agreement that all parties should be able to comply with. There’s no benefit including a requirement that will cause unnecessary stress or worry. Like adding a line that would disconnect a service if a payment is 1 minute late.

Play nice

I have seen a few examples of work agreement contracts which heavily favor the agency. You don’t want a potential client to leave you because they’re uneasy about agreeing to your terms. On the flip side, you get clients who don’t read all of the fine print (how many people read all 40 pages of a mobile phone contract before they sign?), who may not comply with any unexpected inclusions – but will put up a fight if you try to enforce them.

My contract suggestions

1. Keep it short. For a freelance project, I would say no more than 1 page. People don’t want to sit and read 5 pages of garbage, they want to see what you’re locking them in to. You can do things like separating off documents like privacy policy to your website for people to read later.

2. Keep it easy to read. If you keep it simple, there’s no arguments later.

3. Number each point. That way you can reference clauses quickly when talking on the phone or over email.

4. Make sure you give a client adequate time to look over the document before signing. Maybe even allow them to get a third party to review it.

5. Play Nice (see above).

—

What inclusions do you have in your freelance contracts?

After doing a self-review of my recent web design work I noticed a few little things that I have been adding frequently into my designs without even really thinking about it.

1. Angled shadow
This is something I developed a few years ago to give an area some sense of depth while avoiding the cliche drop shadow tool. The angled shadow is actually something i custom make each time from the edge of an angled, blurred black box. It also gives the depth aspect in a much smaller space than the traditional shadow.

2. Rounded shadow
Another form of custom shadow I developed to give depth, but this one is usually to give the sense of a curved surface. Running this in combination with a reflection gradient on the actual layer help to make the layer feel like it has a slight bulge in the middle.

3. Arial
For about 5 years I refused to use Arial in body copy. I would go out of my way to change type to Tahoma or Verdana, but in the last 6 months or so it’s been all about Arial again. Don’t ask me why, but the kerning seems to be just right and the letter width keeps it easy to read blocks of text. I do go through text phases though, so I think i’m about due to change.

4. The pipe character
You see it around a lot more these days than you used to, but I love this guy |. Its a helpful divider in almost any context, and its part of almost every font. I use it a lot for menus, both in the main navigation and in the footer.

Well, there’s some of my signature moves. What are some of yours? Are there some things you do consistently without realizing it?