Developing Web Tools with a Good User Interface

For the past few months I’ve been developing three different web-based tools.  All three are things that I started as tools for me, and it was after talking to other folks that I learned they might ultimately be useful for them, too. When my user base shifted from just me to a whole lot of other folks, I made a small list of rules to help me make my web tools user-friendly instead of Frank-friendly.   As one of those tools nears completion, I figured I’d share my lil’ list of rules for making good web tools.
Read More

The layers of Design

Ogres and onions have layers…

And so do websites. Depending on who you’re talking to and how they’re slicing it, you’ll get different names that essentially represent the same thing: content, design, and functionality. While the end user looks at a site and sees seamless pages linking to one another, the content authors, designers, and developers see the website as a collection of layers that interact with each other.  As content strategies become more complex, we see content being sliced into more distinct layers for content management systems while the design gets treated as a flat, layer-less component of the site.
Read More

Are New Pop-Ups the Old Flash Intros?

After a project was laid on me in the eleventh hour which had to be delivered in the twelfth, I found myself madly trying to educate myself on a foreign subject. The project and the subject doesn’t really matter. What mattered to me was collecting enough data for me to deliver it on time.  Google performed beautifully; but a lot of the sites failed. Why? Pop-ups.
Read More

What Goes Into a Website? A lot

One of the biggest problems that I’ve found working in the web industry is that outsiders don’t really get what a website is all about. It’s not just about HTML, a really good design, or content. I’m finding that too many young businesses, or immature older ones, think one web designer  is all it takes to put together a website.  So I’m going to attempt to describe in under 1,000 words what should go into a website. The key word here is should.

Content Inventory and Audit

Pop quiz: what’s the most important thing about your website? The answer is content. People go there for information, plain and simple. So, if you’re redesigning a website, the first step is to find out what content is there. Kristina Halvorson has some excellent chapters on content audit and inventory in her book Content Strategy and the Web. Get a spreadsheet together, map out what you’ve written, note the types of stuff on the page – and call it an audit.

Your audit also means something else: A review of Analytics and collecting User Feedback. You can get web analytics for a price, or for free. Something like Google Analytics is super easy to implement and it tells you a ton about what’s happening on your website. Analytics will tell you what pages users are going to, and how long they stay on the page. For websites with under 1,000 pages, it’s a useful exercise to tie your content inventory spreadsheet directly to your analytics. As for your User Feedback, try a free survey – like survey monkey.

Content Strategy

I’m  not going to rewrite an already well-written book on the subject. So I’m going to send you back to Kristina Halvorson’s book to learn content strategy. But here’s the deal: it’s about knowing what to do with your content. Know what you want to do with your website; don’t just throw up a few pages and pictures and call it it. Content Strategy means writing content, developing your Search Engine Optimization strategy (SEO) and even the brand.

Another big component of a content strategy is Usability and User Experience. Don’t confuse the two. Usability is a very scientific and objective piece; it measures things that Analytics captures. User Experience is something you design.

You shouldn’t build a website until you have a content strategy.

Information Architecture

After you know what you’re going to accomplish withthe content on your site, you need to figure out how to organize it. So think of information architecture as building your navigation. It’s about what types of content you have, how you associate the content, and how you’ll arrange it on the page. Information Architecture takes you to wireframes which are your rough outlines of the site.

Web Design

Weird how web design is the third item on your to-do list for your website. That’s because the guy who’s designing your website has to know what kinds of content he has, and where it goes on the page. The web design is to a website as what the interior decorator is to a house. The Web Design should support your content. The navigation style makes sense with your information architecture. The actual layout follows any wireframes.

Regarding the actual design…I’m a huge fan of Adobe Fireworks. Mainly because it was built to be a web design application – unlike PhotoShop which was designed for……well….shopping photos. This is a heated debate in the design community, so realistically, I’d let it slide if someone used PhotoShop. But I’d be happier if they designed using the application meant to do it.

Your web design should be driven by Usability practices, and you should also keep in mind that you’re designing the User Experience. So make your website easy and simple to navigate; quoting Steve Krug, “Don’t Make Me Think.” Remember that your User Experience is very subjective. You can’t really measure it with analytics, so be sure that your design gets reviewed by your customers. Not your mother, your secretary, or your vice president. Your customers.

Web Content Management

Your Content Management System (CMS) is the first application you should really buy for your website. It should be built after your web design is complete, and you even have the vast majority of it living in some sort of HTML. You’d think it’s a no-brainer, but you’re wrong; your content should be finished, too.

Over on another blog I run, I did a post of ways to manage a church website for cheap. If you’re looking for ideas, feel free to contact me. I’ve worked on both the free and premium sides of Web Content Management Systems.

Keep in mind that this is where HTML, CSS, and JavaScript don’t help. Your CMS might needs languages like Java, PHP, or .NET – just to name a few.

Databases, Servers, and Hosts

To be honest with you, this is not my area of expertise. I don’t build any of the three. Almost every CMS needs a database. Think of a Database as a  three-dimensional spreadsheet. Any website more than 10 pages large needs a database. Most all of your free CMS are written in PHP and run off of a MySQL Database. WordPress is especially good at installing itself and setting up its own database.

As for your servers  and hosts… Well, unless you plan on keeping the server in-house, try using a server/ hosting provider. Bluehost is my favorite. You need something called a name server which actually stores your URL. Then you need a host – which is where your website lives. Life is easier if the same company keeps track of both.

So What?

Websites aren’t just for your neighbor’s cousin anymore. To build a successful one it takes a lot of time and experts. Major corporations often have either departments for each component I’ve described, or they get vendors to help. When looking for a new website, find someone that can help with all of the above – not just a pretty design.

Seven Rules for Web Design My Mother Would Understand

Not too long ago I had a conversation with a graphic designer who was tasked with designing a website. Web Design is out of her area of immediate expertise, and she asked me if I had any pointers that I could share with her. After I sent her my email, I realized that I’ve said this before — and I’ll probably say it again. So, in case my mother, or anyone else, asks my thoughts on how to design a website,  here are seven rules that I’ll mouth off.

F is for F-shape

The eye moves in an F-shape on the web page. The hottest spot on the page is the upper left, the coldest spot is the middle right.  The last place the eye lands is the bottom right. This is why all navigations, regardless of whether the language reads right-to-left, are left-to-right horizontal, or left side top-to-bottom. Don’t break that rule. The trend today is centered horizontal navigations. When it’s a small website, it’s the best way to go. It leaves you with more room for work. Everything in the website design should support this physiological fact. The F-shape is how you show the user importance, take disgusting advantage of this principle. Design websites to follow the F-shape. http://www.useit.com/alertbox/reading_pattern.html

A Good Looking Header on Your Shoulders

Your header is at the top, and it tells the user where they are. The header is the first thing the eye sees. Get it right or they’ll leave.  Logo at the top, above navigation.  Center the logo, or put it in the upper left corner. If you have other universal elements, like a search box or an “Español” link, put those in the upper right, opposite of the left-side logo. Users have come to expect that, even Wikipedia got on board; follow the trends.

Don’t get cute with navigation.  Absolutely no Mystery meat navigation. Some people would say that’s a key qualifier for a web page that sucks: It should be obvious where your navigation is and where it takes you. Keep your headers simple and easy to read.

Rainbows are for Unicorns, not Web Pages.

One color for links, one color for paragraph text. Link color should not match the color of any other text on the page.  Ever. Ever. That’s how users get confused. It is okay for navigation to share color with something else on the page, so long as it’s obvious  that it’s navigation.

The old, “yellow on white background” is somewhat obvious, but how about blue on a black background? Ever try a orange with red? Don’t throw colors together. Built a palette first. Be very intentional with how you match colors. I rely heavily on kuler.adobe.com for helping me build color palettes, as this is a weakness of mine.

Be mindful of the cultural implications of color. Be careful with red — and avoid using it in plain text. Red is an attention grabber. Often with software, red means warning. If your website is themed red, that’s fine, but make sure you’ve accounted for how you’ll be able to grab attention if you need it. Color on the web page tells me if it was done by a pro or an amateur.

Isn’t that red annoying?

F is for Fitt’s Law

The bigger something is – a button or navigation, the easier it is to click and the faster they can click on it. Make buttons big. Woot.com is a perfect example. The bigger the navigation or the bigger your call-to-action button is, the faster someone is getting to where they want to be.

Call to Action Like You Call Your Mother

Consistent and frequent Calls-to-Action are good, but don’t ask someone to do 7 things on a page. On every page, every user should be told to do something with a Call-to-Action at least once: Order Now, Register, Learn More, Call us. If someone landed on a page, they should know what they’re supposed to do now that they’ve gotten there. That’s bounce-rate vs. exit rate. They bounce to another page, but they exit when they’re finished. If someone gets on a page, and doesn’t know why they’re there, they’ll leave.

Please, absolutely no more than three CTA’s per page —and they shouldn’t be the same size. The most important CTA should be the largest. The CTA should be like a link; different and distinct in color and shape from everything else. When the user gets to the web page, within 1/4 second she should know what to do, now that she’s there.

Read some techniques for Calls-to-Action

F isn’t For Fold

