May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development...

May 5, 2006 // Andy LaMora

CONFIDENTIAL Copyright 2006, TopCoder, Inc.

Next Generation Development

New Paradigms in User Interfaces



“All crises begin with the blurring of one paradigm and the consequent loosening of the rules for normal research”. -T.S. Kuhn

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future

[ ] AGENDA


05.05.2006

» UI: History Channel Overview» UI through the times» GUIs & the Web Impact» Stalwart Soldiers» The New Paradigm

» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future

[ ] AGENDA


05.05.2006


[ ] Overview :: UI Through the Times05.05.2006

UI Shifts Corresponding to Increased User Base

1960s: Punch Cards

1970s: Command Line

1980s: GUI

1990s+: Web

? Next ?



1960s: Punch Cards

1970s: Command Line

1980s: GUI

1990s+: Web

? Next ?

But is the Browser really an advance in user interface design?

Let’s look at what was going on before NCSA Mosaic changed it all…



» GUI Advances» Desktop Paradigm

» Trash Bin» Tabs» Menu Bars

» Interactivity» Haptic Devices» 3D Displays

PARC Cone Tree, 1991

Robertson, Mackinlay & CardDemonstrating a trend towards rich, real-time interaction.


[ ] Overview :: GUIs & Web Impact05.05.2006

Form

Form

Web

Server

Punch

Card

Ticker

Mainframe

The user fills out a form, sends it to a processor, and patiently sips coffee awaiting the results.

What does that remind us of?

» Many Efforts Continued…» Applets» Flash» Web Start

» But:» All require new run-times» Lack tight browser integration» Require learning new technologies


[ ] Overview :: Soldiers05.05.2006


[ ] Overview :: The New Paradigm05.05.2006

Asynchronous JavaScript + XML

AJAX

» Browser is the run-time.» Has access to all browser elements/functions.» NO new technologies required.» Frees us from requirement to submit entire page.

» UI: History Channel Overview» The New Paradigm: Ajax

» Definition» Architecture» Examples

» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future

[ ] AGENDA


05.05.2006


[ ] The New Paradigm: Ajax :: Definition05.05.2006

Asynchronous JavaScript + XML

» Defines an Approach:» Standards-based presentation (CSS, XHTML)» Dynamic Display/Interaction via DOM» Data manipulation with XSLT» Asynchronous data/code retrieval » Bound in JavaScript (ECMAScript)

AJAX is not, itself, a new technology.

AJAX is a term that identifies a method to load and manipulate data from a server in a web browser, without reloading the entire page.


[ ] The New Paradigm: Ajax :: Definition05.05.2006

“All crises begin with the blurring of one paradigm and the consequent loosening of the rules for normal research. “ -T.S. Kuhn


[ ] The New Paradigm: Ajax :: Architecture05.05.2006

Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005

Ajax Engineis loaded into the

browser

Engine intercepts user events and requests

Engine performs:• Data Validation• Interface Changes• Server Requests

http://www.adaptivepath.com/images/publications/essays/ajax-fig1.png




Can also forward new code, and

serialized objects.





No new technologies; instead, a new way of using them.





In the “old” method, we fire off a request, and lock while waiting for the response.

(Users became used to waiting)




AJAX decouples the request from the response.

(No more waiting; the Engine works in the “background”)


[ ] The New Paradigm: Ajax :: Some Examples05.05.2006

» Ajax Examples» Google Maps» Google Suggest» MyYahoo» AOL A9» Zillow.com» DesignBais

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management

» Blurred Boundaries» MVC: Help from an old friend» Design Patterns: Control at last

» Design: Return of the Lost Art» State of the Art» Future

[ ] AGENDA


05.05.2006

» Blending Roles?» Functionality now in JavaScript» Who codes the JavaScript?

» Designers?» Middleware Developers?


[ ] Worries In Management: Blurred Boundaries05.05.2006

Consider an Autocomplete Example *…

* Inspired by Thomas Fuch’s(?) Flash-based demonstration:

http://www.phppatterns.com/stuff/latency.html



Ajax Autocomplete

>Start typing in a name:



Ajax Autocomplete


A

Our Ajax Engine is triggered by the key_up event, and sends a request to the server to filter the name list on “A”.



Ajax Autocomplete

>Some suggestions are returned and presented:

A

>

Andy Dick

Andy LaMora

Anthony Jefts

Arturo Sandoval

>



Ajax Autocomplete

>Keep typing, suggestions are refined:

An

>

>Andy Dick

Andy LaMora

Anthony Jefts



Ajax Autocomplete


And

>

>Andy Dick

Andy LaMora



Ajax Autocomplete


Andy

>

>Andy Dick

Andy LaMora



Ajax Autocomplete


Andy L

>

>Andy LaMora



Ajax Autocomplete

>That’s the one, so I hit tab to select it.

Andy LaMora

