View
217
Download
0
Tags:
Embed Size (px)
Citation preview
Web Page DesignWeb Page DesignUniversity of WollongongUniversity of Wollongong
IACT303 – INTI 2005 World Wide Networking
A Bit of History• Prior to 1980s
– publishing required printing presses and large design staff
• Beginning Mid 80s – Publishing revolution - desk-top
publishing (DTP)– Tools to create documents now more
widely available
Desk Top Publishing (DTP)
• The Web is passing through a similar phase almost identical to DTP.
• Developers often (though less often these days) do things to pages because they can, not because they need to.
Design • Design is the thought process comprising
the creation of an entity (Miller 1997) • Design is about understanding the nature
of human thought and the study of the psychology of materials and things.
• The result of successful web design of a usable and understandable resource for people.
Approaches to Web Site Design
• Artz (1996) offers two approaches– Evolutionary
• exploratory and appropriate for learning about the technology and the domain
• Can lead to complex applications that are often difficult to use and maintain.
– Top-down • organises the complexity of applications and
produces material that meets business objectives• can be maintained by people other than developers.
Web creators goals• Provide
– a uniform interface to the Internet’s existing services
– a simple medium for cross-platform information exchange between members of a community.
• The simplicity of the hypertext model accomplishes both goals.
Hypertext (1)• A person navigating an information space tends
to develop a mental structure for the information
• This structure helps relate pieces of information to each otherE.g.A book is highly linear space,
• But a hypertext document is highly non-linear.– Information can branch outward form many locations
within the text.– May not always be clear how the new information
relates to the document as a whole
Hypertext (2)• The model the user may form of the web
sites structure may be ‘chaotic’.• Chaotic design is too often the only model
that applies to many hypertext systems.• The problem is exaggerated and aggravated
on the Web as– a link can lead to anywhere including a
completely different site on a different server.– the situation is then out of the original author’s
control.
General principles• Have consistency in interface design
– should be applied at all levels from design to page layout and imagery
– helps the user to relate to the site and now when they have entered another site.
– Have the same banner on top of all pages.• To establish a visual identity for the site and• as an aid to navigation.
– Include consistency with buttons or images to links
• Use cascading style sheets to simplify the process of applying consistency.
General principles– No control over other designers
linking to any page within your site– Yahoo is an excellent example of
consistent look and navigation links.– Other methods include making text
as meaningful as possible and keep file size small
Multimedia• Digitized sound and video files are
very large.– Page design should include an indication
of size, download time and running time near the link.
– Also include width and height of images.
• Bandwidth is still a problem to many in the world.
Design Conventions (Artz, 1996)
• Colour can be used for background or to convey information– need to know the environment as not all
monitors display colour the same
• interesting backgrounds can make pages aesthetically appealing, but– can take time to load– Not supported by all browsers
Design conventions (2)• Browser Specific Formatting
Conventions– be careful when overriding
formatting conventions (eg. <br> &<centre> tags)
– need to be careful using tags not supported by all browsers (eg <centre>)
Design conventions (3)• Images
– take much longer to transfer than text– not all users have high bandwidth connections\
• Anchors– should always occur as naturally as possible in
the text– images can make attractive links and buttons
with icons often make traversal easier– must be weighed against the increased
download time
Design conventions (4)• Conventions
– should be established and followed as closely as possible on each page (more on that latter)
– each page should have a date last updated and mailer link
– homepage should have mailer link to ‘Webmaster’ and a ‘more info’ link
• Printing– page designers should print all pages to see
how they look on paper
W3C Content Accessibility Guidelines
2.0• W3C has recently released a draft
documents for web accessibility guidelines. They are asking for feedback (by August 2005)
• You will give this document a “road test” as part of your major project
W3C Content Accessibility Guidelines
2.0The four principles of accessibility are as
follows: 1. Content must be perceivable. 2. User interface components in the
content must be operable. 3. Content and controls must be
understandable. 4. Content must be robust enough to work
with current and future technologies.
W3C Content Accessibility Guidelines
2.0Three levels of conformance are defined:• Level 1 success criteria: 1.Achieve a minimum level of accessibility
through markup, scripting, or other technologies that interact with or enable access through user agents including assistive technologies.
2.Can reasonably be applied to all Web resources.
W3C Content Accessibility Guidelines
2.0Three levels of conformance are defined:• Level 2 success criteria: 1.Achieve an enhanced level of accessibility
through one or both of the following:a.markup, scripting, or other technologies that
interact with or enable access through user agents, including assistive technologies
b.the design of the content and presentation
2.Can reasonably be applied to all Web resources.
W3C Content Accessibility Guidelines
2.0Three levels of conformance are defined:• Level 3 success criteria: 1.Achieve additional accessibility
enhancements for people with disabilities.
2.Are not applicable to all Web resources.
1. Content Must be Perceivable
• Examples• Guideline 1.1 Provide text alternatives for
all non-text content.• Guideline 1.2 Provide synchronized
alternatives for multimedia.• Guideline 1.2 Provide synchronized
alternatives for multimedia.• Guideline 1.4 Make it easy to distinguish
foreground information from background images or sounds.
2. User interface components in the content must be
operable• Examples• Guideline 2.1 Make all functionality operable
via a keyboard interface.• Guideline 2.2 Allow users to control time
limits on their reading or interaction.• Guideline 2.3 Allow users to avoid content
that could cause seizures due to photosensitivity.
• Guideline 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it.
3. Content and controls must be
understandable.• Examples• Guideline 3.1 Make text
content readable and understandable.
• Guideline 3.2 Make the placement and functionality of content predictable.
4. Content must be robust enough to work with current and future
technologies.
• Examples• Guideline 4.1 Use technologies
according to specification.• Guideline 4.2 Ensure that user
interfaces are accessible or provide an accessible alternative(s)– If content does not meet all level 1
success criteria, then an alternate form is provided that does meet all level 1 success criteria.
W3C Content Accessibility Guidelines
2.0• Your final project will need to conform to
Level 1 and Level 2 of the (Draft) Web Accessibility Guidelines 2.0 available at:
• • Guidelines: http://www.w3.org/TR/2005/WD-
WCAG20-20050630/• Checklist: http://www.w3.org/TR/2005/WD-
WCAG20-20050630/checklist.html• .
Exercise• Spend time reviewing the
Guidelines check list in order to determine what factors need to be taken into account when design your web site for the major project.