Open Lab is OPEN:-)!!!!


I know everyone has probably already found out but just in case… The Open Lab in the Health Science Center is OPEN!!!

Hours of Operation: 

Monday 12-10

Tuesday-Wednesday 12-6

Thursday 12-10

Not Open on Friday, Saturday, or Sunday.

Don’t have the software? Use the lab. If you are enrolled in Art 250 the lab is there for you to use. Consider checking it out next time you are on campus.

Link to “Above the Fold” web site

There is a text book support site that you will probably want to check out located @:

http://abovethefoldbook.com/

Especially check out the blog where they have some great articles about web design and the Above the Fold web site design competition winners!

Check Out this Video!

Special thanks to your classmate Pablo Serrano for contributing to our site!
Keep sharing 250ers:-)!

Jakob Nielsen’s Mobile Usability Update

Jakob Nielsen‘s Alertbox, September 26, 2011       

Mobile Usability Update

Summary:
The user experience of mobile websites and apps has improved since our last research, but we still have far to go. A dedicated mobile site is a must, and apps get even higher usability scores.

There’s no need to declare this “the year of mobile.” If anything, last year was the year of mobile in terms of the growth in both mobile usage and the availability of mobile sites and apps. Now, however, it’s time to redesign your mobile site, because your existing version is probably far below users’ growing expectations for user experience quality.

The mainstream Web’s history repeats itself here. In the beginning, the Web was experimental — accordingly, it was acceptable to have a somewhat shaky, experimental website. Many sites were crippled by misguided design advice, which was common in the early years, and most companies didn’t know any better (because they didn’t do usability studies). Now, people simply expect websites to work.

Same with mobile. Last year, it might have been cool simply to have an app. Now, that app better be good. Requirements have gone up. Luckily, our new research shows that mobile sites and apps have been improving their usability, even though it’s still far below that of regular websites accessed from a desktop computer.

User Research

We conducted 8 rounds of user testing: 5 in the United States, and one round each in Australia, Hong Kong, and the U.K.The first 2 rounds of testing were conducted in 2009 and were discussed in an earlier article. In that initial research, we tested all three categories of mobile phones:

  • Feature phones: primitive handsets with tiny screens and very limited keypads that are suited mainly for dialing phone numbers.
  • Smartphones: phones with midsized screens and full A–Z keypads.
  • Touch phones: devices with touch-sensitive screens that cover almost the entire front of the phone.

For our 6 new studies, we dropped the feature phones for three reasons:

  • Our first research found that feature phone usability is so miserable when accessing the Web that we recommend that most companies don’t bother supporting feature phones.
  • Empirically, websites see very little traffic from feature phones, partly because people rarely go on the Web when their experience is so bad, and partly because the higher classes of phones have seen a dramatic uplift in market share since our earlier research.
  • Pragmatically, almost all participants in our mobile user experience courses tell us that theydon’t design for feature phones. Thus, we don’t need to collect updated video clips or other seminar materials about feature phones.

In the first 2 test rounds, touch phones were mainly iPhones, with a smattering of competing, though primitive, devices. In the recent testing, we still had many iPhone users but also many Android users as well as some Windows Phone users.All together, we tested 105 users — 53 males and 52 females. Of those test participants, 12% were 50 years or older, while the remaining 88% were evenly distributed across the ages of 20–49 years. Occupations ran the gamut, from fashion consultant to patent lawyer to television producer.

Tasks ranged from directed to exploratory:

  • Highly specific tasks. For example, “You are in an electronics store and consider buying a Canon PowerShot SD1100IS as a present. The camera costs $220.25 in the store. Check adorama.com to see if you can get a better price online.”
  • Directed, but less specific. For example, “Find a moisturizer with SPF 30 or above that is suitable for your skin.” (While using the Walgreens app.)
  • Open-ended, but restricted to a predetermined site or app. For example, “See if you can find any interesting pictures related to today’s news.” (While using the China Daily app.)
  • Web-wide tasks that let users go anywhere they wanted. For example, “Find out which is the tallest building in the world.” (While giving users no indication of which site might have the answer.)

In all, we observed participants doing 390 different tasks: 194 application-specific tasks, 154 website-specific tasks, and 42 Web-wide tasks.In addition to user testing, we also conducted 2 rounds of diary studies to discover how people use mobile devices in their everyday life. One diary study was in the U.S.; the other included participants from Australia, The Netherlands, Romania, Singapore, the U.K., and the U.S. In total,27 people participated in the diary studies, providing us data about 172 person-days of mobile activities. Again, participants had a wide range of jobs, from bookkeeper to football coach.

Mobile User Experience Improving Slowly

In the 1st edition of our report, mobile users’ average success rate was 59%.In the new research, the average success rate was 62%. Better, but only 3 percentage points better in 2 years. Although this improvement rate might seem disappointingly slow, it’s about the same as the pace we recorded for desktop Web use in 263 studies over the last 12 years.

The current success rate for mobile Web use is about what we measured for desktop Web use in1999. The current desktop success rate is 84%; unless mobile usability starts improving more rapidly, we’ll have to wait until 2026 to reach that level.

The 62% success rate was computed across all tasks that we could reasonably categorize as having been done correctly or incorrectly.

Measured usability varied substantially, depending on whether people used a mobile site or a full website. (By way of definition, a “mobile” site is one designed specifically for use on mobile devices, whereas a “full” site is a regular website designed mainly for use on a full-screen desktop computer.)

  • Mobile site success rate: 64%
  • Full site success rate: 58%

This leads to the first, and maybe most important, guideline for improving the mobile user experience: design a separate mobile site. Don’t expect users to access the same site from both desktop and mobile browsers. (The exception would be people using large-sized tablets like the iPad. Our separate studies of iPad users show that they do fairly well browsing full sites.)A second key guideline is to have clear, explicit links from the full site to the mobile site and from the mobile site to the full site. Unfortunately, search engines often fail their mobile users and erroneously point them to the full sites, even for companies that offer mobile sites with much better user experience. As long as users don’t need to navigate, they might actually be okay when they’re dumped into a site that works poorly on their phone. Search engines frequently offer deep links to pages directly related to the user’s query. But if users want to know more than what that one page offers, they’ll suffer if they’re stuck on the full site. That’s when the link to the mobile site will come in handy. (And why the search engines should have pointed to the mobile site in the first place.)

Apps Beat Sites

While a mobile site is good, a mobile app is even better. We measured a success rate of 76% when people used mobile apps, which is much higher than the 64% recorded for mobile-specific websites.Of course, it’s more expensive to build an app than a mobile site, because you have to code different versions for each platform. Thus, we can really recommend building mobile applications only if you’re either rich or offer a service that’s particularly suited to mobile use.

Most Usability Guidelines Confirmed

