fundamentals of designing web experiences

Best Practices in Web Design

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:

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)

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

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/

20%Percentage of words read during an average site visit

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 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

Biz Goal

Opt-In

Biz Goal

Visual Choices for User

Opt-In

Biz Goal

Call to Action

Opt-In

Biz Goal

Call to Action

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

• 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

#2Users don’t read, they scan

#3Users are impatient online and demand instant gratification

#4Users follow their intuition (change is hard)

#5Users want to have control

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

#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

designing interactions / experiences: lecture #02

designing outstanding ar experiences

designing fresh experiences

designing experiences, not products

designing cross-channel experiences

designing mobile experiences

designing innovative experiences

designing kinder experiences

designing augmented reality experiences

designing interactions / experiences: lecture #04

designing flipped learning experiences

designing brand experiences

designing experiences for everyone

designing experiences nobody cares about

designing and delivering effective workplace experiences...

designing effective professional learning experiences

brian kalma on designing experiences

designing better experiences

designing multi-device experiences

responsive web designing fundamentals