For Non-ProfitsMichael Powers, Ph.D.November 2, 2009

Effective WebDesign

About Me

• Director of Web Services

• Run the Web Team

• We run www.iup.edu

What is design?

Solving problems

Example: Door HandlesHow do you know whether to push or pull?

• Labels

• Standardization

• Hardware design

Example: Door Handles

Graphic design is only part of designKey: Knowing the problem you’re trying to solve

What’s web design?

What’s your problem?

Selling Things?

Getting people in contact with others?

Helping people get information?

How can you give me money?

Graphic design is only part of the solution• Graphic Design

• Interaction Design

• Information Architecture

• Content Strategy

The successful solution is not always obvious

The most popular dating site

The most popular career site

The most popular apartment-hunting site

So where do we start?

Start withweb standards

• Third edition out last week

• The second book you have to read about web design

The User Experience Honeycomb

• Created by Peter Morville

• A great tool for looking at web design holistically

• How will you balance these?

useful

findable

accessible

valuable

desirable

usable

credible

useful

findable

accessible

valuable

desirable

usable

credible

Useful

• A useful website does something beneficial for its users and owners

• We can call this something a conversion:

• Purchase

• Subscribing to a mailing list

• Downloading a white paper

useful

useful

findable

accessible

valuable

desirable

usable

credible

UsefulConversion rate =

If you aren’t measuring your conversion rate, you need to start today.

useful

useful

findable

accessible

valuable

desirable

usable

credible

Successful OutcomesUnique Visitors

Findable

• People need to find your site

• People need to find what they need on your site

findable

useful

findable

accessible

valuable

desirable

usable

credible

Findable

• Finding your site:

• Search Engine Optimization

• Web standards help with this

findable

useful

findable

accessible

valuable

desirable

usable

credible

Findable

• Finding what they need on your site:

• Information Architecture

findable

useful

findable

accessible

valuable

desirable

usable

credible

Accessible

• Making sure that those with visual, hearing, and other impairments can use the site

• 8% of population: color blind

• 3.5%: visually impaired

• 3.3%: hearing problems

• Would you turn away every 10th customer?

accessible

useful

findable

accessible

valuable

desirable

usable

credible

Accessible

• Use web standards

• Test with an accessibility validator

• Read Joe Clark’s Designing Accessible Websites (text available for free)

• (Bonus: Google is effectively a blind and deaf user)

accessible

useful

findable

accessible

valuable

desirable

usable

credible

Desirable

• Great visual design not always needed

• But: users find attractive sites

• easier to use

• more credible

desirable

useful

findable

accessible

valuable

desirable

usable

credible

Desirable i i

desirable

Desirable

desirable

Desirable

• Most important web design tool:

HTML• Learn it. Without

Dreamweaver.

desirable

useful

findable

accessible

valuable

desirable

usable

credible

Desirable i i

desirable

Usable

• A usable website allows users to achieve goals with a minimum of frustration

• In a phrase:

Don’t make me think!

usable

useful

findable

accessible

valuable

desirable

usable

credible

Usable

• A usable website allows users to achieve goals with a minimum of frustration

• Usability in a phrase:

Don’t make me think!• When asked to carry out a

specific task on a website, users succeeded 66% of the time

usable

useful

findable

accessible

valuable

desirable

usable

credible

Usable

• The first book you should read about web design

usable

Usable

• Common problems:

• Breaking the back button

• Pop-up windows

• Design elements that look like advertisements

• Violating web-wide conventions

• Useless content

usable

useful

findable

accessible

valuable

desirable

usable

credible

Credible

• Do users trust your site? Credible sites:

• Distinguish ads & content

• Update frequently

• Avoid popup windows

• Make it easy to navigate

• Avoid broken links

• Avoid typographical errors

credible

useful

findable

accessible

valuable

desirable

usable

credible

Valuable: The Core• The website needs to create

value—ideally, more than it costs

• The honeycomb can help you make choices about what’s important and what’s not

valuable

useful

findable

accessible

valuable

desirable

usable

credible

There’s no one answer

• There’s only the right balance

How do you make great web design happen?•Best Practices

•Testing

•Process

One Possible Process1. Define Project and

Goals1.1.User Personas1.2.Content Inventory1.3.Competitive

Analysis1.4.Analytics Review

2. Define Site Structure2.1.Card Sorts2.2.Site Map

3. Visual Design3.1.Wireframe3.2.High-Fidelity

Mockups3.3.Usability Testing

4. Build Site5. Launch

Learning from Amazon

1998

Learning from Amazon

1999–2000

Learning from Amazon

2001

Learning from Amazon

2004–2005

Learning from Amazon

2009

Your Websites and Samples

• Clearfield Jefferson CMHC - Shawn Cupec www.thecgc.com

• Big Hearts Little Hands - Sharon Coldwell www.icymca.org.

• Alice Paul House - Lou Ann Williams, www.alicepaulhouse.org

• www.hspeoria.com

• www.projecthelpers.com

• www.rainbowrehab.com

• www.mmsm.com

• www.lindnercenterofhope.org

• www.arcmanor.org

• www.theopendoor.com

• www.sunpointhealth.com

• www.philmontguidance.com