Designing the User Interface

Document Sample
Designing the User Interface Powered By Docstoc
					Audio and Video
                      Audio and Video
• Careful: all of these are bandwidth
• Many need plug-ins: programs that add
  functions to your browser.
  – Example: RealPlayer,

                           Audio and Video
• Common types:
  – .swf (.fla in native format) Flash files, vector-
    based (efficient) animation (particularly if created
    intelligently), resizes to the size of the window,
    needs plug-in on the client, requires Macromedia’s
    Flash program to create.
  – .dcr Shockwave files, needs plug-in on the client,
    requires Macromedia’s Shockwave program to
  – ??? Java applets, small Java programs, future
    versions of IE will not run without downloading a
    plug-in.                                             3
                         Audio and Video
– .wav Sound files, native to Windows.
– .ra and .rm (and others) RealAudio, defacto
  standard for streaming audio data on the web,
  requires player from Real Networks on client
  (included in current versions of both Navigator
  and IE).
– .mid MIDI, Musical Instrument Digital Interface,
  standard for the electronic music industry,
  potentially very high quality sound that requires
  very large files.
– .au Audio files for Unix and the Java language.
                             Audio and Video
– .avi For storing video on audio information on
  Windows. Low quality sound, resolution, and
  frames per second, but doesn’t require a plug-in.
– .mov QuickTime for movie clips, a higher quality
  than .avi, but requires the QuickTime plug-in on
  the client.
– .mp3 MPEG, Moving Picture Experts Group,
  highest quality for video, high compression rate is
  possible using lossy techniques that are usually
  invisible to the human eye.
   • MPEG-1 is quality slightly below that of standard video.
   • MPEG-2 is the equivalent of video and is used by DVD-
   • Proposed MPEG-4 will be based on QuickTime.                5
                           Audio and Video
• Avoid using unless:
  – They are the point of the site, like audio
    for a rock group site, or
  – They are being limited to use on an
    intranet with high bandwidth.
     • There, they can be used for video
       conferencing, distributing video of meetings,
       live chat, etc.

                       Audio and Video
• If you insist on using audio or video,
  ask the visitor before downloading the
  – The visitor might not want to wait.
  – The visitor might not want to download the
    necessary player.
  – The visitor might be at work, where audio
    just tells everyone within earshot that
    someone is fooling around on the web.
  – On video, allow the visitor to turn off the
    sound before it executes.                     7
                         Audio and Video
• For Pete’s sake, don’t use an audio file
  that is copyrighted unless you obtain
  permission from the copyright holder!
• For legal ramifications, see
• Streaming audio/video: some
  downloads before the play starts, and
  the rest downloads in the background.
  – Will get interruptions if it can’t keep up.   8
Tools for Creating
   Web Pages
                   WYSIWYG Editors
• Original versions were:
  – Hard to use.
  – Created really bad and/or non-standard
  – Sometimes would not allow editing the
    HTML manually.
  – Often summarily changed the HTML code
    that you did edit.

                   WYSIWYG Editors
• The latest versions of virtually all
  editors are much more friendly these
  days, although you will still use HTML to
  tweak and debug.
• Popular software…

                   WYSIWYG Editors
• Macromedia’s Dreamweaver and
  Dreamweaver UltraDev (the database
  access version).
  – The HTML can be exported to run on
    virtually any common web server.

                    WYSIWYG Editors
• Microsoft’s FrontPage (consumer
  edition) and InterDev (the professional
  – Microsoft-centric: work best with other MS
• Allaire’s Homesite:
  – Allaire – the people who own ColdFusion.
  – A good environment, but probably going to
    be merged with Dreamweaver now.
                      WYSIWYG Editors
• NetObjects’ Fusion, for both Windows
  and Mac platforms.
  – Not compatible with other editors – you
    must continue to edit your site with Fusion
    – but it was one of the first tools available
    for building and managing bigger, more
    complex sites.

                     WYSIWYG Editors
• IBM’s Websphere Studio.
  – Can be used to create a straight HTML file,
    but really intend for building JavaServer
    Pages (Java, not JavaScript) for data

                     WYSIWYG Editors
• Allaire’s ColdFusion Studio:
  – Easy to learn and use by the average
  – For developing applications, not just static
    web pages.
  – Can be used only with a ColdFusion
    application server because it uses
    proprietary tags for data access.

                  WYSIWYG Editors
• All kinds of other editors – avoid
  because they may not be as robust or
  around all that long.
• Online editors provided free by Web
  hosts – the quality varies widely and
  you may not be able to export the site
  later if you change servers.

Miscellaneous Stuff
                  Tracking Site Activity
• Use specialized software (on the web
  server) to track visitor activity on the
• But be wary of analyzing the stats you
  come up with – they can be misleading.
  – If a visitor spends 30 minutes on your site,
    is that good or bad?
     • Depends – was that visitor having a good time,
       or was the visitor lost for 25 of the 30 minutes?
                Tracking Site Activity
• For example, if a visitor makes it all the
  way to checkout and then bails, is it
  – The visitor was afraid your site was not
    secure, and therefore didn’t want to reveal
    a credit card number?
  – Or, the site failed to give a grand total,
    including miscellaneous charges like
    shipping and taxes?
    Gathering Data about Visitors
• It is smart marketing to gather as much
  data about visitors as possible.
• At the same time, we need to be
  conscious of respecting visitor’s privacy.

    Gathering Data about Visitors
• For example, Amazon maintains
  information about what I have bought
  in the past.
• When I log in, Amazon suggests similar
  books that I might like.
  – Is that good marketing or an invasion of
    my privacy?
  – Personalization such as this is an important
    trend in e-commerce.
    Gathering Data about Visitors
• It’s smart marketing to try to get at
  least the visitor’s name and email, if the
  visitor agrees.

           The Bottom Line on Web
                Application Design
• Don’t let poor interface design make
  visitors feel that you are playing dirty
  tricks on them!


• For design inspiration:
  – ideaindex: graphic effects and typographic
    treatments, by Jim Krause. North Light
    Books, Cincinatti, Ohio.
The Good, the Bad, and The Ugly
• Interesting sites... Some good, some
  bad, some just interesting.
•                       26
The Good, the Bad, and The Ugly
•               27
The Good, the Bad, and The Ugly
•                      28
The Good, the Bad, and The Ugly
• (check out the dancers)
•                   29
The Good, the Bad, and The Ugly
•                          30

Shared By: