Topical Analysis: Animation, JavaScript, and Rich Internet Applications

Rich Internet Applications (RIAs) are Web based applications that similarly to desktop applications have the same flexibility, ease of use, and graphic intensity. Some of the major Rich Internet Applications technologies that emerged in recent years and changed the Web development are Flash and Ajax.

Flash is an important and powerful tool for building interactive Web sites. It has vast capabilities in the interface design, aesthetics and functionality (Grosvenor, p.1). Flash uses vector-based animation and ActionScript, a programming language, to build animations that can range from creation of a simple animation to building the whole Website. It also has capabilities of building robust SQL and XML data-feeding Web applications. The content created within Flash movie is browser independent and is rendered the same way across all browsers. To play the Flash movie, however, the plug-in is required. Plug-in is found in 90 percent of all Internet enabled computers. Flash originally used for creating marketing banners; has grown with the development and maturation of ActionScript and transformed the visual appeal of the Web. ActionScript is an object-oriented programming language that uses very similar syntax to JavaScript. A programmer can access and update any element within the application using ActionScript. Flash can be used to build forms where ActionScript reads user input (textual input) and respond to it. Forms created in Flash use text field, combo-box, check-box, label, buttons or radio buttons. Application created in Flash can make calls to the server and update information. Some of the fundamental functions in Flash include drawing, working with layers, creating symbol, instances and creating time-line animations with motion and shape tweening.

In the last few years, Ajax technology became a key approach in creating Web applications. Ajax uses a specific JavaScript object called XMLHttpRequest combined with Java Script events and dynamic HTML (DHTML). By using the XMLHttpRequest object (XHR), developers have a bigger control over the HTTP requests to retrieve data. The World Wide Web Consortium (W3C) has released the first specification for the Ajax standards in 2006. Some of the Ajax rich user interfaces include drag and drop effect, navigation, event handling, form entry validation, interface for opening APIs, and state management. Several practical uses of Ajax technology focus on creating mash-ups pages that re-use more than one Website content in a single page.

The essential characteristics of RIA are:
- Accessibility
- Advanced communications
- Complexity
- Consistency
- Performance
- Security
- Richness

Dojo and jQuery are open source JavaScript libraries that help make DHTML tasks. jQuery contains common Events, DOM, Effects, CSS, and Ajax functions and is linked from a Webpage similarly to JavaScript:

Dojo widgets that consist of JavaScript, HTML and CSS are used to enhance websites with interactive features such as menus, tabs, 2-D drawings, forms, animations and drag-and-drop.

JavaScript is an object-oriented scripting language mostly used on the client side (integrated component of the browser) that is not related to Java programming language. JavaScript is one of the most popular languages used on the Web. Functions that are written in JavaScript are embedded or included in HTML, and are interacting with DOM. Examples of JavaScript use includes: validation of Web forms, building applications that enhance user interfaces, building dynamic applets and interactive games, opening a new resizable window, changing images on the mouse over and creating security passwords. The potential security risk in JavaScript and Ajax includes the following:
- Client-side security controls
- Increased attack surface
- Cross-Site Scripting (XSS)
- Connecting the gap between users and services

References
Booch, G. (2007). Object-Oriented Analysis and Design with Applications. Addison-Wesley.
Grosvenor, S. (2004). The Flash Anthology: Cool Effects & Practical ActionScript. SitePoint Pty. Ltd.

Object-Oriented Design II

Object-Oriented Programming (OOP) deals with object hierarchies and relationships between classes. The concept of inheritance is very powerful in Object Oriented Programming (OOP). It applies to an idea that each new class can be derived from an existing class. Java programming characteristic is that each class is inherited from and existing class. For instance, C1 is a superclass from which C2 is extended, and therefore is called subclass. Polymorphism in OOP is related to the inheritance relationship. A new subclass inherits features from a superclass. Java also supports dynamic binding, where objects could come from anywhere.

Object-Oriented approach to a design is more common due to the fact that OOP methodologies are more effective in complex software design. Objects used in OOP provide abstraction and encapsulation. Abstraction puts the emphasis on the important problems that have to be solved in a design and eliminates the unrelated ones. Encapsulation has been defined by Booch (2007) as "the process of compartmentalizing the elements of an abstraction that constitute its structure and behavior; encapsulation serves to separate the contractual interface of an abstraction and its implementation." (p.51). Encapsulating data and procedures allows hiding information from the user of the object.

