Adobe Flex: Introduction to Flex 3 – Part 1

In this part, we will learn the following:

• Understanding Adobe Flex
• Adobe Flex product line
• Flex Architecture
• Flex resources

Understanding Adobe Flex

Adobe Flex is a RIA User Interface Framework that enables us to develop Rich Internet Application quickly, resulting in high productivity and customer satisfaction.

Adobe Flex is a highly productive, free open source framework which is used for building expressive web applications. Adobe Flex deploy consistently on:

• All major browser leveraging the Flash Player
• And on desktop with Adobe AIR

Where is Flex Used?

How Flex works?

The backbone of flex is ActionScript 3 and MXML (Macromedia XML). MXML again is set of ActionScript classes which comprises of some built-in UI components like Datagrid, Treegrid, Menubar, chart and so on.

MXML is used for creating the User Interface and ActionScript is used for event handling, data management etc.

Once the MXML and ActionScript is created and compiled, it gets converted into swf file and hence to view the Flex application we need flash player supported browsers.

Flex enables…

Flex Architecture

Lets look at high level of flex architecture

Flex Resources

Flex tutorials
http://www.tutorom.com/courses/460/Adobe-Flex-2-tutorials-Flex-2-programming-tutorials.htm

Documentations
http://flex.org/
http://www.adobe.com/support/documentation/en/flex/

Flex component explorer
http://examples.adobe.com/flex3/componentexplorer/explorer.html

Flex tutorial – Part 2 Topics

Flex Builder

• Understand the Flex builder and its workbenches
• Use Flex builder effectively for design, development and debugging
• Create a Flex Project
• Create, compile and run a Flex application

Go to part 2 of this tutorial

Rich Internet Applications (RIAs)

Rich Internet Application (RIA) – this is the buzz word we hear quite often these days. Rich Internet Application which was coined by macromedia in 2002, was not very common till few years back, but with Web 2.0 boom RIA got a solid place in the web world.

So what is RIA

Earlier web was known as a one way communication system, where company use to showcase their details to end users. With the web 2.0 emergence, things totally changed. Web 2.0 gave the world wide web altogether a different persona. Where web was known to be a one way communication system, web 2.0 made it two way communication, where user was the king. Users can comment, rate, network, tag and so on and so forth.

Along with these flexibilities web 2.0 brought lot of new tools and technologies and concepts like Ajax, Adobe AIR, Adobe Flex, SilverLight, Isomorphic SmartClient and so on. With all these concepts came a buzz of creating web applications with richness and that is where RIA comes into picture.

So what does ‘Rich’ means in Rich Internet Application?

Rich Internet Application are applications which combine the flexibility and responsiveness of a desktop application with broad reach of the web. RIA gives user the flexibility to use a web application with the features that of a desktop application.

What is the concept of ‘rich’ in Rich Internet Application ?

The concept of richness can divided into 2 parts

• Richness in User Interface
• Richness in Data model

Richness in User Interface

Rich Internet Application (RIA) offers a very rich set of user interface controls which can intelligently interact with data model. some of them are:

Drag and Drop control and Accordion control

Auto Complete control

Tree Grid control

Data Grid control and Data sorting control

Charting control

Calender control

Rich Text editor control
Inline editing control
Auto save control

Richness in Data model

Any website or application is incomplete without data, so having a rich data model to fetch or control these data is important. Richness in data model means

• Ability to send and receive data asynchronously
• Ability to obtain data from server without redrawing the entire page
• Efficiently utilizing network bandwidth transmitting only the portion of data that has been changed
• Support of sophisticated data models

Anatomy of RIA
Adobe in one of their presentation showcased RIA as follows

Benefit of Rich Internet Application
Rich Internet Application (RIA) brings in lot of benefits for the end users and well as developers and companies. Some of them are as follows:

For End Users

• Responsive and Interactive
• Real time communication
• Fast and easy to use
• Allow users to remotely monitor and manage data
• Allows quicker task completion
• Cross platform support

