FlySparks Fly
- Mad rush to "go live" in the 90s
- Much that is poorly designed
- Web is user interface
- Place to do business
- Correspond
- Collaborate
- Do research
- More
Problem
- Most web sites DON’T WORK
- Many are frustrating, confusing, and generally useless
- Must use tools, techniques, and tips to determine which sites work and why
- Look at the good, the bad, and the ugly web sites to gain insight for your site
Form vs. Function
- Beauty vs. Usability
- Good site strikes a balance
- Moderation is key
- Key question
- How pleasing does the site look (sound) as opposed to how serviceable is the site for the designed purpose?
User-centered Design
- Start with a purpose
- "We need a web site and we need it NOW!"
- Wrong purpose
- Critical to determine first the purpose of the site before you can proceed
- What is the main goal of your web site?
- Once you have the main focus, then determine the steps to the goal
If you build it…..
Why will people come to your web site?
Is one visit all you have? Will they come back? What will attract repeat visitors?
How will they find you site?
How will they find information on your site once they get there?
Unusable
Why do sites go bad?
- Confused focus
- Designer focuses on technical aspects of site
- Designer focuses on features
- "Geek" factor
- Designer is highly technical (programmer) and out of touch with end user needs
- Cutting Edge Mentality
- Developers go with trends, cutting edge technology
- End user no where near the cutting edge
- Design on the go
- Design failure due to lack of planning
- Common sense missing
- Management by non-design individuals
- Experienced designer in NOT making critical decisions
Five Design Elements--The 5 C’s
1. Communicate with Clarity
What is the point?
Does the web site communicate the purpose immediately on arrival?
Could you concisely state the idea or feeling or call to action that the site portrays? You can’t afford to be ambiguous!
Hurtles to Success
- Time
- Load speed and clarity of splash or home page is essential
- First impression is linked to load speed
- Easy to use
- Must be able to grasp "how things work"
- Interest
- Must have information presented clearly and in an interesting manner
Syntax
Use common syntax (navigation buttons, colors for links, etc.)
Examples of Symbols used on the web
- Back arrow
- Forward arrow
- Home
- Royal blue for hyperlink
2. Visual, Conceptual, Mechanical Consistency
Patterns—human brain constantly seeks
Web design takes advantage of brain need for organization and consistency (patterns)
- Proximity—group similar functions together
- Similarity—relate objects by characteristics like shape, style or color
Navigation
Similar tools
Consistent
Location
Labeling
Action states
Sounds
Style
Coordinate all elements
Interface standards
Line widths
Text style
Colors
Buttons
Photography—size, special effects, color depth
Frames
Borders
Sounds
File formats
3. Take Advantage of Contrast
Information overload
Right amount of visuals, space, sound
White space important
Intrigue not annoy user
Elements
Text
Color
Illustration techniques
Positive/negative space
4. Clutter--Strive to be Uncluttered
Only offer what achieves the purpose
Empower the curser
Layer information
Simplify navigation
Focus and filter
Use negative space—lets the eye rest
Empty space can be powerful tool for focus
5. Content--Storytelling
Need structure—beginning, middle, end
Show rather than tell the story
Sound—used effectively can really enhance site
Two-way communication possible
Need elements that change—recommended links, new information, downloads, etc.
Let’s Get Started--Users
Find out who your users are.
What is the reason they need your site?
What information do they want?
How old? What gender? Occupation? What is the profile?
Why are they looking for your site?
How to get started
Digital watch
Computer
Paper for notes
Web browser
Comfortable chair
Quiet workspace
Internet connection
Handout of Sites
Check out at least 10 of these sites
Begin your evaluation here
Look at the five C’s
Clarity
Consistency
Contrast
Clutter
Concept (logical sequence of information--story)
Now What? You determine…
What are the 10 things you hate the most about the Web?
What are the 5 things you love about the Web?
What are your favorite sites and why are they your favorites?
Web Design is Important
Good web sites do not happen by accident
Planning is essential
Lots of competition
Information overload
Check out the competition to determine…
How do you make your site memorable?