fundamentals of designing web experiences

Best Practices in Web Design

Our Flight Plan

Our Flight Plan

6:00 - 6:15 Review + Questions

Our Flight Plan

6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch

Our Flight Plan

6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch 7:00 - 7:05 BREAK7:05 - 7:20 How Search Works7:20 - 7:45 Insider Secrets + Research

Our Flight Plan

6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch 7:00 - 7:05 BREAK7:05 - 7:20 How Search Works7:20 - 7:45 Insider Secrets + Research7:45 - 8:00 Q&A

What Makes a Great Site?

User’s Needs


VisualsUser’s Needs


Typography



Usability Typography


Think Experiences.


Flashback

Persona

Personawho are you designing for?

Our Mantra:

Our Mantra:

We

Our Mantra:

We Are

Our Mantra:

We Are Not

Our Mantra:

We Are Not The

Our Mantra:

We Are Not The Target

Our Mantra:

We Are Not The Target Market

http://aimeegd.files.wordpress.com/2009/06/personna-mapping.jpg



Empathy...(and how to get it)




PersonaExample

Research

1. What does this person do for a living?

PersonaExample

Research

1. What does this person do for a living?2. What type of company do they work for?

PersonaExample

Research

1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status

PersonaExample

Research

1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status4. How do they look?

PersonaExample

Research

1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status4. How do they look?5. How do they recreate?

PersonaExample

Research

1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status4. How do they look?5. How do they recreate?6. What does their daily calendar look like?

PersonaExample

Research

1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status4. How do they look?5. How do they recreate?6. What does their daily calendar look like?7. What keeps them up at night?

PersonaExample

Research

How People Use the Web

How People Read

How People Read Online

Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/

http://usableworld.com.au/2009/03/16/you-look-where-they-look/


How People Read Online

Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/

F



20%Percentage of words read during an average site visit

Source: http://www.useit.com/alertbox/percent-text-read.html



Source: http://www.useit.com/alertbox/percent-text-read.html



2Number of clicks to get to any part of your site (ideally)

SitemapSketching Out Your Content


Home


Home Services


Home Services Projects


Home Services Projects About


Home Services Projects About Contact


Home Services Projects AboutSection 1

Contact



ContactExamples



ContactHistoryExamples



ContactHistoryBios

Examples



ContactHistoryBios

Examples

FAQʼs



ContactHistoryBios

ExamplesQuotes

FAQʼs


Home Services Projects AboutSection 1Section 2

ContactHistoryBios

ExamplesQuotes

FAQʼs



ContactHistoryBios

Section 3

ExamplesQuotes

FAQʼs



ContactHistoryBios

1. Strive for only 5 major sections in your site2. Clean, intuitive titles (based on keyword research)

Section 3

ExamplesQuotes

FAQʼs

Wireframe

Hand-Sketch Powerpoint

What We Learned

1. Know and empathize with your user (persona)

What We Learned

1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs. Yahoo)

What We Learned

1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs. Yahoo)3. People don’t read - they scan (F or Z Pattern)

What We Learned

1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs. Yahoo)3. People don’t read - they scan (F or Z Pattern)4. More clicks = less engagement (2 Click Rule)

What We Learned

1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs. Yahoo)3. People don’t read - they scan (F or Z Pattern)4. More clicks = less engagement (2 Click Rule)5. Sitemap + Wireframe = Saved Time and $

What We Learned

Homepages

Logo main navigation

Main Image or Slideshow

Call to Action

Updates

footer

Before

Afterphone

After

Biz Goal

phone

After

Biz Goal

phone

Opt-In

After

Biz Goal

Visual Choices for User

phone

Opt-In

After

Biz Goal

Call to Action


phone

Opt-In

After

Biz Goal

Call to Action


phone

Opt-In

Full Sitemap + Contact Info

Pop Quiz: what does the persona look like?

Name: Bill JohnsonAge: 52Home: Pasadena, CAMarried with 3 kidsOldest of 4 siblings

Occupation: CEO of mid-size company.Company: Apartment Renovations Inc.Clients: Landlords, Real estate investorsCulture: Laid back, friendly, professional, qualityPassion: Fly-fishing in the Rockies

Persona Design



Persona Design

• Large Fonts



Persona Design

• Large Fonts• Email is preferred method of communication



Persona Design

• Large Fonts• Email is preferred method of communication• Looking to escape via images



Persona Design

• Large Fonts• Email is preferred method of communication• Looking to escape via images• Connect from afar via fishing reports



Persona Design

• Large Fonts• Email is preferred method of communication• Looking to escape via images• Connect from afar via fishing reports• Info for planning a trip



Persona Design

• Large Fonts• Email is preferred method of communication• Looking to escape via images• Connect from afar via fishing reports• Info for planning a trip• Know who he fishes with

Innerpages

Logo main navigation

Main TextSub Heading Here

This is just some random text that goes here.• Bullet 1• Bullet 2

And here’s a link over to some more info.

footer

Image Sidebar

home / sub-page / current page

search

Remember ThisIt’s All About: Keywords

PrinciplesOverview of a Search Results Page

Strategy


Keyword Phrase

Strategy


Keyword Phrase

Local Results

Strategy


Keyword Phrase

Local Results

PageTitle

Strategy


Keyword Phrase

Local Results

PageTitle

PageDescription

Strategy

PrinciplesPaid Search

Strategy

StrategyKeywordsHow We Find Everything Online


1. Use Your Persona To Guide You


1. Use Your Persona To Guide You2. Brainstorm keyword phrases around pain points


1. Use Your Persona To Guide You2. Brainstorm keyword phrases around pain points3. Use Google’s AdWords Tool for ideas


1. Use Your Persona To Guide You2. Brainstorm keyword phrases around pain points3. Use Google’s AdWords Tool for ideas4. Identify keywords to weave into all your content

insider secrets

#1Users appreciate quality and credibility

users

#2Users don’t read, they scan

users

#3Users are impatient online and demand instant gratification

users

#4Users follow their intuition (change is hard)

users

#5Users want to have control

users

Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university

Strategy

Dr. BJ Fogg - Stanford UniversityResearch focuses on why people trust a website

http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university



#1Design your site so it looks professional

Strategy




#2Easily verify accuracy of info on your site

Strategy




#3Show that you’re real

Strategy




#4Show how you’re an expert

Strategy




#5Put a human face and tone to the organization

Strategy




#6Make it easy to contact you

Strategy




#7Make it easy to use and useful

Strategy




#8Update your site’s content often

Strategy




#9Easy on the promotional content

Strategy




#10Watch teh tipos and dead links

Strategy



fundamentals of designing web experiences

Technology