Effective UI development
using Adobe Flex

Uday M. Shankar | April 2009 | Bangalore, India
Who am I?
                                                               O.
                                              ...
Disclaimer

•All views expressed here-in are my
 own and do not reflect that they are
 endorsed by my employer
•This prese...
Ground rules

•Stop me at any time for questions or discussion.
•Let’s focus on “what”, not “why” and “how”.




         ...
User Experience

•Beware of the
 “CHASM”
•UX could be the
 BRIDGE across the
 chasm                                  Norma...
User Interface Development

•It’s all about facilitating the user
 to perform a specific task in a specific               ...
UI Development
                                                                is NOT about
                              ...
(U,E)
                                                                          Lewin’s equation



User behavior
        ...
What we want users to see




                                                            9
13 April 2009   Effective UI D...
What users actually see




                                                            10
13 April 2009   Effective UI De...
UI has evolved

•Full page refresh replaced by small content updates
•Hyperlinks & Submit buttons replaced by a full range...
Why all this is even
more important in
the context of
Adobe Flex?
                                                        ...
Why Flex?

•rich user experience
•cross-platform, accessibility, NLS
•Adobe AIR integration
•Open source, standards-based ...
Don’t get carried away

•Many Flex designers have a tendency to get carried
 away with the cool effects that’s possible us...
Front End keeps changing

•HTML > DHTML > XUL > AJAX > Flex/Silverlight > ???
•Abstract the UI completely from the busines...
Follow standards

•Do not break paradigms unnecessarily
•Do not use a lot of colors on screen
•Follow basic UCD & HCI prin...
Leverage Flex CSS features

• Use the skinning features of
  Flex to effectively apply CSS
  across your application
• Run...
Vs.




                                                            18
13 April 2009   Effective UI Development using Adob...
Ted Patrick says…
   http://www.onflex.org/ted/2007/11/managing-ui-development-expectations.php



•Manage expectations us...
Get your X & Y right

•The position of components on screen is IMPORTANT.
•The dimensions of components on screen is
 IMPO...
Accessibility

•Generally RIAs are difficult for people with certain
 disabilities
•Accessibility is catching on.
•Flex’s ...
Remember i18n & l10n

•If your application is for global audience, think about
 i18n & l10n.
•Think about it in the beginn...
Use frameworks

•Use frameworks – Cairngorm, PureMVC,
•Try to adopt patterns as much as possible. Do not
 overdo it.
•Chec...
Always validate data

• Tell the user NOW when
  things go wrong.
• Use Flex validators to
  effective validate user input...
Work smart, not hard

•Create components and re-use them across application
•Extend standard components & custom component...
Be modular

• Modules are SWF files which can be
  loaded dynamically
• They cannot run independently
• Applications can s...
Do not ‘over-engineer’

• Abstraction and perfection is
  good. But, don’t overdo it.
• Pattern implementation are
  only ...
Breath life into your UIs

• Animation for aesthetic reasons is
  good!
• Use subtle transitions to add
  effects to your ...
Check it out

•Flex.org / Labs.adobe.com
•blog.flexexamples.com
•ntt.cc
•Tour de Flex – Use it &
 Contribute to it!
      ...
My ultimate metric for Ux

•If the system was a
 person, how long
 would it take before
 you punch it in the
 nose!
      ...
Bad UI




                                                            31
13 April 2009   Effective UI Development using A...
Good UI




                                                            32
13 April 2009   Effective UI Development using ...
Do not
hesitate to
push the
red button
Be ready to go back to the drawing board at any time.
PPTs that I ripped off from ;)

•Molecular Inc.
•ErgoSign
•Dave Meeker – RoundArch
•Garrett Dimon
•And many other… Check o...
Enough
                                Slides!
                         Let’s look at
                          something
...
Questions?
                                                            36
13 April 2009   Effective UI Development using A...
Thank you
             udayms@gmail.com

             Twitter @udayms

flexed.wordpress.com | udayms.wordpress.com
Upcoming SlideShare
Loading in...5
×

Effective UI Development using Adobe Flex

7,178

Published on

