Touch Interfaces - A New Age in Human Computer Interaction

Sometimes I don't think folks realize how big of a transformational event we're going through in IT right now.  For the first time in about 25 years, a new human-computer interaction (HCI) model has taken hold.  From the evolution of the punch card, to the keyboard, to the mouse; Touch has now taken hold as the next preferred mechanism of HCI.   Early adopters are now going to their touch smartphones and tablets "first" when they have a question that needs to be answered.  If it's not accessible from their touch based devices, they are then retreating to their keyboard and mouse driven PCs.  Smartphones are being brought into the field instead of ruggedized laptops.  Tablets are slowly making their way into conference rooms, laboratories, doctors offices, sales meetings and class rooms.  

Touch devices are being adopted more rapidly than any other HCI transformational shift in history; namely because the layer of abstraction between the human need and the machine has been steadily decreasing.  In each shift, computer interaction has become more intuitive.  

Punch cards:  Not so much.  

Keyboards: Well if you spend a semester learning how to type.  

Mice: Kind of intuitive but takes some coordination and practice.  

Touch: Boom, no learning curve.  

I know how to pinch, zoom, swipe and drag because I do it everyday. Everytime I pick up a piece of paper, turn a page in a book, move an object to the side of my desk or open up a file in a file cabinet.  I don't have to learn how to use a touch interface.  There is no abstraction between me and the machine.

The intuitiveness of touch is going to open up HCI to every demographic, regardless of education level or age.  From 18 month old babies to 95 year old senior citizens, touch just makes sense.

Get ready, because we're just getting started.

Performance Tips for Adobe Flex Mobile Apps

I just attended a session at Adobe Max given by Evtim Georgiev and Steve Shongrunden on performance tuning mobile Flex apps.  Since I'm a performance geek, I thought I'd post the tips here

How to optimize your mobile view rendering

1. Avoid heavy components
2. Defer object creation (lazy)
3. Use BitmapImage instead of Image
4. Use Group (with a Rectangle) instead of BorderContainer
5. Reduce nested Groups
6. Use mobile optimized component skins
7. Use ConstraintLayout instead of nested VGroup and HGroup

How to increase your Frames Rates

1. Use cacheAsBitmap on images that don't change often but redraw often
2. Avoid a lot of nested containers
3. Use ContentCache class for caching server side data - cache on by default, queue off by default
4. Use PNG for all images (much faster than jpg/gif)
5. Use Label over RichText over RichEditableText (Label is a LOT faster than the other two)
6. StyleableTextField (turn off edit and selection if not needed) - This is used by LabelItemRenderer and IconItemRenderer (can't use directly in MXML)
7. StyleableStageText - new in 4.6.  Use this very responsive editing and scrolling (used by mobile TextINput andTextArea (can't use directly in MXML)
8. Create ItemRenderes in MXML.  Use mobile-optimized IconItemRendererand LabelItemRenderer
9. Avoid creating heavy ItemRenderers (don't use heavy (text) components.  Turn off autoDrawBackground if not needed.  Avoid Filters/drop shadows.
10. Avoid complex binding expressions (i.e. on scrollable content)
11. Reduce nested Groups

Some other tidbits: Why are Adobe mobile optimized components better?

• Use StylableTextField (lightweight layout)
• More sophisticated ContentCache
• Their configurable (use styles for properties)

What's coming in Flex 4.6?

• On demand scrollbars (created when touch interaction starts) - up to 15% faster for list based views
• ItemRendererFunction recycles, so now it's mobile friendly
• 32-bit rendering in Android available, but 16-bit rendering is faster

Feel free to add any other tips in the comments below.