User Interface Controls on Web Page

1
User Interface Controls on Web Page

• Irena Zakevic
• Information Architecture
• April 3, 2003

2
Contents

• History of HTML and Web User Interface
• Types of Web User Interface Controls
• Guidelines for Using Web User Interface Controls
• Latest Developments in Web User Interface
• References

3
History of HTML and Web User Interface

• 1990 - HTML was born
• 1995 - HTML 2.0 specification
• First direct manipulation interface
• 1970s user interface research at Xerox PARC
  (Palo Alto Research Center)
• HTML 3.0
• Java and JavaScript
• ActiveX controls
• DHTML

4
Types of Web User Interface Controls

• Text Input Area
• Push Button
• Checkbox
• Radio Button
• List Box
• Tree Control
• Scroll Bars

5
Text Input Area

• Text input area allows the user to input text
  text area might already contain default text

6
Push Button

• Push button provides a way for the user to
  indicate a particular action (by pushing the
  button)

7
Checkbox

• Checkbox represents a value that can be either
  true (checked) or false (unchecked)

8
Radio Button

• Radio button allows the user to make a selection
  and select only one of many values from the group

9
List Box

• List box allows the user to make a selection from
  the list selection can be single or multiple

10
Tree Control

• Tree control allows the user to navigate
  hierarchical structure and select one of elements
  in that structure

11
Scroll Bars

• Scroll bars allow user to select one value from a
  range of values

12
Exotic Hyperbolic Tree Control

• Hyperbolic tree control provides navigational
  capabilities in huge hierarchical structures

13
Guidelines for Using Web User Interface Controls

• In general
• use the same type of user interface control for
  common types of input
• ensure that each type of control looks and
  behaves the same everywhere it is used
• provide the same messages and error recovery
  mechanisms for incorrect or incomplete data.
  

14
Guidelines for Using Web User Interface Controls
(cont.)

• Use checkboxes for no more than seven choices if
  more than seven choices, use list box
• Use radio button when only single selection is
  allowed
• Set the most meaningful value for the text input
  field as a default

15
Latest Developments in Web User Interface

• ASP.NET and .NET by Microsoft
• Combination of XML and XSLT to render pages
• Flash plug-in by Macromedia

16
References

• IBM Corporation, Common User Access Advanced
  Interface Design Guide. IBM, 1989 (Part No.
  SC26-4582)
• Daniel W. Connolly, Tim Berners-Lee (1995),
  Hypertext Markup Language. Retrieved February 19,
  2003, from World Wide Web Consortium web site
  http//www.w3.org/MarkUp/1995-archive/html-spec.ht
  ml
• Dave Raggett (1997), HTML 3.2 Reference
  Specification. Retrieved February 19, 2003, from
  World Wide Web Consortium web site
  http//w3.org/TR/REC-html32
• Dave Raggett, Arnaud Le Hors, Ian Jacobs (1998),
  HTML 4.0 Specification. Retrieved February 19,
  2003, from World Wide Web Consortium web site
  http//www.w3.org/TR/1998/REC-html40-19980424/

17
References (cont.)

• Tim Berners-Lee (2003), A Short History of Web
  Development. Retrieved February 19, 2003, from
  World Wide Web Consortium web site
  http//www.w3.org/People/Berners-Lee/ShortHistory.
  html
• Sun Microsystems Corporation, Sketchpad The
  First Interactive Computer Graphics Ph.D. Thesis,
  1963-Mass. Institute of Technology. Retrieved
  February 28,2003 from Sun Microsystems web site
  http//www.sun.com/96710/feature3/sketchpad.html
• Palo Alto Reseach Center Inc.,PARC History.
  Retrieved February 28, 2003, from PARC web site
  http//www.parc.xerox.com/company/history