Design  Good design is good because of its fitness to a particular user fitness to a particular task  In general, you are not your user!  Our class will stress user centered design.

User and Task Analysis  Identifies Characteristics of the potential user population(s), e.g. demographics, domain knowledge. Goals that the user wants to accomplish. Tasks that the users perform.  May identify Mental models. Familiar metaphors.

RGB Color

Beautiful Color Scheme???  For a given lens curvature, longer wavelengths have a longer focal length Red is the longest focal length Blue is the shortest.  Since to have an image focused on the retina, the lens curvature must change with wavelength with red light requiring the greatest curvature and blue light the least curvature.

Derived Color Guidelines  Avoid the simultaneous display of highly saturated, spectrally extreme colors.  Pure blue should be avoided for text, thin lines, and small shapes.  Avoid adjacent colors that differ only in the amount of blue.  Older operators need higher brightness levels to distinguish colors.  Colors change in appearance as the ambient light level changes.

Derived Color Guidelines  The magnitude of a detectable change in color varies across the spectrum.  It is difficult to focus upon edges created by color alone.  Avoid red and green in the periphery of large displays.  Opponent colors go well together.  For color-deficient observers, avoid single color distinctions.

Proximity  The principle of proximity states that people tend to perceive items that are located close together as being related.  A B C D

Alignment  People perceive items that appear along a virtual line as being related.  Using indentation to show hierarchy is an instance of using alignment.

Consistency  Consistency means a high degree of uniformity in layout with in a page and uniformity in layout across pages.

Contrast  Items that look different will be perceived as different.

535 pixels 670 pixels 600 pixels 350 pixels inch screen (640x480 pixels) Browser safe area (600x350) or for (800x600) safe is (760x420) Use blue dimensions to fill the maximum safe area on most screens. Use red dimensions for pages that will print well. Safe dimensions for Web page graphics

Layout

Text on the Computer Screen  Hard to read. Because of the low resolution of computer screens. Because the lines of text in most web pages are much too long to be easily read.

Text on the Computer Screen  Magazine and book columns are narrow for physiologic reasons. At normal reading distances the eye's span of movement is only about 8 cm (3 inches) wide. Designers try to keep dense passages of text in columns no wider than reader's comfortable eye span.

Text on the Computer Screen  Most web pages are almost twice as wide as the viewer's eye span Extra effort is required to scan through long lines of text To encourage your web site users to read a document online, shorten the line length of text blocks to about half the normal width of the web page.

Suggestions for Body Type  For body text, use Georgia or Verdana Trebuchet is also screen friendly (sans serif)  Use 12 pt type 10 point is ok if you know your users have Georgia or Verdana. But if they don’t and it defaults to 10 pt Times Roman – that is too small.

Suggestions for Body Type  Use Roman, not Italic or Bold for body text style.  Use upper case only for first words of sentences, proper names, etc ALL CAPS IS HARD TO READ  Use a maximum line length of 5 inches Shorter is better

Suggestions for Body Type  Use two point of leading between lines unless its already there  Use left alignment  Don’t use underlining for emphasis (Users might assume the underlined word is a link.)

Suggestions for Display Type  Use any size that fits  Use any typeface that is legible  Use the line height attribute for control of line spacing to get the effect you want (touching or spread widely)  Use letter spacing and word spacing to get the effect you want.

Suggestions for Display Type  Use kerning to make display type look right Web  Don’t use animated text Users hate it. Some develop animation blindness where they don’t see the moving text assuming it is an advertisement.

Back up your work  Disks and computers will fail.  Don’t trust them.  Version control.