1 / 24

Web Page as User Interface: Form and Web Application Research Topic Presentation

Web Page as User Interface: Form and Web Application Research Topic Presentation. Chien-Cheng Chou INF385E Information Architecture and Design l The University of Texas at Austin November 9, 2004. Outline. Introduction History Web Widgets Discussion Conclusion References. Introduction.

albert
Download Presentation

Web Page as User Interface: Form and Web Application Research Topic Presentation

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. Web Page as User Interface:Form and Web ApplicationResearch Topic Presentation Chien-Cheng Chou INF385E Information Architecture and Design l The University of Texas at Austin November 9, 2004

  2. Outline • Introduction • History • Web Widgets • Discussion • Conclusion • References

  3. Introduction • Web Page as User Interface • Definition of User Interface (Mandel, 1997) (IEEE, 2002) • Hardware • Input / output devices • Software • Coordinating programs • User manual • Online help… • Web UI: Using Web Tech. as UI’s Program • More widespread use today • Why? Portability!

  4. Web Page as User Interface • Advantage • High portability • Windows, Mac, Linux, PDA, Cell phone • Easy-to-use • Standard web widgets (9) • Application stability • Traditional vs. Web-based * • Disadvantage • Lack of advanced features • Compound Document (OpenDoc/OLE) * • Drag and drop • Redo and undo • Auto page break in print preview • Solution: various HTML extensions, but…

  5. History • Objective: to get proven technologies • 1963 Human Computer Interaction (HCI) • Computer side: User Interface • Human side: impact on human (Hewett et al., 2004) • 1970 Command Line Interface (CLI) • Unix: request and response model • 1970 Graphical User Interface (GUI) • Xerox Palo Alto Research("wordiQ.com," 2004) • Graphical widgets (radio, button, …) • Pointing device + keyboard

  6. 1974 WYSIWYG • What You See Is What You Get • Charles Simonyi @ Xerox PARC • Dynabook (IEEE, 2002) • Kay and Goldberg • Most modern general-purpose GUIs are derived from it • Apple (IEEE, 2002) • Commercializing GUI successfully • 1983 Lisa with a mouse, icons, and pull down menus

  7. Apple’s Lisa (in 1984 January, the Macintosh is unveiled with a publicity campaign) Xerox PARC’s Dynabook is based on Smalltalk, employs icons, graphics, and a mouse.

  8. 1. Hyperlink 2. Button 3. CheckBox 4. File 5. Hidden 6. Radio 7. Text 8. Select 9. Others Web Widgets

  9. Basic Concept: Architecture WP3 WP2 Each web form can contain: button, check, file, hidden, radio, text, select (called basic widget) Hyperlink Web Application Can contain many web forms Web Page HTML CSS JavaScript Others Standard Mozilla Netscape Opera FireFox IExplorer Browser Operating System Windows Linux Mac PDA

  10. Basic Concept: Browser • Strategy • to create another layer between the platform and application • Special GUI widgets • its own set of controls • Non-IE: Tabbed Browsing • Favorites / Bookmarks

  11. Hyperlink • The significant role of the hyperlink in web • depending on the hyperlink structure of the application, navigation within a web user interface displays web pages in an application hierarchy one page at a time in a linear or non-linear fashion within a single GUI window (Torres, 2002) • Example • DialogBox <a href target=“_new”> • Toolbar <a href=… ><img src=…></a>

  12. Button • CLI request and response model • Button = Enter • <input type=“button”> • General purpose • <input type=“submit”> • To submit a web form • <input type=“reset”> • To clear a web form

  13. Checkbox • State • Checked, unchecked, inactive • Each checkbox acts independent of others • Checkbox + JavaScript • Can write business rules to control input logic • <input type=checkbox>

  14. File • To upload a file to the web server <input type=file> Hidden • Temporary variables in web programming • To record a web page’s state • <input type=hidden>

  15. Radio • State • On, off • Single selection among several choices in the same group • Use another button to cancel selection • Or default value • <input type=radio name=theSame>

  16. Text • <input type=text> • User’s input is one line • <input type=password> • User’s input is a password • <textarea rows="5“ cols="20">… </textarea>

  17. Select • Single select (ComboBox) • For too many Radio(s), save space • <select size=1><option>test1</select> • Multi-select • Checkbox • Ctrl + left click • <select size=2><option>test1 <option>test2</select>

  18. Menu • No basic widget to show a menu inside a web page • Must use JavaScript to create it • Example • Again, portability problem! • A variation of hyperlink + table

  19. Others • Dialog Box • Open a new window to force user to answer a question • window.open(url, “_new”, "left=200 top=100 width=250 height=180 resizable=no status=no") • Ex: Calendar • TAB Window • Frame / IFrame • <IFRAME SRC="" STYLE="display:none"></IFRAME> • Toolbar <a href=… ><img src=…></a>

  20. Discusion • The more portable, the less advanced GUI features • From an information architect’s perspective • The most difficult problem does not lie in how to overcome the unavailability of web GUI widgets • The problem would be how to structure the web application’s all functions and corresponding requesting and responding web pages.

  21. Discussion • Integration, Integration, Integration… • Should pay attention to users' existing or legacy web applications and try to design the new web site in compatible to their overall architecture • Next generation of Web UI • HTML evolving into pure XML language • Many new technologies based on XML • SVG: Scalable Vector Graphics • XUL: XML User-Interface language • SMIL: Synchronized Multimedia Integration Language (extension of XHTML)

  22. Conclusion • Web UI advantage / disadvantage • GUI history • Each web widget design and limitation • If you work for a traditional software company that wants to sell a web application, be aware that installable software does not quickly convert into a web application. Nor can it always be converted into a successful web application. Your company must adopt web principles for design, development, testing, security, IT, marketing, sales, billing, documentation, support, and training(van Duyne et al., 2003, p.173)

  23. References • Hewett, Baecker, Card, Carey, Gasen, Mantei, Perlman, Strong, & Verplank. (2004). ACM SIGCHI Curricula for Human-Computer Interaction. Retrieved October 25, 2004, from http://sigchi.org/cdg/cdg2.html • IEEE Computer Society: History of Computing. (2002). Retrieved October 25, 2004, from http://www.computer.org/history/index.html • Mandel, T. (1997). The Elements of User Interface Design. Canada: John Wiley & Sons, Inc. • Press, L. (1992). Dynabook Revisited Portable Computers Past, Present and Future. Communications of the ACM, 35(3), 25-32. • Torres, R. J. (2002). Practitioner's Handbook for User Interface Design and Development. NJ: Prentice-Hall, Inc. • van Duyne, D. K., Landay, J. A., & Hong, J. I. (2003). The Design of Sites. Boston, MA: Addison-Wesley. • wordiQ.com. (2004). Retrieved October 25, 2004, from http://www.wordiq.com

  24. Thank you! Question?

More Related