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. :)

1. Effective UI development
using Adobe Flex
Uday M. Shankar | April 2009 | Bangalore, India

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. 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. 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. 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. 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. UI Development
is NOT about
making screens
look better!
7
13 April 2009 Effective UI Development using Adobe Flex

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. What we want users to see
9
13 April 2009 Effective UI Development using Adobe Flex

10. What users actually see
10
13 April 2009 Effective UI Development using Adobe Flex

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. Why all this is even
more important in
the context of
Adobe Flex?
12
13 April 2009 Effective UI Development using Adobe Flex

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. 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. 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. 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. 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. Vs.
18
13 April 2009 Effective UI Development using Adobe Flex

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Bad UI
31
13 April 2009 Effective UI Development using Adobe Flex

32. Good UI
32
13 April 2009 Effective UI Development using Adobe Flex

33. Do not
hesitate to
push the
red button
Be ready to go back to the drawing board at any time.

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. Enough
Slides!
Let’s look at
something
else! 35
13 April 2009 Effective UI Development using Adobe Flex

36. Questions?
36
13 April 2009 Effective UI Development using Adobe Flex

37. Thank you
udayms@gmail.com
Twitter @udayms
flexed.wordpress.com | udayms.wordpress.com