The 1st edition of our mobile usability report contained 85 design guidelines. Of these, 83 were confirmed by the recent research, 1 was somewhat revised, and 1 was deleted. As I’ve said many times before, usability guidelines remain very stable over the years because they mainly depend on human behavior. (The one guideline that was revised related to the use of Flash, and was thus more technology-dependent than most usability guidelines.)The main news? From the 1st to the 2nd edition of our mobile usability report, the number of design guidelines increased from 85 to 210. This is partly because we now know much more about mobile usability and partly because requirements have increased. Sites and apps have definitely gotten better, raising the bar for acceptable user experience, and thus increasing the number of guidelines that designers should follow.

In particular, Android apps have gotten much better, probably because the platform’s growing market share has caused companies to invest more in the quality of their Android apps.

Also, users have become more aware of horizontal swiping than they were in our previous research. The horizontal swipe gesture is often used to “flip” through deck-of-cards or carousel features. Swiping is still less discoverable than most other ways of manipulating mobile content, so we recommend including a visible cue when people can swipe, or they might never do so and thus miss most of your offerings. Also, you should avoid swipe ambiguity: don’t employ the same swipe gesture to mean different things on different areas of the same screen. This recommendation is the same for mobile phones and tablet usability, showing the similarity between these two gesture-based platforms.

It’s interesting to consider the difference between mouse-driven desktop design and gesture-driven touchscreen design here. Desktop websites have a strong guideline to avoid horizontal scrolling. But for touch-screens, horizontal swipes are often fine. Indeed, mobile-device users typicallyexpect to horizontally swipe their way through a carousel. Of course, this is just one more example of the meta-guideline that sufficiently different platforms require different user interface designs. This, again, is the underlying reason that mobile sites perform better than full sites when used on a mobile device.

Mobile Design = Small and Targeted

To have a successful mobile site or app, the obvious guideline is to design for the small screen. Sadly, some don’t, and we still see users struggle to hit tiny areas that are much smaller than their fingers. The fat-finger syndrome will be with us for years to come.The second point is more conceptual — and harder for some people to accept: When you have a smaller screen, you must limit the number of features to those that matter the most for the mobile use case.

Learn More

293-page report on Usability of Mobile Websites and Applications with 210 design guidelines and 479 screenshots is available for download.Full-day training courses at the annual Usability Week conference:

 


Other Alertbox columns (complete list)
Sign up for newsletter that will notify you of new Alertboxes


Ben Hunt, When to Use Graphics in Web Design

When to Use Graphics in Web Design

 by 
In this blog post, I urge web designers to view graphics as just one of the tools at their disposal.Content, not graphics, should be the main concern of any web designer.

You should be able to justify the inclusion of each and every image used on a web page, by asking, “Is it more effective and efficient to use this image than to leave it out or use text instead?”.

I look at the relative strengths of text & graphics, and examine 5 key areas where graphics can be essential for communicating effectively.

Like what?! Grandpa, web design is graphics – dur!”

I used to think the same thing. And I love cool graphics as much as the next guy. I get really excited about visual effects, from huge art splashes down to neat button styles.

I also know that neat graphical imagery has little to do with effective web design. I’ve seen great sites that really work – as in they lead me through to what I want, keep my attention, create an enjoyable conversation, and make me want to share the word – which use hardly any graphics at all.

Web Design isn’t Graphics

Actually, web design is communication: creating something that communicates information, or an experience. That’s all design is – an exercise in communication.

Visual design is crafting communication using visual means. Web design is crafting communication through a web user agent (which, by the way, isn’t always a graphical browser).

It’s possible to have a great, really effective web site that doesn’t use any graphics. And some sites depend totally on imagery to achieve their goals.

Graphics and photos are just one of the tools you have in your design toolkit, not the only one.

Actually, I’d argue that they shouldn’t be the main one either. If you’re a rounded web designer, fully committed to making every site you make the greatest success it can be, your #1 tool is words.

Words and Graphics are Both Valid Communication Tools

(So are Photos, Colour, Typography, Video, Sound, Timing, Texture, Space, Surprise, Beauty, and Ugliness.)

Let’s be totally clear: there’s nothing wrong with graphics. What I’m saying is, to be the best designer you can be, you have to develop the sharp discipline to discern the best tool for any job.

You can set mood with words or graphics.

You can attract attention with words or graphics.

You can describe a product or service with words or graphics.

You can indicate an option or action with words or graphics.

You can convey an idea or concept with words or graphics.

You can show who you are and what you do with words or graphics.

When do you use words, and when do you use graphics? Let’s take a look!

Rule: Use text… unless…

Sometimes words are best; sometimes graphics are best. Generally, words are most efficient, and you should always seek to use text in place of graphics, unless you have a good reason to be sure that a graphic will be more effective.

“Always use text, unless graphics are more effective.”

Text has several innate strengths, which can give it natural advantages over graphics.

Text is:

  • Smaller
  • Readable by Search Engines, Text-to-Speech Readers, and all other user agents
  • Quicker to make
  • Easier to Change
  • Easier to Abstract (translate, store in a database etc.)
  • Easier to create using code
  • Often clearer and more meaningful
  • Less susceptible to personal taste
  • Easier to expand and reformat, for the benefit of people with vision difficulties

Example

Close-up of Matt Lawrence's text logo 

The logo on Matt Lawrence’s disability advocacy and web / project management site is pure text; very lightweight, yet impacting.

These strengths make text a noble and worthy ally. But it’s not always the best. Let’s consider some times when you may turn to graphics.

So, Mister-Smarty-Pants-Living-in-a-Non-Graphical-Telnet-Medieval-DOS-Prompt-World-of-Misery, whendo you use graphics?

1. Content Imagery!

Obviously, sometimes your content is the image.

If you’re a photographer and you’re showing your work, obviously your content will be photographic images.

If your content is a news story, showing a picture of the thing your story is about helps reinforce the page’s getability.

Examples

Chris Gloag's photo portfolio 

The content and the message on Chris Gloag’s photography folio is visual, so here the focus should be entirely on the content imagery.

BBC News Story on Barack Obama 

This BBC News item on Barack Obama’s environmental goalsbenefits from featuring a recent picture of the man himself.

Seeing Barack in an outdoor setting helps reinforce the “aboutness” of the page, and helps you quickly get the context. Supporting content imagery like this can also help to make dry text appear more appealing.

2. Extra Visual Impact

Today’s commonly-supported CSS styles give relatively little control over the styling of text. It’s pretty much limited to: size (not exact), colour, background, and position. Sometimes your design needs to draw the eye strongly towards certain content. Graphics often give the extra attraction (but remember attractiveness is relative – if everything on your page tries to draw the eye, the eye gets lost and the page becomes less effective).

Say you have a huge page with lots of stuff on it, and you want to draw attention to an offer, you could use white text on a red background (just using CSS), or you could put white text on a red star (a graphic).

Sale! 50% off! sale flash graphic

The star adds dynamism that the text alone can’t (through adding radial diagonal lines and breaking the text out of the horizontal), which may add the attraction your design (your communication) needs.

