PPT
-
Upload
sampetruda -
Category
Documents
-
view
803 -
download
0
Transcript of PPT
PAGE 1mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
BETTER DESIGN, BUILT FASTERUsing new UI technologies to speed development
mix0603.21.2006
PAGE 2mix06 / BETTER DESIGN, BUILT FASTER Copyright 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
Nelan SchwartzTechnology Manager
frog designAustin, Texas
PAGE 3mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
The first human-computer interfaces were strictly utilitarian.
/ UI TRENDS / THE EARLY YEARS
PAGE 4mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ 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
PAGE 5mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ UI TRENDS / DAWN OF THE GUI
Graphical User Interface (GUI)-based operating systems strived for system-wide consistency.
/ UI TRENDS / DAWN OF THE GUI
PAGE 6mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
..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
PAGE 7mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ UI TRENDS / SYSTEM LEVEL USER EXPERIENCE
Operating systems respond to user demand for compelling user experience.
/ UI TRENDS / USER EXPERIENCE
PAGE 8mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
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
PAGE 9mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
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
PAGE 10mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ UI TRENDS / WHAT’S NEXT?
enjoyable
usefulphysical ui
clui
gui
?
intuitive
PAGE 11mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ UI TRENDS / WHERE IS THIS GOING?
?
web
desktop
robust
fragile
flat rich
PAGE 12mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ 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”
PAGE 13mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ 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”
PAGE 14mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / BLOCKBUSTER.COM/ EXAMPLES / WEB / BLOCKBUSTER.COM
PAGE 15mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / TYPICAL PROCESS (SIMPLE)
CSS
PHP
Designer /Developer
ImagesPhotoshop
Text Editor
WebSite
PAGE 16mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ 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
PAGE 17mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / WIREFRAME
PAGE 18mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
PAGE 19mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
web browser
application server
PAGE 20mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
ASP/ C# / Java / JSP / etc
web browser
application server
PAGE 21mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
<HTML>
ASP/ C# / Java / JSP / etc
web browser
application server
PAGE 22mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
Style
Layout
Data
ASP/ C# / Java / JSP / etc
web browser
application server
<HTML>
PAGE 23mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
<HTML>
CSS
ASP/ C# / Java / JSP / etc
web browser
application server
PAGE 24mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
<HTML> Layout
Data
CSS Style
ASP/ C# / Java / JSP / etc
web browser
application server
PAGE 25mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
<HTML>
CSS
ASP/ C# / Java / JSP / etc
web browser
application server
PAGE 26mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
Style
Layout
ASP/ C# / Java / JSP / etc
web browser
application server
<HTML>
CSS
Data
PAGE 27mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / GENERIC CONTAINER HTML
PAGE 28mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / DEMO/ EXAMPLES / WEB / DEMO
PAGE 29mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ 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
PAGE 30mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / EXAMPLES / WPF
PAGE 31mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / TYPICAL SOFTWARE PROCESS
Architect
Developer
FunctionalSpecification
Marketing
MarketingRequirements
Document(MRD)
C++Code
Visio / UMLWord
App
Analyst
Visual StudioWord
SoftwareArchitecture
PAGE 32mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / TYPICAL SOFTWARE PROCESS + DESIGN
Architect
Developer
FunctionalSpecification
Marketing
MarketingRequirements
Document(MRD)
C++Code
Visio / UMLWord
App
Analyst
Visual StudioWord
SoftwareArchitecture
Designer Photoshop UI Design
PAGE 33mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / REDLINE DESIGN SPEC
PAGE 34mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / UI SEPARATION WITH XAML
Style
LayoutForm.cs
Program.cs Logic
Application
PAGE 35mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / UI SEPARATION WITH XAML
Style
LayoutWindow.xaml
Window.xaml.cs Logic
Application
PAGE 36mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / UI SEPARATION WITH XAML
Style
Window.xaml
Window.xaml.cs Logic
Application
Styles.xaml
Layout
PAGE 37mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / DEMO/ EXAMPLES / WPF / DEMO
PAGE 38mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / DEMO
PAGE 39mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / DEMO
PAGE 40mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / DEMO
PAGE 41mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / REVISED SOFTWARE PROCESS
Architect
FunctionalSpecification
Marketing
MarketingRequirements
Document(MRD)
Visio / UMLWord
App
Analyst
Word
SoftwareArchitecture
C#
Designer
“Sparkle”
Developer
XAML
Visual Studio+ “Cider”
PAGE 42mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ CONCLUSIONS/ CONCLUSIONS
PAGE 43mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ 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
PAGE 44mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ 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?
PAGE 45mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
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