For Business

• Increased customer loyalty
• Increase in new customers
• Increased productivity
• longer site visits
• Reduced bandwidth and operational costs

For Developers

• Easy to learn
• Ease of development

RIA tools and technologies
The term Rich Internet Application(RIA) may be new, but the technologies which RIA uses is the combination of already existing technologies. Most commonly used RIA tools and technologies are:

RIA Technologies

• Ajax (Asynchronous JavaScript and XML)
• XML
• JavaScript Object Notation (JSON)
• Advanced JavaScript

UI Frameworks

• Adobe Flex
• Microsoft Silverlight
• Google Web toolkit (GWT)
• Isomorphic SmartClient
• Java server faces (JSF)

JavaScript Frameworks

• Yahoo UI (YUI)
• JQuery
• Prototype
• Scriptaculous
• Dojo Toolkit
• Mootools

Universal Design

Have you ever wondered?
How a blind user will use the TV remote control?
How a disabled person will board the bus?
How old aged people will the climb staircase?
How a blind person will use the website?
How a color blind person will use an interface?

These are some questions we need ask ourselves while designing.This list is not over; we need to think about many such questions while designing. Design is not limited to a particular field, but design is very vast and is implemented in each and every field starting from automobile, communication, interior designing to user interface designing and a lot more.

While designing, we need to keep in mind all set of users and this is where the concept of “Universal Design” comes into picture. The word “universal design” may seem simple, but it holds lots of concepts, principles, techniques and process from a designer’s and end-user’s perspective. Let’s understand universal design in detail.

Universal design is the concept or approach to be more precise, of making any design accessible and usable by as many people as possible, irrespective of the age, situation and ability. It is a totally a new “paradigm shift” from the normal design process.

According to the “Americans with Disabilities Act (ADA) 1990” even people with disability have equal rights to work, study and use or access any product or services as a normal person and that is where the concept of “universal design” comes into picture. While designing any product, designers need to keep in mind the following “universal design principles” to make it more usable and accessible.

Equitable Use
Flexibility in Use
Simple and Intuitive Use
Perceptible Information
Tolerance for Error
Low Physical Effort
Size and Space for Approach and Use

Equitable Use: irrespective of age, ability or situation, a person should be able to effectively use a car, bus, elevator, mobile, computer, website, Interface and anything or everything what a normal person can use.

Flexibility in Use: design should be flexible enough to accommodate personal preferences. Example can be adjustable and customizable designs. Ease or flexibility of use makes design more usable by everyone

Simple and Intuitive Use: designers should understand one thing before designing an interface, that its not mandatory that all users will have equal level of technology knowledge, so we should accommodate this option, thus making interface simple and easy to use for a novice to expert. Systematic display system, visual display system helps in making any design intuitive. Proper use of colors and color combination also plays important role while making an intuitive design.

Perceptible Information: design should be able to communicate necessary information to the user effectively irrespective of the user’s ability and disability. For example a blind user, who is using an elevator, may not be able to see which floor he is in, so alternative solution of voice based support should be made available. Similarly a blind user may not be able to see directions in subways or stations, so alternative information system should be made available for such users.

Tolerance for Error: users tend to make mistake while using any interface or design or technology till they get acquainted to the system. “Universal design” means design should accommodate tolerance towards these common errors by helping users giving them “alerts”, “voice alerts” or “error messages” along with the solutions or support based system to help them overcoming from such problems in future.

Low Physical Effort: designers should understand one more thing that not necessarily all users will be “power users”; hence design should be simple enough to reduce physical effort. For example if adjustable interface or design needs users to manually adjust settings, it makes tedious for the users to use them and hence reducing the effectiveness , this can be avoided by using automated systems.

Size and Space for Approach and Use: this principle is important when designing car, bus, elevators, lifts, security system kind of interface or an interior design. These designs should provide ample space and flexibility for disabled users with wheelchairs to use them effectively and easily.