The hard information communicated is the same with both techniques: There’s a sale, and prices are cut 50%. The only difference is in visual impact.

Counting the Cost of Graphics

Bear in mind that the star graphic uses 3586 bytes (and an additional HTTP request to the server), whereas the text uses only 138 bytes, most of which is CSS that could be abstracted to a stylesheet, and doesn’t have the extra resource hit.

While file size and speed are not unimportant, the biggest cost to most businesses is time. If my client wanted to change the discount from 50% to 75%, it would take me about 5 minutes: to open up the Photoshop file, edit the text, cut out the new star graphic (making sure it’s the same size as the original), choose my optimisation settings, and upload.

To make the same change in text, on most of our sites, would takemaybe 60 seconds: navigate to the client’s CMS, click the log-in button, navigate to the page, select the include, edit, save, publish.

It may not seem a big difference, but with a large project, these additional 5 minutes can really add up.

When you use graphics for this reason, ask whether the payoff of the additional impact is worth the extra cost of the graphics.

3. Achieve Exact Visual Requirements

If your web site represents a recognised brand (or one that wants to become recognised), putting a graphical logo in the dominant position on the page in exactly the right font, colour, style, and proportions, states clearly that, “This is a Xerox/Nike/Apple… web site.”.

You could try doing that in text, but you may not succeed in communicating the essential value (that it’s an official brand site).

If you need text to appear in exactly the right way – just so – sometimes you have to show it graphically. While CSS gives you a lot of control over how text is displayed in browsers, it’s not always possible to specify the size extactly, and you’re always dependent on the fonts installed on each visitor’s computer. So if it’s really important

The key is to be brutally honest about when it’s really important, versus just really nice for your text to appear just-so.

Examples

Freelenz logo 

The logo from the Freelenz site could not be rendered in text retaining any of this character.

4. Communicate Essentially Visual Properties

If you need to describe purely visual characteristics: whether form, beauty, colour etc., a photo or graphic can convey the information instantly.

While text can be great for creating mood (ever read a good book?), if you want to create a particular mood or style very quickly, and you can’t depend on your visitor having time to read a body of text, graphics are the way to go.

Examples

Close-up of screenshot of Expression Engine's software 

A screenshot on Expression Engine’s home page shows the software product’s user interface.

Showing the actual form of this real product shows that itexists, and conveys somekey properties (looks appealing & straightforward to use).

Crop of Los Angeles County Museum of Art home page 

The LA County Museum of Art’s home page has a splash area that cycles through their curent big exhibitions.

When you’re communicating the fact that famous or intriguing art is on show – or anything which is visual in nature – the obvious means is visual.

5. Language-independence

Another great thing about graphics is that, because they’re not text, they’re potentially more widely understandable. You don’t always need to speak the language the site’s written in, in order to get the meaning of a graphic.

This can apply to both hard and soft information.

Example of Hard Information

Close-up of icons on Google Docs 

This close-up of the Google Docs UI shows a number of icons that are instantly recognisable to most people, whatever language you speak.

Because they’re iconic (recognisable), it’s possible for icons to communicate meaning on their own, without the text that accompanies these.

These icons denote specific meanings through a more universal visual language, rather than spoken or written language.

The test should be: Is the icon recognisable enough to make it more efficient than a text label? Or, is language-independence crucial?

Example of Universal Soft Information

Close-up showing rich visuals from Satsu portfolio 

This snippet comes fromSatsu’s print and web design portfolio site.

The site has a rich grunge style that communicates the designer’s personality and approach in a way that’s univerally instantly understandable.

So here, the communication of style and mood are central to the site’s message.

6. Building Trust through Visual Proof of Existence

We’re all pretty cynical, especially on the web. When someone tells us something, we tend to run mental tests to see how credible they are, and whether we can believe their story is true.

However, we tend to trust the evidence of our own eyes more. So when what you want to demonstrate is a visible product – whether it’s a boat, a t-shirt, or a software widget – showing it existing in the wild helps build confidence in your visitors’ minds.

Example of Building Trust through Visuals

Close-up showing rich visuals from Satsu portfolio 

These screenshots, fromissuu.com’s Smart Look, help you believe that the software is a real product, because you can see it in a browser with your own eyes.

Shot of Ministry Give - donation management software 

MinistryGive, from ChurchMedia, is a solution to help organisations manage charitable donations.

Showing the product in action on the web, on a media kiosk, and on an iPhone not only communicates the fact that this one solution can be accessed in several ways, but also reinforces in the visitor’s mind that MinistryGive is a real live application that they can believe in.

Close-up of Stonetire's home page 

Stonetire’s site shows a pile of tyres, which leaves you in no doubt what their business is about!

This image communicates quite a few things, in fact: We do tyres; we do big, chunky, rugged ones; we’re a low-key approachable business (as the tyres aren’t stacked and labelled on gleaming metal racks).

7. Summarising Complex Data

Sometimes, it’s easier to get the big picture visually than to take on all the raw data.

Example of Making Complex Data Easier to consume

Shot of graph from Google Analytics 

This graph from Google Analytics summarises the visits to key pages on a site over time.

It’s much more efficient to get the big picture, which can convey quite a lot of information in summary form (if less exact) than the equivalent table of data.

(Edward Tufte has done some interesting work looking at the limits of this in his pioneering of sparklines.)

Conclusions

Graphics are essential tools, but they can be such powerful visual attractors that they must be used wisely.

Learn to use graphics and imagery consciously, when you’re actually trying to communicate, not decorate.

Try This Test

Try going through one of your own page designs, and for each image used ask:

  • Which of the 7 reasons for using graphics applies to this image?
  • Does the image actually communicate something (or is it just decoration)?
  • Is the visual impact/attractiveness of the graphic appropriate to the importance of its meaning?
  • Could a text alternative be just as effective?
  • What would happen if I removed this?

I hope this viewpoint has been useful to you, and encouraged you to think in a new way about the way you use graphics in your own sites.

Next

I’m motivated to look round the web for examples of really effective web sites that use few (or no!) graphics, and yet communicate powerful messages.

Watch this space… If you know of a site that achieves this, please do let me know. Cheers!

Vincent Flanders’ Web Design Checklist 1 / 165 Mortal Sins That Will Send Your Site to Web Design Hell.

Checklist from Web pages that Suck to see if your page is in trouble. Even one check means that you are in deep trouble and are not likely to be able to pull yourself out of the quick-sand (sorry).

First Impression / Big Picture

 We’ve designed our site to meet our organization’s needs (more sales/contributions) rather than meeting the needs of our visitors. (Video)
 Our site tries to tell you how wonderful we are as a company, but not how we’re going to solve your problems.
 It takes longer than four seconds for the man from Mars to understand what our site is about.
 The man from Mars cannot quickly find the focal point of the home page.
 The man from Mars cannot quickly find the focal point of the current page.Where in the heck is the focal point at this site? (AmazingThings.org)
 Our site doesn’t make us look like credible professionals.People will not do business with you if you look like you’re not professional. Remember: Professional Website = Trust.
 Our site doesn’t make visitors feel they can trust us.
 Our home page — or any page — takes more than four seconds to load.
