1 / 17

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.

callie
Download Presentation

User Interface Controls on Web Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • 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. 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.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/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

More Related