building better architecture with ux-driven design

BUILDING BETTER ARCHITECTURE WITH UX-DRIVEN DESIGN

DINO ESPOSITOhttp://twitter.com/despos

“A good software project must, like a house, start on strong foundations of good architecture and good requirements.” (cit.)

ABOUT ESTIMATEShttp://noestimatesbook.com/

IN SOFTWARE NOBODY ASKS YOU TO SIMPLY BUILD A HOUSE

TENT HUT CARAVAN CASTLE

All details are described in

depth.

CONSCIOUSREQUIREMENTS

A few details reckoned obvious

and omitted

UNCONSCIOUSREQUIREMENTS

Not mentioned at all

DREAMS

WORDS

WORDS

To improve the software development process, we

need a better way to learn.

Watch the webinar recording here:http://

www.postsharp.net/blog/post/webinar-recording-ux-driven-design

http://www.postsharp.net/blog/post/webinar-recording-ux-driven-design



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

Anonymous

If you wait until the last minute to complete the user interface, it only takes a minute.

Many great ideas have been first sketched out on paper napkins.

Talk is cheap. Show me the product.

• Visual immediacy•Missed points caught earlier• Focus on tasks and actions• Frontend and backend match up

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”)

Architecture of the informationUser-machine interaction

Usability reviews•Responsibilitie

s of UX architects

■ Record users in action■ Analyze body language■ Monitor timing of operations

UXDD in Three Steps

Create screens as users love them

Trigger workflows from screens

Code workflows to use business logic

SPRINTSSPRINTS

• Two-phase waterfall• Low-cost design of the frontend• Straight implementation of the

backend

• Longer than classic bottom-up• Nearly no post-deployment costs

•UXDDSummary

•UXDDSummary

NO POST-DEPLOYMENT COSTS?

NO POST-DEPLOYMENT COSTS.

Presentation

Business

Data

How You See Your System How Users See Your System

Interface

BLACK MAGIC

PRESENTATION

APPLICATIONDOMAININFRASTRUCTURE

DEVELOPER USER/DESIGNER REAL-WORLDUXDD

The experience users go through while interacting with the application.

User Experience

SKETCHFreehand drawing

primarily done to jot down ideas

Related Terminology

WIREFRAMEMore precise sketch focused on layout, navigation, content

MOCKUPAs detailed as a

wireframe with some sample UI attached

PROOF OF CONCEPTSmall exercise to verify truthfulness or viability

of an assumption

Related Terminology

PROTOTYPEFake system simulating the behavior of the real

system to be built

PILOTProduction-ready

system tested against a subset of the

intended audience

Sketches

Wireframes

Prototypes

Basic understanding

Basic prototypingAdvanced prototyping

UXDD Prototyping Levels

PRODUCTS

BALSAMIQ AXURE UXPIN JUSTINMIND

DATA MODEL

BUSINESS LOGIC

USER INTERFACE

Possible model mismatch

BOTTOM-UP

REQUIREMENTS

TOP-DOWN

DATA MODEL

BUSINESS LOGIC

USER INTERFACE

Model cut to fit

REQUIREMENTS

TOP-DOWN

BLACK MAGIC

USER INTERFACE

REQUIREMENTS

Model cut to fit

USER INTERFACESCREEN SCREENSCREEN

APPLICATION LAYER

WORKFLOW

WORKFLOW

WORKFLOW

DOMAIN LAYER

INFRASTRUCTURE LAYER

VIEW modelINPUT model

The UX users want

Backend to supportjust the UX users want

EVENT store

READ model

COMMANDstack

QUERYstack

UXDD leads to ■ CQRS ■ Event Sourcing

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

REFERENCES

http://naa4e.codeplex.com

■ Modern Software ArchitectureDomain Models, CQRS, and Event Sourcing

■ UX-driven Software Design coming soon

TOP 100

[email protected]

http://twitter.com/despos http://facebook.com/naa4e http://software2cents.wordpress.com