INTERACTIVITY

1
CHAPTER 9 INTERACTIVITY
30 Slides
2
WHERE WERE GOING
3
APPROPRIATE INTERACTIVITY
4
ANIMATION vs. INTERACTIVITY

• Animation . . . a one-way moving
  presentation, doesnt employ user interaction
  (other than selecting it)
• Interactivity . . . the way in which a web
  site can respond to a users actions and
  choices. Interactivity is, or should be, user
  controlled.
• Interactive user Input such as
• Clicking the mouse
• Typing commands or entering information
• Selecting a hyperlink
• Interactive Output like
• Displayed images and text
• Printouts
• Animation
• Full motion video and/or Audio

5
USING INTERACTIVITY EFFECTIVELY

• Engage Your Audience
• Have you made visitors feel like interactive
  members of your site?
• Can the user communicate with your client?
  Thats why theyre here!
• Have you employed Site Search Functions, Chat
  Rooms, Feedback Questionnaires, and User
  Preference Options?
• Justify Your Interactive Elements
• Do your interactive elements have a good reason
  for being there?
• Do they enhance your sites message?
• Are they unified, do they contain a thematic
  pattern of elements or visual components?
• Do your interactive elements download quickly?

6
REMEMBER, IN THE END . . ITS ALL ABOUT
DOWNLOAD TIME!

• You must be prepared to answer two important
  questions
• Does the website really need this feature?
• Does the feature add-to or will it impede the
  users experience?
• When possible, use animated GIFs or compressed
  .SWF files for economy

7
INTERACTIVE NAVIGATION MULTIMEDIA
8
INTERACTIVE ELEMENTS

• Primary Interactive Activities
• Interactive Navigation
• Interactive Multimedia
• Interactive Advertisements
• Programmed Interactivity
• Database-Driven Interactivity
• User-to-User Interactivity

9
INTERACTIVE NAVIGATION

• Navigation techniques like the rollover button
  should give the visitor immediate feedback about
  the outcome of choosing one link or element over
  another
• Other navigation techniques may include
  clicking switches, flashing or blinking lights,
  or buttons appearing to be pressed
• These navigation elements may be created using
  HTML, JavaScript or Java, or even incorporated
  into your Cascading Style Sheet (CSS)

10
INTERACTIVE ANIMATIONS

• Animations can be either static or interactive
• Shockwave Flash (.SWF) and Apples Quicktime
  can add important customer interactivity to
  animations
• SWF movies can employ animation video and audio
• SWF movies give the web designer powerful
  user-control elements
• Quicktime uses embedded links to generate its
  video and audio animations

11
VIRTUAL REALITY (VR)

• Rendering of Virtual Reality can be accomplished
  three ways
• Rendering On-the-Fly Uses Virtual Reality
  Modeling Language (VRML) to build the 3-D views
  as the user moves the mouse pointer, joy stick or
  data glove
• Pre-Rendering Multiple possible user-selected
  paths are pre-arranged and then played-back based
  on user selections
• Interactive Panoramas A series of photos or
  views are stitched together in a cylindrical or
  spherical view allowing the user to stand still
  and look around

12
VR LANGUAGES PRODUCTS

• VRML Virtual Reality Modeling Language First
  standardized in 1996. Uses polygons to create VR
  effects. Requires a plug-in in Netscape Navigator
  and Active-X controls in Internet Explorer.
  Scripting is used to create interactive
  capabilities. Requires big, fast computers to
  create these VR worlds. Beware of extended
  download times!
• Adobe Atmosphere (Beta) This VR design
  product allows the developer to create beautiful
  renderings with small file sizes. Employs
  internet standard GIFs, JPEGs, and HTML code to
  create the virtual world. Also allows for the
  creation of Avatars (virtual people) which can
  interact directly with the user. The Beta version
  is currently free on the web and min. system
  requirements are modest!
• http//www.adobe.com/products/atmosphere/main.html
  
