Web Design:Important Concepts

Staci Trekles Purdue University Calumet

Basic Rules to Live By

1. What you see on your screen when you view a page is NOT what everyone else sees

2. Web editing programs are NOT word processors - styles and formatting are controlled differently and are much simpler on the Web

3. Cool graphics and animations are nice, but make sure there is always a text alternative

Basic Rules to Live By

4. Warn your users - about popup windows, where links go, etc. so that there’s nothing unexpected

5. The faster your pages load, the happier your users are

6. Keep everything clear and understandable - keep all the navigation in the same place, looking the same, on all pages

7. Reduce unnecessary scrolling, especially left-to-right scrolling

8. Know your Audience!!

What do we mean by “audience”?

The target audience refers to the people for whom your website is primarily for

Different groups of people tend to respond to and expect different things

How a site appeals to a target audience is usually intertwined with the company/school/organization image

For example…

Who seems to be the target audience for a company like Apple (http://www.apple.com) based on their website?

What about Microsoft (http://www.microsoft.com)? Are they similar or different audiences?

Another example…

Look at the differences between Chrysler’s different divisions: http://www.chrysler.com http://www.dodge.com http://www.jeep.com

What are some of the standout features that help reveal who the target group is for each of the auto divisions?

One more set…

Consider these colleges and the way they present themselves: http://www.harvard.e

du/

http://www.ucla.edu http://www.capella.ed

u/ http://www.govst.edu

/

Or these K-12 school districts: http://www.evscschoo

ls.com/ http://www.ecps.org http://www.grand.k12

.ut.us/

http://www.crb2.k12.wy.us/

When designing for an audience

Consider these primary characteristics: How your audience likes to receive

information: Are they busy and in a hurry? Or do they like to stay a while and surf?

Their computer skills and the capabilities of their machines/Internet access

Their age, gender, socioeconomic status, location, native language

User Preferences

Younger users are more likely than older users to “surf”

Older users have specific purposes for their Net use, including learning activities, travel and product information, health, news

Older users tend to be more worried about privacy and security risks

Users with lower literacy levels have a harder time with navigating, using icons, and reading onscreen

User Preferences

Most users want an obvious means to navigate the site and get to the information they want

Many users don’t want to scroll down much and some do not even know you can scroll down

Splash screens can be a positive thing when used well and tastefully, but most users want the option to skip them

User Preferences

Most users will not wait too long for a page to load - 5-7 seconds is about the longest many users will wait

Users tend to scan through pages and focus on headlines and briefs first - make headlines obvious and break up text into short paragraphs to keep them interested

People learning online are more likely to spend time reading but they still want visual cues like graphics and white space to move the eye through the page

So what makes a page “good”?

There is no one “right” way to design a page, but most web designers agree on these: Usability! Clean designs without a lot of “clutter” Mix of text and multimedia elements (i.e., avoid

Flash-only sites) Fast-loading pages Minimal need to download plugins to view the site Compatibility with as many browsers as possible

So that means that a good web page is a boring one…

No, certainly not! There are lots of web pages out there that are simple yet very attractive and usable

Some of the most popular websites in the world are relatively simple in navigation and presentation: http://www.google.com http://www.youtube.com http://www.myspace.com

Good Designs Get the Message Across

No matter what the message, get it across quickly and with minimal frustration on the part of the user

Otherwise, they won’t want to view your page or buy into your message

Compare and contrast these two sites: http://www.purdue.edu http://www.mit.edu/

How about these?

http://inpics.net/ vs. http://www.lynda.com/

OR http://www.ebay.com vs. http://www.target.com

What are your favorites?

What are some of your favorite sites as far as design is concerned?

What about them makes them attractive to you? Are they easy to use? Fun and entertaining? A little of both?

A favorite place of mine for ideas and CSS stylesheets (similar to the premade styles you can get in Dreamweaver CS3 and up, but with far more choices and options): http://css-templates.org

Useful Resources

http://www.pantos.org/atw/basics.html

http://www.w3.org/

http://www.useit.com/alertbox/20030825.html

http://avtecmedia.com/web-site-design/fundamentals.htm

http://www.useit.com/alertbox/990530.html

Recommended Reading

Dept. of Health and Human Services Internet Usability Guidelines: http://www.usability.gov/pdfs/guidelines.html

Digital Divide between young and old Internet users article: http://www.firstmonday.org/issues/issue10_10/paul/index.html

Writing for a Web audience: http://www.smartisans.com/articles/web_writing.aspx

Stanford-Poynter Eyetracking Study: http://www.poynterextra.org/et/i.htm