Emerging User Interaction Technologies

If you thought the iPhone was cool have a look at some of the videos below to know where we’re heading with user interaction. Multi-touch might stay around for a bit but with mind-blowing technologies coming up we might be heading toward a whole new realm of human computer interaction.

Here are some examples:

1. Microsoft’s process desk (MS Surface product family)

2. Surface (also by MS, its already gone commercial with AT&T)

3. Gesture based interaction (by White Electronic Company?)

4. Touch light holographic gesture based interaction (also by MS)

A common theme underlying these systems is that applications no longer need to be bound to a window. These systems warrant more natural UI’s which blend into an average person’s environment (developers and tech savvy people not included).

An immediate observation that emerges from the first video on Microsoft’s process desk is that there is bound to be greater efficiency in accomplishing tasks because individuals no longer need to memorize process lists to accomplish tasks but visually comprehend the flow of information. Furthermore, since the gestures and interactivity tend to resemble conventional ways of accomplishing tasks or atleast simplify them, it can help in breaking down the inhibition towards technology use and thus improve an inidividual’s perceived capability towards using the system. Thus applications developed for these systems will have to go beyond ease of use and add substantive value to ensure usage. Moreover with little effort (mental) required to use the system there will be stronger intentions to use the system resulting in actual usage. Can’t forget social influence here afterall who doesn’t want to be on top of the tech-savvy chart, “he says its cool, yeah sure its cool, I’ve got to try it too”.

P.S. Observations and reflections based on research project completed as part of Master of Business Systems at Monash University, Australia on the topic: Factors affecting employee use of Business-to-employee portals

Multilingual Flex Application: Almost There

After implementing i18n on web based applications using PHP the issue of multilingual interface AND content was revisited recently by me in Flex. I am no authority on implementing complex interfaces with support for i18n but I did manage to simplify the issue. Immediate thoughts for the flex application: Label replacement? XML? Real-time translation? Online translators? In this issue I will address some of the concepts and issues one should be aware of when attempting such a project.

The good thing about flex is the unicode support. Amen for that too! However, it does not yet support RTL languages such as Arabic which is a bit of a bummer but if you’re going to steer clear of Arabic, don’t get too comfortable because some Asian languages such as Mandarin don’t fit in too well (only when using embedded fonts).

To begin with, define the dynamic elements of the interface such as labels, instructions, tooltips and buttons which will need translation. Real-time translation will consume bandwidth so be wary and online translators are only good enough for testing the language support on the interface. DO NOT underestimate the power of the human brain when it comes to translation. We didn’t spend years learning grammar at school for no reason afterall.

Once the interface elements have been defined, try to lay out as much of the interface in MXML. Why, isn’t code faster? Sure it is, but try maintaining application state (do not confuse this with view states) with dynamic runtime instances and you’ll find yourself spending way too much time on parsing the component hierarchy. Putting interface elements down in MXML gives you a quick reference to the element thus reducing code and effort in retrieving instances of elements that need to be changed. I used a simple approach for storing translations or language-specific-labels for the elements by putting them in XML. You could get them straight off the DB as well, but remember XML can also be accessed locally (when using the app in a projector). The XML would look something like this:


file: interface.xml
...
<interfaceElements lang="en">
<interfaceElement itemId="btnMenu" label="Menu Button"/>
</interfaceEleemnts>
...

When the need for changing the element’s label arises, simply access it using its ID stored in XML.

this[xmlData.interfaceElements.interfaceElement[i].@itemId].label = xmlData.interfaceElements.interfaceElement[i].@label;

… assuming xmlData is the XML Object in which the xml data from the interface.xml file has been read and the code appears within a loop. So here with a single loop and minimal code we have managed to change the labels on the entire interface, well atleast what was put down as MXML.

What more now? Remember to specify the encoding your XML file as UTF-8 for unicode support. This way characters other than the latin character set can be inserted directly into XML.

The support for Asian languages seems to work somewhat weirdly in Flex 3. Not sure how it was in Flex 2. I’ve found through reading around the net that displaying some of the Unicode characters is OS dependent such that if the system font you specified does not contain that particular glyph, the flash player will attempt to use a font from the system that supports that character. Well bad luck if you’re using embedded Arial with nice anti-aliasing because the characters won’t show up at all. You could however use a Unicode capable font and specify the range of Unicode characters that you would like to embed. Unfortunately for me I need to use the Arial font face and Arial Unicode by Microsoft should work but I have not yet been able to do so. I get compiler errors when trying to embed glyphs from Arial Unicode MS even though the font file is intact.

Ofcourse there will be better solutions and easier ways to “automate” this especially if you were into MVC pholosophy but for a simple application, this should suffice.

P.S. any leads on using Asian language chars with embedded fonts be appreciated. I’ll continue looking around in the meantime.