In Java programming we can define the following steps:
• Creating and modifying source code
• Compiling the code
• Executing the code

Programming errors are often observed, even by advanced programmers. There are three types of errors:
• syntax errors,
• runtime errors,
• and logic errors.

Finding and debugging the syntax and runtime errors is usually straightforward. Syntax error is recognized by compiler, and occurs when the rules of the programming language are not followed. Runtime error arises when running application tries to perform an operation impossible to execute, like division by zero, or an attempt to access an out-of-bound array element. The program is usually terminated abnormally when the runtime error takes place. However, Java offers capability to handle runtime errors through exception handling, and allows programming of robust applications. Java makes it possible for programs to catch and process exceptions, which may be achieved by using a construct called the try-catch block. Logic errors are usually the most difficult to handle, and occur if the program does not execute the code the way it was intended. Logic errors are often referred to as “bugs” and are difficult to find. Therefore, they require more complex approach.

Java programming uses several data structures that are supported in the Java API. They are arrays, lists, stacks, and queues, binary trees, heaps and priority queues. In OOP data structure is defined similarly to declaring a class and it uses data fields to store data. A data structure stores data as well as provides methods to access and manipulate data. Such operations include deletion insertion, searching, retrieving, modifying, etc.

An array is one of simplest and easiest to use data structures which hold data elements in sequential order. However, the main limitation of an array is its size, which cannot be altered once the arrayed was created. Java offers other structures like lists which allow dynamic sizing of data structure.

Java is very dynamic, versatile language that allows for flexibility in programming of robust applications. Programs written in Java are characterized by portability, which means they run similarly on any hardware and operating system by using Java Virtual Machine.



References
Booch, G. (2007). Object-Oriented Analysis and Design with Applications. Addison-Wesley.
Liang, D. (6th ed.). Introduction to Java Programming. Pearson Prentice Hall.
Sun Developer Network (SDN). (n.d.). Retrieved November 6 2009, from http://java.sun.com/

Object- Oriented Design I

Object-oriented programming (OOP) languages represent a programming paradigm in which objects, data structures consisting of related state and behavior, are used. Object-oriented programming languages are widely used and are considered far more flexible than other programming languages. In object-oriented languages like C++, Java, or C# the principle is that an object encloses everything that should be inside the object. In object-oriented programming, the code that is written once can be reused through inheritance.

Java, originally developed by Sun Microsystems, is a powerful object oriented programming language that can be used to build many web applications. Java was designed in 1991 with the name Oak and in 1995 was renamed Java. Since 1995, Java, a simple, object-oriented, robust interpreted, secure, portable, dynamic and high-performance language, became one of the most popular programming languages for Internet applications (Liang, p.14).

Java can be used on the Web to:
• Build data-driven Web applications for server-side technologies
• Java Servlets can add a Web interface to a database
• Java Servlet API and cookies are used to personalize content
• Building dynamic Web pages (JSP)
• Develop standalone applications for mobile devices

The initial attraction of Java comes from the fact that it was run from a Web browser as an applets. Initially, applets built with Java enhanced user interfaces with buttons, text fields, text areas and radio buttons, and made the Web more responsive and interactive (Liang, p.14).

