Effective UI Development using Adobe Flex

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

13 April 2009 Effective UI Development using Adobe Flex 2 Who am I? •Sr. UI Designer @ NOKIA •UI dev since 1999 •Flex since 2005 •From Trivandrum, Kerala HELLO. My name is… Uday M. Shankar

Slide 3

Slide 3 text

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!

Slide 4

Slide 4 text

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”.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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 context in a fast and efficient manner by leveraging the power of technology and design. USER TASK CONTEXT

Slide 7

Slide 7 text

13 April 2009 Effective UI Development using Adobe Flex 7 UI Development is NOT about making screens look better! UI Development is NOT about making screens look better!

Slide 8

Slide 8 text

13 April 2009 Effective UI Development using Adobe Flex 8 User behavior •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 (U,E) Behavior is a function of the User & the Environment Lewin’s equation

Slide 9

Slide 9 text

13 April 2009 Effective UI Development using Adobe Flex 9 What we want users to see

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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…

Slide 12

Slide 12 text

13 April 2009 Effective UI Development using Adobe Flex 12 Why all this is even more important in the context of Adobe Flex? Why all this is even more important in the context of Adobe Flex?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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!

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

13 April 2009 Effective UI Development using Adobe Flex 18 Vs.

Slide 19

Slide 19 text

13 April 2009 Effective UI Development using Adobe Flex 19 Ted Patrick says… •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. http://www.onflex.org/ted/2007/11/managing-ui-development-expectations.php

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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!

Slide 30

Slide 30 text

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!

Slide 31

Slide 31 text

13 April 2009 Effective UI Development using Adobe Flex 31 Bad UI

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

13 April 2009 Effective UI Development using Adobe Flex 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 ;)

Slide 35

Slide 35 text

13 April 2009 Effective UI Development using Adobe Flex 35 Enough Slides! Let’s look at something else! Enough Slides! Let’s look at something else!

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

[email protected] Twitter @udayms flexed.wordpress.com | udayms.wordpress.com Thank you Thank you