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 2 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! 3 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… 4 History Objective: to get proven technologies 1963 Human Computer Interaction (HCI) 1970 Command Line Interface (CLI) Computer side: User Interface Human side: impact on human (Hewett et al., 2004) Unix: request and response model 1970 Graphical User Interface (GUI) Xerox Palo Alto Research ("wordiQ.com," 2004) Graphical widgets (radio, button, …) Pointing device + keyboard 5 1974 WYSIWYG What You See Is What You Get Dynabook Charles Simonyi @ Xerox PARC Kay and Goldberg Most modern general-purpose GUIs are derived from it Apple (IEEE, 2002) (IEEE, 2002) Commercializing GUI successfully 1983 Lisa with a mouse, icons, and pull down menus 6 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. Web Widgets 1. Hyperlink 2. Button 3. CheckBox 4. File 5. Hidden 6. Radio 7. Text 8. Select 9. Others 8 Basic Concept: Architecture WP3 WP2 Web Application Hyperlink Web Page Standard Browser Operating System HTML Mozilla Windows Can contain many web forms CSS JavaScript Netscape Opera Linux Each web form can contain: button, check, file, hidden, radio, text, select (called basic widget) Mac Others FireFox IExplorer PDA 9 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 10 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> 11 Button CLI request and response model <input type=“button”> General purpose <input type=“submit”> Button = Enter To submit a web form <input type=“reset”> To clear a web form 12 Checkbox State Checked, unchecked, inactive Each checkbox acts independent of others Checkbox + JavaScript Can write business rules to control input logic <input type=checkbox> 13 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> 14 Radio State Single selection among several choices in the same group Use another button to cancel selection On, off Or default value <input type=radio name=theSame> 15 Text <input type=text> <input type=password> User’s input is one line User’s input is a password <textarea rows="5“ cols="20">… </textarea> 16 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> 17 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 18 Others Dialog Box TAB Window Frame / IFrame 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 <IFRAME SRC="" STYLE="display:none"></IFRAME> Toolbar <a href=… ><img src=…></a> 19 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. 20 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) 21 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) 22 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 23 Thank you! Question? 24