user experience for flex developers - dave meeker
DESCRIPTION
This was a talk on day one at Flex Camp Chicago. Dave Meeker, gave this overview of things that teams/companies new to Adobe Flex should consider in order to have their developers fully supportive of great user experience design. This talk discussed the designer-developer workflow, process and organizational adaptation required to build world-class RIAs, and 11 things that every Flex developer should consider when working on building applications.TRANSCRIPT
Dave Meeker
User Experience for Flex Developers
building harmony betweendesign & developmentdave meeker, user experience strategist - roundarch
Dave Meeker
Who am I?
2
DaveMeeker([email protected])
UserExperienceStrategist‐Roundarch
ManagesRoundarchLabs
ManagesAgency’sPartnershipwithMicrosoFandAdobe
Blog:www.whatanexperience.org/O’ReillyInsideRIABlog
AlwaysHiringFlexDevelopers:‐)
CoreMember:TheMerapiProject
Hybridbackground:Technology&Design
UsingFlashsince’96andFlexsince“MacromediaRoyale”(pre‐alpha)
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.
3
(IXD) Interaction Design - (VIZ) Visual Design - (IA) Information Architecture
4
*(UX) User Experience Flavored
It’s all the same soup
Dave Meeker
User Experience Design
5
(IA)‐InformaXonArchitecture
(IXD)‐InteracXonDesign
(VIZ)VisualDesign
(UX)UserExperienceDesign(ok?)
Dave Meeker
Some UX Deliverables*
6
User MatrixPersonasDetailed Business
Requirements
GUI Wireframes(that include notation / business rules)
Visual Design Comps
*NOT an exhaustive list of all User Experience Deliverables
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”
7
Dave Meeker
User ExperienceMorethanvisualdesign,andassomeputit,“pre^ypictures”.
BecomingthekeydriverbehindconsumerandenterprisesoFwaredevelopmentiniXaXves.
Overthelast10years,we’vereallyincreasedthepossibiliXesofwhatcanhappenontheback‐end.
Back‐endapplicaXonshavepavedthewayforwhatwecannowleverageonthefront‐end.
UsersarenowdemandingthatapplicaXonsadapttotheirevolvingskills,wants,andneeds.
Ifyouaredeveloping“RIAs”(inanytechnology)YOUcareaboutuserexperience.
Dave Meeker
Great User Experiences
9
RIASweet Spot
design technology
strategy
Dave Meeker
Adobe Flex* was created with
a single goal...
creating better user experiences
10
*and flash, AIR, & other RIA technologies
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.
11
Dave Meeker
How Can You Enable Great User Experiences?
12
Dave Meeker
3 types of Flex developer situations
13
Smaller Projects / Small Teams with Tight Integration
Big Projects / Large, Multi-Disciplinary Team / More Moving Parts
Individual Developer - Doing Design, Development Solo - You own it all
UX, Visual Design, Architecture, Development
UX Input, Architecture, Development
UX Input (fight for it!), Architecture, Development
Dave Meeker
Don’t get Sketched Out
14
The Process of Building RIAs is different 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 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 changeConceptual DesignsPrototypingLean on Iterative processes when at all possible
Dave Meeker
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).
16
Dave Meeker
How I like to approach projects @ RoundarchStrategy - 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.
17
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 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.
18
Dave Meeker
10 +1 Things You Should Do when building Flex Applications!
19
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.
20
Dave Meeker
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!)
21
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
22
Dave Meeker
Follow the Leader. Learn from Others...Follow your Architect’s LeadUsing 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.
23
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.
24
Dave Meeker
on Frameworks Code Right: Keep things SeparateKnowing 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).
25
Lean
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 efficiency.
26
Dave Meeker
Breath Life into Your Apps. Discrete Animation, Physics, etc.Fades, Movement, Resizing/Scaling, Collision, Object Physics, Etc.
27
Dave Meeker
Take a Load Off.
Define an asset loading strategy that optimizes the
user experience
28
Dave Meeker
Think Outside the Grid Use a layout that works best for the experience you want to createDon’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!
29
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://flex.org/tour
A critical tool in the arsenal of anyone learning Flex!
Integrates with Eclipse (Search, etc) by using Merapi (wait for tomorrow!)
30
Dave Meeker
“Serious” ApplicationsAre 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.