Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Better Architecture with UX-Driven Design

759 views

Published on

How do you avoid the dreaded "this is not what we asked for" and ensure customer satisfaction when building a new system?

In this webinar, Dino Esposito demonstrates a top-down methodology, sometimes mistaken for plain common sense and often boldly ignored, called UX-Driven Design (UXDD).

UXDD means coming to a visual agreement with customers by using wireframing tools to iterate on sketches of the new system before building it. Then, rather than building the system from the data model, you proceed in a top-down fashion instead. The resulting system may be slow or even inefficient but it will never be the “wrong” system! In addition, UXDD leads to clarity on a few of today’s most popular patterns that are sometimes difficult to understand like CQRS and Event Sourcing.
The presentation covers:

An introduction to Wireframing tools
Proven ways to save on post-first deployment costs
Insights into better customer relationships
Better focus on development without 'analysis paralysis'

You can watch the webinar recording here:
http://www.postsharp.net/blog/post/webinar-recording-ux-driven-design

Published in: Software
  • Login to see the comments

Building Better Architecture with UX-Driven Design

  1. 1. BUILDING BETTER ARCHITECTURE WITH UX-DRIVEN DESIGN DINO ESPOSITO http://twitter.com/despos
  2. 2. “A good software project must, like a house, start on strong foundations of good architecture and good requirements.” (cit.) ABOUT ESTIMATES http://noestimatesbook.com/ IN SOFTWARE NOBODY ASKS YOU TO SIMPLY BUILD A HOUSE TENT HUT CARAVAN CASTLE
  3. 3. All details are described in depth. CONSCIOUS REQUIREMENTS A few details reckoned obvious and omitted UNCONSCIOUS REQUIREMENTS Not mentioned at all DREAMS WORDSWORDS
  4. 4. To improve the software development process, we need a better way to learn.
  5. 5. Watch the webinar recording here: http://www.postsharp.net/blog/post/webinar- recording-ux-driven-design
  6. 6. The user of the software won’t know what she wants until she sees the software. Humphrey’s Law An interactive system can never be fully specified nor can it ever be fully tested. Wegner’s Lemma
  7. 7. Anonymous If you wait until the last minute to complete the user interface, it only takes a minute.
  8. 8. Many great ideas have been first sketched out on paper napkins.
  9. 9. Talk is cheap. Show me the product.
  10. 10. • Visual immediacy • Missed points caught earlier • Focus on tasks and actions • Frontend and backend match up
  11. 11. Two Architect Roles Collect usability requirements to build the best possible UX for the presentation layer Collect business requirements to build the best possible domain layer Software Architect Faces the painful truth of requirements UX Architect Faces the blissful simplicity of visuals Remember: all I'm offering is the truth. Nothing more. —Morpheus (from “The Matrix”)
  12. 12. Architecture of the information User-machine interaction Usability reviews •Responsibilities of UX architects ■ Record users in action ■ Analyze body language ■ Monitor timing of operations
  13. 13. UXDD in Three Steps Create screens as users love them Trigger workflows from screens Code workflows to use business logic
  14. 14. • Two-phase waterfall • Low-cost design of the frontend • Straight implementation of the backend •  Longer than classic bottom-up •  Nearly no post-deployment costs •UXDD Summary
  15. 15. •UXDD Summary NO POST-DEPLOYMENT COSTS? NO POST-DEPLOYMENT COSTS.
  16. 16. Watch the webinar recording here: http://www.postsharp.net/blog/post/webinar- recording-ux-driven-design
  17. 17. Presentation Business Data How You See Your System How Users See Your System Interface BLACK MAGIC
  18. 18. PRESENTATION APPLICATION DOMAIN INFRASTRUCTURE DEVELOPER USER/DESIGNER REAL-WORLD UXDD
  19. 19. The experience users go through while interacting with the application. User Experience
  20. 20. SKETCH Freehand drawing primarily done to jot down ideas Related Terminology WIREFRAME More precise sketch focused on layout, navigation, content MOCKUP As detailed as a wireframe with some sample UI attached
  21. 21. PROOF OF CONCEPT Small exercise to verify truthfulness or viability of an assumption Related Terminology PROTOTYPE Fake system simulating the behavior of the real system to be built PILOT Production-ready system tested against a subset of the intended audience
  22. 22. Sketches Wireframes Prototypes Basic understanding Basic prototyping Advanced prototyping UXDD Prototyping Levels
  23. 23. PRODUCTS BALSAMIQ AXURE UXPIN JUSTINMIND
  24. 24. DATA MODEL BUSINESS LOGIC USER INTERFACE Possible model mismatch BOTTOM-UP REQUIREMENTS
  25. 25. TOP-DOWN DATA MODEL BUSINESS LOGIC USER INTERFACE Model cut to fit REQUIREMENTS
  26. 26. TOP-DOWN DATA MODEL BUSINESS LOGIC USER INTERFACE Model cut to fit REQUIREMENTS
  27. 27. TOP-DOWN BLACK MAGIC USER INTERFACE REQUIREMENTS Model cut to fit
  28. 28. Watch the webinar recording here: http://www.postsharp.net/blog/post/webinar- recording-ux-driven-design
  29. 29. USER INTERFACE SCREEN SCREENSCREEN APPLICATION LAYER WORK FLOW WORK FLOW WORK FLOW DOMAIN LAYER INFRASTRUCTURE LAYER VIEW model INPUT model The UX users want Backend to support just the UX users want
  30. 30. EVENT store READ model COMMAND stack QUERY stack UXDD leads to ■ CQRS ■ Event Sourcing
  31. 31. All this said … The best way to save money on software projects is learning as much as possible about the domain and users’ expectations. Anonymous
  32. 32. REFERENCES http://naa4e.codeplex.com
  33. 33. Watch the webinar recording here: http://www.postsharp.net/blog/post/webinar- recording-ux-driven-design
  34. 34. ■ Modern Software Architecture Domain Models, CQRS, and Event Sourcing ■ UX-driven Software Design coming soon dino.esposito@jetbrains.com http://twitter.com/despos http://facebook.com/naa4e http://software2cents.wordpress.com

×