Three Pillar Global Design For Use

1,457 views

Published on

Three Pillar Tech Meeting 1/19/2010.
Presenter: Patrick Sheridan
Topic: Agile User Experience design strategies for building RIA applications with Ext JS.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,457
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Three Pillar Global Design For Use

  1. 1. Wireless: extjs pw: extjsmeetup<br />Make sure you sign in w/ Jonathan [Twitter handle]<br />JavaScript Magazine code: UGDC<br />Manning Code: extjs50<br />Ext JS Meetup<br />
  2. 2. January 19, 2010<br />Designing for Use w/ Ext JS<br />
  3. 3. RIA: Reaching the Next Plateau<br />
  4. 4. Process Maturity<br />Platform Maturity<br />Device Maturity [+ convergence]<br />Data visualization<br />Grids, charts, graphs, maps<br />User Maturity – customization and control<br />‘User Directed Interfaces’ as opposed to ‘design for user’<br />RIA: Reaching the Next Plateau<br />
  5. 5. Changing frame of reference<br />
  6. 6. Communication Challenges<br />Web 2.0, 3.0, Drag-and-Drop, ZZZzzzzzz<br />Invalidated notions of finished states<br />Reference the way successful sites LOOK<br />Reference the way successful sites ACT<br />Mint.com<br />Anything Google<br />Anything Desktop, fat client experience<br />Changing frame of reference<br />
  7. 7. <ul><li>How people work:</li></ul>Determining Risk and Complexity<br />Lack of knowledge of ‘Big App’ development<br />Lack of pattern knowledge on the infrastructure side of RIA<br />Knowledge Gap – ‘Honest Mistakes’<br />Customers/Designers don’t know what is available in the toolbox<br />Serialized analysis/ design cycles<br />Too much customization<br />Consistency to a fault<br />Inconsistent business rules for a ‘consistent’ UI<br />Where Things go Wrong<br />
  8. 8. Working: Quicker Feedback/ Dev iterations<br />Designing<br />Focus on Interactions and re-use<br />Design Pattern Library<br />Design Component Library [Style Guide]<br />Developing<br />Custom Components<br />Aesthetics: Renderer/ Templates/ Themes<br />Squaring the Circle<br />
  9. 9. Modals/ Error<br />Form Validation<br />Search/ Find / Browse<br />Navigation vs. Action<br />Ext JS as Design Pattern Library<br />
  10. 10. Agile + Ext JS + Omnigraffle<br />
  11. 11. Meeting Facilitation<br />High resolution wireframes remove Hand Waving + Leap of Faith<br />Constraints on Design<br />Working ‘with’ or ‘against’ the Framework<br />Scope/LOE<br />Consistency<br />Agile + Ext JS + Omnigraffle<br />
  12. 12. Agile: Story Mental Model<br />
  13. 13. Agile: Story Dependency<br />
  14. 14. Agile: Story Dependency<br />
  15. 15. Agile + Ext JS + Omnigraffle<br />
  16. 16. Deliverables: Wireframes (Low-Res)<br />
  17. 17. Ext JS Wireframes<br />
  18. 18. Ext JS Wireframing<br />
  19. 19. 19<br />Focus on conversations not documentation<br />January 19, 2010<br />
  20. 20. Maintaining shared understanding<br />Agile UX<br />Prototype driven analysis<br />Business, customer, and dev team stakeholders<br />Text based ‘wireframes’<br />Ext JS Component architecture allows for meta-code descriptions<br />TPG Envision<br />Distributed Design<br />Location independent teams/ interdisciplinary skills/ skill levels<br />Process maturity, deliverables, infrastructure<br />Distributed Design<br />
  21. 21. Developers<br />Common language for discussion w/ designers<br />API, Docs, examples<br />Customers<br />Highly visual deliverables<br />80%/20% out of the box<br />UX/ Interaction Designers<br />Ext JS Designer<br />Ext JS example site == Design Pattern Library<br />Omnigraffle Stencil == Rapid Prototyping<br />Ext JS Designer!!<br />What’s in it for me?<br />
  22. 22. Happy Coding!<br />

×