better design built faster: using new ui technologies to speed development

mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006

BETTER DESIGN, BUILT FASTERUsing new UI technologies to speed development

mix0603.21.2006


AGENDA / INTRODUCTIONS

Agenda UI Technology Trends Web Example

Typical Process Demo Revised Process

WPF Example Typical Process Demo Revised Process

Conclusions

Mason HaleChief Technologist

frog designAustin, Texas

[email protected]

Nelan SchwartzTechnology Manager

frog designAustin, Texas

[email protected]


The first human-computer interfaces were strictly utilitarian.

/ UI TRENDS / THE EARLY YEARS


/ UI TRENDS / TEXT AND EARLY GRAPHICAL INTERFACES

The next wave of computer interfaces focused on increasing productivity for expert users.

/ UI TRENDS / THE COMMAND LINE


/ UI TRENDS / DAWN OF THE GUI

Graphical User Interface (GUI)-based operating systems strived for system-wide consistency.

/ UI TRENDS / DAWN OF THE GUI


..then the Web happened.

In the evolutionary history of software user interfaces, the advent of the World Wide Web began a Cambrian explosion of UI diversity.

Certain conventions such as: - the shopping cart, - tabs, - navigation bars, and - search boxescatch on and are nearly universally adopted.

/ UI TRENDS / THE WEB


/ UI TRENDS / SYSTEM LEVEL USER EXPERIENCE

Operating systems respond to user demand for compelling user experience.

/ UI TRENDS / USER EXPERIENCE


While the web was influencing operating system and application user interfaces, web applications were becoming more robust and desktop-like.

/ UI TRENDS / BLURRING THE WEB/DESKTOP BOUNDARY


As web and desktop technologies become more intermingled, the distinction between “web app” and “desktop app” is becoming less and less clear.

- iTunes Music store- Google Desktop Search- Dashboard Widgets built with web technologies

/ UI TRENDS / WEB/DESKTOP CONVERGENCE


/ UI TRENDS / WHAT’S NEXT?

enjoyable

usefulphysical ui

clui

gui

?

intuitive


/ UI TRENDS / WHERE IS THIS GOING?

?

web

desktop

robust

fragile

flat rich


/ UI TRENDS / LAYERS, LANGUAGES & TOOLS

User Interface Logic Tools

Win32 / MFC C++ C++ Visual Studio

.NET WinForms C#, VB.NET, J#(any .NET)

C#, VB.NET, J#(any .NET)

Visual Studio

Java Swing / SWT Java Java Any Java IDE

Macromedia Flash none or ActionScript ActionScript Flash

AJAX / DHTML HTML, XHTMLCSS, XSL

JavaScript Various

XUL XUL, CSS JavaScript Various

FLEX MXML, CSS ActionScript 2.0 FLEX Builder

OpenLaszlo LZX JavaScript Laszlo IDEplug-in

WPF (Avalon) XAML C#, VB.NET (any .NET)

Visual Studio“Sparkle” / “Cider”


/ EXAMPLES / WEB / BLOCKBUSTER.COM/ EXAMPLES / WEB / BLOCKBUSTER.COM


/ EXAMPLES / WEB / TYPICAL PROCESS (SIMPLE)

CSS

PHP

Designer /Developer

ImagesPhotoshop

Text Editor

WebSite


/ EXAMPLES / WEB / TYPICAL PROCESS (COMPLEX)

Designer

Developer

VisualDesign

(Comps) HTML

Design Analyst

Wire-frames

Sitemap(IA)

CSS

Design Tech

JAVAPhotoshop

Eclipse

Visio / OmniGraffle Text Editor

WebSite


/ EXAMPLES / WEB / WIREFRAME


/ EXAMPLES / WEB / UI SEPARATION WITH CSS

client-side

server-side



client-side

server-side

web browser

application server



client-side

server-side

ASP/ C# / Java / JSP / etc

web browser

application server



client-side

server-side

<HTML>


web browser

application server



client-side

server-side

Style

Layout

Data


web browser

application server

<HTML>



client-side

server-side

<HTML>

CSS


web browser

application server



client-side

server-side

<HTML> Layout

