strib7's picture
From strib7 rss RSS  subscribe Subscribe

User Experience For Flex Developers - Dave Meeker 



User Experience For Flex Developers - Dave Meeker

 

 
 
Tags:  hci  design  adobe  ria  ui  flex  experience  ux 
Views:  943
Downloads:  3
Published:  December 10, 2009
 
0
download

Share plick with friends Share
save to favorite
Report Abuse Report Abuse
 
Related Plicks
No related plicks found
 
More from this user
2010 BMW 3 Series Sedan Los Angeles

2010 BMW 3 Series Sedan Los Angeles

From: strib7
Views: 362
Comments: 0

Replacement Dell INSPIRON 6000 battery-6600mAh/11. 1V

Replacement Dell INSPIRON 6000 battery-6600mAh/11.1V

From: strib7
Views: 448
Comments: 0

Imagine you are a high school educated single mother with two ...

Imagine you are a high school educated single mother with two ...

From: strib7
Views: 607
Comments: 1

ôN TậP Ngữ PháP TiếNg Anh

ôN TậP Ngữ PháP TiếNg Anh

From: strib7
Views: 465
Comments: 0

A new’ way to program dynamic web applications

A new’ way to program dynamic web applications

From: strib7
Views: 191
Comments: 0

Google Magic Formula Advanced 2009 Strategies

Google Magic Formula Advanced 2009 Strategies

From: strib7
Views: 310
Comments: 0

See all 
 
 
 URL:          AddThis Social Bookmark Button
Embed Thin Player: (fits in most blogs)
Embed Full Player :
 
 

Name

Email (will NOT be shown to other users)

 

 
 
Comments: (watch)
 
 
Notes:
 
Slide 1: Dave Meeker User Experience for Flex Developers building harmony between design & development dave meeker, user experience strategist - roundarch
Slide 2: Dave Meeker 2 Who am I? Dave
Meeker
(dmeeker@roundarch.com) User
Experience
Strategist
‐
Roundarch Manages
Roundarch
Labs Manages
Agency’s
Partnership
with
MicrosoF
and
Adobe Blog:
www.whatanexperience.org
/
O’Reilly
Inside
RIA
Blog Always
Hiring
Flex
Developers
:‐) Core
Member:
The
Merapi
Project Hybrid
background:
Technology
&
Design Using
Flash
since
’96
and
Flex
since
“Macromedia
Royale”
(pre‐ alpha)
Slide 3: Dave Meeker 3 Warning! The following slide(s) may cause “User Experience” Professionals to roll their eyes and groan because it seems as if maybe this talk is starting out on the wrong foot.
Slide 4: 4 (IXD) Interaction Design - (VIZ) Visual Design - (IA) Information Architecture It’s all the same soup *(UX) User Experience Flavored
Slide 5: Dave Meeker 5 User Experience Design (IA)
‐
InformaXon
Architecture (IXD)
‐
InteracXon
Design (VIZ)
Visual
Design (UX)
User
Experience
Design

(ok?)
Slide 6: Dave Meeker 6 Some UX Deliverables* Detailed Business Requirements Personas User Matrix GUI Wireframes (that include notation / business rules) *NOT an exhaustive list of all User Experience Deliverables Visual Design Comps
Slide 7: Dave Meeker 7 Pre-RIA Web Developers got away with Murder by proclaiming “You can’t do that in HTML”
Slide 8: Dave Meeker 7 Pre-RIA Web Developers got away with Murder by proclaiming “You can’t do that in HTML”
Slide 9: Dave Meeker User Experience More
than
visual
design,
and
as
some
put
it,
“pre^y
pictures”. Becoming
the
key
driver
behind
consumer
and
enterprise
soFware
development
 iniXaXves. Over
the
last
10
years,
we’ve
really
increased
the
possibiliXes
of
what
can
 happen
on
the
back‐end. Back‐end
applicaXons
have
paved
the
way
for
what
we
can
now
leverage
on
 the
front‐end. Users
are
now
demanding
that
applicaXons
adapt
to
their
evolving
skills,
wants,
 and
needs. If
you
are
developing
“RIAs”
(in
any
technology)
YOU
care
about
user
experience.

