Published on January 26, 2009
Dave Meeker User Experience for Flex Developers building harmony between design & development dave meeker, user experience strategist - roundarch
2 Dave Meeker Who am I? Dave Meeker (firstname.lastname@example.org) 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)
3 Dave Meeker 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.
4 (IXD) Interaction Design - (VIZ) Visual Design - (IA) Information Architecture It’s all the same soup *(UX) User Experience Flavored
5 Dave Meeker User Experience Design (IA) ‐ InformaXon Architecture (IXD) ‐ InteracXon Design (VIZ) Visual Design (UX) User Experience Design (ok?)
6 Dave Meeker Some UX Deliverables* Personas User Matrix Detailed Business Requirements GUI Wireframes Visual Design Comps (that include notation / business rules) *NOT an exhaustive list of all User Experience Deliverables
7 Dave Meeker Pre-RIA Web Developers got away with Murder by proclaiming “You can’t do that in HTML”
7 Dave Meeker Pre-RIA Web Developers got away with Murder by proclaiming “You can’t do that in HTML”
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.
9 Dave Meeker Great User Experiences strategy RIA Sweet Spot design technology
10 Dave Meeker Adobe Flex* was created with a single goal... creating better user experiences *and ﬂash, AIR, & other RIA technologies
11 Dave Meeker 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.
12 Dave Meeker How Can You Enable Great User Experiences?
13 Dave Meeker 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 (ﬁght for it!), Architecture, Development
14 Dave Meeker Don’t get Sketched Out The Process of Building RIAs is diﬀerent than Legacy Web Design
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 diﬀerent people than your traditional “Web” development or “Desktop” development team. Internal team – Enterprise product development, etc – Building stuﬀ “for us”. External team – Building stuﬀ “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
16 Dave Meeker Project Approach Change it. Learn From It. Reﬁne It. Work in hybrid teams - Get Developers involved early in the project process. Don’t allow yourself to be handed documentation quot;over the wallquot; Go through iterations: sketch >> prototype / proof of concept >> prototype >> test >> prototype >> test >> design >> test >> design>> develop >> test (or something like this).
17 Dave Meeker How I like to approach projects @ Roundarch Strategy - Usually a small, diverse team that works with the client to help them deﬁne 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 ﬁgure out the “what are we really trying to ﬁx? 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 ﬂash). Design: Both Technical design and visual design. Teams work together, with little separation from designers and developers, analysts, and testers. As requirements are reﬁned, 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 identiﬁed user scenarios. Test results are fed back to the team who reﬁne the design and resubmit to testing.
18 Dave Meeker 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 solidiﬁed, 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.
19 Dave Meeker 10 +1 Things You Should Do when building Flex Applications!
20 Dave Meeker 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.
21 Dave Meeker Designers & Developers Work together to create great results! Try to stimulate and enhance the quot;designer / developerquot; workﬂow. - Flash Catalyst, Creative Suite / Adobe Product workﬂow / 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!)
22 Dave Meeker 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
23 Dave Meeker 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 ﬂexibility and portability.
24 Dave Meeker 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.
25 Dave Meeker 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).
26 Dave Meeker 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 efﬁciency.
27 Dave Meeker Breath Life into Your Apps. Discrete Animation, Physics, etc. Fades, Movement, Resizing/Scaling, Collision, Object Physics, Etc.
28 Dave Meeker Take a Load Oﬀ. Deﬁne an asset loading strategy that optimizes the user experience
29 Dave Meeker 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 ﬂuid 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 ﬁghting!
30 Dave Meeker 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://ﬂex.org/tour A critical tool in the arsenal of anyone learning Flex! Integrates with Eclipse (Search, etc) by using Merapi (wait for tomorrow!)
Dave Meeker “Serious” Applications Are no longer Boring, Bad, Poorly Designed and “A Challenge” to use They have started to reﬂect 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.
32 Dave Meeker Thanks! dave meeker - roundarch - email@example.com
1. Dave Meeker User Experience for Flex Developers building harmony between design & development ...
Make the Move to HTML5? Everything You Need to Know ... the combined force of user experience designers and ... released Flash MX and later Flex, ...
Share Psychology for User Experience. ... User Experience For Flex Developers - Dave Meeker Comments. RECOMMENDED. User Experience for Mobile.
Who will win the tablet race in the consumer ... Dave Meeker, User Experience, ... makes it a nice target for the masses of Flash / Flex developers out ...
View Jordan Snyder’s professional profile on LinkedIn. ... User Experience; Flex; Flash; Web Design; ... Jordan Snyder, Chandra Raju, Dave Meeker,
Roundarch and Tesla Highlight Next-Generation Driving Experience at ... Dave Meeker, Roundarch director ... technology that powers the user experience in ...
SMC Flex User Manual ...
View Brennon Martin’s professional profile ... It's not enough to consider only the user's experience on the screen while interacting with ... Dave ...
Macromedia Flex provides a new ... a Rich Client in Your Web Apps. ... with—animation and transitions and sliding panels and user interfaces..." - Dave ...