Transcript User Interface Controls on Web Page

User Interface Controls on
Web Page
Irena Zakevic
Information Architecture
April 3, 2003
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
History of HTML and Web User
Interface








1990 - HTML was born
1995 - 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
Types of Web User Interface
Controls







Text Input Area
Push Button
Checkbox
Radio Button
List Box
Tree Control
Scroll Bars
Text Input Area

Text input area allows the user to input
text; text area might already contain
default text:
Push Button

Push button provides a way for the user
to indicate a particular action (by
“pushing” the button):
Checkbox

Checkbox represents a value that can
be either “true” (checked) or “false”
(unchecked):
Radio Button

Radio button allows the user to make a
selection and select only one of many
values from the group:
List Box

List box allows the user to make a
selection from the list; selection can be
single or multiple:
Tree Control

Tree control allows the user to navigate
hierarchical structure and select one of
elements in that structure:
Scroll Bars

Scroll bars allow user to select one
value from a range of values:
Exotic: Hyperbolic Tree Control

Hyperbolic tree control provides navigational
capabilities in huge hierarchical structures:
Guidelines for Using Web User
Interface Controls

1.
2.
3.
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.
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
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
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/1995archive/html-spec.html
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/REChtml40-19980424/
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/BernersLee/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