ayyer_webpages_as_ui by fanzhongqing


									Web Pages as User Interfaces: Forms
      and Web Applications

                Presented by

                Krishnan Ayyer
     Information Architecture and Design
                  Fall 2005.

   Introduction
   History
   Examples
   Web widgets
   IA and User Interfaces
   Design guidelines
   Future
   Conclusion
   References

User Interface
   The user interface is the aggregate of means by which
    people (the users) interact with a particular machine,
    device, computer program or other complex tool (the
    system). The user interface provides means of:

   Input, allowing the users to control the system

   Output, allowing the system to inform the users (also
    referred to as feedback)
    Some common types of User Interfaces

   Graphical User Interfaces (GUI’s)
   Web based User Interfaces
   Command line Interfaces
   Touch Interfaces
   Batch Interfaces
              History of User Interfaces

    The history of user interfaces can be divided into the
    following phases according to the dominant type of user

   Batch interface, 1945-1968
   Command-line user interface, 1969-1983
   Graphical user interface, 1984 to present

   Doug Engelbart's Augmentation of Human Intellect
    project at SRI in the 1960s developed the On-Line
    System (NLS), which incorporated a mouse-driven
    cursor and multiple windows

   Xerox PARC
   invented was the laser printer, a natural complement to
    Xerox's copier business
   Invented their own computer called The Alto in 1973
    which provided a more graphical way to interact with the
   Apple
   GUI pioneers, was a small startup founded in a garage in
    1976 by Steve Jobs and Steve Wozniak, called Apple
   Apples next generation interface was LISA
   Use of drag and drop, icons used to depict all files
                      Current GUI’s

   Lets have a look at some of the features of the latest
    Windows version, Windows Vista.

              Examples of bad web UI

   The best way to become skilled at good web UI is to
    learn from bad designs.
   Here are some examples

                   Moral of the story

   Use flash discreetly
   Don’t use flash for the sake of it. Remember the
    objective is to help the user
   As Jacob Nielsen says
    99% of Flash on websites are bad as they distract from
    the core values of the site
   Don’t make navigation a nightmare for users
             Web Widgets or Forms

   Hyperlinks
   Text Field
   Buttons
   Radio buttons
   Check Boxes
   Drop Down menus

   Hyperlinks are the backbone of the World Wide Web
   They are the tools to navigate from one web site to

    Syntax in HTML
    <a href="url">Text to be displayed</a>
    <a href=“ http://www.ischool.utexas.edu”> Ischool
                         Text Field
   Text fields are used when you want the user to type
    letters, numbers, etc. in a form.

    HTML syntax
    <input type="text" name=“sample">
    <input type=“password” name=“password”>
    <textarea rows="5“   cols="20">… </textarea>

 Used to transfer content of the form to another file or
  reset contents of current one.
 Content is transferred using action tag in conjunction
  with Submit button
  HTML syntax
 < input type=“submit”>
    To submit a web form
 <input type=“reset”>
    To clear a web form
                      Radio Buttons

   Radio buttons are used when there is a list of two or
    more options that are mutually exclusive and the user
    must select exactly one choice
   Clicking a non-selected radio button will deselect
    whatever other button was previously selected in the list

   Checkboxes are used when there are lists of options
    and the user may select any number of choices,
    including zero, one, or several
    Each checkbox is independent of all other checkboxes
    in the list, so checking one box doesn't uncheck the
   Most of you probably think that the difference between checkboxes
    and radio boxes are fairly obvious, but plenty of websites seem to
    get it wrong.
   Lets have a small quiz
    This is an extraction from a website. Do you spot any mistake????
    Stay informed! Get updates about featured products, solutions,
    services and educational opportunities. Let Foobar Corp. and
    selected organizations provide you with information about other
    offerings. May we send you updates using e-mail?

         Yes, please use e-mail to send me information about other
     If you prefer, we will not contact you using the data you provided in
    this instance.
          Please do not use the contact details provided here to send me
    information about other offerings.

   Mistake #1 : The erroneous use of checkboxes where radio buttons
    should be. Because the two choices above are mutually exclusive,
    the page should present users with radio buttons, which restrict
    them to selecting exactly one option

   Mistake #2 is to present two questions in the first place, and then to
    put them in a big, verbose box. A single, shorter question would be
    far better here: "Yes, send me information about other featured
    products, solutions, services, and educational opportunities."
                  Drop down menus

    Designers employ drop-down menus for a variety of
    different purposes, including
   Command menus, which initiate an action based on the
    option users select
   Navigation menus, which take users to a new location
   Form fill-in, which lets users select an option to enter
    into a form field
   Attribute selection, which lets users choose a value
    from a menu of possible values
         - Jacob Neilsen
         Information Architect perspective

   There are a large variety and types of web widgets
    available, but use them discreetly.
   The structure of the widgets on the interface is very
   Always keep the user in mind while designing the
   Use flash and fancy drop down menus very carefully.
    Ideally avoid them if possible.
          Some Web UI Design guidelines

   Design in a style that will appeal to your audiences taste
   Test the User Interface
   Maintain consistency in the visual design
   Present your message effectively and avoid clutter
   Draw attention to new or greatly changed content
   Avoid requiring the users to scroll too much to see to content
   Use the right web widgets for the appropriate kind of task
           Resources for design guidelines

Apple User Interface guidelines
 http://developer.apple.com/documentation/UserExperience/Concept

IBM web design guidelines
    http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/572

Microsoft guidelines

   http://msdn.microsoft.com/library/default.asp?url=/library/en-

   So where is the future of Web UI application heading.
    Here is an interesting Web UI application which combines
    the physical and the virtual web world

   Persuasive technology


   Web UI design is about designing for the user, designers
    forget this
   While using web widgets give importance to consistency
    in labeling and structure
   Adhere to a logical order while designing forms and don’t
    jumble up between two types of widgets!!!
   2 key things Users Users Users !!!!!!!!!!
                  Test Test Test !!!!!!!!!!!!!
   Apple UI guidelines

   Jacob Neilsen’s Alertbox
   Stanford University Persuasive Technology Lab
   GUI History Wikipedia
   Phidgets
   Microsoft Vista Demo

To top