This web design entry is new.
 The home page is too long.
This web design entry is new.
 The home page asks you to refresh your page to see new content. (Example)
 Quickly scanning the page doesn’t tell our visitors much about its purpose.
 We don ‘t put design elements where our visitors expect them.
 We have not eliminated unnecessary design items.
 We don’t know which design items are not necessary.
 Our site breaks when visited with the Javascript turned off. (People turn Javascript off for security reasons.)
This web design entry has been revised
 Our site breaks because of back-end coding errors. (Video).Here’s a screenshot of another example of coding errors.

This web design entry has been revised
 We say “Welcome to…” on our home page. The only exception to this is if you have a really cool graphic—something like the graphic below—then it’s OK to use a “Welcome to” statement.This is the only cool Welcome To message allowed

This web design entry has been revised
 Our site is Flash-based (and this is what Flash sites look like to people without Flash or who are looking at it on an iPhone or iPad.) Flash on a website is dead, dead, dead. Steve Jobs twisted the knife into its festering corpse.
 Our site’s navigation is Flash-based. (Here’s the actual site)
 Our site uses a splash page (unless it’s a liquor, porn, gambling, adult, tobacco, or a multi-lingual / multinational site). (Video)
This web design entry has been revised
 Our site makes visitors register before they can enter. No, this isn’t a site from 1999. It’s a site from July 2011. Here’s a screenshot in case they change things.
This web design entry has been revised
 Our site uses two or more Splash Pages. For example, here’sSplash Page #1, here’s Splash Page #2 and here at last is the home page.
This web design entry has been revised
 Our site’s TITLE tag is something like “New Document”, “Index” and not the name of your company or other search-engine friendly terms. It could also be something meaningless like “Home.
 Our site has a sound file automatically play in the background when a web page loads (Video), but we’re not a record label or musician.
 I don’t know if our site looks the same in the major browsers.
This web design entry is new.
 Our home page is asymmetrical and is not set up using a grid system. If the home page isn’t set up using a grid, odds are the rest of the site isn’t either.
 Our site doesn’t look the same in different browsers.
This web design entry is new.
 Site doesn’t work/work well on an iPad (or an iPhone). Here’s what the State of Utah says their site looks like on an iPad and here’s what I get on my iPad. Notice the cut-off text at the bottom. It gets worse. When I clicked “in Utah,” this is my screen. Support for the iPad is important because it accounts for an increasing % of PC sales—11% last quarter.
This web design entry is new.
 Our site requires you to use a specific browser. In this example, it required Internet Explorer. It didn’t work in Google Chrome, but it also didn’t work in IE8. Gee. 
This web design entry is new.
 Poorly implemented frames. It’s a rare site where frames don’t suck; however, it’s pretty easy to make a bad thing worse. This site provides a wonderful example of something horrible.
 The important content does not fit in the first screen. (This is somewhat controversial.)
This web design entry has been revised
 Our pages have too much / too little white space. Another example of too much white space.
 Our site uses pop-up windows.
This web design entry has been revised
 Our site forces visitors to install weird plugins.
 Don't tell people what browser to download Our site has “Download latest browser” text or buttons.
 OMG FrontPageOur site prominently displays what hardware and software was used to create the site.
 Our site’s design was “borrowed” from another site. And here is a video on the topic.
 Our site doesn’t provide clear instructions on how to perform tasks like ordering, filling out forms, etc.
This web design entry has been revised
 Our site disables a visitors right-click mouse button because we’re crazy enough to think we have content worth stealing and that our visitors are too stupid to figure out how to bypass our code.Here’s a site that disables the right-click function. (as of 05/25/11)

If you want to be an a**hole, here’s Javascript code that disables right-click, selecting text, dragging content, closing the window, etc.

 Our site is based on a template that’s bloated with ugly code, is difficult to maintain, and is, quite frankly, broken.
 We don’t identify PDF files with an icon. (Video)
 We don’t analyze our log files.
 We’ve never conducted user testing. We’ve never asked anyone outside the organization to look at our site and give us a critique.

Jakob Nielsen Changes in Web Usability Since 1994

Changes in Web Usability Since 1994

1994 home pages for AT&T, Hewlett Packard, HotWired, IBM, Microsoft, Silicon Graphics, and Sun MicrosystemsI have been running Web usability studies since 1994 and the most striking conclusion from looking back is that most findings about Web usability are the same now as they were in 1994. This may be surprising, but usability is about basic human capabilities and users’ needs which do not change nearly as rapidly as technology.

The dominant Web look in 1994 was a mixture of gray text and large images, as shown to the right (screens from a comparative study of sites in 1994). This has certainly changed: We have better layout capabilities and many designers have learned to minimize their use of graphics and save download time (though still not enough). Despite the change in looks, many of the findings from 1994 continue to hold:

  • Users don’t read on the Web: They scan the text.
  • Some amount of personality (the “author’s voice”) makes sites more attractive: users don’t like bland impersonal corporate sites.
  • Web users are impatient: They want to get their answers immediately and do not want to be slowed down by “cool” features, mission statements, or self-promoting grandstanding.
  • Users often print out pages: They don’t trust the site to have the page for them if they need it at a later date (and they still don’t trust sites to be stable: a rather sad finding).
  • Download times are becoming ever more critical and sites need to design for speed. Users have always requested fast pages, but in the early years, a novelty factor made users slightly more tolerant of slow downloads. This tolerance has declined markedly in recent years.
  • Search was always liked by users, and has now become mandatory for any large site since the amount of content keeps growing.

There are some new findings due to technology introduced after 1994:

  • Animation is almost always annoying and should be avoided most of the time
  • Applets should sometimes open their own window and leave the browser behind
  • Frames suck
  • Wild background patterns disrupt users’ reading; use colored text with care and avoid blue for non-link text (and retain blue as the standard link color for unvisited links)

There are also a few cases where early findings have to be modified, as described in the following.

Scrolling Now Allowed

In early studies, I found that only 10% of Web users would scroll a navigation page to see any links that were not visible in the initial display. The vast majority of users would make their selection from those links they could see without scrolling. In retrospect, I believe this was due to people treating a set of Web options like they would treat a dialog box: You always design dialog boxes so that all choices are visible (except for tabbed dialogs which are known to have severe usability problems; and the tabs do indicate the amount and nature of the hidden options).

In more recent studies, we have seen that most users scroll when they visit a long home page or a long navigation screen. This change in behavior is probably due to users getting more experience with scrolling Web pages.

There are still a few users who rarely scroll. Even those users who are willing to scroll may be tempted to choose one of the initially visible options when it seems to match their goals. Such users will never see an even better, but invisible, choice that would have required scrolling. Therefore, I still recommend trying to design navigation pages to make all major choices visible without scrolling on the monitors used by the average visitor to a site. Also, the likelihood of making the best choice from a navigation page is maximized if the user can see and compare all the options at the same time without having to scroll and remember the hidden choices.

The change from 1994 is that scrolling is no longer a usability disaster for navigation pages.Scrolling still reduces usability, but all design involves trade-offs, and the argument against scrolling is no longer as strong as it used to be. Thus, pages that can be markedly improved with a scrolling design may be made as long as necessary, though it should be a rare exception to go beyond three screenfulls on an average monitor.

(Update 2010: Eyetracking shows that people allocate much less attention to information below the fold.)

Imagemaps Less of a Problem

Imagemaps caused endless usability problems in 1994, with users overlooking clickable areas and expressing frustration that they didn’t know what they could do on the page. Imagemaps have caused very few problems in recent studies, for several reasons:

  • Users have gotten used to clicking on pictures that look different from standard GUI widgets
  • Graphic designers have gotten better at visualizing “clickability”
  • It is now rare for pages to consist of one huge imagemap; instead, buttons and clickable areas are more clearly delineated through the combination of multiple graphics
  • Client-side imagemaps allow some amount of feedback as the user moves the mouse pointer over the image. Even better feedback is needed, though.

Comprehensiveness Needed

Users have always been intolerant of downtime and crashes. As one of my very first Web test users said, “if a site doesn’t work, I may give it a second chance; if it still doesn’t work, I am never going back.” Users also felt that “under construction” signs were disrespectful of their time.

Even though users wanted sites to work, they were willing to accept sites that had very limited functionality. In the early years, the Web was more of an experimental environment and users understood that they would be limited to a sample of a company’s services. Now, users expect comprehensive service from sites. Not only do sites need to be up and available at all times, they also need to have all the information and services users want in a certain category. For example, in 1994 a publishing company could get away with featuring a few recent books on its home page and not providing access to its full backlist. Now, if a company doesn’t have all its products online, users will complain.

The Web is no longer an experiment: it is mainstream. You have to rely on the ability to do business on the Web, and people get very annoyed when they can’t: Limited sites are seen as a sign of corporate incompetence.

Learn More

Other updates and the latest usability guidelines are covered in my tutorial on Fundamental Guidelines for Web Usability and the day on Web Page Design at the Usability Week conference.

Jacob Nielsen Alertbox, Scrolling and Attention


 

Scrolling and Attention

Summary:
Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.

In Web design, there’s much confusion about the “page fold” concept and the importance of keeping the most salient information within a page’s initially viewable area. (That is, in fact, the definition: “above the fold” simply means “viewable without further action.”)

During the Web’s first years, users often didn’t scroll Web pages at all. They simply looked at the visible information and used it to determine whether to stay or leave. Thus, in usability studies during that period (1994–1996), sites often failed if they placed important information below the fold as most users didn’t see it.

This reluctance to scroll made sense at the time, because people were used to having computers show all their choices. Dialog boxes, CD-ROM multimedia shows, and HyperCard stacks all worked that way, and didn’t require scrolling. (Although users sometimes encountered scrolling text fields, they didn’t need scrolling to see the commands and options, and could thus make all decisions from the visible info.)

In 1997, however, I retracted the guideline to avoid scrolling pages because users had acclimated to scrolling on the Web. This was a rare case in which usability guidelines changed quickly. Typically, usability findings are stable across many years: 80% of Web usability guidelines from the 1990s are still in force.

Today, users will scroll. However, you shouldn’t ignore the fold and create endless pages for two reasons:

  • Long pages continue to be problematic because of users’ limited attention span. People prefer sites that get to the point and let them get things done quickly. Besides the basic reluctance to read more words, scrolling is extra work.
  • The real estate above the fold is more valuable than stuff below the fold for attracting and keeping users’ attention.

So, yes, you can put information below the fold rather than limit yourself to bite-sized pages.In fact, if you have a long article, it’s better to present it as one scrolling canvas than to split it across multiple pageviews. Scrolling beats paging because it’s easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article. (Saying that scrolling is easier obviously assumes a design that follows theguidelines for scrollbars and such.)

But no, the fact that users scroll doesn’t free you from prioritizing and making sure that anythingtruly important remains above the fold.

Information foraging theory says that people decide whether to continue along a path (including scrolling path down a page) based on the current content’s information scent. In other words, users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable.

Eyetracking Data

Last month, we conducted a broad eyetracking study of user behavior across a wide variety of sites. To investigate whether the “fold” continues to be relevant, I analyzed parts of the study with a total of 57,453 fixations (instances when users look at something on a page, typically for less than half a second).To avoid bias, I only analyzed data from 21 users accessing 541 different Web pages, even though our full study was much larger. To convince you that I didn’t limit the data for nefarious reasons, let me explain why I excluded some parts of the study from the present analysis.

Because our research goal was to generate fresh insights for our annual conference seminars, we targeted large parts of the study to test:

For each specialized topic, it’s perfectly valid to target a study and test sites that have features that we want to investigate. For example, to gain insight into carrousels for our navigation seminar, weshould track users’ eyes as they encounter carrousels. To do this, we simply ask them to use a site that happens to include a carrousel, but we don’t draw their attention to that design element.When we deliberately ask people to test sites that contain particular design elements, we can’t conclude that their behavior is representative for average sites. Sticking with the carrousel example, people might well scroll less often than normal if the carrousel successfully keeps their attention on the upper part of the page.

Our study also featured a component that let users go to any site they wanted, for the sake of our broad-ranging seminar on Fundamental Guidelines for Web Usability. These non-constrained tasks are the source of the data I’m analyzing here, because they tested the regular websites people use, as opposed to sites we picked for their design features.

Attention Focused at the Top

The following chart shows the distribution of user fixations along stripes that were 100 pixels tall. The bars represent total gaze time, as opposed to the number of fixations. (In other words, two fixations of 200 ms count the same as one fixation of 400 ms.)Bar chart of the distribution of gaze duration for Web page areas 100 pixels tall, starting at the top

Even though 5% of users’ total time is spent past the 2,000-pixel mark, they tend to scan information that far from the top fairly superficially: some pages are very long (often 4,000+ pixels in my sample), and thus this 5% of user attention is spread very thinly.

In our study, user viewing time was distributed as follows:

  • Above the fold: 80.3%
  • Below the fold: 19.7%

We used an eyetracker with a resolution of 1,024 × 768 pixels. These days, many users have somewhat bigger screens, and we’ve conducted many (non-ET) usability studies with larger resolutions. Although using a bigger monitor wouldn’t change my conclusions, it would somewhat increase the percentage of user attention spent above the fold simply because more info would be available in the initially viewable space.

