Shyamala's Blog

Android OS Research

shyamala — Tue, 05 Jul 2011 08:24:03 +0000

The market is full of smart phones and tablet devices, and with the huge demand in the market for smart phones and tablet devices, Android is no where behind to launch its own smart phones and tablets.

Android Operating System for Tablets and SmartPhones
Android 2.3 (Gingerbread) and Android 3.0 (Honeycomb) are two of the latest Android mobile operating system from Google Android especially for tablets.

Android 2.3 (Gingerbread)
Android 2.3 the Gingerbread was released in December 2010. There were lots of improvements and new features were incorporated in to Gingerbread as compared to its previous versions. The Nexus S is the newest smartphone introduced by Google in December 2010 which was powered by Gingerbread. The device was co-developed by Google and Samsung to run Android 2.3 (Gingerbread).

Android2.3 (Gingerbread) Features

Android 2.3(Gingerbread), supports Bluetooth as well as Wi-Fi. Wi-Fi hotspot functionality can connect 6 devices. In the sense, you can use Android 2.3 phone as a wireless broadband router. It also supports for NFC (Near Field Communication) which is a high speed data communication mechanism operates in high frequency within a short range (10 cm).
In addition to standard voice calling, Android 2.3 (Gingerbread)supports for SIP audio and video calling. If you have a good 3G or Wi-Fi connection and a SIP account you can make Internet calling.

Some additional features of Android 2.3(Gingerbread) is as follows

New user interface design with new themes (Black themes save power)
Extra Large Screen Size supported
SIP Communication Supported (SIP Video and Audio Calling)
Supports for NFC (High Frequency High Speech Data Transfer in short range)
Support for WebM/VP8 video playback, and AAC audio encoding
New audio effects such as reverb, equalization, headphone virtualization, and bass boost
Improved Copy and Paste functionality
Redesigned Multi Touch Software Keyboard
Audio, graphical, and input enhancements for game developers
New sensors support (i.e gyroscope)
Download manager for long running HTTP downloads
Enhanced support for native code
Improved power management and application control
Support for multiple cameras

Android 2.3 Gingerbread supported devices
Nexus One, Samsung Galaxy S, Galaxy Tab, HTC Desire HD, HTC Desire Z, Motorola Droid 2 and a few other handsets and tablets meets the hardware specifications for Android 2.3 Gingerbread

Android 3.0 (Honeycomb)

Android 3.0 (Honeycomb) Features

Tablets & Phones: Honeycomb is designed for Tablets, but would run on Phones as well, without trouble.
All Existing Apps work: No matter for which android OS an app was developed, it would still work on Honeycomb as-is. So you already have 200,000 apps in Market plus new apps coming soon.
Notifications Revamped: Android did great in notifications, now its even better. Gone is the pull-down notification shade used by earlier Android versions. Instead, notifications pop up much like Growl on Mac OS X. Notifications scroll better, display more info e.g. shows contact photo when someone pings you on Gtalk
New graphics Engine: Honeycomb uses dual core, and is hence capable of producing Richer graphics using Renderscript engine. This brings fluidity and advanced visual 3-D effects, much like Apple’s Core Animation. Renderscript will also bring 3-D games that are visually stunning: one area where Android lacked.
Application fragments: Apps can consist of small fragments that work together seamlessly. The new Gmail app for Honeycomb is a perfect example: The Inbox view will change to a message view as needed, with different panes or fragments sliding on- or off-screen.
Intuitive camera: The new camera interface exposes settings in a rotary dial, making it easier to manipulate photo settings. The dial rotates off the screen as new controls rotate on to it.
Google Talk Video chat: This is a great feature which had been awaited for long. Quality would really be decided by the network you are in, but it works.
Easy multitasking: Multitasking has been Android’s true strength, but its wasn’t very accessible to users. Switching between apps is now easier, and faster. Application shows their screenshots along with icons.
Better Market:Access to Android Web Store
Smoother Transitions:Improved 3D graphics, animations and support for dual core processors
Smarter widgets: Widgets are now more powerful,inherently more graphics capable in terms of scrolling, speed & transitions.

Apart from the above mentioned features, here are some additional features:

Customizable home screen
Automatically sync apps and settings with your phone and stay in sync as time moves on
Enriched multi media experience, improved multitasking, full browsing experience, new UI and opened to Android market
Chat face to face with millions of Google talk users
Google Maps 5 with 3D interactions
Send and receive mails on the go with Tablet Optimized Gmail
A redesigned virtual keyboard, new tools for selecting text, new video chat on Google Talk and revamped versions of Google Maps and eBooks.
Totally improved browser with tabbed browsing, Google Chrome bookmark syncing, auto form filling and many other features.

