Web Page as User Interface: Form and Web Application 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 Slide 2
2 Outline Introduction History Web Widgets Discussion Conclusion
References Slide 3 3 Introduction Web Page as User Interface
Definition of User Interface Definition of User Interface (Mandel,
1997) (IEEE, 2002) Hardware Hardware Input / output devices
Software Software Coordinating programs User manual Online help Web
UI: Using Web Tech. as UIs Program Web UI: Using Web Tech. as UIs
Program More widespread use today More widespread use today Why?
Portability! Why? Portability! Slide 4 4 Web Page as User Interface
Advantage High portability High portability Windows, Mac, Linux,
PDA, Cell phone Windows, Mac, Linux, PDA, Cell phone Easy-to-use
Easy-to-use Standard web widgets (9) Standard web widgets (9)
Application stability Application stability Traditional vs.
Web-based * Traditional vs. Web-based * Disadvantage Lack of
advanced features Lack of advanced features Compound Document
(OpenDoc/OLE) * Compound Document (OpenDoc/OLE) * Drag and drop
Drag and drop Redo and undo Redo and undo Auto page break in print
preview Auto page break in print preview Solution: various HTML
extensions, but Solution: various HTML extensions, but Slide 5 5
History Objective: to get proven technologies 1963 Human Computer
Interaction (HCI) Computer side: User Interface Computer side: User
Interface Human side: impact on human Human side: impact on human
(Hewett et al., 2004) 1970 Command Line Interface (CLI) Unix:
request and response model Unix: request and response model 1970
Graphical User Interface (GUI) Xerox Palo Alto Research Xerox Palo
Alto Research ("wordiQ.com," 2004) Graphical widgets (radio,
button, ) Graphical widgets (radio, button, ) Pointing device +
keyboard Pointing device + keyboard Slide 6 6 1974 WYSIWYG What You
See Is What You Get Charles Simonyi @ Xerox PARC Charles Simonyi @
Xerox PARC Dynabook Dynabook (IEEE, 2002) Kay and Goldberg Kay and
Goldberg Most modern general-purpose GUIs are derived from it Most
modern general-purpose GUIs are derived from it Apple Apple (IEEE,
2002) Commercializing GUI successfully Commercializing GUI
successfully 1983 Lisa with a mouse, icons, and pull down menus
1983 Lisa with a mouse, icons, and pull down menus Slide 7 Apples
Lisa (in 1984 January, the Macintosh is unveiled with a publicity
campaign) Apples Lisa (in 1984 January, the Macintosh is unveiled
with a publicity campaign) Xerox PARCs Dynabook is based on
Smalltalk, employs icons, graphics, and a mouse. Slide 8 8 Web
Widgets 1. Hyperlink 2. Button 3. CheckBox 4. File 5. Hidden 6.
Radio 7. Text 8. Select 9. Others Slide 9 9 Basic Concept:
Architecture Operating System Browser Standard Web Application WP3
Web Page WP2 Hyperlink Can contain many web forms Each web form can
contain: button, check, file, hidden, radio, text, select (called
basic widget) HTMLCSSJavaScriptOthers
MozillaNetscapeOperaFireFoxIExplorer WindowsLinuxMacPDA Slide 10 10
Basic Concept: Browser Strategy to create another layer between the
platform and application to create another layer between the
platform and application Special GUI widgets its own set of
controls its own set of controls Non-IE: Tabbed Browsing Non-IE:
Tabbed Browsing Favorites / Bookmarks Favorites / Bookmarks Slide
11 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) 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 DialogBox Toolbar
Toolbar Slide 12 12 Button CLI request and response model Button =
Enter Button = Enter General purpose General purpose To submit a
web form To submit a web form To clear a web form To clear a web
form Slide 13 13 Checkbox State Checked, unchecked, inactive
Checked, unchecked, inactive Each checkbox acts independent of
others Checkbox + JavaScript Can write business rules to control
input logic Can write business rules to control input logic Slide
14 14 File To upload a file to the web server Hidden Temporary
variables in web programming To record a web pages state Slide 15
15 Radio State On, off On, off Single selection among several
choices in the same group Use another button to cancel selection Or
default value Or default value Slide 16 cols="20">"> 16 Text
Users input is one line Users input is one line Users input is a
password Users input is a password cols="20"> Slide 17 17 Select
Single select (ComboBox) For too many Radio(s), save space For too
many Radio(s), save space test1 test1 Multi-select Checkbox
Checkbox Ctrl + left click Ctrl + left click test1 test2 test1
test2 Slide 18 18 Menu No basic widget to show a menu inside a web
page Must use JavaScript to create it Example Example Again,
portability problem! Again, portability problem! A variation of
hyperlink + table A variation of hyperlink + table Slide 19 19
Others Dialog Box Open a new window to force user to answer a
question 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") window.open(url, _new, "left=200 top=100
width=250 height=180 resizable=no status=no") Ex: Calendar Ex:
CalendarCalendar TAB Window TAB Window TAB Window Frame / IFrame
Toolbar Toolbar Slide 20 20 Discusion The more portable, the less
advanced GUI features From an information architects perspective
The most difficult problem does not lie in how to overcome the
unavailability of web GUI widgets 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 applications all
functions and corresponding requesting and responding web pages.
The problem would be how to structure the web applications all
functions and corresponding requesting and responding web pages.
Slide 21 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 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 HTML evolving into pure XML language Many
new technologies based on XML Many new technologies based on XML
SVG: Scalable Vector Graphics SVG: Scalable Vector Graphics XUL:
XML User-Interface language XUL: XML User-Interface language SMIL:
Synchronized Multimedia Integration Language (extension of XHTML)
SMIL: Synchronized Multimedia Integration Language (extension of
XHTML) Slide 22 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) Slide 23 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 Slide 24 24 Thank you!
Question?