Scrolling Behaviors

Sometimes, users do read down an entire page. It does happen. Rarely.More commonly, we see one of the two behaviors illustrated in the following gaze plots:

Gaze plots of viewing behaviors on three very long pages that all were scrolled almost to the bottom.
Gaze plots showing where three users looked while visiting pages during three different tasks (one test participant per page). Each blue dot represents one fixation, with bigger dots indicating longer viewing time.

On the left, the user scrolled very far down the page and suddenly came across an interesting item. This viewing pattern gives us many fixations that are deep below the fold. We often see this pattern for well-designed FAQs, though the best FAQs present the most frequently asked questions at the top (so that many users won’t need much scrolling).

The left gaze plot also illustrates another point: the last element in a list often attracts additional attention. The first few items are definitely the most important, but the final item gets more views than the one before it. (That’s also why the bar chart shows more attention to the 701–800 pixel area than to the 601–700 pixel area: the bottom of our study monitor fell within the former area.) The end of a list’s importance is further enhanced by the recency effect, which says that the last thing a person sees remains particularly salient in the mind. (We discuss the design implications of the recency and primacy effects in our seminar on The Human Mind and Usability.)

The two other gaze plots show more common scrolling behaviors: intense viewing of the top of the page, moderate viewing of the middle, and fairly superficial viewing of the bottom. (I picked examples where users scrolled more or less all the way down — often there’s no viewing of the bottom because users don’t scroll that far.)

It’s as if users arrive at a page with a certain amount of fuel in their tanks. As they “drive” down the page, they use up gas, and sooner or later they run dry. The amount of gas in the tank will vary, depending on each user’s inherent motivation and interest in each page’s specific topic. Also, the “gasoline” might evaporate or be topped up if content down the page is less or more relevant than the user expected.

In any case, user attention eventually peters out, and the further down the page users go, the less time they generally spend on each additional information unit.

The middle gaze plot shows a category page with 50 sofas:

  • The top 2 rows get about 5–10 fixations per sofa.
  • The next 4 rows get around 2–4 fixations per sofa.
  • The next 8 rows typically get 1 fixation per sofa.
  • The bottom 3 rows get 2 fixations for one sofa and no fixations for the remaining 7 sofas.

This is only a rough pattern, and users will deviate depending on the content. For example, the Cameon Loveseat and the Custom Hugo Loveseat both get 4 fixations despite being 2,750 pixels down the page. Presumably, the user found these two sofas particularly appealing.

Design Implications

The implications are clear: the material that’s the most important for the users’ goals or your business goals should be above the fold. Users do look below the fold, but not nearly as much as they look above the fold.People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

Finally, while placing the most important stuff on top, don’t forget to put a nice morsel at the very bottom.

Learn More

My next column will look at the horizontal distribution of user attention across the page.Full-day seminars on:

Presented at the annual Usability Week conference. (Topics differ by city, so check your preferred location’s agenda for an exact list of seminars.)

 


Other Alertbox columns (complete list)
Sign up for newsletter that will notify you of new Alertboxes


Jacob Nielsen Alertbox “Top 10 Mistakes in Web Design”


Discussion Article #1 for Week 8

Not all of the information is directly applicable to Web Graphics but 100% is applicable for Web Designers and Web Developers. Good food for thought going into Spring Break next week (week 9).

Top 10 Mistakes in Web Design

Summary:
The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.

Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2011.)Cartoon<br /><br /><br /><br />
- Man searching for 'Honalulu' and getting no results.<br /><br /><br /><br />
- Woman: 'Oh, forget it. Let's just go visit my mother in Fargo.'

1. Bad Search

Overly literal search engines reduce usability in that they’re unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody.

A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document’s importance. Much better if your search engine calls out “best bets” at the top of the list — especially for important queries, such as the names of your products.

Search is the user’s lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that’s what users are looking for.

2. PDF Files for Online Reading

Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don’t work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user’s browser window. Bye-bye smooth scrolling. Hello tiny fonts.

Worst of all, PDF is an undifferentiated blob of content that’s hard to navigate.

PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.

> Detailed discussion of why PDF is bad for online reading

3. Not Changing the Color of Visited Links

A good grasp of past navigation helps you understand your current location, since it’s the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.

Most important, knowing which pages they’ve already visited frees users from unintentionally revisiting the same pages over and over again.

These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don’t change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.

Usability implications of changing link colors
Guidelines for showing linksCartoon - guy being crushed under wordy 'terms and conditions' legalese

4. Non-Scannable Text

A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.

Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:

  • subheads
  • bulleted lists
  • highlighted keywords
  • short paragraphs
  • the inverted pyramid
  • a simple writing style, and
  • de-fluffed language devoid of marketese.

Eyetracking of reading patterns

5. Fixed Font Size

CSS style sheets unfortunately give websites the power to disable a Web browser’s “change font size” button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.

Respect the user’s preferences and let them resize text as needed. Also, specify font sizes in relative terms — not as an absolute number of pixels.

6. Page Titles With Low Search Engine Visibility

Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.

The page title is contained within the HTML <title> tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it’s truly microcontent.

Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don’t start with words like “The” or “Welcome to” unless you want to be alphabetized under “T” or “W.”

For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it’s also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.

Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.

7. Anything That Looks Like an Advertisement

Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)

Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don’t study it in detail to find out what it is.

Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:

  • banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
  • animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
  • pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).

8. Violating Design Conventions

Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That’s good.

The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users’ expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.

Jakob’s Law of the Web User Experience states that “users spend most of their time on otherwebsites.”

This means that they form their expectations for your site based on what’s commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.

9. Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet. Don’t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).

Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user’s machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don’t notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

Links that don’t behave as expected undermine users’ understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser’s “open in new window” command — assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.Cartoon<br /><br /><br /><br />
- woman (at car  dealership): 'How much is it with automatic transmission?'<br /><br /><br /><br />
- sleazy salesman: 'I'll give you a hint - it's an EVEN number...'

10. Not Answering Users’ Questions

Users are highly goal-driven on the Web. They visit sites because there’s something they want to accomplish — maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for.

Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn’t meet their needs if you don’t tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don’t have time to read everything, such hidden info might almost as well not be there.

The worst example of not answering users’ questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it’s rife in B2B, where most “enterprise solutions” are presented so that you can’t tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking “Where’s the price?” while tearing their hair out.

Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.

Art/Photo 250 Syllabus

Designing Web Graphics
(Art/Photo 250) is a beginning level Webpage Design course for the Macintosh computer. Student s’ technical, aesthetic, and conceptual skills are developed throughout the course

Instructor:
Mrs. Rebecca Hillquist

Office Hours and Telephone:
Monday 1:00-2:15, Tuesday 5:30-6:55, Thursday 4:45-5:45, and Wednesday 12:40-2:00
in HS 113.

818- 240-1000 ext 3183

Building:
Health Science

