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
  hogs.
• Many need plug-ins: programs that add
  functions to your browser.
  – Example: RealPlayer, www.real.com




                                          2
                           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
    create.
  – ??? 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.
                                                      4
                             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-
     ROMs.
   • 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.


                                                       6
                       Audio and Video
• If you insist on using audio or video,
  ask the visitor before downloading the
  file.
  – 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
  http://home.earthlink.net/~ivanlove/mu
  sic.html
• 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
    HTML.
  – Sometimes would not allow editing the
    HTML manually.
  – Often summarily changed the HTML code
    that you did edit.

                                             10
                   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…




                                              11
                   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.




                                         12
                    WYSIWYG Editors
• Microsoft’s FrontPage (consumer
  edition) and InterDev (the professional
  IDE).
  – Microsoft-centric: work best with other MS
    products.
• Allaire’s Homesite:
  – Allaire – the people who own ColdFusion.
  – A good environment, but probably going to
    be merged with Dreamweaver now.
                                                 13
                      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.


                                                    14
                     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
    access.




                                                  15
                     WYSIWYG Editors
• Allaire’s ColdFusion Studio:
  – Easy to learn and use by the average
    programmer.
  – 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.

                                                   16
                  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.

                                           17
Miscellaneous Stuff
                  Tracking Site Activity
• Use specialized software (on the web
  server) to track visitor activity on the
  site.
• 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?
                                                           19
                Tracking Site Activity
• For example, if a visitor makes it all the
  way to checkout and then bails, is it
  because
  – 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?
                                                  20
    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.




                                               21
    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.
                                                   22
    Gathering Data about Visitors
• It’s smart marketing to try to get at
  least the visitor’s name and email, if the
  visitor agrees.




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




                                             24
                              References
• www.infinitefish.com
• www.webmonkey.com
• www.webspinner.com

• For design inspiration:
  – ideaindex: graphic effects and typographic
    treatments, by Jim Krause. North Light
    Books, Cincinatti, Ohio.
                                                 25
The Good, the Bad, and The Ugly
• Interesting sites... Some good, some
  bad, some just interesting.
• www.pepsi.com/
• www.cigaraficionado.com
• www.4adodge.com
• www.cadm.org
• www.godiva.com
• www.ironfish.com                       26
The Good, the Bad, and The Ugly
•   www.chanel.com
•   www.disney.com
•   www.geneca.com
•   www.wildoats.com/wild_cuisine/
•   www.mercedes-benz.com/e/default.htm
•   www.benjerry.com
•   www.marchfirst.com
•   www.harrypotter.warnerbros.com
•   www.elicheesecake.com               27
The Good, the Bad, and The Ugly
•   http://www.webbyawards.com/main/
•   www.crouchingtiger.com
•   www.blueman.com
•   www.xbox.com
•   www.razorfish.com
•   www.scient.com
•   http://reticulum.net/wso/
•   www.jaguar.com
•   www.eastman.org
•   www.kodak.com                      28
The Good, the Bad, and The Ugly
•   www.lemonjelly.ky
•   www.airside.co.uk (check out the dancers)
•   www.whitecube.com
•   http://www.wedding-invite.com/
•   http://www.wedding-
    invite.com/invitations~99.html
•   http://welcomesite.com/
•   http://www.medmaninc.com/
•   http://www.onthewaterfront.com/
•   http://www.pointroll.com/                   29
The Good, the Bad, and The Ugly
• sms.humberc.on.ca/main.htm
• www.culture.fr/culture/arcnat/lascaux/e
  n/
• www.prenhall.com/deitel/
• www.metrocentre.com/
• www.websitedesign.com
• www.37signals.com
• www.art-barn.com                          30

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:9
posted:9/22/2011
language:English
pages:30