User Interface Design Principles

Some of UI design interface which we should follow in UI design and development prototype

1. The structure principle. Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.
2. The simplicity principle. Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.
3. The visibility principle. Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.
4. The feedback principle. Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
5. The tolerance principle. Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.
6. The reuse principle. Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.
7. Consistency, consistency, consistency. I believe the most important thing you can possibly do is ensure your user interface works consistently. If you can double-click on items in one list and have something happen, then you should be able to double-click on items in any other list and have the same sort of thing happen. Put your buttons in consistent places on all your windows, use the same wording in labels and messages, and use a consistent color scheme throughout. Consistency in your user interface enables your users to build an accurate mental model of the way it works, and accurate mental models lead to lower training and support costs.
8. Set standards and stick to them. The only way you can ensure consistency within your application is to set user interface design standards, and then stick to them.  You should or may follow other standard like Agile Modeling (AM)’s Apply Modeling Standards practice in all aspects of software development, including user interface design.
9. Navigation within a screen is important. In Western societies, people read left to right and top to bottom. Because people are used to this, should you design screens that are also organized left to right and top to bottom when designing a user interface for people from this culture? You want to organize navigation between widgets on your screen in a manner users will find familiar to them.
10. Word your messages and labels effectively. The text you display on your screens is a primary source of information for your users. If your text is worded poorly, then your interface will be perceived poorly by your users. Using full words and sentences, as opposed to abbreviations and codes, makes your text easier to understand.  Your messages should be worded positively, imply that the user is in control, and provide insight into how to use the application properly. For example, which message do you find more appealing “You have input the wrong information” or “An account number should be eight digits in length.” Furthermore, your messages should be worded consistently and displayed in a consistent place on the screen. Although the messages “The person’s first name must be input” and “An account number should be input” are separately worded well, together they are inconsistent. In light of the first message, a better wording of the second message would be “The account number must be input” to make the two messages consistent.
11. Understand the UI widgets. You should use the right widget for the right task, helping to increase the consistency in your application and probably making it easier to build the application in the first place. The only way you can learn how to use widgets properly is to read and understand the user-interface standards and guidelines your organization has adopted.
12. Look at other applications with a grain of salt. Unless you know another application has been verified to follow the user interface-standards and guidelines of your organization, don’t assume the application is doing things right. Although looking at the work of others to get ideas is always a good idea, until you know how to distinguish between good user interface design and bad user interface design, you must be careful. Too many developers make the mistake of imitating the user interface of poorly designed software.
13. Use color appropriately. Color should be used sparingly in your applications and, if you do use it, you must also use a secondary indicator. The problem is that some of your users may be color blind and if you are using color to highlight something on a screen, then you need to do something else to make it stand out if you want these people to notice it. You also want to use colors in your application consistently, so you have a common look and feel throughout your application.
14. Follow the contrast rule. If you are going to use color in your application, you need to ensure that your screens are still readable. The best way to do this is to follow the contrast rule: Use dark text on light backgrounds and light text on dark backgrounds. Reading blue text on a white background is easy, but reading blue text on a red background is difficult. The problem is not enough contrast exists between blue and red to make it easy to read, whereas there is a lot of contrast between blue and white.
15. Align fields effectively. When a screen has more than one editing field, you want to organize the fields in a way that is both visually appealing and efficient. I have always found the best way to do so is to left-justify edit fields: in other words, make the left-hand side of each edit field line up in a straight line, one over the other. The corresponding labels should be right-justified and placed immediately beside the field. This is a clean and efficient way to organize the fields on a screen.
16. Expect your users to make mistakes. How many times have you accidentally deleted some text in one of your files or deleted the file itself? Were you able to recover from these mistakes or were you forced to redo hours, or even days, of work? The reality is that to err is human, so you should design your user interface to recover from mistakes made by your users.
17. Justify data appropriately. For columns of data, common practice is to right-justify integers, decimal align floating-point numbers, and to left-justify strings.
18. Your design should be intuitable. In other words, if your users don’t know how to use your software, they should be able to determine how to use it by making educated guesses. Even when the guesses are wrong, your system should provide reasonable results from which your users can readily understand and ideally learn.
19. Don’t create busy user interfaces. Crowded screens are difficult to understand and, hence, are difficult to use. Experimental results show that the overall density of the screen should not exceed 40 percent, whereas local density within groupings should not exceed 62 percent.
20. Group things effectively. Items that are logically connected should be grouped together on the screen to communicate they are connected, whereas items that have nothing to do with each other should be separated. You can use white space between collections of items to group them and/or you can put boxes around them to accomplish the same thing.