The fold is the point on the page where the user needs to scroll to see more content.  You’ll hear some folks say “don’t put anything important below the fold, users don’t see it”. That’s not true. So long as you indicate there’s stuff below the fold, you’re fine. Look at http://www.ilchiro.org/. I did some usability consulting for them. Ultimately, they broke my rule, so when you visit, you don’t catch there’s anything below the fold. My initial design lined up Current Publications and previous headlines. My intent was that the picture on the right get cut off – forcing the user to want to scroll down.
A vertical fold on a web page is fine. A horizontal fold isn’t.

Don’t Build a SteakHouse for a Vegetarian Chef

Don’t design something if you don’t know what you’re putting in it. Content before design. Content before Design. I swear that most website designs and redesigns go in the wrong order; design it, then write the content. That’s not a good idea. Architects don’t do it, web designers shouldn’t, either.  Know your content first. Design the site to support the content you already have. If it’s a new site, and they don’t have any of their own content, write it yourself.

Designers are from Mars, Clients are from Venus

Designers and clients come from two different worlds. Two very different worlds; they speak different languages, have different cultures, and can easily get into a fight with each other. Usually, the only thing they’ll have in common is that they both own businesses. With completely different languages,  experiences and areas of expertise, it’s hard to make sure you can both walk away from a project completely happy. So let’s talk about four questions you can ask each other to make sure that you get the job done well.

1 – Designer to Client: Why are you (re)designing your website?

For the client, a website should be a marketing strategy. Design doesn’t get you customers, content does. If you’ve got a new business, you need a presence on the web because everyone else has a web presence.  You don’t care if it looks fancy, you just want prospects  finding it and  turning into customers. Your goal is singular: Customers. You just want people to buy your product or service.

If it’s an existing business, you probably found out that customers aren’t getting what they want out of your site. Maybe they  want to pay you online, perhaps they want to get more information from you, maybe they won’t forward you to other clients because the design makes you look unprofessional.

Regardless, the designer needs to know what your definition of success will be.

2 – Client to Designer: What’s wrong with my website?

Toughen your skin and get ready. The answer is bound to hurt your own/mother/brother/sister/extended family member/neighborhood kid’s feelings.   Designers see the web very differently from the clients. We see browser compatibility, code, design, and user experience.  Unless you stop and  correct us, our number one goal will be to fix whatever we see is wrong.  A ‘good’ website is defined very differently when you go from a designer to a client. I spoke with a designer two days ago who said his goal for a website  redesign was valid XHTML 1.0 on every page. When I  asked his boss’ boss, the answer was “it looks better”.  Thank God I asked.

This is just another way of defining success. The designer and client should come to a mutual agreement on their answers.

3. Designer to Client: What do you know about websites and graphics?

The freelancer needs to know what he’s up against. Is this someone who will appreciate some CSS3 animations, or do they want their splash page to work on their Windows 98 machine? Asking this question sets the stage for how the freelancer needs to talk to the client.  Remember, the web designer speaks a different language – this helps him find out if you’re bilingual, fluent, or a tourist in his native tongue.  If it’s rude to knowingly speak to someone in a foreign language, it’s rude to use technical jargon on someone who doesn’t know it. It’s unintentional, but designers come off as jerks when they use geek-speak in front of grandma.

The other thing this question establishes is expertise. The client may say that she’s used PhotoShop a few times, or coded a Myspace page. This gives the designer an opportunity to talk about how the web isn’t just a snippet of HTML, and that PhotoShop takes years to master; it’s a subtle way for the designer to say, “You’ve visited my world, but I live here.”

This question also opens up a learning opportunity for the client. The designer has a chance to teach the client why splash pages are bad, or why Internet Explorer is evil.

4 – Client to Designer: What do you know about my business/ industry?

Basically, re-read what I wrote above and trade designer for client. There isn’t just one expert in this relationship. Make it clear that you know what’s best for your business.  You know your customers better than the designer, so make sure he designs for them, not for himself.

What else?

These are four great starter questions. I’ll throw in a few extras. Again, as a note to both parties – ask these questions before you get started, not halfway through.

Questions for the Client

  • Who is going to write the copy (text)? Don’t assume your designer is a writer. If he isn’t, you need to get someone to do it. By the way, the designer is assuming you’ll write it.
  • Where are the pictures coming from? No, you cannot go on Google and just search for an image. That’s illegal. You must have permission to use any and all images.
  • Once this is over, who is going to update your site? If you’re going to update the site, the designer needs to build it in such a way that you can update it. You have options, depending on your skills.