Android 3 Honeycomb supported devices

Motorola Xoom and Samsung Galaxy Tab are the only device currently that works on Android 3 (Honeycomb) OS

Mobile User Interface and Usability Guide

shyamala — Thu, 17 Jun 2010 07:59:30 +0000

Mobile Platform Guidelines

Before designing an application for mobile, one should keep in mind that, a mobile device is not a desktop or a laptop and mobile application is not similar to a desktop or a web application. There are lot of limitations and restrictions while designing for a mobile device.

Here are some challenges involved while designing a mobile application:

Diversified Platforms and Devices
Diversified Screen Size and Display Resolution
Diversified Operating System
Limited Memory
Diversified Interaction
Diversified Usage context
Diversified User needs

Diversified Platforms and Devices

With the growing competition in the market the number of mobile platform and devices are also increasing. Here are some of the most common mobile platforms

iPhone
Android
BlackBerry
Symbian
Windows Mobile
Palm Pre

Even within a platform, there are several different devices with different capabilities, such as display sizes and processing capabilities. Applications should be usually designed for the entire platform – not just to a single target device – and should consider issues such as scalability to different display resolutions.

Diversified Screen Size and Display Resolution

All Mobile platforms and devices have a diversified screen size and display resolution and the biggest challenge is designing for the small screen. Screen size may vary from 240 by 480 in width and height to 480 by 360.

Small screen size means that less of a page or form can be displayed, making it more difficult to maintain the user’s sense of location within the application and navigation scheme

With a small screen, the amount of simultaneously visible content and controls is limited. In many cases, the user is forced to scroll or pan the view to see more.

Diversified Operating System

Different platforms have different operating system and this also plays important role while designing a mobile application

Limited Memory

Unlike desktop or laptop computers, mobile devices have a very limited memory and one have to keep this in mind while designing a mobile application

Diversified Interaction

Different mobile devices require different tools to interact with their interfaces like mice, joysticks, scroll-wheels, keypads, fingers . While each of these input tools accomplishes the essential task of selecting an object, each also presents us with limitations.

Diversified Usage context

Different users may have different context of the mobile application usage as follows and it is very important to keep this in mind while designing the mobile application

Diversified User needs

Users have different age, gender, educational background, income, jobs, value & lifestyle, personality and their need and way of using a mobile application may also be diversified.

Unlike desktop or web app, mobile user may want to use the mobile apps anywhere anytime

While at home
On the way to office
On the way to home
Coffee bar
While using restrooms
Waiting in the bus stop
In the bus or subways etc
Using the device while moving
Performing another task at the same time
With or without a network signal, or with a slow data transfer connection
In an extremely dark or bright environment
Running out of battery
In an extremely noisy or distracting environment

While the design cannot be prepared for every possible situation, the key to mobile design is to keep it simple.
Simplicity is achieved by focusing on the most important features and keeping the design clear and accessible. Key tasks should be able to perform with low effort and important information should be easily available.

Application Screens & Interaction Methods

Display specifications for different platforms and associated devices

Mobile User Interface Design Principles

One should keep in mind the following principles while designing the interface

Learnability
Efficiency
Memorability
Error Recovery
Simplicity
Mapping
Visibility
Feedback
Consistency
Intuitiveness
User input
Customization
Satisfaction

Learnability

Interface should be easy to use from the first time the user interacts with it
Amount of functionaility presented to the user should be limited to exactly what the user requires to get their goal

Efficiency

Number of steps its takes a user to complete a task is very important
Key tasks should be made as efficient as possible

Memorability

Interface should be easier to use each time the user interacts with it
Frequency of use is the key factor in memorability

Error Recovery

The interface should be designed in such a manner that, user should not be given chance to make mistakes
Even if mistake happens, interface should give chance to rectify the error
When encountering error conditions, the user should be informed of the error without being inconvenienced. Attempts should be made to make the failure “graceful” such that no information is lost

Simplicity

Usual task should be easy and less common task should be possible
Avoid unnecessary functionality and keep the visual design and layout uncluttered
Display information in a way that makes effective use of the small screen
The user should be able to find all needed functions easily and do tasks effectively, without getting tangled in secondary issues
Graphics and display layouts should be uncluttered, crisp, and plain. Displays should show the most important information clearly, rather than squeezing in as much data as possible. Text fonts should be clear and comfortable to read. There shouldn’t be any excessive decoration
The interaction, display texts, graphics, and sound design should be consistent and harmonious

