Web Page as User Interface:Web Page as User Interface:

Form and Web ApplicationForm and Web Application

Research Topic Presentation

Chien-Cheng ChouChien-Cheng Chou

INF385E Information Architecture and Design lINF385E Information Architecture and Design l

The University of Texas at AustinThe University of Texas at Austin

November 9, 2004November 9, 2004

2

OutlineOutline

IntroductionIntroduction HistoryHistory Web WidgetsWeb Widgets DiscussionDiscussion ConclusionConclusion ReferencesReferences

3

IntroductionIntroduction

Web Page as User InterfaceWeb Page as User Interface Definition of User InterfaceDefinition of User Interface (Mandel, 1997) (IEEE, 2002)

HardwareHardware Input / output devicesInput / output devices

SoftwareSoftware Coordinating programsCoordinating programs User manualUser manual Online help…Online help…

Web UI: Using Web Tech. as UI’s ProgramWeb UI: Using Web Tech. as UI’s Program More widespread use todayMore widespread use today

Why? Portability!Why? Portability!

4

Web Page as User InterfaceWeb Page as User Interface AdvantageAdvantage

High portabilityHigh portability Windows, Mac, Linux, PDA, Cell phoneWindows, Mac, Linux, PDA, Cell phone

Easy-to-useEasy-to-use Standard web widgets (9)Standard web widgets (9)

Application stabilityApplication stability Traditional vs. Web-based Traditional vs. Web-based **

DisadvantageDisadvantage Lack of advanced featuresLack of advanced features

Compound Document (OpenDoc/OLE) Compound Document (OpenDoc/OLE) ** Drag and dropDrag and drop Redo and undoRedo and undo Auto page break in print previewAuto page break in print preview Solution: various HTML extensions, but…Solution: various HTML extensions, but…

5

HistoryHistory

Objective: to get proven technologiesObjective: to get proven technologies 1963 Human Computer Interaction (HCI)1963 Human Computer Interaction (HCI)

Computer side: User InterfaceComputer side: User Interface Human side: impact on humanHuman side: impact on human (Hewett et al., 2004)

1970 Command Line Interface (CLI)1970 Command Line Interface (CLI) Unix: request and response modelUnix: request and response model

1970 Graphical User Interface (GUI)1970 Graphical User Interface (GUI) Xerox Palo Alto ResearchXerox Palo Alto Research ("wordiQ.com," 2004)

Graphical widgets (radio, button, …)Graphical widgets (radio, button, …) Pointing device + keyboardPointing device + keyboard

6

1974 WYSIWYG1974 WYSIWYG

What You See Is What You GetWhat You See Is What You Get Charles Simonyi @ Xerox PARCCharles Simonyi @ Xerox PARC

DynabookDynabook (IEEE, 2002)

Kay and GoldbergKay and Goldberg Most modern general-purpose GUIs are dMost modern general-purpose GUIs are d

erived from iterived from it AppleApple (IEEE, 2002)

Commercializing GUI successfullyCommercializing GUI successfully 1983 Lisa with a mouse, icons, and pull d1983 Lisa with a mouse, icons, and pull d

own menusown menus

Apple’s Lisa (in 1984 January, the Apple’s Lisa (in 1984 January, the Macintosh is unveiled with a publicity cMacintosh is unveiled with a publicity campaign)ampaign)

Xerox PARC’s Dynabook is based on SXerox PARC’s Dynabook is based on Smalltalk, employs icons, graphics, and malltalk, employs icons, graphics, and a mouse.a mouse.

8

Web WidgetsWeb Widgets

1. Hyperlink1. Hyperlink 2. Button2. Button 3. CheckBox3. CheckBox 4. File4. File 5. Hidden5. Hidden

6. Radio6. Radio 7. Text7. Text 8. Select8. Select 9. Others9. Others

9

Basic Concept: ArchitectureBasic 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)

HTML CSS JavaScript Others

Mozilla Netscape Opera FireFox IExplorer

Windows Linux Mac PDA

10

Basic Concept: BrowserBasic Concept: Browser

StrategyStrategy to create another layer between the to create another layer between the

platform and applicationplatform and application

Special GUI widgetsSpecial GUI widgets its own set of controlsits own set of controls Non-IE: Tabbed BrowsingNon-IE: Tabbed Browsing Favorites / BookmarksFavorites / Bookmarks

11

HyperlinkHyperlink

The significant role of the hyperlink in The significant role of the hyperlink in webweb depending on the hyperlink structure of thdepending on the hyperlink structure of th

e application, navigation within a web usee application, navigation within a web user interface displays web pages in an applir interface displays web pages in an application hierarchy one page at a time in a lication hierarchy one page at a time in a linear or non-linear fashion within a single near or non-linear fashion within a single GUI windowGUI window (Torres, 2002) (Torres, 2002)

ExampleExample DialogBox <a href target=“_new”>DialogBox <a href target=“_new”> Toolbar <a href=… ><img src=…></a>Toolbar <a href=… ><img src=…></a>

