Better Design Built Faster: Using New UI Technologies to Speed Development
-
Upload
goodfriday -
Category
Technology
-
view
4.333 -
download
0
description
Transcript of Better Design Built Faster: Using New UI Technologies to Speed Development
![Page 1: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/1.jpg)
PAGE 1mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
BETTER DESIGN, BUILT FASTERUsing new UI technologies to speed development
mix0603.21.2006
![Page 2: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/2.jpg)
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 3: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/3.jpg)
PAGE 3mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
The first human-computer interfaces were strictly utilitarian.
/ UI TRENDS / THE EARLY YEARS
![Page 4: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/4.jpg)
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 5: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/5.jpg)
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 6: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/6.jpg)
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 7: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/7.jpg)
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 8: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/8.jpg)
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 9: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/9.jpg)
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 10: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/10.jpg)
PAGE 10mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ UI TRENDS / WHAT’S NEXT?
enjoyable
usefulphysical ui
clui
gui
?
intuitive
![Page 11: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/11.jpg)
PAGE 11mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ UI TRENDS / WHERE IS THIS GOING?
?
web
desktop
robust
fragile
flat rich
![Page 12: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/12.jpg)
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 13: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/13.jpg)
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 14: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/14.jpg)
PAGE 14mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / BLOCKBUSTER.COM/ EXAMPLES / WEB / BLOCKBUSTER.COM
![Page 15: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/15.jpg)
PAGE 15mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / TYPICAL PROCESS (SIMPLE)
CSS
PHP
Designer /Developer
ImagesPhotoshop
Text Editor
WebSite
![Page 16: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/16.jpg)
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 17: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/17.jpg)
PAGE 17mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / WIREFRAME
![Page 18: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/18.jpg)
PAGE 18mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
![Page 19: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/19.jpg)
PAGE 19mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / UI SEPARATION WITH CSS
client-side
server-side
web browser
application server
![Page 20: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/20.jpg)
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 21: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/21.jpg)
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 22: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/22.jpg)
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 23: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/23.jpg)
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 24: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/24.jpg)
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 25: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/25.jpg)
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 26: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/26.jpg)
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 27: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/27.jpg)
PAGE 27mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / GENERIC CONTAINER HTML
![Page 28: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/28.jpg)
PAGE 28mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WEB / DEMO/ EXAMPLES / WEB / DEMO
![Page 29: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/29.jpg)
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 30: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/30.jpg)
PAGE 30mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / EXAMPLES / WPF
![Page 31: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/31.jpg)
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 32: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/32.jpg)
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 33: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/33.jpg)
PAGE 33mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / REDLINE DESIGN SPEC
![Page 34: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/34.jpg)
PAGE 34mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / UI SEPARATION WITH XAML
Style
LayoutForm.cs
Program.cs Logic
Application
![Page 35: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/35.jpg)
PAGE 35mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / UI SEPARATION WITH XAML
Style
LayoutWindow.xaml
Window.xaml.cs Logic
Application
![Page 36: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/36.jpg)
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 37: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/37.jpg)
PAGE 37mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / DEMO/ EXAMPLES / WPF / DEMO
![Page 38: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/38.jpg)
PAGE 38mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / DEMO
![Page 39: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/39.jpg)
PAGE 39mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / DEMO
![Page 40: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/40.jpg)
PAGE 40mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ EXAMPLES / WPF / DEMO
![Page 41: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/41.jpg)
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 42: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/42.jpg)
PAGE 42mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
/ CONCLUSIONS/ CONCLUSIONS
![Page 43: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/43.jpg)
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 44: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/44.jpg)
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 45: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/45.jpg)
PAGE 45mix06 / BETTER DESIGN, BUILT FASTER Copyright 2006
QUESTIONS?QUESTIONS?
![Page 46: Better Design Built Faster: Using New UI Technologies to Speed Development](https://reader035.fdocuments.in/reader035/viewer/2022062511/54c544e74a79598e328b45c8/html5/thumbnails/46.jpg)
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