Mapping

What the user expects to happen when they interact with the interface is exactly what should happen

Visibility

Important information should be the most visible and less important should be less visible
Understanding the users goals is critical

Feedback

User should always be in control of the interface and not the other way round
The interface should be responsive by giving instant feedback to the user

Consistency

Like items should always be displayed and act the same way across the entire application
Use of color, widgets should also be consistent across the entire application

Intuitiveness

An interface should be as intuitive and straightforward as possible
It should be based on elements the users know already so that there is no need to learn any complicated procedures

User input

Provide pre-selected default values where possible

Customization
Because user preferences differ, users should have the ability to customize the interface of the application. This includes deciding what information to display in the message list and the order in which to display information. By customizing the interface, the user can create an application that best suits their typical, day to day usage pattern. However, the application should provide defaults that are helpful for the majority of users

Satisfaction

This is very important principle, the user should be able to enjoy using the application

When designing your application, also consider the following guidelines:

Stay focused on user’s immediate task. Display only the information that users need at any one moment
Minimize the number of times that users need to click the track wheel, trackball, track pad, or touch screen to complete a task
Make all actions available from the menu. Verify that the actions available in the menu are relevant to user’s current context
Follow the standard navigation model as closely as possible so that a particular user action produces a consistent result across applications
Design your UI to allow users to change their mind and undo commands. Users sometimes click the wrong menu item or button accidentally. For example, use an alert dialog box to notify users of a critical action such as deleting data etc

Usability Guidelines

Address user requirement as quickly as possible: Generally user’s may be accessing an application on mobile for their immediate needs like locating an ATM, locating nearest cafe or finding the closest theater or for a short-spanned entertainment.
In such cases “quickness” makes a lot of difference, time being a crucial factor.
Make user inputs simpler: Entering text on mobile phone can be more painful than on a conventional desktop-based input mechanisms. Make sure the design allows the user to input the text in an easier way.
Allow them to choose by selecting an item instead of manually entering the text. Show prepopulated data in forms wherever possible
Indicate clearly what is selected: Mobile phones generally have lesser cursor control, as the pointer device is either joystick, touchscreens, trackball or the directive buttons on the mobile phone.User should be easily able to identify what has been selected to make the experience better. Show the selected link by highlighting it with different color or something similar or viable
Inessential stuff should be kept out: Provide only essential and relevant information on every page. User generally pay for the content they see on their device and so for them any inessential data download is a pain.
Additionally reading habits may also vary from desktop to mobile device. Content designed for mobile applications also needs to be crisp and to the point, as the users may not be interested in reading any typical junk on their devices which they are not interested in.
Make sure the basic controls are always available: Make sure you always place basic controls to navigate on site or application such as “Back to home”, “Back to search results” and relevant ones. Use contextual menu if required.
In most cases the device has a back button option, but it is advisable to include a back button on every page
Cater for Easy and Intuitive Interaction: Give interactive elements a design as simple as possible and make sure, that the user intuitively detects how to interact with them. Controls, whose operation is apparent should result in a faster learnability and a lower mental workload for the user. If, in addition, the interaction techniques are straightforward, the application should demand less attention from the user.
Exemplary rule: For text fields, make clear which kind of input is expected.
Strive for Consistency: Consistency enables the users to apply existing knowledge and to quickly build a mental model of the application’s functional concept. They come across familiar objects and training period can be reduced. Thereby, the user interface should furthermore be operated intuitively and without surplus mental load and additional concentration effort.
Offer Instantaneous,
Informative Feedback: Provide a feedback for every interaction, that reflects appropriately the significance and frequency of occurrence of the particular action and that considers the context of use.
Prompt reaction to the user’s interaction supports a sense of controllability. On the one hand, users are informed, that their input was recognized. Panic, that may occur due to too long response times when pressure to perform is high, can be avoided.
Do not make the mobile application a technology-limited version of your desktop application: Limit the application to the tasks most frequently attempted by your mobile users. Design the application around the constraints of mobile devices.
Applications should be easy to learn and use: Users will not spend time reading user manuals or help pages in mobile context.
Apply 80/20 rule: Optimize the design around the 20% of the functionality that will meet 80% of the user’s needs (80/20 rule). If additional functionality can be added without compromising usability, add it cautiously.

My journey so far….

shyamala — Tue, 08 Jun 2010 05:24:08 +0000