12

ButtonButton

CLI request and response modelCLI request and response model Button = EnterButton = Enter

<input type=“button”><input type=“button”> General purposeGeneral purpose

<input type=“submit”><input type=“submit”> To submit a web formTo submit a web form

<input type=“reset”><input type=“reset”> To clear a web formTo clear a web form

13

CheckboxCheckbox

StateState Checked, unchecked, Checked, unchecked,

inactiveinactive

Each checkbox acts Each checkbox acts independent of othersindependent of others

Checkbox + Checkbox + JavaScriptJavaScript Can write business Can write business

rules to control input rules to control input logiclogic

<input type=checkbox><input type=checkbox>

14

FileFile

To upload a file to the web serverTo upload a file to the web server

<input type=file><input type=file>

HiddenHiddenTemporary variables in web Temporary variables in web

programmingprogrammingTo record a web page’s stateTo record a web page’s state<input type=hidden><input type=hidden>

15

RadioRadio

StateState On, offOn, off

Single selection among several choiceSingle selection among several choices in the same groups in the same group

Use another button to cancel selectionUse another button to cancel selection Or default valueOr default value

<input type=radio name=theSame><input type=radio name=theSame>

16

TextText

<input type=text><input type=text> User’s input is one lineUser’s input is one line

<input type=password><input type=password> User’s input is a passwordUser’s input is a password

<textarea rows="5“<textarea rows="5“

cols="20">…cols="20">…

</textarea></textarea>

17

SelectSelect

Single select (ComboBox)Single select (ComboBox) For too many Radio(s), save spaceFor too many Radio(s), save space <select size=1><option>test1</select><select size=1><option>test1</select>

Multi-selectMulti-select CheckboxCheckbox Ctrl + left clickCtrl + left click <select size=2><option>test1 <option>tes<select size=2><option>test1 <option>tes

t2</select>t2</select>

18

MenuMenu

No basic widget to show a menu inside No basic widget to show a menu inside a web pagea web page

Must use JavaScript to create itMust use JavaScript to create it ExampleExample

Again, portability problem!Again, portability problem! A variation of hyperlink + tableA variation of hyperlink + table

19

OthersOthers

Dialog BoxDialog Box Open a new window to force user to answOpen a new window to force user to answ

er a questioner a question window.open(url, “_new”, "left=200 top=1window.open(url, “_new”, "left=200 top=1

00 width=250 height=180 resizable=no sta00 width=250 height=180 resizable=no status=no")tus=no")

Ex: Ex: CalendarCalendar

TAB WindowTAB Window Frame / IFrameFrame / IFrame

<IFRAME SRC="" STYLE="display:none"></IFRAME><IFRAME SRC="" STYLE="display:none"></IFRAME>

Toolbar <a href=… ><img src=…></a>Toolbar <a href=… ><img src=…></a>

20

DiscusionDiscusion

The more portable, the less advanced The more portable, the less advanced GUI featuresGUI features

From an information architect’s From an information architect’s perspectiveperspective The most difficult problem does not lie in The most difficult problem does not lie in

how to overcome the unavailability of web how to overcome the unavailability of web GUI widgetsGUI widgets

The problem would be how to structure The problem would be how to structure the web application’s all functions and the web application’s all functions and corresponding requesting and responding corresponding requesting and responding web pages.web pages.

21

DiscussionDiscussion

Integration, Integration, Integration…Integration, Integration, Integration… Should pay attention to users' existing or legacy Should pay attention to users' existing or legacy

web applications and try to design the new web web applications and try to design the new web site in compatible to their overall architecturesite in compatible to their overall architecture

Next generation of Web UINext generation of Web UI HTML evolving into pure XML languageHTML evolving into pure XML language Many new technologies based on XMLMany new technologies based on XML

SVG: Scalable Vector GraphicsSVG: Scalable Vector Graphics XUL: XML User-Interface languageXUL: XML User-Interface language SMIL: Synchronized Multimedia Integration SMIL: Synchronized Multimedia Integration

Language (extension of XHTML)Language (extension of XHTML)

22

ConclusionConclusion

Web UI advantage / disadvantageWeb UI advantage / disadvantage GUI historyGUI history Each web widget design and limitationEach web widget design and limitation If you work for a traditional software company tIf you work for a traditional software company t

hat wants to sell a web application, be aware thhat wants to sell a web application, be aware that installable software does not quickly convert at installable software does not quickly convert into a web application. Nor can it always be cointo a web application. Nor can it always be converted into a successful web application. Younverted into a successful web application. Your company must adopt web principles for desigr company must adopt web principles for design, development, testing, security, IT, marketingn, development, testing, security, IT, marketing, sales, billing, documentation, support, and tra, sales, billing, documentation, support, and trainingining (van Duyne et al., 2003, p.173) (van Duyne et al., 2003, p.173)

23

ReferencesReferences

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?Thank you! Question?