46
A PRAGMATIC VIEW OF UX DRIVEN DEVELOPMENT Akshay Luther [email protected] | @akshayl Technical Evangelist, Infragistics

A Pragmatic View of UX Driven Development

Embed Size (px)

DESCRIPTION

This presentation shows how using UI toolkits that a) have broad and deep functionality exposed by a powerful design-time interface and b) that are "pattern aware" is a winning strategy for UX driven development. Firstly, they minimise the disconnect between the customer, UX practictioner and developer by enabling the easy creation of high-fidelity prototypes. Secondly, they address the challenges of time, budget, developer ability and the growing need to target multiple devices.

Citation preview

Page 1: A Pragmatic View of UX Driven Development

A PRAGMATIC VIEW OF UX DRIVEN DEVELOPMENTAkshay Luther

[email protected] | @akshayl

Technical Evangelist, Infragistics

Page 2: A Pragmatic View of UX Driven Development

Agenda• About Infragistics• Challenges• The Value of Prototypes• UX Patterns• Examples

Page 3: A Pragmatic View of UX Driven Development

About Infragistics• Global market leader in UI development tools

• 20 year track record of success• 40,000+ customers across all verticals• 240+ awards

• UI toolkits for web, desktop and mobile applications - .NET & platform agnostic

• User Experience Consulting & Training• UDX, IXD, usability research feeds into product development

Page 4: A Pragmatic View of UX Driven Development

CHALLENGES

Page 5: A Pragmatic View of UX Driven Development
Page 6: A Pragmatic View of UX Driven Development

UX

DevCustomer

Page 7: A Pragmatic View of UX Driven Development

UX

DevCustomer

Page 8: A Pragmatic View of UX Driven Development

Other Challenges• Time• Budget• Developer Ability• Multiple Devices

• Desktop, web, mobile, tablet

Page 9: A Pragmatic View of UX Driven Development

THE VALUE OF PROTOTYPESMaximising Bang for Buck

Page 10: A Pragmatic View of UX Driven Development

Paper mockups

Page 11: A Pragmatic View of UX Driven Development

Wireframes (Balsamiq)

Page 12: A Pragmatic View of UX Driven Development

Interactive mockups (iRise)

Page 13: A Pragmatic View of UX Driven Development

Interactive mockups (SketchFlow)

Page 14: A Pragmatic View of UX Driven Development

Fidelity

Ease of creation

InteractiveMockups

Prototypes(Using UI Toolkits)

RequirementSpecifications

Fully FunctioningSoftware

Paper Mockups

Wireframes

Page 15: A Pragmatic View of UX Driven Development

Protototype (Blend)

Page 16: A Pragmatic View of UX Driven Development

Styling, Using sample data

Page 17: A Pragmatic View of UX Driven Development

Design surface on child items

Page 18: A Pragmatic View of UX Driven Development

Adding functionality

Page 19: A Pragmatic View of UX Driven Development

Prototype in action – it’s a real application!

Page 20: A Pragmatic View of UX Driven Development

Same project in developer’s IDE

Page 21: A Pragmatic View of UX Driven Development

UX PATTERNSA Common Language

Page 22: A Pragmatic View of UX Driven Development
Page 23: A Pragmatic View of UX Driven Development
Page 24: A Pragmatic View of UX Driven Development
Page 25: A Pragmatic View of UX Driven Development
Page 26: A Pragmatic View of UX Driven Development
Page 27: A Pragmatic View of UX Driven Development
Page 28: A Pragmatic View of UX Driven Development
Page 29: A Pragmatic View of UX Driven Development
Page 30: A Pragmatic View of UX Driven Development

EXAMPLESImplementing UI Patterns Using “Pattern Aware” Standardised UI Toolkits

Page 31: A Pragmatic View of UX Driven Development

Pattern: Visual Framework

Page 32: A Pragmatic View of UX Driven Development

Pattern: Ribbon

Page 33: A Pragmatic View of UX Driven Development

Pattern: Text Field Autocompletion

Page 34: A Pragmatic View of UX Driven Development

Pattern: Active Filtering

Page 35: A Pragmatic View of UX Driven Development

Patterns: Structured Format, Inline Validation

Page 36: A Pragmatic View of UX Driven Development

Pattern: Local Zooming

Page 37: A Pragmatic View of UX Driven Development

Pattern: Local Zooming

Page 38: A Pragmatic View of UX Driven Development

Patterns: Dashboard, Data Tips

Page 39: A Pragmatic View of UX Driven Development
Page 40: A Pragmatic View of UX Driven Development
Page 41: A Pragmatic View of UX Driven Development
Page 42: A Pragmatic View of UX Driven Development

Pattern: Treemap

Page 43: A Pragmatic View of UX Driven Development

Pattern: Dashboard

Page 44: A Pragmatic View of UX Driven Development

Resources• Mockup/Prototyping Tools

• Balsamiq (balsamiq.com)• iRise (irise.com)• Expression Blend & SketchFlow

(www.microsoft.com/expression/products/blend_overview.aspx)

• UX Pattern Libraries• Welie.com• Patternry (patternry.com)• UI Patterns (ui-patterns.com)• Quince (quince.infragistics.com)

Page 45: A Pragmatic View of UX Driven Development

Resources• UI Control Toolkits

• infragistics.com• jqueryui.com• sencha.com• telerik.com• devexpress.com

Page 46: A Pragmatic View of UX Driven Development

Thank You• [email protected]• superhappycoder.wordpress.com

• (slides will be posted here)