Friends, here am back after a while to share the journey of my life (its a long post). This post is initiated by an ex colleague of mine, who requested me to post the success story of my life so far…

After my schooling I got into engineering line with my stream being civil, my elder sister was in the same college with computer as her main stream. Computers and design always fascinated me and when she use to discuss computers with her friends I use to get inclined to her discussions. Then I decided no matter what I will learn computers.

After my engineering, I decided to pursue 1 yr PGDCA and joined informatics computer education. After completing 6 months of my course, the director of informatics computer education approached me with the teaching offer…it was a dream come true for me “earn while you learn” and I agreed.

Mornings I use to attend my classes and remaining time I use to teach. During my free time, one day I was browsing through my labs computer and found a software called corel draw. I was just playing around to understand what it is and then realized I can do wonders in corel draw. As design was always my passion, I figured out lot of similar tools like photoshop, pagemaker etc and learnt them on my own.

I was so addicted to design that even after reaching home I use to stick to my computer and do photoshop or corel draw. My dad use to shout a lot at me whenever he saw me designing, because for him computers were meant to do only programming. My dads anger made me more rigid and to avoid bombardments, I started using computers at night when he slept.

My director was very impressed with my learning capabilities and decided to train me how to work on internet. He arranged a 1 week training for me and this internet training was a turning point in my life…

All sorts of things started tickling my mind, how is web pages created, how we can see them from anywhere in the world, what programming language is used to code blah blah…this curiosity inclined me to research on internet and websites and this is how I pursued my diploma in web technology while continuing my job.

I have a passion towards anything new..new technology, new skills, new gadgets, new tools, new concept and this passion helped me a lot to make my career into web designing n development.

Soon I got opportunity to work with companies like Vishwatech, AOL, MindTree, Yodlee and now Kony. I learnt a lot in all these companies and fine tuned my skills from web design & development to desktop and mobile application development as well as usability and user experience.

During my MindTree tenure, I learnt a lot about usability and user experience, web 2.0 and started a web 2.0 community so that all like minded and interested people can join and learn from it. This community gave me another thought, why can’t I create a community outside the organization so that others can also benefit and this is how the “user experience” group in linkedin was created, which is a very successful group with 28,167 members as of now.

All the while, I wanted to pursue higher studies and enhance my educational skills along with my professional skills and this is how I ended up pursuing my MBA from Northern California University. I will write a separate post on this soon…..

I am really thankful to each and everyone who believed me, supported me and encouraged me in all that I am able to achieve today and thanks for being a part of my journey………

Learning Flex fundamental Section 2

shyamala — Fri, 09 Apr 2010 08:21:50 +0000

This page will be soon updated. Keep watching

learning-flex-fundamental – Part 4

shyamala — Fri, 09 Apr 2010 07:55:42 +0000

In this topic we will be learning the following

Creating a simple Flex application

Displaying images

Laying out Flex application with containers

Using Panel container

Using controlBar container

Adding user interface controls

Create data binding between components

Creating a simple Flex application

In any MXML file, Application is the default container tag, similarly like we have in html doc or in a xml doc. Skeleton of an MXML application file contains

XML document type definition(namespace)

Opening and closing component tag set

Before creating an application, we need to specifying namespace

We need to use xmlns:mx attribute for the namespace, which defines the collection of legal MXML tags

We need to use the http://www.adobe.com/2006/mxml which is the uniform resource identifier which associates a prefix (in this case mx) with a manifest file as follows

http://www.adobe.com/2006/mxml
mxml-manifest.xml

Setting the layout property

An application tag need to have the layout property which defines what type of layout we need to create.

If the layout property is not used in the Application tag, the default layout is vertical. The other layout properties are

– absolute: Visual elements must have specific x, y values or constraints for positioning
– horizontal: Visual elements presented horizontally
– vertical: Visual elements presented vertically

Additionally the layout property defaults to your last selection when building an application or component from the appropriate dialog box

Adding UI Controls

UI controls are used to display user interface type components in an application like Text, text input, buttons, images, combo boxes etc

UI controls are added in between the application tag set or another container component

Component properties can be specified in two ways

As an attribute of the XML tag

As nested tags or nodes

Hello Flexers!

Commenting you MXML code

Flex uses XML style comments which is similar to HTML comments

Displaying images

To display images in flex, we use the Image control

Flex supports the following image types

JPEG (non progressive)

GIF (can be transparent)

PNG (can be transparent)

SWF

SVG (can only be embedded at compile time)

Methods for displaying images

There are two ways of displaying images

Load them dynamically at runtime

