Designing Powerful  Web Applications with AJAX &  Other Rich Internet Applications David Malouf & Bill Scott UI 11 Cambrid...
Breakdown of the day <ul><li>Section 1: … from the beginning </li></ul><ul><ul><li>Defining RIAs & RIA Technologies </li><...
What is an RIA? <ul><li>Give credit, where credit is due … </li></ul><ul><ul><li>Macromedia (today Adobe) coined the term ...
What does it mean for us today? <ul><li>Emulating desktop behaviors </li></ul><ul><li>Cinematic Effects </li></ul><ul><li>...
Emulating Desktop Behaviors <ul><li>Drag & Drop </li></ul><ul><li>Menu & Tool bars </li></ul><ul><li>Windows & Wizards </l...
Cinematic Effects: Animation for added context <ul><li>Where am I going? Where was I? </li></ul><ul><li>Action completion ...
What happens to our page? “ There is no [page].” - Neo “ There is no page; only pathways” -- Emily Chang & Max Kiesler of ...
What’s all the fuss about Web 2.0? <ul><li>O’Reilly as trend spotter … </li></ul><ul><li>RIAs is only one component of the...
The Technologies Behind RIAs <ul><li>DHTML + HTML + JavaScript + CSS </li></ul><ul><li>AJAX = DHTML + XML (or JSON) </li><...
Pure Browser: DHMTL & AJAX <ul><li>Nothin’ but browser </li></ul><ul><li>Uses very open technologies </li></ul><ul><li>All...
Visualizing the AJAX effect JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)
Flash (by Adobe) <ul><li>Requires an installed plug-in </li></ul><ul><li>Created to bring animation and  interactivity to ...
Extensions <ul><li>Different browsers have different ways of adding extensions to themselves. </li></ul><ul><li>Behaves as...
Java & ActiveX (with .NET) <ul><li>Installed applications that can …  </li></ul><ul><ul><li>run inside the browser window ...
Backend Frameworks <ul><li>DOJO </li></ul><ul><li>Script.aculo.us </li></ul><ul><li>Rico </li></ul><ul><li>Ruby on Rails <...
Choosing a Technology <ul><li>Deployment Environment </li></ul><ul><ul><li>Local clients </li></ul></ul><ul><ul><li>Enterp...
Deployment <ul><li>Can my users install something? </li></ul><ul><ul><li>Tech savvy enough </li></ul></ul><ul><ul><li>Ente...
The Design <ul><li>How much integration do I need to add between the browser and the rest of a user’s local desktop enviro...
Keeping up with the Tech <ul><li>Well it is really up to you … </li></ul><ul><li>Books </li></ul><ul><li>Blogsphere </li><...
Exercise: Let’s start a project <ul><li>Goal:  Pick a technology for your project.   This project will be continued. </li>...
Time to explore <ul><li>Empressr – Desktop Presentation </li></ul><ul><li>NetFlix – DVD by mail </li></ul><ul><li>Meebo – ...
Section 2 HERE <ul><li>BILL’s Section </li></ul>
Section 3: Design Practice Designing and Communicating Design
Designing vs. Communicating vs. Documenting <ul><li>Designing –conceive an idea through a design process. </li></ul><ul><l...
Design-ING <ul><li>!=  conceiving, creation, producing </li></ul><ul><li>Formalized process </li></ul><ul><ul><li>Studio =...
3 basic steps to designing <ul><li>Sketching </li></ul><ul><li>Framework and Language </li></ul><ul><li>Refinement </li></ul>
Sketching What do you see here? Rapid & Rough Multiplicity Communicate CONCEPTS
Bill Buxton on Sketch vs. Prototype <ul><li>Sketch </li></ul><ul><li>Invitation </li></ul><ul><li>Suggestion </li></ul><ul...
Framework and Language Create Structure Navigation Language Object Action Modifiers
Refinement Details Behavior Exceptions States Messaging
Designing Behavior <ul><li>Time: Behavior cannot be static </li></ul><ul><li>It is not “flow” between contexts;  </li></ul...
Sample Process <ul><li>Sketch  on paper/whiteboard </li></ul><ul><li>Scan/Photograph into  digital  environment </li></ul>...
Simple Design Exercise <ul><li>Problem: </li></ul><ul><li>I need a device that allows a user to move & select objects, tex...
Simple Design Exercise <ul><li>Problem: </li></ul><ul><li>I need a device that allows a user to move & select objects, tex...
Discuss: Example Process <ul><li>What Properties through this process did we notice that might apply to the tools we decid...
Pain <ul><ul><ul><li>Wireframing Ajax is a [expletive]... We have to determine all of the things a user might do, and wire...
The Shift
Assumption <ul><li>All interaction is course-grained at page level </li></ul><ul><li>Wireframes capture layout, priority, ...
Impact <ul><li>Full page refresh is replaced by small content updates. </li></ul><ul><li>Hyperlink, Submit are replaced by...
Impact <ul><li>Interaction is characterized by direct manipulation, lightweight actions and in-page actions </li></ul><ul>...
Drag & Drop Interesting Moments <ul><li>Page load </li></ul><ul><li>Mouse hover over draggable object </li></ul><ul><li>Mo...
Drag & Drop Actors <ul><li>Page </li></ul><ul><li>Cursor </li></ul><ul><li>Tool Tip </li></ul><ul><li>Drag object </li></u...
Drag & Drop Matrix
my.yahoo Interesting Moments
Adaptive Path: Micro States
Yahoo!: Micro States
Animation with Visio
Animation with Photoshop
Fireworks + Acrobat Demo <ul><li>Use Frames </li></ul><ul><li>Export to PDF </li></ul><ul><li>Annotate in PDF </li></ul><u...
Section 4:  Why do an RIA Designing an RIA
Why? <ul><li>Simply put … because you can. </li></ul><ul><li>There is very little “should” here </li></ul><ul><li>Looking ...
Hello! Humans are Emotional <ul><li>Don Norman’s  Emotional Design </li></ul>Your emotional state when using a product wil...
Location, Location, Location <ul><li>That works for real estate … </li></ul><ul><li>… for UX Designers … </li></ul><ul><li...
Intuitive ? <ul><li>Creating an intuitive application is all about matching expectations of the user. </li></ul><ul><li>Un...
Legacy of the Web ? <ul><li>Strong legacy with web metaphors </li></ul><ul><ul><li>Back button (or just “history”) </li></...
RIAs offer Hybridization <ul><li>Toyota can’t have all the fun … </li></ul><ul><li>Big challenges for designers, but the e...
Learnability <ul><li>Understanding where I was and where I’m going. </li></ul><ul><li>Having the RIGHT information at the ...
Security <ul><li>Using windowing enhances security </li></ul><ul><ul><li>I know that I really didn’t leave </li></ul></ul>...
Managing Complexity <ul><li>Discoverability </li></ul><ul><li>Use scent to guide people </li></ul><ul><li>Hide complexity ...
Power of Movement <ul><li>Sometimes contrasts in color, shape, alignment are not enough </li></ul><ul><li>Moving objects c...
Playful <ul><li>Using your hands in multiple ways </li></ul><ul><li>Novelty through animation and discoverability </li></u...
Design (Big ‘D’) <ul><li>“I  design  software” </li></ul><ul><li>“I’m wearing  design er jeans” </li></ul><ul><li>“interac...
What is “design”? <ul><li>Design as noun (I like that “design”) </li></ul><ul><ul><li>Is the result of a conceived idea, w...
Making Design (verb) Work <ul><li>Divergent thinking </li></ul><ul><ul><li>Skew, bend, melt, tear … change! </li></ul></ul...
Exercise: Criteria From Section 1 <ul><li>Criteria for the design </li></ul><ul><ul><li>Application Service (Hosted) </li>...
Exercise: Moving forward <ul><li>Need to share corporate media objects across different enterprises </li></ul><ul><li>Need...
Exercise: Annotate <ul><li>Design a set of screens that make up one page </li></ul><ul><li>Displays both a list objects an...
Things to think about <ul><li>Manage complexity through progressive presentation </li></ul><ul><li>Motion aids learnabilit...
Questions ? Resources: Dave’s Blog:  www.synapticburn.com Bill’s Blog:  looksgoodworkswell.blogspot.com
Upcoming SlideShare
Loading in...5
×