Let’s dive more into the “universal design” concept, by creating some user personas and relating them with the above mentioned principles.

Persona 1:

Name: Zara
Age: 18 years
Profession: Student

Zara is an 18 years old girl. She stays with her parents. Zara is very fond of using electronic gadgets. She lost both her legs in a car accident 2 years ago. She is totally dependable on wheelchair for all her daily work. Zara is doing her bachelors in arts from a regular college and needs to commute 10 miles daily. Due to her disability she cannot board bus or car easily, but at the same time, she wants to be self dependant rather than depending on others to help her out. She needs a transportation method which makes it easy for her to commute easily with less effort. An automobile engineer/designer needs to keep in mind people like Zara before designing a transportation interface. “Equitable use” makes sense when people like Zara are able to use it effectively and easily, without any hassle and confusion.

How can a car or bus be universally designed?

• Having automatic adjustable and twistable car seat, thus making it flexible to use
• Removable car seats so that 100% wheelchair dependant disabled users can replace it wheelchairs
• Having a “slider based bus system” for wheelchairs to climb easily without the need of lifting them, thus reducing the physical effort needed
• Having “no step bus system”, so that aged people need not worry about slipping from the bus, while trying to board.
• Blind users may not be able to see which location they reached, hence having a voice based information system in buses can help blind users to know where they reached

Toyota F1 Series

Chief Designer:
Toyota

Consulting Designer:
Satoshi Nakagawa

Date:
May 28 2009

Courtesy: http://www.pbs.org/pov/pov2004/freedommachines/special_universal_02.html

Persona 2:

Name: Nancy King
Age: 24 years
Profession: Housewife

Nancy is 24 year old women and a house wife by profession. She is disabled by birth and totally dependant on wheelchair. She stays with her husband, who is software professional and busy most of the time. Being a housewife, Nancy has vey little technology knowledge and finds it difficult to use technology spontaneously. Nancy doesn’t want her disability to become her weakness and wants to work like a normal housewife, like cooking for her husband, washing utensils etc. She wants a kitchen which is “universally designed” and where she should be able to work effectively like a normal person with “ease of use and learning” being her first priority.

How should an interior designer design a “universally designed kitchen” keeping in mind people like Nancy?

• Making the height of the kitchen cabinet, Cook top, Microwave stand accessible by wheelchair.
• Having an adjustable-height cabinets, can help all users to use them effectively. Also customizable design which can be changed based on user preferences also makes design effective and more usable.
• Having a removable sink and drying rack will give sufficient space for food preparation. This can again be re-fitted as and when required. Thus giving flexibility to people like Nancy or old aged people, who can’t stand and cook.
• Foldable cabinet doors under cooktop, providing sufficient knee space.
• Providing visual support can also help users to use kitchen more easily and effectively.
• Voice based support in kitchen can also be a good idea, thus making design accessible for people with low vision.
• Automated dishwasher or microwave system can help them easily placing dish without much effort.

Courtesy: http://www.thekitchendesigner.org/journal/2007/3/27/uber-universal-kitchen-design.html

Chief Designer:
GE appliances, the kitchen designer

Date:
May 28 2009

Courtesy
http://www.geappliances.com/design_center/universal_design/

Persona 3:

Name: Rodney Connors
Age: 75 years
Profession: Retired army many

Rodney is 75 years old man. He is a retired professional and stays alone in his 2 bedroom apartment which is on the 10th floor. He finds it difficult to walk and climb stairs and also have sight problem. Rodney has very little technology knowledge and finds it difficult to remember things, due to his growing age. He depends on electronic wheelchair most of the time. He needs an elevator system in his apartment which can accommodate his wheelchair also, making his life easy at this age.

How can we make a “universally designed” elevator?

• Increasing the width of the elevator hence giving ample space to use wheelchairs and thus making it approachable
• Big display screen, which displays the floor details big and clear, thus accommodating people like Rodney to use it with ease
• Voice based support system, which informs the user which floor the user is in, can also help the disabled user to use them effectively.