Embed them in SWF file

There are 3 ways of specifying image source

Via source property of an Image control ; this will load image dynamically at runtime. Example

Use Image load() method to add the images dynamically at runtime

Embed them in the SWF at compile time using the @Embed directive; useful when you need instantaneous loading and offline application

Loading dynamically at runtime

Specify the image using the source attribute of the control

Assign an id to the image to reference in ActionScript

Using the Image load() method

The load() method of the Image class is used to dynamically switch the image. Example

Embedding images at compile time

You can embed images at compile time for instantaneous loading. To embed, use the @Embed directive when specifying the image source

Pros of embedding image

Image is available immediately, as it is part of the SWF

Very useful for creating application that are able to work offline

Cons of embedding images

Adds to applications SWF size

Slows down application initialization process

Must recompile application every time image changes

Cannot use in data binding calls

Laying out Flex application with containers

A Container defines the rectangular region of the drawing surface of adobe flash player

Within a container, you can define the components ( both controls and containers ) that you want to appear within the container

Components defined within a container are called children of the container

At the root of a Flex Application we have a single container, called the Application container, that represents the entire Flash Player drawing surface. This Application container holds all other containers and components

A container has predefined rules to control the layout of its children, including sizing and positioning

How containers work

Containers use a set of layout rules to position components. The benefit of components are they keeps you from having to worry about positions and additionally allows resizing/re-positioning with browser window size

Box Containers

There are two types of Box containers available to layout your pages

Vertical box (VBox)

Horizontal box (HBox)

VBox

The VBox layout allows you to display controls vertically, as in the image below

HBox

The HBox layout enables you to lay out your controls horizontally, as in the following image

Canvas container

The Canvas container is a basic component that enables you to specify absolute position. You can use absolute positioning by specifying x and y properties of the components inside the container. Canvas containers can offer better performance, because client processing power does not have to be used in order to determine object placement

Specifying positions in a Canvas container

As stated, you must specify the x and y properties of all the child components inside the container; the origin is the top-left corner of the
canvas.This x/y positioning is only valid for components on the canvas, not for components inside child containers

Panel container

The Panel container wraps self-container application modules. It includes a panel title, a title bar, a status message and a content area for its children. It is represented in MXML with the Panel tag as follows

This is how a Panel container looks

Some Characteristics: of Panel are

Defaults its width and height properties to value that accommodate all children, but will not be larger than allowed by its parent container

Truncates content that is too large and implements scroll bar as appropriate

Has layout property, like the Application container which can take values absolute, vertical (default) and horizontal

Has default padding values of 0 pixels which can be modified

The size of any content placed within a container is relative to that container, not the main Application area.

If the child is sized larger than the parent container, then it will be resized down to fit into the parent container

back to tutorial part 1 | tutorial part 4 – Learning Flex fundamental Section 2

iPhone UI Patterns

shyamala — Thu, 25 Mar 2010 09:59:00 +0000

iPhone Application development is becoming a hotcake in market with everyone trying to design and develop an iPhone application for their business needs to reach widest range of customer base.

When I entered into the iPhone app development area, I did lot of research to find out the kind of UI patterns available for iPhone applications, because most of the apps which I found were a plain vanilla flavor and as a newbie I was not aware of the different patterns which actually could work with the smart devices. Anyways thanks to couple of books which I read and couple of apps which I reviewed, it really helped me understand the iPhone UI patterns, as well as helped me implement and design some really new patterns for iphone. Lets discuss the patterns

1) Application Menu (also called App Menu) : The way we have a menu in websites or desktop applications, which helps us navigate, we can have an application menu in iPhone which functions the same way and can help us navigate from one page to another. These are some of the App Menu patterns which we can use in iPhone apps.

By default the app menu support maximum of 5 links. What if you have more than 5 links which you have in your app? How will you show it? It’s very simple. In the app menu, there is an icon with 3 dots which implies more. If an app has more than 5 links, we can use more as the fifth menu, this in turn can navigate us to the next level/page with list of other navigation.

2) Titlebar: As the name imples, it is a titlebar. This can be used as a navigation as well as for displaying only titles of the page.

3) Segmented List : This is the most extensively used pattern in iPhone for displaying data both static and dynamic. This pattern can be helpful when displaying news, article list, product list etc.

4) Modal Dialog: Like any other modal dialog, iPhone also support Modal dialogs. We can use the pre-built in dialogs.