How to optimize flash player performance

few guidelines which you need to take case while making flash animation to keep healthy performance of flash player

• When creating animation sequences, use tweened animations, whenever possible. These animations use less file space than a series of keyframes.
• For animation sequences, use movie clips instead of graphic symbols.
• Use symbols, animated or otherwise, for every element that appears more than once.
• Limit the area of change in each keyframe; make the action take place in as small an area as possible.
• Avoid animating bitmap elements; use bitmap images as background or static elements.
• For sound, use MP3, the smallest sound format, whenever possible.
• Group elements as much as possible.
• Do not assign unnecessary frame label property.
• Always use key frame label instead of using frame name if required.
• Always use symbol to mask a layer instead of shape object if possible.
• Try to use less mask layers and utilize to achieve more tasks using single mask layer.
• Remove all unused layer including all guide layer.
• Use layers to separate elements that change during the animation from those that do not. Once the animation scope of an object is finished shift that object to a static layer so that the available pointer of that layer in memory can be used to store other animated or non animated object information. Remember that once you create a layer it takes same memory space as a static variable and work as a pointer in same way as work in c and c++. Flash is weak in removing objects from memory and sending to GC when an object is not in used also weak to assign an object to blank available pointer.
• Use Modify > Curves > Optimize to minimize the number of separate lines that are used to describe shapes.
• Never assign unused linkage property to any symbol.
• Limit the number of special line types, such as dashed, dotted, ragged, and so on. Solid lines require less memory. Lines created with the Pencil tool require less memory than brush strokes.
• Limit the number of fonts and font styles. Use embedded fonts sparingly because they increase file size.
• For Embed Fonts options, select only the characters needed instead of including the entire font.
• Use the Color Mixer (Window > Color Mixer) to match the color palette of the document to a browser-specific palette.- Use gradients sparingly. Filling an area with gradient color requires about 50 bytes more than filling it with solid color.
• Use alpha transparency sparingly because it can slow playback.
• Use the Color menu in the Symbol Property inspector to create many instances of a single symbol in different colors.
• Use runtime filters sparingly. If you can turn it into a raster graphic with those filters, it will likely be a smoother animation. This will be a delicate balance between file size and performance.
• Use motion tweens instead of shape tweens whenever possible.
• Don’t have transparent things on top of transparent things. When transparencies overlap, the processor usage multiplies.
• Keep your frames per second at or below 30. I’ve seen many applications trying to run at 60+ fps. I usually set my applications at around 24.
• Use easing only where you need it because it eats number of CPU usage.
• Learn about cacheAsBitmap. This can speed things up or make them slower, it depends on the context. If you have an animation, keep cacheAsBitmap as false, the cached bitmap will have to be regenerated every time the animation changes, so this isn’t worth it. However, on a vector graphic that doesn’t change within itself, cacheAsBitmap might be a good choice.
• Avoid using transparency (alpha). Flash must check all pixels underneath a transparent shape, which slows rendering down considerably. To hide a clip, set its visible property to false rather than setting the alpha property to 0. That is, graphics render fastest when their alpha is set to 100. Setting the movie clip’s timeline to an empty keyframe (so that the movie clip has no content to show) is usually an even faster option. Sometimes Flash still tries to render invisible clips; move the clip off stage by setting its x and y properties to, say, (-1000, -1000), in addition to setting the visible property to false, so Flash doesn’t try to draw it at all
• Avoid using vectors with gradient fills. Consider using a bitmapped gradient instead.
• Flash’s drawing performance is tied to how many points are drawn per frame. Always optimize shapes after you have drawn them with the Modify Shape submenu, then select either Smooth, Straighten, or Optimize (depending on your graphic) to reduce the number of points required to draw it. Changing strokes to hairlines (or not using strokes at all) can also significantly reduce the number of points needed. You can view the number of points contained in a stroke byclicking on it with the Subselection tool, and you can see the number of points in a shape by clicking on any of its edges.
  • Flash’s drawing performance is also tied to the number of pixels that have to change per frame, so avoid large changes. Make your animated content as small as you can get away with; for example, reducing the size of a graphic by 10% in each dimension reduces the area by 19%. The savings really add up when using multiple copies of the symbol, such as for a Space Invaders game.

flex utility class

Hi,

Even we have many native util classes available in flex but there are few API’s which we required in almost every application.
I have written a class which provides many useful API’s…

