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

BETTER DESIGN, BUILT FASTER Using new UI technologies to speed development mix 06 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_address] Nelan Schwartz Technology Manager frog design Austin, Texas [email_address]

/ UI TRENDS / THE EARLY YEARS The first human-computer interfaces were strictly utilitarian.

/ UI TRENDS / THE COMMAND LINE / UI TRENDS / TEXT AND EARLY GRAPHICAL INTERFACES The next wave of computer interfaces focused on increasing productivity for expert users.

/ UI TRENDS / DAWN OF THE GUI / UI TRENDS / DAWN OF THE GUI Graphical User Interface (GUI)-based operating systems strived for system-wide consistency.

/ UI TRENDS / THE WEB ..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 / USER EXPERIENCE / UI TRENDS / SYSTEM LEVEL USER EXPERIENCE Operating systems respond to user demand for compelling user experience.

/ UI TRENDS / BLURRING THE WEB/DESKTOP BOUNDARY While the web was influencing operating system and application user interfaces, web applications were becoming more robust and desktop-like.

/ UI TRENDS / WEB/DESKTOP CONVERGENCE

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 / WHAT’S NEXT? enjoyable useful physical ui clui gui ? intuitive

/ UI TRENDS / WHERE IS THIS GOING? ? web desktop robust fragile flat rich

/ UI TRENDS / LAYERS, LANGUAGES & TOOLS Various JavaScript HTML, XHTML CSS, XSL AJAX / DHTML Visual Studio C++ C++ Win32 / MFC Visual Studio C#, VB.NET, J# (any .NET) C#, VB.NET, J# (any .NET) .NET WinForms Visual Studio “Sparkle” / “Cider” C#, VB.NET (any .NET) XAML WPF (Avalon) Laszlo IDE plug-in JavaScript LZX OpenLaszlo FLEX Builder ActionScript 2.0 MXML, CSS FLEX Various JavaScript XUL, CSS XUL Flash ActionScript none or ActionScript Macromedia Flash Any Java IDE Java Java Java Swing / SWT Tools Logic User Interface

/ EXAMPLES / WEB / BLOCKBUSTER.COM

/ EXAMPLES / WEB / TYPICAL PROCESS (SIMPLE) CSS PHP Designer / Developer Images Photoshop Text Editor Web Site

/ EXAMPLES / WEB / TYPICAL PROCESS (COMPLEX) Designer Developer Visual Design (Comps) HTML Design Analyst Wire- frames Sitemap (IA) CSS Design Tech JAVA Photoshop Eclipse Visio / OmniGraffle Text Editor Web Site

/ EXAMPLES / WEB / WIREFRAME

/ EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side

/ EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side web browser application server

/ EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side ASP/ C# / Java / JSP / etc web browser application server

/ EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> ASP/ C# / Java / JSP / etc web browser application server

/ EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side Style Layout Data ASP/ C# / Java / JSP / etc <HTML> web browser application server

/ EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> CSS ASP/ C# / Java / JSP / etc web browser application server

/ EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> Layout Data CSS Style ASP/ C# / Java / JSP / etc web browser application server

/ EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> CSS ASP/ C# / Java / JSP / etc web browser application server

/ EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side Style Layout ASP/ C# / Java / JSP / etc <HTML> CSS Data web browser application server

/ 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 / UML Word App Analyst Visual Studio Word Software Architecture

/ EXAMPLES / WPF / TYPICAL SOFTWARE PROCESS + DESIGN Architect Developer Functional Specification Marketing Marketing Requirements Document (MRD) C++ Code Visio / UML Word App Analyst Visual Studio Word Software Architecture Designer Photoshop UI Design

/ EXAMPLES / WPF / REDLINE DESIGN SPEC

/ EXAMPLES / WPF / UI SEPARATION WITH XAML Style Layout Form.cs Program.cs Logic Application

/ EXAMPLES / WPF / UI SEPARATION WITH XAML Style Layout Window.xaml Window.xaml.cs Logic Application

/ EXAMPLES / WPF / UI SEPARATION WITH XAML 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 / UML Word App Analyst Word Software Architecture C# Designer “ Sparkle” Developer Visual Studio + “Cider” XAML

/ 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