5) Accordions: Accordion stacked view is also supported by iPhone apps and can be used if we have to show lot of data in a page without much scrolling. This pattern can be useful when we need to show user a product details with feaures, price, functionality etc or can be useful when trying to show the comparison results.

6) Callouts: If we want to show some extra details about any product, without navigating to new page, we can use a callout kind of pattern.

7) Tab Navigation: Works similar to a tabbed stack in web pages or web applications.

8 ) Icon Navigation: Icon navigation can be used in place of normal segmented or listview kind of approach to make the app look visually appealing.

9) Image Strip: This pattern can be used when we need to show some set of images in a strip fashion. This can support multiple images can be navigated in a sliding kind of pattern.

10) Photo Gallery: This pattern is useful when we need to show a list of images.

Here’s the list of some commonly used iPhone pattern. Together these patterns can really make any app user friendly in terms of usability and user experience and visually appealing.

Tutorial part 4 – Displaying Images

shyamala — Thu, 23 Jul 2009 04:19:14 +0000

In this part we will learn the following:

Creating a simple Flex application

Displaying images

Creating a simple Flex application

Application is the default container tag. Skeleton of an MXML application file contains

XML document type definition

Opening and closing component tag set

Specifying namespace

use xmlns:mx attribute for the namespace, which defines the collection of legal MXML tags

http://www.adobe.com/2006/mxml is the uniform resource identifier which associates a prefix (in this case mx) with a manifest file as follows

http://www.adobe.com/2006/mxml
mxml-manifest.xml
http://www.adobe.com/2006/mxml mxml-manifest.xml

Flex-config.mxml is located in installdirectory\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\flex-config.xml

Setting the layout property

The layout property defaults to your last selection when building an application or component from the appropriate dialog box

The following are 3 layout property.

absolute: Visual elements must have specific x, y values or constraints for positioning

horizontal: Visual elements presented horizontally

vertical: Visual elements presented vertically

If the layout property is not used in the Application tag, the default layout is vertical

Adding UI Controls

UI Controls are used to display user interface type components like Text, text input, buttons, images, combo boxes etc in an application

All UI tags are add between the application tag set or another container component

Example of the Label control to display a single line of text

Specifying components properties

Component properties can be specified in two ways

As an attribute of the XML tag

As nested tags or nodes

Hello

Commenting you MXML code

Flex uses XML style comments which is similar to HTML comments

Displaying images

The following type of images can be used in flex.

JPEG (non progressive)

GIF (can be transparent)

PNG (can be transparent)

SWF

SVG (can only be embedded at compile time)

Methods for displaying images

There are two ways to display images in flex.

Load them dynamically at runtime

Embed them in SWF file

We can Specify image source in three ways

Via source property of an Image control ; will load image dynamically at runtime

Use Image load() method to add the images dynamically at runtime

Embed them in the SWF at compile time using the @Embed directive; useful when you need instantaneous loading and offline application

Displaying images Examples

1) Loading dynamically at runtime

Specify the image using the source attribute of the control

Image is loaded at runtime

Assign an id to the image to reference in ActionScript

2) Using the load() method

Dynamically switch out the image using the load() method of the Image class as mentioned below

3) Embedding images at compile time

You can embed images at compile time for instantaneous loading
To embed, use the @Embed directive when specifying the image source

Pros of embedding image

Image is available immediately, it is part of the SWF

Very useful for creating application that are able to work offline

Cons of embedding images

Adds to applications SWF size

Slows down application initialization process

Must recompile application every time image changes

Cannot use in data binding calls

Part 5: Laying out Flex application with containers

User Interface Development in SDLC

shyamala — Mon, 20 Jul 2009 12:51:00 +0000

“User Interface” or UI Development is not a new term in software development life cycle. Starting from a small web site development to application or software development, User Interface plays a very important role. Many people believe, UI development is just about coding HTML, CSS and Java-Script but UI is way beyond these technical terms.

UI Development is not limited to Website development but extended to any kind of application development including client server. Even in wireframes and Prototyping we make use of UI technologies.

A user is not going to experience a software or website based on the backend technology used, but based on the User Interface and its experience.

This topic is intended to understand

- The role and importance of User Interface development in the SDLC
- How UI Development can be catered in each phase of SDLC starting from the Requirement gathering phase.

Introduction

Product development is the process of designing, creating, and marketing an idea or product. The product can either be one that is new to the marketplace or one that is new to a particular company, or an existing product that has been improved. In many instances a product will be labeled new and improved when substantial changes have been made.

Today Product development is becoming a need for every business, from a simple website to ecommerce websites, banking domain to mobile technology every business needs software or a product to communicate with the users.