Questions for the Designer

  • Are you a full-timer or a part-timer? How many other clients do you have? It’s not a bad thing if you’re part time. If you have a full-time job already, don’t deceive your client into thinking you can do this in a week. Similarly with having other clients. Every client thinks your only focus is on them; they need to know that it isn’t.
  • What are your working hours? Full-time freelancers are work-from-home guys. Part-timers have an 8-hour gig. They all work goofy hours – often different from the client. The client needs to know the right and wrong times to call you.
  • What if I’m not happy with the design? The designer should design with a mutual agreement of his and the client’s definition of success.  What that in mind,  it’s possible that you start work and realize that you still can’t agree on that definition.  I recommend that your contract require payment at three times: up-front; after mockups; and then after the finished design. A designer worked to develop those mockups, regardless of whether the client is happy, he deserves payment for that work. However, if the design is unsatisfactory, the client shouldn’t get stuck with the whole website. I say you pay in installments: before starting, after mockups, after the launch.

Sometimes All You Need Is a Consultant

Not every web project needs a web designer or developer. Sometimes all you need a consultant. Whether it’s budget limitations or the fact that you already have the resources, sometimes you’re better served by a designer’s opinion than his work.  If you let a web designer act as a consultant, it can actually be great for both parties.  He gets the freedom of telling you exactly what he thinks, and you get the choice of listening or doing it your own way.

Not too long ago,  I started up a dialog with an old high school friend, Rob French. Rob is the PR manager for the Illinois Chiropractic Society. They recently bought a new Customer Relations Management system, which also manages content on their website. They decide to curb their costs by doing most of the web-work in-house.  The only problem is that they don’t have any web designers or developers. Rob desperately was trying to learn whatever he could, all while doing His full-time regular job. So our dialog started as a discussion on best practices for a style guide  which ultimately led to me signing on as a consultant for his web re-design.

Rob’s bachelor’s is in graphic design, so he’s got the the eye and PhotoShop skills for doing a mockup. What he lacked was web knowledge. He and another guy had the basic HTML skills, but having not worked in web, they didn’t know best practices for usability, user experience, or developing a style sheet.  This opens a great consulting relationship because Rob and his team weren’t really looking for someone to do the work, they just wanted to know how to do it.

Because of Rob’s desire to be taught, our consulting relationship has been a very natural progression – and it’s been great. Rob has the business knowledge and he knows what his leadership expects out of the web. What he didn’t know was how to arrange it all on a page. So Rob was sending mockups, and I shared my thoughts.  I explained basic usability practices and user experience issues, and I gave him resources that supported my arguments.

Our basic practices included avoiding multiple calls-to-action, replacing text with icons, the F-shaped way our eyes explore the page, and coloring text. In five rounds of mockups,  only once did I do any work in his PhotoShop file.  Rob accepted my advice, and did a great job of merging his business needs with my experience. While there were some final design  points that I disagreed on, as a consultant, there’s a forum in place that allows us to respect our disagreements.

After we went through the task of mockups, I offered to develop his pages for him. Rob turned me down and got to work on his own. Not too much later,  though, he was on the phone asking about best practices for HTML and CSS.

Sometimes, all you need is a consultant. Sometimes.

What Rob wanted to learn about HTML and CSS couldn’t be learned in a day, or even a week.   I’ve had multiple mentors over five years that have helped me learn that there’s much more to HTML than just a few p tags.  I couldn’t consult him on being a developer nearly as well as I can develop.

Rob didn’t have the time to learn what I already knew.  He had deadlines that I could help him meet, but he doesn’t want to be in a position where there’s a dependency on someone outside the business.  So we compromised; I code and explain every step along the way.  Now we’ve  shifted from consulting to delivering, and delivering to teaching. I’ll admit, it felt odd coding something I hadn’t personally designed. But it felt good knowing that Rob had taken so much of my advice along the way; I could respect the way he wanted this developed and I was happy to develop it.

Rob’s primary business requirement was self-reliance. If that’s a valid need, any freelancer should respect the client enough to help them meet that requirement first.

If meeting the requirement of self-reliance also  means letting the business maintain creative control, then so be it.

It’s normal that a client will insist upon creative control.  It’s their business, their customers, and their site. They know their customers better than we do.  Rob and I differed on some finer points of the layout, but it was his layout, and it was based on what he knew about the business that I didn’t. Freelancer and client really butt heads when the client is grossly unqualified to exert creative control and too unwilling to compromise. Those are called  clients from hell.  In such cases, allowing the client too much creative control hurts the project, along with the freelancer’s pride and portfolio.

I’ll admit Rob was a special case; he already had graphic design experience and a willingness to learn.  Initiating the relationship as a consultant gave Rob an opportunity to be further educated. It also proved that I was competent in my field and deserved a creative voice in his project.  The result was a natural progression into me being the developer when we saw the drift from his area of expertise to mine.

Most of the time, a freelancer doesn’t get to work with someone like Rob. But if we get the chance to have a client who just wants to be self-reliant, consulting is the place to start.