Designing Powerful Web Applications - Monterey

4,865

Published on

A version of the Designing RIA's workshop that Bill and I gave at UI11 and the Web App Summit. Not including Bill's section 2.

Published in: Technology
2 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,865
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
28
Embeds 0
No embeds

No notes for slide
  • Designing Powerful Web Applications - Monterey

    1. 1. Designing Powerful Web Applications with AJAX & Other Rich Internet Applications David Malouf & Bill Scott UI 11 Cambridge, MA October 9, 2006
    2. 2. Breakdown of the day <ul><li>Section 1: … from the beginning </li></ul><ul><ul><li>Defining RIAs & RIA Technologies </li></ul></ul><ul><ul><li>How to pick the right technology for your project </li></ul></ul><ul><ul><li>Looking at current examples of RIAs </li></ul></ul><ul><li>Section 2: Interaction Design for RIAs </li></ul><ul><ul><li>Understanding Patterns </li></ul></ul><ul><ul><li>AJAX Design Patterns </li></ul></ul><ul><ul><li>Design Principles </li></ul></ul><ul><li>Section 3: Design Practice </li></ul><ul><ul><li>Tools of the trade </li></ul></ul><ul><ul><ul><li>Designing </li></ul></ul></ul><ul><ul><ul><li>Communicating Design </li></ul></ul></ul><ul><ul><li>Communicate this RIA (exercise) </li></ul></ul><ul><li>Section 4: Design your own RIA </li></ul><ul><ul><li>What is “design”—the verb? </li></ul></ul><ul><ul><li>Design your own RIA (exercise) </li></ul></ul>
    3. 3. What is an RIA? <ul><li>Give credit, where credit is due … </li></ul><ul><ul><li>Macromedia (today Adobe) coined the term “Rich Internet Application” to describe the growing trend of adding media richness (more motion internal to a single page view) due to the creation of applications using their product Flash MX. </li></ul></ul><ul><li>The simple answer: </li></ul><ul><ul><li>Connected </li></ul></ul><ul><ul><li>Distributed </li></ul></ul><ul><ul><li>Local </li></ul></ul><ul><ul><li>Intelligent </li></ul></ul><ul><ul><li>Moving </li></ul></ul>
    4. 4. What does it mean for us today? <ul><li>Emulating desktop behaviors </li></ul><ul><li>Cinematic Effects </li></ul><ul><li>Client-side (in browser) … </li></ul><ul><ul><li>Data management </li></ul></ul><ul><ul><li>Business logic management </li></ul></ul><ul><li>Re-definition of the “page” metaphor </li></ul><ul><li>Connection to local machine (optional) </li></ul>
    5. 5. Emulating Desktop Behaviors <ul><li>Drag & Drop </li></ul><ul><li>Menu & Tool bars </li></ul><ul><li>Windows & Wizards </li></ul><ul><li>Panels </li></ul><ul><li>Trees </li></ul><ul><li>Form validation </li></ul><ul><li>Non-HTML controls </li></ul><ul><ul><li>Accordian </li></ul></ul><ul><ul><li>Combobox </li></ul></ul><ul><ul><li>Spinner box </li></ul></ul><ul><ul><li>Sliders </li></ul></ul><ul><li>Keyboard Actions </li></ul><ul><li>Context Menus </li></ul>Google Spreadsheet Gliffy
    6. 6. Cinematic Effects: Animation for added context <ul><li>Where am I going? Where was I? </li></ul><ul><li>Action completion </li></ul><ul><li>Object state change </li></ul><ul><li>System progress </li></ul><ul><li>Animation for aesthetic reasons is also viable </li></ul>LaszloSystems
    7. 7. What happens to our page? “ There is no [page].” - Neo “ There is no page; only pathways” -- Emily Chang & Max Kiesler of ideacodes A page is a metaphor of a moment of uninterrupted context Kayak NetFlix
    8. 8. What’s all the fuss about Web 2.0? <ul><li>O’Reilly as trend spotter … </li></ul><ul><li>RIAs is only one component of the trend </li></ul><ul><li>Other components </li></ul><ul><ul><li>User generated </li></ul></ul><ul><ul><li>Mashed up & Remixed </li></ul></ul><ul><ul><li>Open & iterative </li></ul></ul><ul><ul><li>Limited designer role (if at all) </li></ul></ul><ul><li>Separately nothing new, but a trend (critical mass) makes it worth noting. </li></ul><ul><li>Sir Tim Berners-Lee’s warning not to create new bubble – [The Register – Aug ’06] </li></ul>
    9. 9. The Technologies Behind RIAs <ul><li>DHTML + HTML + JavaScript + CSS </li></ul><ul><li>AJAX = DHTML + XML (or JSON) </li></ul><ul><li>Flash </li></ul><ul><li>Browser Extensions/Plug-ins </li></ul><ul><li>Java </li></ul><ul><li>ActiveX </li></ul><ul><li>Others not to be discussed </li></ul><ul><ul><li>XUL, CURL, etc. </li></ul></ul><ul><li>Backend Frameworks </li></ul>
    10. 10. Pure Browser: DHMTL & AJAX <ul><li>Nothin’ but browser </li></ul><ul><li>Uses very open technologies </li></ul><ul><li>Allows for simple richness </li></ul><ul><li>AJAX – new info from server without page refresh </li></ul><ul><li>A JavaScript call makes a query to the server </li></ul><ul><li>Server returns XML </li></ul><ul><li>JavaScript manipulates CSS to reformat XML in place on existing screen </li></ul>
    11. 11. Visualizing the AJAX effect JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)
    12. 12. Flash (by Adobe) <ul><li>Requires an installed plug-in </li></ul><ul><li>Created to bring animation and interactivity to the web </li></ul><ul><li>Uses vector graphics </li></ul><ul><li>Not native, but ubiquitous // open format </li></ul><ul><li>Visual development environment </li></ul><ul><ul><li>Tied to Flex development environment </li></ul></ul>Empressr
    13. 13. Extensions <ul><li>Different browsers have different ways of adding extensions to themselves. </li></ul><ul><li>Behaves as if a part of the browser </li></ul><ul><ul><li>Toolbars </li></ul></ul><ul><ul><li>Status bars </li></ul></ul><ul><ul><li>Sidebars </li></ul></ul><ul><ul><li>Menu add-ons </li></ul></ul><ul><li>Greasemonkey for Firefox </li></ul>Del.icio.us Firefox Add-on
    14. 14. Java & ActiveX (with .NET) <ul><li>Installed applications that can … </li></ul><ul><ul><li>run inside the browser window </li></ul></ul><ul><ul><li>control the browser </li></ul></ul><ul><ul><li>connect the browser to the rest of the local client </li></ul></ul><ul><li>Virtual Machines & Frameworks </li></ul><ul><ul><li>Java requires a pre-installed virtual machine or emulator. Once installed any Java-base application can run. </li></ul></ul><ul><ul><li>Frameworks are a collection of components and controls </li></ul></ul><ul><ul><ul><li>.NET requires the installation of the framework </li></ul></ul></ul><ul><ul><ul><li>SWING or AWT are two frameworks for Java </li></ul></ul></ul>Ofoto
    15. 15. Backend Frameworks <ul><li>DOJO </li></ul><ul><li>Script.aculo.us </li></ul><ul><li>Rico </li></ul><ul><li>Ruby on Rails </li></ul><ul><li>ASP.NET </li></ul><ul><li>Yahoo! User Interface Library (YUI) </li></ul><ul><li>Atlas </li></ul><ul><li>Backbase </li></ul>
    16. 16. Choosing a Technology <ul><li>Deployment Environment </li></ul><ul><ul><li>Local clients </li></ul></ul><ul><ul><li>Enterprise considerations </li></ul></ul><ul><ul><li>Iteration cycles </li></ul></ul><ul><li>Development Environment </li></ul><ul><ul><li>Training & capabilities of team against time and resources available for project </li></ul></ul><ul><li>The Design (functionality, brand) </li></ul><ul><ul><li>Browser to desktop connection </li></ul></ul>
    17. 17. Deployment <ul><li>Can my users install something? </li></ul><ul><ul><li>Tech savvy enough </li></ul></ul><ul><ul><li>Enterprise allow them to </li></ul></ul><ul><li>Do I plan on “tweaking” rapidly, or will my product follow a more standard release cycle? </li></ul><ul><li>Am I willing to use closed or otherwise non-ubiquitous technologies? </li></ul>
    18. 18. The Design <ul><li>How much integration do I need to add between the browser and the rest of a user’s local desktop environment? </li></ul><ul><li>Does my design require cinematic effects between scenes, or just within them? (or none at all?) </li></ul><ul><li>At what point do I need to manage calls to and from a remote server in my design? </li></ul>
    19. 19. Keeping up with the Tech <ul><li>Well it is really up to you … </li></ul><ul><li>Books </li></ul><ul><li>Blogsphere </li></ul><ul><li>Tech Meetups </li></ul><ul><li>UnConferences </li></ul><ul><li>Conferences </li></ul><ul><li>… well you are here. </li></ul>
    20. 20. Exercise: Let’s start a project <ul><li>Goal: Pick a technology for your project. This project will be continued. </li></ul><ul><li>Criteria for the design </li></ul><ul><ul><li>Application Service (Hosted) </li></ul></ul><ul><ul><ul><li>Infinite Audience </li></ul></ul></ul><ul><ul><ul><li>Business-to-Business community </li></ul></ul></ul><ul><ul><li>File Management System </li></ul></ul><ul><ul><ul><li>Moving lots of files </li></ul></ul></ul><ul><ul><li>Collaborative </li></ul></ul><ul><ul><li>Media Centric </li></ul></ul><ul><li>Criteria for Development </li></ul><ul><ul><li>Old-school software engineering; </li></ul></ul><ul><ul><li>Highly formally educated group </li></ul></ul>
    21. 21. Time to explore <ul><li>Empressr – Desktop Presentation </li></ul><ul><li>NetFlix – DVD by mail </li></ul><ul><li>Meebo – Web-IM </li></ul><ul><li>Flickr – Photo Sharing </li></ul><ul><li>Zimbra – Web Groupware </li></ul>
    22. 22. Section 2 HERE <ul><li>BILL’s Section </li></ul>
    23. 23. Section 3: Design Practice Designing and Communicating Design
    24. 24. Designing vs. Communicating vs. Documenting <ul><li>Designing –conceive an idea through a design process. </li></ul><ul><li>Communicating </li></ul><ul><ul><li>Get buy in </li></ul></ul><ul><ul><li>Collaborate to ensure proper implementation </li></ul></ul><ul><li>Documenting </li></ul><ul><ul><li>Archive ideas </li></ul></ul><ul><ul><li>“Hit by a bus” contingency </li></ul></ul>
    25. 25. Design-ING <ul><li>!= conceiving, creation, producing </li></ul><ul><li>Formalized process </li></ul><ul><ul><li>Studio = exploration + formal critique prcess </li></ul></ul><ul><ul><li>Divergent unrefined thinking followed by </li></ul></ul><ul><ul><li>Evaluation, testing, and reflection </li></ul></ul>
    26. 26. 3 basic steps to designing <ul><li>Sketching </li></ul><ul><li>Framework and Language </li></ul><ul><li>Refinement </li></ul>
    27. 27. Sketching What do you see here? Rapid & Rough Multiplicity Communicate CONCEPTS
    28. 28. Bill Buxton on Sketch vs. Prototype <ul><li>Sketch </li></ul><ul><li>Invitation </li></ul><ul><li>Suggestion </li></ul><ul><li>Question </li></ul><ul><li>Propose </li></ul><ul><li>Destructive </li></ul><ul><li>Prototype </li></ul><ul><li>Attendance </li></ul><ul><li>Describe </li></ul><ul><li>Answer </li></ul><ul><li>Test </li></ul><ul><li>Constructive </li></ul>Taken from the notes of J. Spool on BrainSparks Blog of a talk given by Bill Buxton to Boston-SIGCHI. http://www.uie.com/brainsparks/2006/11/16/buxton-on-sketching-and-experience-design/
    29. 29. Framework and Language Create Structure Navigation Language Object Action Modifiers
    30. 30. Refinement Details Behavior Exceptions States Messaging
    31. 31. Designing Behavior <ul><li>Time: Behavior cannot be static </li></ul><ul><li>It is not “flow” between contexts; </li></ul><ul><li>happens within a context </li></ul><ul><li>Multiple states </li></ul><ul><ul><li>Sometimes Fluid motion </li></ul></ul><ul><li>Hard to communicate “intra-contextual” behaviors using static renderings </li></ul><ul><ul><li>More difficult to test it. </li></ul></ul>
    32. 32. Sample Process <ul><li>Sketch on paper/whiteboard </li></ul><ul><li>Scan/Photograph into digital environment </li></ul><ul><li>Trace (or re-draw) using computer tool </li></ul><ul><li>Use “ blocking ” tool to define framework </li></ul><ul><li>As further detail is required to refine framework fill in blocks using a higher fidelity drawing tool. </li></ul><ul><li>Add interactivity so that behavior can be experienced , evaluated, tested, and reflected upon. </li></ul>
    33. 33. Simple Design Exercise <ul><li>Problem: </li></ul><ul><li>I need a device that allows a user to move & select objects, text and graphics in a graphical interface </li></ul><ul><li>Let’s work through this … </li></ul>
    34. 34. Simple Design Exercise <ul><li>Problem: </li></ul><ul><li>I need a device that allows a user to move & select objects, text and graphics in a graphical interface </li></ul><ul><li>Let’s fill in some of the blanks … </li></ul><ul><li>Location/Context </li></ul><ul><li>Users </li></ul><ul><li>Objects </li></ul><ul><li>Flow </li></ul><ul><li>Etc. </li></ul>
    35. 35. Discuss: Example Process <ul><li>What Properties through this process did we notice that might apply to the tools we decide to use? </li></ul>
    36. 36. Pain <ul><ul><ul><li>Wireframing Ajax is a [expletive]... We have to determine all of the things a user might do, and wireframe the blessed moments of each possibility. - Jeffrey Zeldman, Web 3.0 </li></ul></ul></ul>
    37. 37. The Shift
    38. 38. Assumption <ul><li>All interaction is course-grained at page level </li></ul><ul><li>Wireframes capture layout, priority, behavior & content </li></ul>
    39. 39. Impact <ul><li>Full page refresh is replaced by small content updates. </li></ul><ul><li>Hyperlink, Submit are replaced by a full range of interactive events. </li></ul><ul><li>Characterized by micro-interaction and micro-updates leading to micro-states. </li></ul>
    40. 40. Impact <ul><li>Interaction is characterized by direct manipulation, lightweight actions and in-page actions </li></ul><ul><li>Nuances are multiplied </li></ul><ul><ul><li>invitation </li></ul></ul><ul><ul><li>activation </li></ul></ul><ul><ul><li>deactivation </li></ul></ul><ul><ul><li>affordances </li></ul></ul><ul><ul><li>constraints </li></ul></ul><ul><ul><li>timing </li></ul></ul><ul><ul><li>delays </li></ul></ul><ul><ul><li>rate of feedback </li></ul></ul>
    41. 41. Drag & Drop Interesting Moments <ul><li>Page load </li></ul><ul><li>Mouse hover over draggable object </li></ul><ul><li>Mouse down on draggable object </li></ul><ul><li>Drag initiated (mouse down, mouse moves >= 3 pixels) </li></ul><ul><li>Drag over valid target area </li></ul><ul><li>Drag over invalid target area </li></ul><ul><li>Drag over original location </li></ul><ul><li>Drop accepted </li></ul><ul><li>Drop rejected </li></ul><ul><li>Drop on original location </li></ul>
    42. 42. Drag & Drop Actors <ul><li>Page </li></ul><ul><li>Cursor </li></ul><ul><li>Tool Tip </li></ul><ul><li>Drag object </li></ul><ul><li>Drag ghost </li></ul><ul><li>Original location </li></ul><ul><li>Drop target </li></ul>
    43. 43. Drag & Drop Matrix
    44. 44. my.yahoo Interesting Moments
    45. 45. Adaptive Path: Micro States
    46. 46. Yahoo!: Micro States
    47. 47. Animation with Visio
    48. 48. Animation with Photoshop
    49. 49. Fireworks + Acrobat Demo <ul><li>Use Frames </li></ul><ul><li>Export to PDF </li></ul><ul><li>Annotate in PDF </li></ul><ul><li>Each frame is “an interesting moment </li></ul><ul><li>Sense of time </li></ul><ul><li>Sense of motion </li></ul><ul><li>Can be converted to “interactive” using linking in PDF. </li></ul><ul><li>Can embed movies into PDF for cinematic effects </li></ul>
    50. 50. Section 4: Why do an RIA Designing an RIA
    51. 51. Why? <ul><li>Simply put … because you can. </li></ul><ul><li>There is very little “should” here </li></ul><ul><li>Looking back at John Maeda’s Laws of Simplicity </li></ul><ul><ul><li>Always question the addition of anything, even if it leads to the reduction of something else. </li></ul></ul><ul><li>Let’s look deeper at some good reasons why. </li></ul>
    52. 52. Hello! Humans are Emotional <ul><li>Don Norman’s Emotional Design </li></ul>Your emotional state when using a product will effect not just your enjoyment of it, but your effectiveness (at least perceptual) with it. “ Attractive Things Work Better” is the very title of the first chapter.
    53. 53. Location, Location, Location <ul><li>That works for real estate … </li></ul><ul><li>… for UX Designers … </li></ul><ul><li>Context, Context, Context </li></ul>
    54. 54. Intuitive ? <ul><li>Creating an intuitive application is all about matching expectations of the user. </li></ul><ul><li>Understanding the context of use is the best way to come as close as possible to do that. </li></ul><ul><li>The desktop is a constant. The Operating System is the heart and soul of the desktop experience . </li></ul>
    55. 55. Legacy of the Web ? <ul><li>Strong legacy with web metaphors </li></ul><ul><ul><li>Back button (or just “history”) </li></ul></ul><ul><ul><li>Hyperlink </li></ul></ul>
    56. 56. RIAs offer Hybridization <ul><li>Toyota can’t have all the fun … </li></ul><ul><li>Big challenges for designers, but the end-game is worth the effort. </li></ul>Yahoo Mail Beta Flickr
    57. 57. Learnability <ul><li>Understanding where I was and where I’m going. </li></ul><ul><li>Having the RIGHT information at the right time, with the right supporting information. </li></ul>
    58. 58. Security <ul><li>Using windowing enhances security </li></ul><ul><ul><li>I know that I really didn’t leave </li></ul></ul><ul><ul><li>I know when I’m done I’ll be going back to where I started </li></ul></ul><ul><li>Security allows for more risk taking </li></ul>
    59. 59. Managing Complexity <ul><li>Discoverability </li></ul><ul><li>Use scent to guide people </li></ul><ul><li>Hide complexity to avoid overwhelming people with too much content </li></ul><ul><li>Richness allows for fluidity and better invitations </li></ul>Baby Name Wizard
    60. 60. Power of Movement <ul><li>Sometimes contrasts in color, shape, alignment are not enough </li></ul><ul><li>Moving objects catch our eyes and our mind’s attention </li></ul><ul><li>Time is perception </li></ul><ul><ul><li>Motion (and change) = activity </li></ul></ul><ul><ul><li>Perception of system working if not faster, at least working for my benefit. </li></ul></ul>Yahoo! Maps (beta)
    61. 61. Playful <ul><li>Using your hands in multiple ways </li></ul><ul><li>Novelty through animation and discoverability </li></ul><ul><li>Engagement leads to productivity </li></ul>
    62. 62. Design (Big ‘D’) <ul><li>“I design software” </li></ul><ul><li>“I’m wearing design er jeans” </li></ul><ul><li>“interaction design ” </li></ul><ul><li>“ design school” </li></ul><ul><li>“That design looks cool” </li></ul>
    63. 63. What is “design”? <ul><li>Design as noun (I like that “design”) </li></ul><ul><ul><li>Is the result of a conceived idea, whether or not it was actually “designed” </li></ul></ul><ul><li>Design as verb (I “design” software) </li></ul><ul><ul><li>A process of creativity </li></ul></ul><ul><ul><li>Non-linear </li></ul></ul><ul><ul><li>Assumes there is more than one elegant solution to any single problem </li></ul></ul><ul><ul><li>Considers the measurable and the aesthetic </li></ul></ul>
    64. 64. Making Design (verb) Work <ul><li>Divergent thinking </li></ul><ul><ul><li>Skew, bend, melt, tear … change! </li></ul></ul><ul><li>Evaluation is separate from Ideation </li></ul><ul><ul><li>Put your judge on hold </li></ul></ul><ul><li>Multiple minds </li></ul><ul><li>Model, Model, Model (AKA: sketch, sketch, sketch) </li></ul><ul><li>Taking the road least traveled can bring you back to the freeway </li></ul><ul><ul><li>Process ideas in disconnected ways </li></ul></ul><ul><ul><li>Connect disconnected ideas in separate exercise </li></ul></ul>
    65. 65. Exercise: Criteria From Section 1 <ul><li>Criteria for the design </li></ul><ul><ul><li>Application Service (Hosted) </li></ul></ul><ul><ul><ul><li>Infinite Audience </li></ul></ul></ul><ul><ul><ul><li>Business-to-Business community </li></ul></ul></ul><ul><ul><li>File Management System </li></ul></ul><ul><ul><ul><li>Moving lots of files </li></ul></ul></ul><ul><ul><li>Collaborative </li></ul></ul><ul><ul><li>Media Centric </li></ul></ul><ul><li>Criteria for Development </li></ul><ul><ul><li>Old-school software engineering; </li></ul></ul><ul><ul><li>Highly formally educated group </li></ul></ul>
    66. 66. Exercise: Moving forward <ul><li>Need to share corporate media objects across different enterprises </li></ul><ul><li>Need to collaborate on these objects </li></ul><ul><ul><li>Annotate </li></ul></ul><ul><ul><li>Version </li></ul></ul><ul><ul><li>Append </li></ul></ul><ul><li>Need to publish out to 3 rd parties </li></ul><ul><li>Don’t worry we aren’t doing this whole application … </li></ul>
    67. 67. Exercise: Annotate <ul><li>Design a set of screens that make up one page </li></ul><ul><li>Displays both a list objects and single object </li></ul><ul><li>Allows the user to comment on that object </li></ul><ul><li>Track commenting </li></ul><ul><li>Annotate on media directly </li></ul><ul><li>Create a collection and “send” that collection </li></ul>
    68. 68. Things to think about <ul><li>Manage complexity through progressive presentation </li></ul><ul><li>Motion aids learnability </li></ul><ul><li>Prirotize information and tasks within a single context </li></ul><ul><li>“ Do I need a new context?” “Why?” “Why not?” </li></ul><ul><li>“ What is the nature of my data for this context?” </li></ul>
    69. 69. Questions ? Resources: Dave’s Blog: www.synapticburn.com Bill’s Blog: looksgoodworkswell.blogspot.com

    ×