• iPIX (from Interactive Pictures Corp.)
  Originally called PhotoBubble, allows two
  hemispherical images to be stitched together
  creating a fully navigable sphere. Requires a
  browser plug-in.
• http//www.ipix.com/
• Apples Quicktime VR Enables the browsing of
  panoramas or the rotation of objects in three
  dimensions. Also can stitch digital images
  together to create a seamless virtual world.
  Requires a browser Plug-in.
• http//www.apple.com/quicktime/products/qt/overvie
  w/qtvr.html

13
OTHER MULTIMEDIA TECHNOLOGIES

• Scalable Vector Graphic (SVG) Vector-based, XML
  derivative
• Resizing doesnt affect vector graphics quality
• Allows for searchable embedded text
• Adobes current SVG Viewer Ver. 3.0
• Requires a Plug-in

• Synchronized Multimedia Integrated Language
  (SMIL) XML-based Meta-Language
• Create highly interactive multimedia with audio,
  video, and animation
• SMIL 2.0 is near release as of 3/01
• Requires a Plug-in

Advertising Banners aka Rich Media Ads,
offering customer rewards and/or other incentives
are also a choice for your clients are no
guarantee of success!
14
PROGRAMMED INTERACTIVITY
15
HTML FORMS THE MAILTO TAG

• Why Gather customer information or feedback,
  or complete entire sales transactions without any
  human interaction!
• What to do Respond quickly to customer
  inquiries or risk frustrating them!
• How to Treat It Personal customer information
  must be kept private. No selling, trading, or
  other distribution is ethical without prior
  notice. Have you published a Customer Privacy
  Statement?
• On data-gathering HTML forms
• KISS customers will leave some fields blank
  anyway. Know which fields are required by your
  client.
• Plan on using an HTML table to align data
  elements.
• Form control tags require a name attribute to
  assign data to script variables.
• Javascript can be used to verify required data
  or trigger new interactions
• Use the Mailto tag for simple feedback or easy
  customer response
• lta href"mailtowebdesigner_at_mysite.com"gtE-mail
  the webdesignerlt/agt

16
HANDLING INTERACTIVE EVENTS

• JavaScript is a powerful client-side scripting
  tool for your sites
• Responding to customer actions (events) with the
  handler codes seen on the left, Java-Script can
  enable sophisticated interactions between your
  customer and your web page
• With JavaScript, every object used on your pages
  can trigger a scripted response for navigation,
  object transitions, or automated data completion
  within forms
• Java Applets are another technique for handling
  on-screen, client-side interactions
• Applets are small interpreted programs written
  to execute within the browser itself

17
DATABASE-DRIVEN INTERACTIVITY
18
The use of Databases online allows your clients
customer to search for the exact product or
information they want without any staff
intervention. Large databases may need to be
located on the web server, making security an
important issue. Data from smaller databases can
be used to create the HTML pages which will be
used on the site. Regular updates may be
necessary.
19
STATIC VS. DYNAMIC WEB PAGES

• Static Pages Require updating whenever the data
  changes
• Dynamic Pages Create pages on demand
  interactively from the users request using a
  display template and client database(s). The use
  of dynamic web pages requires
• A server-side scripting language, like Active
  Server Pages (ASP)
• Stripping your database content of all
  formatting codes
• Figure out the pieces What part of your
  clients data needs displaying
• Store those necessary pieces in an online
  database
• Create the design template that will be used to
  format the data on demand
• Wire it all together for the customer into a
  smooth looking front end

20
A truly interactive web site usually involves
some type of individual customer recognition or
personalization. Cookies are one method for
storing, or remembering, customer
information Providing customers with an account
Log-in is another. Amazon.com is one of the
better examples of the use of customer tracking
as they keep track of customer preferences in
book purchasing . . . http//www.amazon.com/
21
SELLING IT FOR YOUR CLIENT
AND . . . KEEPING IT SECURE
22
USER-TO-USER INTERACTIVITY
23
(No Transcript)
24
WHERE WEVE BEEN!
25
THE END! ?