>

>Andy LaMora



Ajax Autocomplete

Great!

But is a real world example? What if our network lags?

Lets try something more realistic:



Ajax Autocomplete


A



Ajax Autocomplete


An

Hmmm…. Our engine is still processing requests, but there are no results. Network must be slow.



Ajax Autocomplete


And

We’ll keep typing.



Ajax Autocomplete


Andy

Still nothing!



Ajax Autocomplete


Andy

Well now something is happening, but…

>

Andy Dick

Andy LaMora

>



Ajax Autocomplete


Andy

??? I’m not typing ??

>

Andy Dick

Andy LaMora

Anthony Jefts

>



Ajax Autocomplete


Andy

What the heck is going on…

>

Andy Dick

Andy LaMora

Anthony Jefts

Arturo Sandoval

>



Ajax Autocomplete

>Now if I hit tab, I get the wrong name:

Andy Dick

>

Andy Dick >



Ajax Autocomplete

What Happened?

Our Ajax Autocomplete module was too naïve. It didn’t know, or forgot to remember:

NETWORK LATENCY VARIES WITH TIME



Ajax Autocomplete

» Three factors introduced error:

» HTTP transport» Rely on Request/Response model

» Asynchronous Communication» Every request is independent» No transaction to bind our request/response pairs

» Network Lag» Our first requests returned last;

» {1,2,3,4} returned {4,3,2,1}» But could have been any order at all.» Latency varies with time!



Ajax Autocomplete

» So, what kind of problem is this anyway?

» User Interface?

» Design?

» Network protocol?

One could assign sequence numbers to the requests, of course. However, there is no “standard” solution as yet.

Ajax introduces some new project management problems, and requires some thought viv. project contributor roles.

» To The Rescue: MVC» Model View Controller in UI» Each GUI Item developed on MVC

» Callback Functions» Element Identifiers


[ ] Worries In Management: MVC05.05.2006

» Raising the Bar on JavaScript Development» Thinking about Roles» Opportunity: Better Code

» Design Patterns» Command Pattern» Observer Pattern

» Attention to Division of Labor» Programmers Program» Designers Design


[ ] Worries In Management: Design Patterns05.05.2006

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art

» Metaphors and Affordances» Example: Control Options» IA Impact

» State of the Art» Future

[ ] AGENDA


05.05.2006

» Metaphors» Usage Model (eg Desktop)» Workflows patterned after model» Icons Indicate Purpose


[ ] Design :: Metaphors & Affordances05.05.2006

» Affordances» Proper use is implied» Subtle employment of familiar cues


[ ] Design :: Example: Control Options05.05.2006

Instructions: Order Your Questions

The Moon is a Planet

Venus is a Comet

Alpha Centauri is a Star

Yes No

Yes No

Yes No

We want to adjust the order that our questions appear in a survey.

(With Ajax, of course)

Our containers can be dragged

around




So, it should be clear to the user what can be done – from the containers alone.

But, is it clear what can be done here?




Provide affordances that indicate function to the user – invite the correct usage.

Provide the containers with

“grips”.




The Point: Web UI designers must think like desktop application designers!

Need Ajax Toolkits/Frame

works to provide these

(TopCoder Opportunity?)

» Impact on Information Architects» Sovereign vs. Page-Based Interaction

Should it behave like a desktop program?Do we need to communicate state?

» Best use of Rich Behavior

Use affordances to suggest next steps.Colors and responsiveness indicate state: OnBlur()

» Mindful of MVC/Labor Divisions


[ ] Design :: IA Impact05.05.2006

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art

» IFrame vs. XMLHTTPRequest » Browser Security» Acceptance

» Future

[ ] AGENDA


05.05.2006

» IFrames» Wide Browser Support» Consistant Code Base» Can be faster for large requests» Can lessen zone problems» Very hard to debug» Back-button support


[ ] State: IFrame vs. XMLHTTPRequest05.05.2006

» XMLHTTPRequest» Limited browser support» Requires ActiveX on IE» Different Code Bases» Faster for small requests» Designed for the purpose» Easier to parse return data

» Browser Security is an Issue» Zones

» IE: Active X Requirements

» Future standards are in flux


05.05.2006

[ ] State: Browser Security

The browser security model prevents us from (easily) referencing servers other than the page source.

IE requires ActiveX for XHR. ActiveX is switched off by default (even though MS invented it).

JSON vs XML? Will MS play along?

» Software Frameworks» Java Server Faces» Atlas (Microsoft)» Ruby On Rails


05.05.2006

[ ] State: Acceptance

» Applications» Google» Yahoo » Internals» ASPs!

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future

» Service Orientated Architecture» Application Service Providers

[ ] AGENDA


05.05.2006



“...though the world does not change with a change of paradigm, the scientist afterwards works in a different world. “

May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development...

Documents

Transcript of May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development...