Web Page as User Interface:
Download
1 / 24

Web Page as User Interface: Form and Web Application Research Topic Presentation - PowerPoint PPT Presentation


  • 134 Views
  • Updated 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.

Related searches for Web Page as User Interface: Form and Web Application Research Topic Presentation

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 'Web Page as User Interface: Form and Web Application Research Topic Presentation' - 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 l.jpg

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 l.jpg
Outline

  • Introduction

  • History

  • Web Widgets

  • Discussion

  • Conclusion

  • References


Introduction l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

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 l.jpg

1. Hyperlink unveiled with a publicity campaign)

2. Button

3. CheckBox

4. File

5. Hidden

6. Radio

7. Text

8. Select

9. Others

Web Widgets


Basic concept architecture l.jpg
Basic Concept: Architecture unveiled with a publicity campaign)

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 l.jpg
Basic Concept: Browser unveiled with a publicity campaign)

  • 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 l.jpg
Hyperlink unveiled with a publicity campaign)

  • 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 l.jpg
Button unveiled with a publicity campaign)

  • 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 l.jpg
Checkbox unveiled with a publicity campaign)

  • State

    • Checked, unchecked, inactive

  • Each checkbox acts independent of others

  • Checkbox + JavaScript

    • Can write business rules to control input logic

  • <input type=checkbox>


Slide14 l.jpg
File unveiled with a publicity campaign)

  • 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 l.jpg
Radio unveiled with a publicity campaign)

  • 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 l.jpg
Text unveiled with a publicity campaign)

  • <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 l.jpg
Select unveiled with a publicity campaign)

  • 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 l.jpg
Menu unveiled with a publicity campaign)

  • 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 l.jpg
Others unveiled with a publicity campaign)

  • 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 l.jpg
Discusion unveiled with a publicity campaign)

  • 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 l.jpg
Discussion unveiled with a publicity campaign)

  • 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 l.jpg
Conclusion unveiled with a publicity campaign)

  • 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 l.jpg
References unveiled with a publicity campaign)

  • 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


Thank you question l.jpg
Thank you! Question? unveiled with a publicity campaign)