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

mix06

03.21.2006


AGENDA / INTRODUCTIONS

Agenda

UI Technology Trends

Web Example

Typical Process

Demo

Revised Process

WPF Example

Typical Process

Demo

Revised Process

Conclusions

Mason Hale

Chief Technologist

frog design

Austin, Texas

[email protected]

Nelan Schwartz

Technology Manager

frog design

Austin, 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 boxes

catch 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, XHTML

CSS, XSL

JavaScript Various

XUL XUL, CSS JavaScript Various

FLEX MXML, CSS ActionScript 2.0 FLEX Builder

OpenLaszlo LZX JavaScript Laszlo IDE

plug-in

WPF (Avalon) XAML C#, VB.NET

(any .NET)

Visual Studio

“Sparkle” / “Cider”


/ EXAMPLES / WEB / BLOCKBUSTER.COM


/ EXAMPLES / WEB / TYPICAL PROCESS (SIMPLE)

CSS

PHP

Designer /

Developer

ImagesPhotoshop

Text Editor

Web

Site


/ EXAMPLES / WEB / TYPICAL PROCESS (COMPLEX)

Designer

Developer

Visual

Design

(Comps) HTML

Design Analyst

Wire-

frames

Sitemap

(IA)

CSS

Design Tech

JAVAPhotoshop

Eclipse

Visio / OmniGraffle Text Editor

Web

Site


/ 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 / REVISED PROCESS

Designer

Developer

Visual

Design

(Comps)

Design Analyst

Wire-

frames

Sitemap

(IA)CSS

Design Tech

JAVA

Photoshop

Eclipse

Visio / OmniGraffle Text Editor

Web

Site

Design Tech

Text Editor

HTML


/ EXAMPLES / WPF


/ EXAMPLES / WPF / TYPICAL SOFTWARE PROCESS

Architect

Developer

Functional

Specification

Marketing

Marketing

Requirements

Document

(MRD)

C++

Code

Visio / UMLWord

App

Analyst

Visual StudioWord

Software

Architecture


/ EXAMPLES / WPF / TYPICAL SOFTWARE PROCESS + DESIGN

Architect

Developer

Functional

Specification

Marketing

Marketing

Requirements

Document

(MRD)

C++

Code

Visio / UMLWord

App

Analyst

Visual StudioWord

Software

Architecture

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 / REVISED SOFTWARE PROCESS

Architect

Functional

Specification

Marketing

Marketing

Requirements

Document

(MRD)

Visio / UMLWord

App

Analyst

Word

Software

ArchitectureC#

Designer

“Sparkle”

Developer

XAML

Visual Studio

+ “Cider”


/ CONCLUSIONS


/ CONCLUSIONS

Translation = Information Loss

Information Loss = Slower Process and Inferior Results

Good: Enable designers to work directly in the medium

Better: Designers and developers working at the same time with the

same files

Better design tools = better design

A text editor is not a good visual design tool

Photoshop is not a good interaction design tool

Going with the flow is easier than swimming upstream

XAML was designed to build applications and it feels like it

HTML 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 web

Why are we still writing HTML and CSS by hand?

What do you think?


QUESTIONS?

Session Evaluations

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

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

Better Design Built Faster: Using New UI Technologies to Speed Development

Documents

Transcript of Better Design Built Faster: Using New UI Technologies to Speed Development