Strategic User Experience with Flex

Frank J. Garofalo

@fgarofalo | #devsummit #mapux #gisux

@fgarofalo | #devsummit #mapux #gisux

source: Adobe Systems Inc. Adobe MAX 2010 – “Save the Users.” http://www.youtube.com/watch?v=lNnGrS6UphE

what is user experience?

a person's perceptions and responses that result from the use or anticipated use of a product, system or service

source: ISO 9241-210

@fgarofalo | #devsummit #mapux #gisux

a button

developer

private function btn_mouseHandler (event:MouseEvent):void { }

designer

…stylizing the button

user experience

…messaging, positioning/layout, frequency of use

@fgarofalo | #devsummit #mapux #gisux

“Know your users and plan everything with them in mind.”

@fgarofalo | #devsummit #mapux #gisux

source: “Yes We Can: The Future of Government Online” white paper by Modius Associates. December 2011.

3 - phases

1. Strategy

2. Concept

3. Design

@fgarofalo | #devsummit #mapux #gisux

Test & Validate with end-users throughout phases

pseudo code

if know who is target end-user & their situation then

function Concept function Test & Validate

else if know the workflow for the user then function Design function Test & Validate

else function Strategy function Test & Validate

@fgarofalo | #devsummit #mapux #gisux

3 - phases

1. Strategy

2. Concept

3. Design

@fgarofalo | #devsummit #mapux #gisux

Test & Validate with end-users throughout phases

@fgarofalo | #devsummit #mapux #gisux

strategy

@fgarofalo | #devsummit #mapux #gisux

strategy

@fgarofalo | #devsummit #mapux #gisux

strategy

Image source: http://www.themailboxmoneyblog.com/wp-content/uploads/2011/08/www.jpg

@fgarofalo | #devsummit #mapux #gisux

strategy

ArcGIS Viewer for Flex - App Builder

@fgarofalo | #devsummit #mapux #gisux

strategy

• UX Strategy OneSheet www.slideshare.net/fgarofalo/ux-group-ux-strategy-onesheet

• UX Storyboarding Activity

www.slideshare.net/fgarofalo/users-story-ux-storyboarding

• 6-8-5 Ideation Activity

www.slideshare.net/fgarofalo/ideation-6-85-activity

concept

@fgarofalo | #devsummit #mapux #gisux

concept

@fgarofalo | #devsummit #mapux #gisux

concept

@fgarofalo | #devsummit #mapux #gisux

design

@fgarofalo | #devsummit #mapux #gisux

design

@fgarofalo | #devsummit #mapux #gisux

Image source: http://tristinsportfolio.files.wordpress.com/2011/06/art-of-balance-vii_1019-copy.jpg

design

@fgarofalo | #devsummit #mapux #gisux

Live from Antarctica – JordanRomero.com

test & validate

@fgarofalo | #devsummit #mapux #gisux

test & validate with end-users

@fgarofalo | #devsummit #mapux #gisux

source: Cassie McDaniel http://www.alistapart.com/articles/design-criticism-creative-process/

“You can use an eraser on the drafting table or a sledge hammer on the construction site.”

- Frank Lloyd Wright

@fgarofalo | #devsummit #mapux #gisux

Image source: http://trendyhomeideas.com/2011/07/importance-of-an-architect-and-planning-in-build-houses/

@fgarofalo | #devsummit #mapux #gisux

Design technical solution

Design interface to go on top of

technical solution

Design user experience

Design technical solution to support

user experience

source: “Yes We Can: The Future of Government Online” white paper by Modius Associates. December 2011.

“Art challenges technology, but technology inspires art.”

- John Lasseter, Disney / Pixar

@fgarofalo | #devsummit #mapux #gisux

Image source: Disney / Pixar. http://disney.go.com/disneyinsider/extras/toystory

@fgarofalo | #devsummit #mapux #gisux

Image source: http://www.subtraction.com/2011/03/28/an-illustration-for-stack-america

@fgarofalo | #devsummit #mapux #gisux

@fgarofalo | #devsummit #mapux #gisux

Questions?

Frank Garofalo UI / Human Factors Engineer, Esri Professional Services

@fgarofalo

#devsummit #mapux #gisux

@fgarofalo | #devsummit #mapux #gisux

Based on: http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/