PPT
Upcoming SlideShare
Loading in...5
×
 

PPT

on

  • 913 views

 

Statistics

Views

Total Views
913
Views on SlideShare
913
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Cvd: would be nice to add a picture of the WordPerfect function key overlay…
  • Need to add Mac OS example here. Important to point out that this is an industry-wide trend, not something particular to Microsoft
  • Trend toward creating separate user interface layer languages. Away from mingling UI with application logic code. Separate language leads to clear, clean separation between layers.
  • Trend toward creating separate user interface layer languages. Away from mingling UI with application logic code. Separate language leads to clear, clean separation between layers.
  • Scaling to bigger problems, results in more specialized roles Design Analyst Designer Design Tech Developer Team members use a variety of tools (in blue) to communicate their ideas. Those ideas are output in a variety of document formats (green). There are several layers of translation going on here: Person -> Tool -> Output (where the limitations of the tools, limit the ideas) Output -> Person (where one interprets the ideas of another, based on the output) At each translation step there is potential for information loss
  • Traditional model: server-side code generates HTML code that is sent to browser. Key themes: opportunities for separation on client-side and server-side Basic client-side separation: using “semantic” markup – HTML that describes the structure of the content, but not the layout of the way it looks. Style is handled separately via CSS. CSS Zen Garden is extreme example of CSS layout and style separation. More advanced: “table-less” CSS layout + XHTML Most advanced: XML + client-side XSL (AJAX) Basic server-side separation: typically makes use server-side includes to provide basic re-use, but UI elements are not full-fledged objects in server logic. More advanced: MVC and similar architecture that split presentation, logic and data into separate, distinct layers. Most advanced: Re-usable control/widget libraries, JSF, JSP tag libraries, .NET controls (.ascx)
  • Traditional model: server-side code generates HTML code that is sent to browser. Key themes: opportunities for separation on client-side and server-side Basic client-side separation: using “semantic” markup – HTML that describes the structure of the content, but not the layout of the way it looks. Style is handled separately via CSS. CSS Zen Garden is extreme example of CSS layout and style separation. More advanced: “table-less” CSS layout + XHTML Most advanced: XML + client-side XSL (AJAX) Basic server-side separation: typically makes use server-side includes to provide basic re-use, but UI elements are not full-fledged objects in server logic. More advanced: MVC and similar architecture that split presentation, logic and data into separate, distinct layers. Most advanced: Re-usable control/widget libraries, JSF, JSP tag libraries, .NET controls (.ascx)
  • Traditional model: server-side code generates HTML code that is sent to browser. Key themes: opportunities for separation on client-side and server-side Basic client-side separation: using “semantic” markup – HTML that describes the structure of the content, but not the layout of the way it looks. Style is handled separately via CSS. CSS Zen Garden is extreme example of CSS layout and style separation. More advanced: “table-less” CSS layout + XHTML Most advanced: XML + client-side XSL (AJAX) Basic server-side separation: typically makes use server-side includes to provide basic re-use, but UI elements are not full-fledged objects in server logic. More advanced: MVC and similar architecture that split presentation, logic and data into separate, distinct layers. Most advanced: Re-usable control/widget libraries, JSF, JSP tag libraries, .NET controls (.ascx)
  • Traditional model: server-side code generates HTML code that is sent to browser. Key themes: opportunities for separation on client-side and server-side Basic client-side separation: using “semantic” markup – HTML that describes the structure of the content, but not the layout of the way it looks. Style is handled separately via CSS. CSS Zen Garden is extreme example of CSS layout and style separation. More advanced: “table-less” CSS layout + XHTML Most advanced: XML + client-side XSL (AJAX) Basic server-side separation: typically makes use server-side includes to provide basic re-use, but UI elements are not full-fledged objects in server logic. More advanced: MVC and similar architecture that split presentation, logic and data into separate, distinct layers. Most advanced: Re-usable control/widget libraries, JSF, JSP tag libraries, .NET controls (.ascx)
  • Traditional model: server-side code generates HTML code that is sent to browser. Key themes: opportunities for separation on client-side and server-side Basic client-side separation: using “semantic” markup – HTML that describes the structure of the content, but not the layout of the way it looks. Style is handled separately via CSS. CSS Zen Garden is extreme example of CSS layout and style separation. More advanced: “table-less” CSS layout + XHTML Most advanced: XML + client-side XSL (AJAX) Basic server-side separation: typically makes use server-side includes to provide basic re-use, but UI elements are not full-fledged objects in server logic. More advanced: MVC and similar architecture that split presentation, logic and data into separate, distinct layers. Most advanced: Re-usable control/widget libraries, JSF, JSP tag libraries, .NET controls (.ascx)
  • Traditional model: server-side code generates HTML code that is sent to browser. Key themes: opportunities for separation on client-side and server-side Basic client-side separation: using “semantic” markup – HTML that describes the structure of the content, but not the layout of the way it looks. Style is handled separately via CSS. CSS Zen Garden is extreme example of CSS layout and style separation. More advanced: “table-less” CSS layout + XHTML Most advanced: XML + client-side XSL (AJAX) Basic server-side separation: typically makes use server-side includes to provide basic re-use, but UI elements are not full-fledged objects in server logic. More advanced: MVC and similar architecture that split presentation, logic and data into separate, distinct layers. Most advanced: Re-usable control/widget libraries, JSF, JSP tag libraries, .NET controls (.ascx)
  • Traditional model: server-side code generates HTML code that is sent to browser. Key themes: opportunities for separation on client-side and server-side Basic client-side separation: using “semantic” markup – HTML that describes the structure of the content, but not the layout of the way it looks. Style is handled separately via CSS. CSS Zen Garden is extreme example of CSS layout and style separation. More advanced: “table-less” CSS layout + XHTML Most advanced: XML + client-side XSL (AJAX) Basic server-side separation: typically makes use server-side includes to provide basic re-use, but UI elements are not full-fledged objects in server logic. More advanced: MVC and similar architecture that split presentation, logic and data into separate, distinct layers. Most advanced: Re-usable control/widget libraries, JSF, JSP tag libraries, .NET controls (.ascx)
  • Traditional model: server-side code generates HTML code that is sent to browser. Key themes: opportunities for separation on client-side and server-side Basic client-side separation: using “semantic” markup – HTML that describes the structure of the content, but not the layout of the way it looks. Style is handled separately via CSS. CSS Zen Garden is extreme example of CSS layout and style separation. More advanced: “table-less” CSS layout + XHTML Most advanced: XML + client-side XSL (AJAX) Basic server-side separation: typically makes use server-side includes to provide basic re-use, but UI elements are not full-fledged objects in server logic. More advanced: MVC and similar architecture that split presentation, logic and data into separate, distinct layers. Most advanced: Re-usable control/widget libraries, JSF, JSP tag libraries, .NET controls (.ascx)
  • Traditional model: server-side code generates HTML code that is sent to browser. Key themes: opportunities for separation on client-side and server-side Basic client-side separation: using “semantic” markup – HTML that describes the structure of the content, but not the layout of the way it looks. Style is handled separately via CSS. CSS Zen Garden is extreme example of CSS layout and style separation. More advanced: “table-less” CSS layout + XHTML Most advanced: XML + client-side XSL (AJAX) Basic server-side separation: typically makes use server-side includes to provide basic re-use, but UI elements are not full-fledged objects in server logic. More advanced: MVC and similar architecture that split presentation, logic and data into separate, distinct layers. Most advanced: Re-usable control/widget libraries, JSF, JSP tag libraries, .NET controls (.ascx)
  • “ Defensive” html structure that provides necessary hooks for extreme layout/style flexibility
  • Pros: HTML based on wireframes (as opposed to comps) results in earlier start for back-end development Enforces cleaner separation of content from presentation HTML and CSS -> benefit: reduced impact of design changes on HTML layer (and down) Shorter overall development time More accessible, search-engine friendly code Cons: Iterating wireframes and HTML in parallel works well Iterating .psd design and CSS in parallel does not – because CSS approach needs to be planned from the start. Relatively minor design changes can result is massive CSS changes Iterating wireframes and visual design in parallel also problematic, because wireframe changes directly impact visual design changes Many translation steps means many opportunities for loss of information and design fidelity The output at each step of the process, save for the final one, is always removed from the end product, is always an abstraction
  • Again, multiple layers of translation, information loss Serial pipeline, not much opportunity for parallelism Everything ends up in code at the end Where’s the UI design? Oh wait, we forgot.
  • Often an after-thought, tacked on at the end AKA “putting lipstick on the pig” Design is represented as static images, and interpreted by Developer who translates into code. This is a big cognitive jump! C++ is not a good visual design tool.
  • WinForms example.
  • WinForms example.
  • WinForms example.
  • Often an after-thought, tacked on at the end AKA “putting lipstick on the pig” Design is represented as static images, and interpreted by Developer who translates into code. This is a big cognitive jump! C++ is not a good visual design tool.

PPT PPT Presentation Transcript

  • 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
  • / 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 / DEMO
  • / EXAMPLES / WPF / DEMO
  • / 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
  • / 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