package com.aramco.iplant.utils {
import flash.xml.XMLDocument;
import flash.xml.XMLNode;

import mx.collections.ArrayCollection;
import mx.collections.Sort;
import mx.collections.SortField;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.rpc.xml.SimpleXMLDecoder;
import mx.rpc.xml.SimpleXMLEncoder;

/**

• Util class
• * */

public class FlxUtil {

/**

• @public
• @param – [Object - DataGrid, ...rest]
• @return – [Nothing]
• @des – API simply add necessary columns to provided datagrid reference
• * */

public static function createDataGridColumns(dg : DataGrid, … args) : void {
var cols : Array = new Array();
var c1:DataGridColumn;
for (var i:uint = 0; i < args.length; i++){
var columnData : Array = args[i];
var columnDataField : String = columnData[0];
var columnHeaderText : String = columnData[1];
c1 = new DataGridColumn();
c1.dataField = columnDataField;
c1.headerText = columnHeaderText
cols.push(c1);
}
dg.columns = cols;
}

// search an ArrayCollection for a property on an object
public static function getItemIndexByProperty(array : ArrayCollection, property : String, value : String) : Number {
var index : Number;
for (var i:Number = 0; i < array.length; i++){
var obj:Object = Object(array[i])
if (obj[property] == value){
index = i;
}else{
index = -1;
}
}
return index;
}

/**

• @public
• @param – [Object - dataprovider, String - labelfield/datafield]
• @return – Object
• @des – API returns sorted data as Object
• * */

public static function sort(data : Object, field : String) : Object {
var sf : SortField = new SortField(field, true, false, null)
var sort:Sort = new Sort();
sort.fields = [sf];
data.sort = sort;
data.refresh();
return data;
}

/**

• @public
• @param – [String - you want to search in, String - you want to search, String - you want to replace with]
• @return – String
• @des – API simply search and replace with provided args
• * */

public static function searchAndReplace(holder : String, searchfor : String, replacement : String) : String {
var temparray:Array = holder.split(searchfor);
holder = temparray.join(replacement);
return (holder);
}

/**

• @public
• @param – [XML]
• @return – ArrayCollection
• @des – API will convert any XML object to ArrayCollection and returns same
• * */

public static function xmlToArrayCollection(xml : XML) : ArrayCollection {

var xmlDoc : XMLDocument = new XMLDocument(xml.toString());
var decoder : SimpleXMLDecoder = new SimpleXMLDecoder(true);
var resultObj : Object = decoder.decodeXML(xmlDoc);
var ac : ArrayCollection = new ArrayCollection(resultObj.root.list.source.item as Array);
return ac;
}

/**

• @public
• @param – [Object]
• @return – XML
• @des – API will convert any proxy object to XML and returns same
• * */

public static function objectToXML(obj : Object) : XML {
var qName : QName = new QName(“root”);
var xmlDocument : XMLDocument = new XMLDocument();
var simpleXMLEncoder : SimpleXMLEncoder = new SimpleXMLEncoder(xmlDocument);
var xmlNode : XMLNode = simpleXMLEncoder.encodeValue(obj, qName, xmlDocument);
var xml : XML = new XML(xmlDocument.toString());
return xml;
}

/**

• @public
• @param – [Object]
• @return – ArrayCollection
• @des – API will convert any Object to ArrayCollection and returns same
• * */

public static function objectToArrayCollection(obj : Object) : ArrayCollection {
var ac : ArrayCollection = new ArrayCollection(obj as Array);
return ac;
}

/**

• @public
• @param – [ArrayCollection]
• @return – XML
• @des – API will convert any ArrayCollection object to XML and returns same
• * */

public static function arrayCollectionToXML(ac : ArrayCollection) : XML{
var xml : XML = objectToXML(ac);
return xml;
}

/**

• @public
• @param – [String]
• @return – [String]
• @des – remove all white space for a string and returns same
• * */

public static function trimWhiteSpace(str : String) : String {
var pattern:RegExp = /[\s]+/g;
return str.replace(pattern, “”);
}
/**

• @public
• @param – [String]
• @return – [String]
• @des – remove all \n for a string and returns same
• * */

public static function trimNewLines(str : String) : String {
var pattern:RegExp = /[\r\n]/g;
return str.replace(pattern, “”);
}

/**

• @public
• @param – [String]
• @return – [Boolean]
• @des – API returns true if string contains alpha numeric value else false
• */

public function containsAlphaNumeric(str:String) : Boolean {
var pattern:RegExp = /[^a-zA-Z0-9]/;
return str.search(pattern) != 0;
}
}
}