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
HTML was born
HTML 2.0 specification
First direct manipulation interface
1970’s – 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. SC )
Daniel W. Connolly, Tim Berners-Lee (1995), Hypertext Markup Language. Retrieved February 19, 2003, from World Wide Web Consortium web site:
Dave Raggett (1997), HTML 3.2 Reference Specification. Retrieved February 19, 2003, from World Wide Web Consortium web site:
Dave Raggett, Arnaud Le Hors, Ian Jacobs (1998), HTML 4.0 Specification. Retrieved February 19, 2003, from World Wide Web Consortium web site:

17. References (cont.)
Tim Berners-Lee (2003), A Short History of Web Development. Retrieved February 19, 2003, from World Wide Web Consortium web site:
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:
Palo Alto Reseach Center Inc.,PARC History. Retrieved February 28, 2003, from PARC web site: