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