slide1
Download
Skip this Video
Download Presentation
Web Page as User Interface: Form and Web Application Research Topic Presentation

Loading in 2 Seconds...

play fullscreen
1 / 24

Outline - PowerPoint PPT Presentation


  • 134 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Outline' - albert


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

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

outline
Outline
  • Introduction
  • History
  • Web Widgets
  • Discussion
  • Conclusion
  • References
introduction
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!
web page as user interface
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…
history
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
1974 wysiwyg
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
slide7

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

Web Widgets
basic concept architecture
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

basic concept browser
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
hyperlink
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>
button
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
checkbox
Checkbox
  • State
    • Checked, unchecked, inactive
  • Each checkbox acts independent of others
  • Checkbox + JavaScript
    • Can write business rules to control input logic
  • <input type=checkbox>
slide14
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>
radio
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>
slide16
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>

select
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>
slide18
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
others
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>
discusion
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.
discussion
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)
conclusion
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)
references
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
ad