Principles of eDesign

1
Principles of eDesign

• Dr Alan Barnes April 2009

2
Principles

• Internet Principles
• Web Principles
• Web Authoring Technologies
• Web Design
• Web Design Critique
• Design in Dreamweaver
• References

3
Internet Principles Two Addresses

• Each computer has a communication card with a
  hard wired unique physical address
• To communicate through the Internet a computer
  needs an Internet Protocol Address (IP)
• An Internet Service Provider is allowed to use a
  set of IP addresses and assigns one to your
  computer
• The Internet is like a postal system where your
  package (eg. a request for a web page) is sent
  from your IP through a number of machines before
  it arrives at its target destination(the server)
  fortunately it has your return address(your IP)
  on the back so the server knows where to send
  the part of the web page
• Ref http//www.ust.hk/itsc/ResNet/procedure/ether
  addr.html
• Exercise on a PC see if you can find the
  command prompt window type in ipconfig /all to
  find out your IP and physical addresses on a Mac
  go to the network panel

4
Web Principles

• The web is based on HTML code(HyerText Markup
  Language) provided by the server to the client on
  request-the recipe for the web page.
• The recipe may need certain resources like
  graphics, animations, video.
• As the web page loads the recipe is followed
  through.
• Both the HTML and the resources are provided by a
  server
• Requests by clients and resources are posted
  over the Internet-no connection is maintained-the
  web is stateless

5
Web Authoring Technologies I

• HTML can be constructed in any text editor eg.
  notepad(pc), BBedit(Mac)
• Browser Scripting eg. JavaScript-allows web pages
  to be programmed
• Server Scripting eg. for marketing
• Multimedia for the web-Flash
• Exercise examine the self help site
  http//www.w3schools.com/

6
Web Authoring Technologies II

• low level v high level design-text editor v
  authoring package
• template v assemble-Frontpage v Dreamweaver
• HTML output from applicationsWord, Excel, SPSS,
  Inspiration
• object output for web pages-Geometers Sketchpad
• For a more detailed account click here
• Exercise Use your office applications to create
  a number of web pages. What are the losses and
  gains in the export process? Notice that
  Dreamweaver has a Clean up Word html command.

7
Web Design I

• understand your users
• design for the users (not for your artistic
  vanity)
• critical stuff in top third of screen
• mix text and graphics
• orient the user-menus, links
• always offer a way forward or way out

8
Web Design pages or sites?

• Pages-
• web page design is about layout and content
• Sites
• web site design is about navigation, orientation
  and consistency

9
Web Page Design how complex?

• Complex-
• many different users with different goals look at
  different things and go different ways
• examples advertising, entertainment
• Simple-
• similar users with similar goals look at similar
  things and go the same way
• examples presenting information, topic focused
  learning

10
Web Site Design where the hell am I?

• users get lost with multiple links to many pages
  and cant find things easily
• links should be clearly indicated
• cater for both navigation and orientation
• navigation is different from orientation because
  it is so easy to click and go somewhere
  (navigation) but harder to remember where you are
  (orientation)
• research shows orientation is important to
  learning
• graphical links are more easily remembered by
  children than textual links
• use menus to support orientation
• instead of links taking the user to a page use
  frames to bring the page to the users
• use banners to maintain a theme
• site maps are useful

11
Web Design-Some Conventions

• Ensure links are indicated and activate when
  clicked not when rolled over
• Keep size of files to a minimum
• Have a default file as the front door eg.
  index.htm, default.htm
• Adopt understandable folders and file names, do
  not uses spaces in names
• Follow the Gutenberg convention of reader
  gravity- eg. navigation/orientation top and left
  (see next slide)

12
Gutenberg Diagram


POA - Primary Optical Area TA - Terminal
Anchor - Dead Areas
POA
(Wheildon, 1986)
0

TA
The eye travels down from left to right obeying
reading gravity.
13
Critiquing Web Design

• Information sources-validity, credibility,
  authority ref
• Social Experiences-communication, cooperation,
  collaboration
• Learning Engagement-interactivity, feedback, flow
  ref
• Suitability-age, learning style, special needs,
  relevance

14
What Makes A Person Want To Come Back?

• Ease of use/navigation74
• Fast download time65
• Regularly updated information58
• Quality of content57
• Organisation of content40
• Access to customer service40
• Quantity of content30
• Search tool on the site25
• Homepage layout20
• Fun19
• Look and feel of the site18
• Inclusion of animated graphics9
• ref

15
What makes bad design?

• Clutter and useless features
• The World Wide Wait
• Uncontrollable animations and movies
• Ads especially banner ads
• Things that flash on and off
• Dead links
• Lots of font and colour changes
• Violating the Conventions
• Examples ref

16
Design in Dreamweaver

• An assembly style web authoring environment
• Site design tool eg. site wide find and replace
• Support for multiple views
• Rapid testing in multiple browsers
• Inspectors and panels for frames, forms, layers
  etc.
• Superb reference with browser specific support
• Excellent help and tutorials

17
Think Structure

• Each site has a conceptual structure often as a
  users sequence
• File structure of a site should follow the
  conceptual structure
• Commonly used files should go in named folders

Exercise design the structure for a simple
lesson plan eg. intro, task1, task2 etc.
18
Major references general

• A single page guide to creating and understanding
  web pages ref
• In depth support for all types of web authoring
  ref
• Evaluating the web ref
• What to do and what not to do in web design ref
  
• Dreamweaver tutorials and help pages

19
Major references Support for Teacher Web Design

• http//www.kn.pacbell.com/wired/bluewebn/
• http//www.capecod.net/schrockguide/index.htm
• http//www.k12science.org/k12partner98/webpublish.
  html
• http//teachers.net/lessons/

20
eDesign Task

• In this task I would like you to find three web
  sites and summarise the extent to which they
  implement some of the design principles
• Web site A this website seems well designed and
  implements a number of principles
• Web Site B this web site seems poorly designed
  and violates a number of the principles
• Web Site C this web site deliberately violates
  some of the principles(eg. Gutenberg) but does so
  in a way which is both novel and appealing.
• Summarise these considerations to the course wiki.