Slide 10: Dave Meeker 9 Great User Experiences strategy RIA Sweet Spot design technology
Slide 11: Dave Meeker 10 Adobe Flex* was created with a single goal... creating better user experiences *and flash, AIR, & other RIA technologies
Slide 12: Dave Meeker 11 All devices that contain screens provide opportunities for user experience design and development. It’s not just about the “computer” The coming years will introduce more advanced, network-connected devices for both business and consumer use. When web technology fuses with “legacy devices” such as automobiles, appliances and televisions, great user experience design is required to ensure adoption. Mobile is obvious and here now.
Slide 13: Dave Meeker 12 How Can You Enable Great User Experiences?
Slide 14: Dave Meeker 13 3 types of Flex developer situations Individual Developer - Doing Design, Development Solo - You own it all UX, Visual Design, Architecture, Development Smaller Projects / Small Teams with Tight Integration UX Input, Architecture, Development Big Projects / Large, Multi-Disciplinary Team / More Moving Parts UX Input (fight for it!), Architecture, Development
Slide 15: Dave Meeker 14 Don’t get Sketched Out The Process of Building RIAs is different than Legacy Web Design
Slide 16: Dave Meeker The Process Challenges of Creating Great RIA Experiences Building RIAs changes the way you work. A Great RIA design and development team are different people than your traditional “Web” development or “Desktop” development team. Internal team – Enterprise product development, etc – Building stuff “for us”. External team – Building stuff “for others” – Consulting / Pro services / design shop Your team make-up needs to change Your process must change Conceptual Designs Prototyping Lean on Iterative processes when at all possible
Slide 17: Dave Meeker 16 Project Approach Change it. Learn From It. Refine It. Work in hybrid teams - Get Developers involved early in the project process. Don’t allow yourself to be handed documentation "over the wall" Go through iterations: sketch >> prototype / proof of concept >> prototype >> test >> prototype >> test >> design >> test >> design>> develop >> test (or something like this).
Slide 18: Dave Meeker 17 How I like to approach projects @ Roundarch Strategy - Usually a small, diverse team that works with the client to help them define problems, understand what options are available to solve the problems, how their competitors deal with the same problems and how the problem & the solution to the problem will evolve over time based on other contributing factors. They help figure out the “what are we really trying to fix? question. Discovery phase allows team to understand all facets of the client’s problem. Every discovery phase is different and unique to the situation. Deliverables: User Experience Brief, Personas, Conceptual Design (usually prototype in flash). Design: Both Technical design and visual design. Teams work together, with little separation from designers and developers, analysts, and testers. As requirements are refined, the prototype grows from a clickable mirage to a prototype with re-usable code. Agile process helps, and requires full buy-in from team and client or it will not work! During this phase, testing is done with users to ensure that it meets the functional needs of all identified user scenarios. Test results are fed back to the team who refine the design and resubmit to testing.
Slide 19: Dave Meeker 18 How I like to approach projects @ Roundarch Development still involves design team members, and begins once 60%-70% of the critical requirements are documented in either wireframe or the conceptual prototype. The team starts with the things most likely not to change. As requirements are solidified, they are built into the application. As soon as an alpha GUI is available, it is staged and the combined team follow an Agile path to getting things done. If changes come from testing, or as new requirements from the client, they are simply worked into the overall project and dealt with based on priority. Project Managers are more like Project “Leads”, with a diverse background and an understanding of both technology and design, the PM’s “own” the project. They are hands on, and are focused on every aspect of the project. They work with a tech lead and creative lead, who is responsible to the PM for their team’s deliverables.
Slide 20: Dave Meeker 19 10 +1 Things You Should Do when building Flex Applications!
Slide 21: Dave Meeker 20 Keep your Eye on the Ball. Review Other GUIs constantly. Consume Them, Borrow From Them, Improve upon them. Understand what your users are seeing in different applications, operating systems, etc. Study trends. One-up the competition, but don’t design for “design’s sake”... Design because it matters.
Slide 22: Dave Meeker 21 Designers & Developers Work together to create great results! Try to stimulate and enhance the "designer / developer" workflow.    - Flash Catalyst, Creative Suite / Adobe Product workflow / DeGrafa (Skinning Framework) Be precise. Pixel perfect skins matter. Respect the work of Experience Architects and Designers by implementing UIs to perfection! DO NOT BE AFRAID to suggest new ideas and solutions to problems! (collaboration and sharing is very important!)
Slide 23: Dave Meeker 22 Repeat After Me... Implementing a Design that is “Close” is not usually “Close Enough” Create a theme project, includes skins, images, etc..., to allow ease of switching and maintainability. Use CSS Involve design team members throughout the course of the project
Slide 24: Dave Meeker 23 Follow the Leader. Learn from Others...Follow your Architect’s Lead Using design patterns, frameworks, etc, is not as important as convention. Maintenance is expensive, consistency throughout an application is extremely important. Comment your code! Implement Flex component correctly. Build robust custom components to allow flexibility and portability.
Slide 25: Dave Meeker 24 Work Smart, Not Hard. Find / invent tools that help minimize repetition. Use best practices and technologies that make your life easier, but don't be a zealot. Don't be afraid to try something new.
Slide 26: Dave Meeker 25 Lean on Frameworks Code Right: Keep things Separate Knowing the basics is important. It is probably not a bad idea to get your team comfortable on one of the popular Flex frameworks (Cairngorm, pureMVC, etc).
Slide 27: Dave Meeker 26 Take Risks... But don’t be crazy! Write code that uses abstraction, but don't go crazy... Implementing the most elegant, abstracted patterns take time. These implementations are only as valuable as the problems they solve. Over-engineering is one of the biggest losses to efficiency.
Slide 28: Dave Meeker 27 Breath Life into Your Apps. Discrete Animation, Physics, etc. Fades, Movement, Resizing/Scaling, Collision, Object Physics, Etc.
Slide 29: Dave Meeker 28 Take a Load Off. Define an asset loading strategy that optimizes the user experience
Slide 30: Dave Meeker 29 Think Outside the Grid Use a layout that works best for the experience you want to create Don’t be afraid to build an interface that really solves the problem or creates the experience that you need most. Enhance your interface with fluid object layouts (that react to one another) and don’t be shy about breaking outside the bounds of a constrained box. Go full-screen if you need it, but don’t hijack someone’s experience. Use the right “magic” for the battle you are fighting!
Slide 31: Dave Meeker 30 Tour de Flex Use It, Contribute To It. Tour de Flex, created by Adobe is a major improvement over the old “Flex component explorer” - http://flex.org/tour A critical tool in the arsenal of anyone learning Flex! Integrates with Eclipse (Search, etc) by using Merapi (wait for tomorrow!)
Slide 32: Dave Meeker “Serious” Applications Are no longer Boring, Bad, Poorly Designed and “A Challenge” to use They have started to reflect the changes that have happened in the consumer space: Less Serious Feeling More Visually Appealing Easier to Understand “Signposting” Design Designed with users in mind instead of based on legacy IT capabilities Don’t have to feel monstrous, or overwhelming Examples? Citi, US Air Force, Motorola, US Army, Northern Trust, etc.
Slide 33: Dave Meeker 32 Thanks! dave meeker - roundarch - dmeeker@roundarch.com

   
Time on Slide Time on Plick
Slides per Visit Slide Views Views by Location