Courtesy: http://www.centrair.jp/en/service/sv-ud-facilities/index.html

Conclusion:

Irrespective of age, ability or disability and situations, every has the right to effectively use any products or services, hence designers should always be conscious about this fact and implement their design ideas to serve one and everyone. This is what universal design means.

Usability Principles

1. Make systems easy to use, Keep the interface simple
Keep the interface simple because simplicity reduces the demand on users’ brain power and focuses users’ attention on the task

- Present information in meaningful groups according to how or when they will be used.
- Organize and present information or processes in a straightforward, simple manner. Group related information or processes together.

2. Provide proper search and navigation
- Make the interface consistent: When a User interface is consistent, it is easy to learn and users become familiar and comfortable with the program more quickly.

Maintain consistency in all aspects of the program, including:
• screen layout,
• navigational elements,
• use of language, graphics, and sounds,
• metaphors
• feedback mechanisms.

- Provide feedback
Provide informative and timely feedback for every action. If the users move the mouse, the cursor moves. If they type on the keyboard, the typed letters appear on the screen. Communication should be brief, direct, and expressed from the user’s perspective.

- Let Software be forgiving for user’s mistakes
By building in forgiveness, you will encourage users to explore the territory without fear of breaking or ruining anything. Users are more productive and confident with a program that they feel they can safely explore. Forgiveness encourages users to independently learn and explore.

- Offer multiple search strategies in on-line environments
You should provide flexible interfaces to accommodate the various factors involved with users searching for information.

- Let users search by browsing in hypertext documents
You should build support for browsing into an on-line hypertext system, since most users, especially novice or infrequent users, prefer to browse for information rather than use analytical search strategies, which are generally planned and goal driven.

- Give users menus and maps that outline their choices
Users of hypertext report that a major problem is that they tend to feel “lost” or “disoriented”. This condition occurs when users do not know:
· where they are in the hypertext system;
· where they have already been (nodes visited); and
· where they can explore (options for movement).

Provide a proper outline for visited links with different color, breadcrumbs to show where they are. Provide visual clue to help users navigate. Also provide back track option.

- Use headers, footers to tell users where they are

3. Readability:Improve readability by designing effective page and screen layouts

- Don’t overload users’ working memory

- Give your layout an obvious structure
Here are some tips for using format design variables to create
screen layouts:
· Use headings systematically to assist the customer in searching for, retrieving, and comprehending the information.
· Use vertical spacing systematically to help the customer understand the structure of the text.
· Use typographic cueing to direct the customer’s attention and to express the structure of the material.

- Divide text into logical ‘chunks’
Organize textual material into logical and conceptual “screenfuls” that take into account the size of the screen and the limitations of the user’s working memory.

- Use color to enhance cognitive processing
Use color to help structure the content and guide a customer through these displays. Researchers suggest using color to:
· enhance the “personality” of the different functional areas,
· distinguish between different types of information,
· establish a link between related pieces of information,
· highlight important or critical messages, and
· help customers understand complex displays.

- Provide quotes, questions, or photos to support the text
Provide accompanying material, such as quotes, questions, or photos, to increase the reader’s understanding of and interest in the text.

4. Use words readers can easily understand

- Use common vocabulary
Use familiar vocabulary that occurs frequently in everyday text. Readers will find it easier to read, process, and recall a passage if the words are familiar.

- Avoid abbreviations, acronyms, and initialisms
Although abbreviations, acronyms, and initialisms may save space, you should avoid them unless you are certain that readers will know the terms for which they stand. Consider the level of knowledge and background of the readers.

- Use headings to present key ideas and provide structure
Headings can help readers recall, search, and retrieve information from the text. Headings also act as signaling devices, directing the readers’ attention to important or key ideas. Headings also help readers understand the text structure, which stimulates learning and lets them search for information
in a passage. Headings help readers avoid information overload.