E-mail / Telephone:
rebeccah@glendale.edu (always use the subject line, “GCC student”)
1 (818) 240-1000 ext. 3183

Final:
Wednesday June 6, 1:30-4:00 (Wednesday Class Only)
Tuesday June 5, 7:30-10:05 (Tuesday Class Only)

Students with Disabilities: 
All students with disabilities requiring accommodations are responsible for making arrangements in a timely manner through the Center for Students with Disabilities

Student Learning Outcomes:
1. Develop solutions to assignments incorporating the critical elements of design
2. Demonstrate knowledge and technical skill in Digital Illustration

Attendance / Absence / Tardiness policy:
Attendance will be taken. This information will be used in the determination of a grade. Because of the pace of the coursework attendance is critical to your success in this course.

You will be held responsible for any information and deadlines given (for instance: if a deadline for an assignment is changed in class, and the update does not make it onto the web site, the in class change stands) in class regardless of wether or not you are in class.

Lectures, Demos, handouts are not repeated for absences, lates, or early leaves. If absent, late or early leave, get lecture and demo notes from students in the class.

Do not ask the instructor for a recap of materials covered in class during your absence. Reading the web site does not replace class attendance.

TWO absences, LATE arrival, or EARLY leaves lowers your final course grade by one grade. Students are responsible to contact the instructor if their grade is in jeopardy because of absences, late arrivals, or early leaves.

Exam / Assignment / Critique policy:
Art 250 is a course which stresses the practical application of aesthetic /technical skill. All assignments and critiques are considered to be a test or exam of a students level of understanding within Art 250.

Critiques:
Critiques cannot be made up as they involve the class and not just the student and the instructor.

Critiques will occur every week, and are a graded component of Art 250. Student who fail to participate in preliminary critiques for any assignment cannot receive more than a C grade for that same assignment. Students who fail to participate in a final critique for any project will not receive a passing grade for that same assignment.

Late Work:
Assignments may be handed in (with automatic grade deduction) late if they are delivered by the next class meeting. Late work cannot receive higher than a C grade.

No late work will be accepted for grading more than one week past the assigned due date.

Re-Dos:
If an assignment is turned in on time, but the student wishes to redo the assignment, the student has one week from the due date to resubmit their work without a grade penalty.

This option to redo assignments option is NOT AVAILABLE IF ASSIGNMENT IS LATE.

No re-dos will be accepted more than one week after the due date.

Academic Honesty Policy:
All assignments are required to be 100% your work (from concept to completion).

Cheating or plagiarizing results in an overall course grade of F.

I consider work to be cheating when any part of the work is not originally created by the student from start to finish for each assignment.

If in doubt discuss your ideas with me before completing work.

Student Conduct:
You may be denied attendance to art and photo courses and the use of the Health Science/San Gabriel VAC Labs if you actions result in the destruction or alteration of GCC VAC lab equipment, facility, or other student’s property. Also a disregard for classroom and lab procedures, and any activity which endangers the safety of students and others is a serious matter and will be reported to the Dean of Students.

Do not check your e-mail in the class room before during or after class.

Do not Surf sites not directly related to class in the classroom.

Do not bring any consumable food product into the computer lab at any time!

No earbuds, headphones, ipods, mp3 players, music or sound playback devices of any type should be used in the classroom unless directed to do so by the instructor.

Lastly NO PORN OR HATE images or text should be displayed within any Computer Lab or Classroom at GCC.

These policies have been instituted to foster a productive learning environment and any violation of these policies is considered grounds for permanent dismissal from class. In addition, as I stated before, violation of these policies is a serious matter and will be reported to the Dean of Students.

Cell Phones:
Unless you are a police officer, firefighter, doctor on call, or on an organ transplant list… leave your phones on silent mode and do not receive or place any calls while in the confines of the class room.

All phones should be on silent or vibrate and if a call comes in to your phone while it is in silent mode, and you have some pressing reason to take the call, please remove yourself quietly from the class room and walk to the outside of the building before you answer your call.

TEXTING, EMAILING, PLACING AND RECEIVING PHONE CALLS DURING CLASS TIME IS IN DIRECT VIOLATION OF CLASS POLICY AND IS GROUNDS FOR PERMANENT DISMISSAL FROM ART 133.

TEXTING, EMAILING, PLACING AND RECEIVING PHONE CALL ARE EXTREMELY DISTRACTING FOR THE ENTIRE CLASS. NO MATTER HOW SLY YOU MAY THINK YOU ARE AT RECEIVING OR SENDING A TEXT, RECEIVING OR SENDING EMAIL, OR RECEIVING OF PLACING A PHONE CALL YOU ARE IN DIRECT VIOLATION OF OUR CLASS POLICY OF RESPECTING YOUR FELLOW STUDENTS WHO ARE LIKELY TO BE IN CLASS TO PARTICIPATE AND LEARN THE COURSE MATERIAL, NOT TO BE YOUR PERSONAL AUDIENCE.

(Please come and speak to me if you feel you need an exception on this policy)

Visitors:
(Those not currently enrolled during a scheduled GCC photo class)

NO VISITORS of any age or species in the VAC lab at any time.

Class Requirements and Instructor Expectations:
Most students should expect to spend time outside of class to complete assignments. Exactly how much time varies widely and is influenced by factors such as your level of expertise in vector imaging or general illustration knowledge.

You the student are responsible for finding lab hours at the school or on other outside computers that have the appropriate software.

Come each week prepared to work on the Mac OS.

Also be aware that you are required to do a large part of the class work in class so many of your files will be created on the Mac OS

Assignment percentages are as follows:
90%+=A

80%-89%=B

70%-79%=C

55%-69%=D

Less than 55%=F

Each assignment has it’s respective requirements and students who successfully meet those requirements will receive a B grade. A grades are reserved are reserved for truly extraordinary work. There is no check off list of requirements for an A grade.

Class Assignments are as follows:

Assignment #1 Optimization

Assignment #2 Images and html

Assignment #3 Illustrate one of the “Seven Principles of Typographic Contrast

Assignment #4 Kuler and CSS together at last

Assignment #5 Color Case Study

Assignment #6 Poem

Assignment #7 In-Class Flash typewriter animation

Assignment #8 Final Project

Students with Disabilities
All students with disabilities requiring accommodations are responsible for

making arrangements in a timely manner through the Center for Students with Disabilities.

Course Schedule
(This Schedule is subject to change at the instructors discretion. This schedule is not a substitute for class attendance. By coming to class you will receive lecture, notes, discussion, critique, and any updates to this schedule.)

Week 1

Discussion:

1. General Course Outline.

2. Understanding Web Design

3. How to hand in projects (Using your folder on the VAC transfer).

4. EXTREMELY IMPORTANT: Bring 10 photographs of your own creation to class next week. Put them on a thumb drive and double check to make sure that they are there and can open.