We can categorize the product into this broad bucket

Consumer Products

Public Safety,

Rugged Handheld Computers Utilities,

Mobile & Fleet Management

Mapping & GIS,

Embedded Systems

Portable Devices In-Vehicle Navigation & Telematics Tracking,

Instrumentation,

Security

Engineering & Construction

Construction

Construction Asset Management

Marine Construction

Mining

Surveying

Infrastructure

Agriculture Solutions

Precision Agriculture

Guidance

Flow and Application Control

Water Management

Information Management

Advance devices

Defense

Precise Timing

Each of these products needs a User Interface through which a user can accomplish their tasks. Having the best user interface provides the best customer experience and today’s competitive market-place demands that companies maximize the ease of use for their customers.

All product development goes through a similar development lifecycle, starting from requirement gathering to testing phase. Unfortunately, in the development cycle of most of the applications, the user interface design does not begin until most of the development has been completed, and is usually starved for time and resource

The results are hardly positive. Either the UI design is severely affected by assumptions made during the application development or additional resources are added to rework or completely re-program all or part of the application to accommodate new design. This leads to problems like design compromises, delay, budget overruns etc.

Given this the most effective strategy is to integrate and design the UI parallel to each phase of development lifecycle

In short, integrating UI design in the development process have several businesses benefits as follows:

- Create a better product
- Increase customer satisfaction and retention
- Allow greater flexibility in responding to customer feedback
- Lower development costs
- Shorten the development lifecycle

Lets look at the UI design process and how we can integrate it in all the phases.

User Interface design process

User interface development process can be categorized into 4 phases as below:

- Research and Analysis
- Design and Branding
- Prototype Development
- Production

This structured process can maximize communication between the company and its clients, lower development costs, and most importantly deliver the best user interface design.
This process is flexible and modular, thus allowing client to determine which phase are appropriate for their needs, and can be applied to both the creation of user interface for new applications as well as enhancements of existing applications.

2.1 Research and Analysis

Process:
In traditional Research & Analysis phase, two categories of information are gathered and analyzed by the user experience team.

1) Information about the users of the application
2) Information about the application itself

This establishes the context for User Interface design and this context informs the entire design process.

Additionally, during this phase as a part of UI development, UI developers can start researching about current market trends, UI technologies, and competitive analysis. This research can help the UX team during the consecutive phase of SDLC and both UI and UX team will have clarity of things possible and impossible and LOE (level of effort) required during development.

For existing applications the Research & Analysis phase also determines the strengths and weakness of current UI.

How:
The user data is gathered answering the following questions

- Who the users are?
- What are their skill levels?
- What are their qualitative expectations for the application?
- What task do they need to perform with this application?
- Under what environmental conditions will they use this application?
- Under what time conditions and constraints will they use this application?

The application information is gathered answering the following questions

- What problem is the application intended to solve?
- What are the functional purposes of the application?
- What are the operational purposes of the application?
- What are the marketing purposes of the application?
- What are the user interface specifications of the application?
- What are the software, hardware and graphical requirements to create and deliver the appli-cation?

The User Interface trends can be gathered answering the following questions

- What are the current UI trends?
- What are the current UI design patterns?
- Which are the latest tools and technologies being used?
- What tools and technologies are our competitors using?
- Pros and Cons of using any latest technology for the current product?

Deliverables:

- Personas
- Competitive landscape
- Usability goals
- Functional and non functional specifications

2.2 Design and Branding

Process:

During the design and branding phase, User Interface design is created that addresses the specific needs identified in the research & analysis phase and creates, revise or leverage the applications brand.

Involving UI design into Design phase

During design phase UI developers can work closely with the UX team to define the User interface (Wireframes, Visual design). A User Experience team may think out of the box while creating wireframes and visual design, but may not be aware of challenges, possibilities and limitations. Involving UI developers in this phase may ease the process, as UI developers understand the technologies and possibilities. This will reduce the last minute efforts from the UI developer’s side and additionally both the UI and UX team, as well as client will have a clear expectations set.

Deliverable:

- A discussion of the design philosophy and strategy used to create the UI design, including an explanation of how research brief informed the UI design
- A comprehensive set of screen layouts illustrating every part of the UI design
- Key screen that present the visual design and branding for the application.

Wireframe:

Wireframes is presented as a comprehensive set of screen layout consisting of Black and white sketches of every screen in the application. At this point the visual and graphic design processes have not yet begun.