Data

CSS Style


web browser

application server



client-side

server-side

<HTML>

CSS


web browser

application server



client-side

server-side

Style

Layout


web browser

application server

<HTML>

CSS

Data


/ EXAMPLES / WEB / GENERIC CONTAINER HTML


/ EXAMPLES / WEB / DEMO/ EXAMPLES / WEB / DEMO


/ EXAMPLES / WEB / REVISED PROCESS

Designer

Developer

VisualDesign

(Comps)

Design Analyst

Wire-frames

Sitemap(IA)

CSS

Design Tech

JAVA

Photoshop

Eclipse

Visio / OmniGraffle Text Editor

WebSite

Design Tech

Text Editor

HTML


/ EXAMPLES / WPF / EXAMPLES / WPF


/ EXAMPLES / WPF / TYPICAL SOFTWARE PROCESS

Architect

Developer

FunctionalSpecification

Marketing

MarketingRequirements

Document(MRD)

C++Code

Visio / UMLWord

App

Analyst

Visual StudioWord

SoftwareArchitecture


/ EXAMPLES / WPF / TYPICAL SOFTWARE PROCESS + DESIGN

Architect

Developer


Marketing


Document(MRD)

C++Code

Visio / UMLWord

App

Analyst

Visual StudioWord


Designer Photoshop UI Design


/ EXAMPLES / WPF / REDLINE DESIGN SPEC


/ EXAMPLES / WPF / UI SEPARATION WITH XAML

Style

LayoutForm.cs

Program.cs Logic

Application



Style

LayoutWindow.xaml

Window.xaml.cs Logic

Application



Style

Window.xaml

Window.xaml.cs Logic

Application

Styles.xaml

Layout


/ EXAMPLES / WPF / DEMO/ EXAMPLES / WPF / DEMO


/ EXAMPLES / WPF / DEMO


/ EXAMPLES / WPF / REVISED SOFTWARE PROCESS

Architect


Marketing


Document(MRD)

Visio / UMLWord

App

Analyst

Word


C#

Designer

“Sparkle”

Developer

XAML

Visual Studio+ “Cider”


/ CONCLUSIONS/ CONCLUSIONS


/ CONCLUSIONS

Translation = Information Loss

Information Loss = Slower Process and Inferior ResultsGood: Enable designers to work directly in the mediumBetter: Designers and developers working at the same time with the

same files

Better design tools = better designA text editor is not a good visual design toolPhotoshop is not a good interaction design tool

Going with the flow is easier than swimming upstreamXAML was designed to build applications and it feels like itHTML was designed to build documents and it feels like it

Translation = Information Loss

Information Loss = Slower Process and Inferior ResultsGood: Enable designers to work directly in the mediumBetter: Designers and developers working at the same time with the

same files

Better design tools = better designA text editor is not a good visual design toolPhotoshop is not a good interaction design tool

Going with the flow is easier than swimming upstreamXAML was designed to build applications and it feels like itHTML was designed to build documents and it feels like it


/ CONCLUSIONS

So what does this mean for the Web?

AJAX shows potential, but…

too much of AJAX development is hacking around browser limitations and incompatibilities

Extensions to the standards are needed to take web-app development to the next level

<canvas> tag looks promising

Need better visual and interaction design tools for the webWhy are we still writing HTML and CSS by hand?

What do you think?

So what does this mean for the Web?

AJAX shows potential, but…

too much of AJAX development is hacking around browser limitations and incompatibilities

Extensions to the standards are needed to take web-app development to the next level

<canvas> tag looks promising

Need better visual and interaction design tools for the webWhy are we still writing HTML and CSS by hand?

What do you think?


QUESTIONS?QUESTIONS?

Session EvaluationsSession Evaluations

We value your feedback, so please submit an We value your feedback, so please submit an online evaluation for each session you attend!online evaluation for each session you attend!

To make it worth your while, To make it worth your while, we pick one evaluation from we pick one evaluation from each of the ten session each of the ten session timeslots. If we pick your timeslots. If we pick your eval, you will be eligible to eval, you will be eligible to win a Creative win a Creative Zen MicroPhotoZen MicroPhoto