In the recent years, UI developer's find themselves facing bigger challenges in the context of RIAs. With emergence of technologies like Adobe Flex, Silverlight etc., more power and responsibility is handed over to the UI developer/designer. This PPT gives you insight into how to tackle some of those challenges!

I have used liberally content, graphics, presentation styles etc. from good ppts posted here at slideshare.net.... I have included an acknowledgment slide towards the end. :)

Published in: Technology, Business
3 Comments
41 Likes
Statistics
Notes
  • Hiring 2+ Flex developers in Charlotte NC direct hire / full time interested in all levels of experience. Open to Sponsor and relo!! email me if interested at andrewanthony@technisource.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice Deck !! Quite simple ...to follow !! one Question ? Is Flex gonna Stay ? How Long ? do you think ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very good presentation ! Thanks !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,178
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
3
Likes
41
Embeds 0
No embeds

No notes for slide

Effective UI Development using Adobe Flex

  1. 1. Effective UI development using Adobe Flex Uday M. Shankar | April 2009 | Bangalore, India
  2. 2. Who am I? O. LL is… HE e •Sr. UI Designer @ NOKIA m ar na •UI dev since 1999 k My an h •Flex since 2005 .S yM •From Trivandrum, Kerala da U 2 13 April 2009 Effective UI Development using Adobe Flex
  3. 3. Disclaimer •All views expressed here-in are my own and do not reflect that they are endorsed by my employer •This presentation might contain stuff that you already know! ;) •Focusing on Flex 2 and 3… Not 4! 3 13 April 2009 Effective UI Development using Adobe Flex
  4. 4. Ground rules •Stop me at any time for questions or discussion. •Let’s focus on “what”, not “why” and “how”. 4 13 April 2009 Effective UI Development using Adobe Flex
  5. 5. User Experience •Beware of the “CHASM” •UX could be the BRIDGE across the chasm Norman’s Adoption Curve 5 13 April 2009 Effective UI Development using Adobe Flex
  6. 6. User Interface Development •It’s all about facilitating the user to perform a specific task in a specific USER context in a fast and efficient manner by leveraging the power of technology and design. TASK CONTEXT 6 13 April 2009 Effective UI Development using Adobe Flex
  7. 7. UI Development is NOT about making screens look better! 7 13 April 2009 Effective UI Development using Adobe Flex
  8. 8. (U,E) Lewin’s equation User behavior Behavior is a function of the User & the Environment •There is an intended behavior that we want to create, •We have no direct control over the user •But, via interaction design we have means to control the environment and to evaluate the resulting effects 8 13 April 2009 Effective UI Development using Adobe Flex
  9. 9. What we want users to see 9 13 April 2009 Effective UI Development using Adobe Flex
  10. 10. What users actually see 10 13 April 2009 Effective UI Development using Adobe Flex
  11. 11. UI has evolved •Full page refresh replaced by small content updates •Hyperlinks & Submit buttons replaced by a full range of interactive components •Interaction is characterized by direct manipulation, lightweight actions & in-page actions. •People are now used to demanding more… 11 13 April 2009 Effective UI Development using Adobe Flex
  12. 12. Why all this is even more important in the context of Adobe Flex? 12 13 April 2009 Effective UI Development using Adobe Flex
  13. 13. Why Flex? •rich user experience •cross-platform, accessibility, NLS •Adobe AIR integration •Open source, standards-based framework •Thick-thin client •Works with other technologies in backend 13 13 April 2009 Effective UI Development using Adobe Flex
  14. 14. Don’t get carried away •Many Flex designers have a tendency to get carried away with the cool effects that’s possible using flex. •Possibility = Usability •Cool = Usable •Users do not differentiate between the UI & Backend. •For Users UI is the application. 14 13 April 2009 Effective UI Development using Adobe Flex
  15. 15. Front End keeps changing •HTML > DHTML > XUL > AJAX > Flex/Silverlight > ??? •Abstract the UI completely from the business layer. •Use XML to define text on screen. •Use well defined folder structures to separate the VIEW from the MODEL & the CONTROLLER 15 13 April 2009 Effective UI Development using Adobe Flex
  16. 16. Follow standards •Do not break paradigms unnecessarily •Do not use a lot of colors on screen •Follow basic UCD & HCI principles while designing •Do not create Frankenstein components! 16 13 April 2009 Effective UI Development using Adobe Flex
  17. 17. Leverage Flex CSS features • Use the skinning features of Flex to effectively apply CSS across your application • Runtime CSS is another Killer from Flex. • Check out scalenine.com 17 13 April 2009 Effective UI Development using Adobe Flex
  18. 18. Vs. 18 13 April 2009 Effective UI Development using Adobe Flex
  19. 19. Ted Patrick says… http://www.onflex.org/ted/2007/11/managing-ui-development-expectations.php •Manage expectations using design. •Clients often judge progress based on UI design. •Clients want to see a steady progression of development. •Use a plain CSS skin for Flex and dial the chrome down to black and white. 19 13 April 2009 Effective UI Development using Adobe Flex
  20. 20. Get your X & Y right •The position of components on screen is IMPORTANT. •The dimensions of components on screen is IMPORTANT. •Drag & Drop is not always uber-cool! •Control to user is good as long as the system still has control. 20 13 April 2009 Effective UI Development using Adobe Flex
  21. 21. Accessibility •Generally RIAs are difficult for people with certain disabilities •Accessibility is catching on. •Flex’s accessibility features are good & easy to implement. 21 13 April 2009 Effective UI Development using Adobe Flex
  22. 22. Remember i18n & l10n •If your application is for global audience, think about i18n & l10n. •Think about it in the beginning. •Think about it while designing. •Think about it while skinning. 22 13 April 2009 Effective UI Development using Adobe Flex
  23. 23. Use frameworks •Use frameworks – Cairngorm, PureMVC, •Try to adopt patterns as much as possible. Do not overdo it. •Check out http://ntt.cc for a good list of Flex design patterns & tutorials. 23 13 April 2009 Effective UI Development using Adobe Flex
  24. 24. Always validate data • Tell the user NOW when things go wrong. • Use Flex validators to effective validate user input. • Create your own custom validators for custom needs. 24 13 April 2009 Effective UI Development using Adobe Flex
  25. 25. Work smart, not hard •Create components and re-use them across application •Extend standard components & custom components wisely •Take advantage of what the platform does well. Avoid trying to do what the platform doesn’t. •Use free components available in the community 25 13 April 2009 Effective UI Development using Adobe Flex
  26. 26. Be modular • Modules are SWF files which can be loaded dynamically • They cannot run independently • Applications can share the same module • Lazy Loading - ModuleLoader or ModuleManager. 26 13 April 2009 Effective UI Development using Adobe Flex
  27. 27. Do not ‘over-engineer’ • Abstraction and perfection is good. But, don’t overdo it. • Pattern implementation are only as valuable as the problem they solve. 27 13 April 2009 Effective UI Development using Adobe Flex
  28. 28. Breath life into your UIs • Animation for aesthetic reasons is good! • Use subtle transitions to add effects to your application • Provide instant feedback to user 28 13 April 2009 Effective UI Development using Adobe Flex
  29. 29. Check it out •Flex.org / Labs.adobe.com •blog.flexexamples.com •ntt.cc •Tour de Flex – Use it & Contribute to it! 29 13 April 2009 Effective UI Development using Adobe Flex
  30. 30. My ultimate metric for Ux •If the system was a person, how long would it take before you punch it in the nose! 30 13 April 2009 Effective UI Development using Adobe Flex
  31. 31. Bad UI 31 13 April 2009 Effective UI Development using Adobe Flex
  32. 32. Good UI 32 13 April 2009 Effective UI Development using Adobe Flex
  33. 33. Do not hesitate to push the red button Be ready to go back to the drawing board at any time.
  34. 34. PPTs that I ripped off from ;) •Molecular Inc. •ErgoSign •Dave Meeker – RoundArch •Garrett Dimon •And many other… Check out slideshare.net for many of these PPTs ;) 34 13 April 2009 Effective UI Development using Adobe Flex
  35. 35. Enough Slides! Let’s look at something else! 35 13 April 2009 Effective UI Development using Adobe Flex
  36. 36. Questions? 36 13 April 2009 Effective UI Development using Adobe Flex
  37. 37. Thank you udayms@gmail.com Twitter @udayms flexed.wordpress.com | udayms.wordpress.com

×