Wireframe is an important step; because it helps the clients focus on how used will interact with the application rather than become entrenched in relatively subjective issues such as color or visual style. It enables us to postpone those and other subjective issues

By necessity this is a cyclic process, and once the screen layouts have been approved, a visual design is created that is informed by the UI design.

Visual design

Visual design process begins with the branding of application.

2.3 Prototype development

Process:

Using the approved design document as blueprint, prototypes of the User Interface designs are created. Based on clients needs the prototypes are created using HTML or flash. Prototypes can be low fidelity or high fidelity based on user needs.

The scope of the prototype created during this phase is tailored to the specific application and the user testing requirements. Some applications require a comprehensive click through or working model of the entire interface, while others only require a prototype of core functionality.

The prototype serves as

- A communication and review tool for the client
- An implementation guide for the software developer
- A user testing tool
- A working prototype enables clients to see how the user interface will perform without having a commit programming resource

Another benefit to a working prototype is that it dramatically improves the communication among UI design, marketing and application development teams, as well as any other key stake holders since marketers, designers and developers often think and use language differently, having a functional prototype leaves fewer issues open to interpretation or misunderstandings

Prototypes are infact an opportunity to identify any remaining user interface issues. Should there be design document and prototype are modified to incorporate changes prior to final approval.

Once the prototype is approved, development team can work to implement new user interface design quickly and efficiently without interrupting the development process to correct design is-sues.

The utilization of prototype also has significant marketing benefits. Since the prototype closely stimulates the actual application, extensive user testing can be one before the programming starts, which also produces significant cost savings. Additionally positive user feedback is a validation of design, confirming that the application delivers a user experience that meets or exceeds customer expectations. This positive feedback can be used for both internal and external marketing purpose, by building confidence in the rollout and promoting user adoption.

Deliverable: Interactive prototype of the new user interface

2.4 Production

A proper UI and UX team collaboration and Integration of UI design from the starting of SDLC can reduce lot of efforts and confusion. Also it can help in successful and timely delivery of the products in any company without any slippages and can increase customer satisfaction. Additionally it can help building ongoing relations with our clients.

Stay tuned for an interesting blog soon on “Ethnographic and demographic influence on design “

My latests passion

shyamala — Fri, 10 Jul 2009 15:56:19 +0000

I have been in the field of user experience since 8.5 years by now and worked a lot on web technologies. My expertise lies in development and am a total novice in design.

Whenever I use to see professional icons and designs, I always use to appreciate them. Being a novice in design, I always loved design. I was always curious to know everything about designing, iconography, branding, color theory.

Normally people have the impression that developers cannot design and whenever I showed my interest in designing, many people told me the same. I took this as a challenge and thought, one day I will also design.

This interest of mine, generated a passion inside me to learn designing and I started gathering as much information as possible about designing.

2 days back I downloaded trial version of photoshop and started designing. I tried with designing small icons.

The first set of icons I developed is as follows. Though its not very professional and I know it needs some grooming, but I am happy that I was able to do some designing.

I showed this to my manager and colleagues and they were quite happy to see my design and encouraged my design. This generated more interest in me about designing and I tried some more design. This time I took help from one of the online tutorials and developed a book and this is what I came up with today.

Next I tried the following USB flash drive

After seeing the above design my colleagues liked it a lot. This is giving me more encouragement and I am falling in love with design.which

Adobe Flex: Creating a project – Part 3

shyamala — Mon, 29 Jun 2009 05:45:32 +0000

Creating a Flex project and your first application
Now that we have seen how Flex builder looks lets start with creating our first flex project

Creating a project
A project is a grouping of resources that make up a flex application

When a Flex project is created a number of files and folders are automatically created as follows:

bin-debug folder: where your compiled applications resides

html-template folder: where the html wrapper page resides

.settings folder: where some configuration file resides

.actionScriptProperties, .flexProperties and .project files: project configuration files

src folder: All the MXML files, actionscript classes, assets reside inside this folder

libs folder: where custom class files reside

A main application file

Step 1: Select File > new > Flex project

Specify output folder. The default is bin-debug folder

Choose project build paths

The main MXML application file looks like this

page looks like this

Using the main application file

The main application file contains the container set tag

Each application can have only one associated application file

The layout property is given the absolute value the first time you create an application

Flex builder will retain your last layout selection for future applications if not specified.

also If you do not specify the layout property, the layout will be vertical by default

Running the application file

Run the application by clicking the Run button. Run button is the green button on the top panel

What exactly happens when you click the run button?

back to tutorial part 1 | tutorial part 4 – Learning Flex fundamental