If you are having any issues with registration in this class or any class, this is the week to resolve any and all issues! Don’t Miss Out because of an unpaid fee or any other misunderstanding. Be Proactive.

Week 2

Discussion:

Anatomy of a Web Site

It’s a GOOD thing that YOU remembered to BRING YOUR 10 PHOTOS of your own creation (absolutely no going online and borrowing from a web-site).

Work on Assignment #1 Optimization.

Reading Assignment:
“Typographic Contrast and the Web”
http://www.tomontheweb2.ca/CMX/D4FBD/

Week 3

Discussion:

Web Design Unity

Assignment #1 Due at the beginning of class.

Assignment #2 Images & html:
Take my html document and make your newly optimized pictures from Optimization assignment display in browser. Also, add appropriate text caption for each of your pictures. Due at the beginning of class Week 5.

Week 4

Discussion:

Elements of Web Design
also
Seven type principles discussion

Assignment #3:

Illustrate one of the “Seven Principles of Typographic Contrast”:

1. Based on the Reading Assignment select ONE of the seven principles of typographic contrast.

2. Create a typographic image in Illustrator that illustrates your chosen principle and is appropriate as a headline or masthead for the top of Assignment #2. 3. Optimize it and place it at the top of Assignment #2 using the html provided.

hint: Don’t panic, all you have to do is to make sure your headline graphic is the same size and have the same name as my graphic and it will automatically appear on the page.

4. Replace my typographic image rollover buttons with typographic image graphics that you have created. hint: Make sure your graphics are the same size/quantity and have the same name as my graphics and they will automatically appear.

Week 5

Assignment #2 and #3 due at the beginning of class.

Discussion:

Web Typography
and
The role of CSS to control the style of a web site.

Reading Assignment #2:

Read the following “chapters” from the web site “Colors on the Web”

http://www.colorsontheweb.com/

Color Theory, The Color Wheel, Color Combinations, Color Physics, and Colors on the Web.

Assignment #4:

Kuler and CSS together at last
Using the awesome Adobe color tool Kuler create a color palette that you will apply to a web page (previously created by me using html and CSS). You will have to take the page that I will provide for you that needs a whole lot-o-help color wise. You will go into the CSS document find my colors (I will put comment tags that will show you right where they are:) and put your Kuler colors in place of mine. Sound Fun?! Hope so, because this project is due at the beginning of class in Week 8.

http://kuler.adobe.com/

Week 6

Discussion:

Site Planning

ALSO and Mid-Term Mission Critical…

What is going on color wise with:

Apple

http://www.apple.com/startpage/

Dell

http://www.dell.com/

or

Petsmart

http://www.petsmart.com/

Petco:

http://www.petco.com/

or

Ford:

http://www.ford.com/

Toyota:

http://www.toyota.com

NEXT CLASS:

Be prepared to discuss the color theory and why a particular industry would use a particular color. What are they trying to convey to their customers. Based on the color that they are using who is their customer (who are they trying to appeal to)? Don’t look at a single web site from here on out and not think about color decisions made and what they communicate.

Reading Assignment #3:

Spend some time with each of the color links that I have provided for you. Pay special close attention to color theory and the emotional connections of color.

http://sixrevisions.com/web_design/a-look-into-color-theory-in-web-design/

http://www.colourlovers.com/

http://www.designmeltdown.com/default.aspx

http://www.designmeltdown.com/default.aspx

http://www.digitdesigns.com/colrPick/framePic.htm

Just for fun:

Colors that you have never seen before:

http://www.indigoimage.com/blog/2010/02/can-you-see-bluish-yellow-or-reddish.html

http://www.indigoimage.com/blog/2010/02/can-you-see-bluish-yellow-or-reddish.html

Assignment #5: Color Case Study
Much the way that we did in class today, analyze the colors used on two separate but competing web sites. Use as many of the principles of web color theory as are appropriate in a written analysis that is at least two pages in length and no more than five. Also include screen captures (images do not count in the document length).

Due at the beginning of class in Week 9.

Lab Time:

Come prepared to work on Assignments 4-5.

NO EARLY LEAVES. EARLY LEAVES WILL BE COUNTED AS AN ABSENCE.

Week 7

Discussion:

Elements of Usability

and

1. More about the concepts of html and CSS in relation to Assignment #4.

2. More web color theory discussion in relation to Assignment #5.

Lab Time:

Come prepared to work on Assignments 4-5.

NO EARLY LEAVES. EARLY LEAVES WILL BE COUNTED AS AN ABSENCE.

Week 8

Discussion:

Search Engine Optimization

Assignment #4:

Kuler and CSS together at last Due Today at the beginning of class.

Discussion: Review (Crit) of submitted projects.

Lab Time:

Come prepared to work on Assignment 5.

NO EARLY LEAVES. EARLY LEAVES WILL BE COUNTED AS AN ABSENCE.

Week 9

April 9-14 (M-Sa)

Week 10

Assignment #5 Color Case Study: Due Today at the beginning of class.

Discussion:

Marketing and Conversion

New project introduction.

Assignment #6 Poem:

Using the html and CSS documents that I have provided replace my poem with a poem or song lyrics of your choosing.

hint: look for comment tags in the CSS document I will point you right where you need to go.

Change the colors in the CSS document to convey the mood.

hint: look for comment tags in the CSS document I will point you right where you need to go.

Replace my picture with an image that reinforces your subject, colors, and typography.

hint: look for comment tags in the CSS document I will point you right where you need to go. Make sure that your image size and image name matches mine so that they will appear.

Lab Time:

Come prepared to work on Assignment #6.

NO EARLY LEAVES. Early leaves will be counted as an absence.

Assignment #6 Due at the beginning of class in Week 11.

Week 11

Discussion:

Analysis

Final Project

Lab Time: Come prepared to work on Assignment #6.

NO EARLY LEAVES. Early leaves will be counted as an absence.

Assignment #6 :

Due at the beginning of class in Week 11.

Week 12

Assignment #6:

Due at the beginning of class.

Discussion:

Review (Crit) of submitted projects. Question and answer for final project. Preview of Flash preview.

Week 13

Discussion:

Flash preview.

In-Class Assignment:

Typewriter Text Animation. Due during the last hour of class in class Week 13.

Lab Time:

Work on In-Class Assignment and Final Project.

Week 14

In-Class Assignment:

Typewriter Text Animation. Due during the last hour of class.

Lab Time:

Work on In-Class Assignment and Final Project.

Discussion:

Review (Crit) of submitted projects at 9:00 PM. Question and answer for final project. Preview of Dreamweaver Preview.

Week 15

Discussion:

Dreamweaver Preview

Lab Time:

Work on Final Project. No Early Leaves.

Week 16

Final:
Wednesday June 6, 1:30-4:00 (Wednesday Class Only)
Tuesday June 5, 7:30-10:05 (Tuesday Class Only)

You must attend the final that corresponds to your regularly scheduled class.

No Exceptions.

Take the Final!