The critical elements in writing code in Java are objects. Java objects share characteristics with real-world objects, and they have state and behavior. For instance, a car may have the following states: speed and current gear, and its behavior may be accelerating and slowing down. In Java, state of an object is stored in variables, and its behavior is expressed by methods, like in the example code below.
class Car {

//States of an object (car) are expressed variables
int speed = 65;
int gear = 4;


//Object behavior is expressed by methods

void changeGear (int newGear) {
gear = newGear;
}

void accelerate(int increaseSpeed) {
speed = speed + increaseSpeed;
}

void slowDown(int decreaseSpeed) {
speed = speed - decreaseSpeed;
}

void printStates() {
System.out.println(Current speed:" + speed + "Current gear:"+gear);
}
}

A class is the main component of Java programming language and a base from which individual objects are created. The class Car serves as a blueprint to construct new car objects because all cars share same characteristics, and it may be reused multiple times without re-writing of the code.
If there is a need to expand an existing Java object, it is done through inheritance, a mechanism that allows sharing common states and behaviors among other classes. The class Car from the above example becomes a superclass for all classes that reuse it, i.e. for new classes Sport Car, or LuxuryCar.
Creating a new class that inherits from superclass is simple and easy to read, like in the following code:
class SportCar extends Car {

// here come variables and methods for the subclass, SportCar
}

This way the new object, SportCar, receives all characteristics of the object Car. That allows a programmer to focus exclusively on unique features of the new object.



References
Liang, D. (6th ed.). Introduction to Java Programming. Pearson Prentice Hall.
Sun Developer Network (SDN). (n.d.). Retrieved October 28 2009, from http://java.sun.com/

Designing Images and Applying Usability Concepts

The usage of images on the Web is no different from using images in print, and follows the same principles of graphic design. According to Meggs (1992), “Graphic design is a hybrid discipline. Diverse elements, including signs, symbols, words, and pictures, are collected and assembled into a total message” (p.8). Graphical elements depending on how being used on the Web serve many purposes. They carry the message, serve as a visual communicator, support and give the recognition to the brand, and present the data. Images are also used as space fillers. With the availability of graphical software, graphic designers are limitless in the way they can use photography and images on the Web. By combining and altering images, they are able to create new reality. Images and type are the key elements in developing identity, logo, advertisements, and visual programs for any brand.

In the communication design, the representation of words and images complementing each other is called visual- verbal synergy. When the images are created with a dominance of text they are called verbally dominant, and if created with a dominance of image they are called visually dominant. Combination of images and text in web design should create coherent powerful, meaningful union. In addition to type and images, graphic designers working on the Web can structure and balance the space by using graphic support elements. These elements can include ruled lines, ornaments, patterns, colors, background and shapes. Graphic support elements do not carry message, but instead create resonance.

The design process involves five fundamentals steps. It starts with defining the problem, goals, objectives and audience. The second step, information gathering, Meggs (1992) describes as “…learning about the client’s needs and the sphere of activity, finding out how other designers have solved similar problems, and surveying the communications environment in which the design will function” (p.154). The goal of information gathering is to acquire as much information as possible about the project. It should include detailed discussion with the client, library research and meeting with various art suppliers. In the third step, finding an idea, designers search for information, use vertical or lateral thinking, and exploit other artists’ examples to open many possibilities to solve the problem. Solution finding can occur though the process of brainstorming, incubation, notation, synthesis and ocular reconnaissance. (Meggs, 1992, p.157). In this step it is helpful to revisit the specific criteria that were developed during the information gathering step. Some of the importance should be placed on communicating the message in the new design, form, space usage and resonance.
1. Images should create coherent union
2. Type and image should harmonize with each other representing:
- visual- verbal synergy
- visually dominant graphic
- or, verbally dominant graphic
3. Signs and symbols must be meaningful and easy to understand
4. The typography used in graphical elements must be legible
5. The visual structure should be effective
6. The images should be expressive and engaging the audience

The overall visual design should support and express the essence of the topic and most importantly convey the message. The last step of the designing process, implementation, includes presenting the solution, accepting it by the client and executing the project.

Web designers, in addition to following principles of graphic design, have to apply the web usability concept to make the design successful. To minimize the download time, images have to be optimized with professional graphical software. Colors of the images, foreground and background should be carefully defined to make the design readable for colorblind users, and be cross- platform compatible.


References
Meggs, P.B. (1992). Type & Image. The language of graphic design. New York: John Wiley & Sons, Inc.

The gulf of execution

The gulf of execution describes the gap between user’s goal for action and the way to execute the goal. Usability’s objective is to eliminate these extra steps that cause destruction and make the users to shift their attention. The whole course of interacting in the process of HCI falls into seven categories:
• setting up the goal
• outlining the purpose
• identify the action series
• completing the action
• perceiving the system state
• interpreting the system state
• evaluation the system state with respect to the goals and intentions

The interaction between the system and the user will be successful if the system allows the execution of the steps. Therefore, the system seeks the reduction of the gulf. According to Dix (1998), “The gulf of evaluation is the distance between the physical presentation of the system state and the expectation of the user” (p.106). The gulf of evaluation is small if the user can easily assess the presentation according to his goals.

Conceptual Model
The Conceptual Model refers to mental models of the way an object operates. Good designs usually provide feedback to verify the user’s mental model of operation. A good conceptual model is built based on the successful use of constraints, mapping and affordances. Throughout users’ life they recognize and learn the fact that different materials have different natural affordances. Once users start the interaction with the system they build the conceptual model based on physical structure, documentation and graphics. According to Nielsen (1993), “It is often good to relate the specific information given in the instructions to a conceptual model of the system, for example through the use of a diagram” (p.152). Good designer can use metaphors, graphics, icons and tutorials that support the same conceptual model and underlying the relevant aspects of the system. In HCI a good conceptual model is enabling the user to predict and understand the consequences of their actions.

Human characteristics that can cause errors in HCI interactions
1. Memory
Short and long term memory can cause many errors in HCI interactions. If system requires from users to memorize input formats, this should be presented and described to users in the system. Users can easily recognize something if it is presented to them, rather asking them to recall the same information. Therefore, computers should always provide examples of the input information such as date formats, or the units of measurement. Designer should always integrate into the system the elements that will minimize users’ memory load.

2. Vision
Vision is a primary source of information. Ability to read and distinguish falls off inversely as the distance from our point of focus. People have different limitations in vision. They can be nearsighted, farsighted; have limited vision at night, color deficiencies and color blindness. All these limitations can cause different errors in HCI interactions. Designer should apply in their design the gestalt theory principles of closure and similarity of the elements. In the design similar object, elements should be grouped together. For instance, this applies to structuring navigation of the website: buttons should be grouped together, yet still separated by a design to mark each button. To enhance the usability of the system, the colors of the interface should be limited to no more than 5 to 7 colors. Designers should also avoid certain combinations of colors (too bright, too much contrast, too flashy) to enhance the visibility of information and clarity.

3. Cognitive Processing (Feedback & Response time)
Response time applies to the time it takes the brain to receive the stimulus and respond, and the actual time the movement takes. Because the reaction times are very difficult to predict some additional factors are influential in the time it takes to respond.
Users should always be informed by the system about their performance. System feedback is usually the best option to indicate this. If the system is expecting any delays the user should be alerted. For instance, the user is asked to fill out an online form that is designed on 10 pages. As the user enters the information he should see his progress and how many pages he has left to accomplish the task. This information can be also presented in the estimated remaining time showing percentages, and the information indicating the amount of the remaining pages.


References
Dix, A., Finlay, J., Abowd, G. & Beale, R. (1998). Human- Computer Interaction. Prentice Hall Europe.
Nielsen, J. (1993). Usability Engineering. Morgan Kaufmann.

Using Standards, Guidelines and Tools.

State transition networks (STNs) are used for dialog descriptions. The STNs can be presented in several ways and it is up to a developer to understand and design a consistent, predictable and forgiving interface. Depending on user preferences, understanding and knowledge the designer should make a choice to use the most desired interface to ensure smooth HCI.

Menus
The types of menus are a pull-down menu, cascaded menu, and pop-up menu. Menus are widely used in common interfaces in PC, desktop workstations, Microsoft Windows, MacOs and various Windows0- based systems for Unix. They are usually attached to the menu bar near the top of a window. A menu bar usually contains a single word, which leads to pull-down menus.
Advantages:
• Save the screen space to display more functions and content
• Are visible and easy to access
• Allow the cursor to wrap at the top and bottom of a menu
• Provide guiding principle on available and unavailable-state emphasis on action and settings choices that can be or cannot be selected in the current context
• Hierarchical elements create submenus that are displayed in logical order to perform different tasks
• Allow the designer to add many items in the submenu and group them in logical clusters
• Provide additional information such as keyboard shortcuts
Disadvantages
• Menus work differently in MacOs and Microsoft Windows environments
• Menus can become long and disorganized by creating cascading submenus
• Once the submenus are extended, they become difficult to navigate and the user can easily be confused and lost in performing any desired task
• Require some expertise with computers and windows display
• Menus are used with a pointing device such as mouse and can become difficult to use for people with lack of movable abilities and precise coordination (elderly people, neurological infirmity such as Multiple Sclerosis, etc.)

Controls
Controls are incorporated into a design as a visual- interface to allow a user to select choices and to type information. Controls can incorporate a few different elements: Check boxes, Radio buttons, Drop-down lists, and List boxes. List boxes and Drop- down lists are allowing a user to select an option from the existing values and they not allow the user to input their own information. Each control or field of controls has to be identified by the title or the descriptive name to indicate the control’s function. Controls should be consistent in look-and-feel and it is best practice to use the ones that are provided by the operating environment.
Advantages
• Allow users to make a few selections within one visual interface and are easy to navigate
• Controls provide the scope of information within one visual interface which helps users to control their preferences at once
• The size of Controls windows can be adjusted as needed
• Users can easily recover their actions if any mistakes were done (high recoverability) by opening the controls and inspecting their selections
• Allow users to cancel their selection by pressing the CANCEL Push Button
• Controls display Help button that allows easy access to more information
Disadvantages
• Controls take a large amount of the screen space
• Can require some level of expertise from the user if the labels of control’s function are not clearly identified or placed
• Check boxes and Radio boxes can be confusing if the user is not familiar with their performances
• Controls require the user to confirm their selection by clicking on the OK

Push Button
Designer should be familiar with various components that would allow users to perform different tasks. By assessing advantages and disadvantages of them, HCI can become consistent, predictable and forgiving. Components should be consistent, simple, provide needed support and responsive.


References
Dix, A., Finlay, J., Abowd, G. & Beale, R. (1998). Human- Computer Interaction. Prentice Hall Europe.
ISII GUI Style Guide (1999). Retrieved October 22, 2008 from, http://www.isii.com/style_guide/style_guide.html

Effective Document Design

Document design for the Web requires completely different approach than the traditional approach to print medium. Web sites are the organized collection of individual web pages and associated files that create coherent and logical union. A Web site is built to serve a distinguished purpose. It carries a message, markets and sells products, informs or promotes. Web sites are often very complex and serve multiple audience and multiple purposes. As a result, the audience is typically very broad and has diverse expectations. Having this in mind, the process of a web site design is complex and multilayered.

One of the most important aspects in effective document design for web sites is consideration of the audience. A designer should always assess the demographics of the audience, their level of expertise in the subject, and their speed of reading. If the website aims to be reached globally, which often is the case, it should be designed for easy translation. Studies show that users do not read on the web. According to Jakob Nielsen (n.d.) research, 79 percent of users quickly scan web pages, and only 16 percent users read word- by- word. To increase the process of acquiring information and communicating effectively through the Web, it is helpful to write short paragraphs and include only one idea per paragraph. Hyperlinks in a format of highlighted keywords serve as an eye catching element. The document design should include meaningful headings and subheadings to highlight essential information. To enhance the visibility of the content, it is common to use bulleted lists and tables.

An effective document design requires different style of writing. The style is called the inverted pyramid style where the piece of writing starts with the conclusion and then continues to more explanatory and supportive information (Nielsen, n.d.). The most important information is always on the top, followed by additional sequence of text blocks. Web writers split information into smaller chunks of coherent information that can be scanned faster and are visible without a need to scroll the page. This approach helps to establish the level of importance on the page. The least important content should always be placed toward the bottom of the page.

In effective document design on the Web, the importance goes to credibility. Users are more likely to read on the Web if the information is dated and provides the name of the author. Additional information should be included under “About” section, or in the footer. Credibility can be increased by including high quality graphics, good writing and proper hypertext linking (Nielsen, n.d.). All important content should be placed consistently on the top. In particular navigation should be visible without scrolling. Users tend to look for information first at the top center, and then look left and right. Documents that provide multiple data should be structured for easy comparison. This can be achieved by using tables, heading, and alternating colors.

The display density on the web pages should be controlled by the use of text, graphics, and white space. Some usability studies show that it takes longer for users to locate target in a crowded area versus a sparse area. Users are looking for consistent layout of checkboxes, text blocks, radio buttons, columns and rows. These should be used consistently across the web site to increase visibility and readability. Effective document design for Web can be accomplished by use of a fluid layout that automatically adjusts page size to monitor resolution settings. When the layout of the pages is flexible it adjusts to fit the screen space, and increase user performance.

Designing an effective document for Web sites requires a cooperative work and knowledge of graphic designer, Web programmer and content manager. To ensure consistent, reliable and easy to maintain web pages, elements such as color, type face, positioning of block text, graphics, and navigation should be coded in the Cascading Style Sheet (CSS).

References
Gurak, L.J. & Hocks, M.E. (2009). The Technical Communication Handbook. Longman.
Nielsen, J. (N.d.). Useit.com: Jakob Nielsen on Usability and Web Design (n.d.). Retrieved October 14 2009, from http://www.useit.com/