image

Bringing iOS Graphics To Life With Advanced Animations

Most of the developers must have used UIViewAnimateWithDuration once in their lifetime. The method is a straight forward message to create great effects and animation.

What if we can make these animations more realistic? Here comes the new method:

[UIView animateWithDuration:(CGFloat)duration delay:(CGFloat)delay
usingSpringWithDamping:(CGFloat)damping initialSpringVelocity:(CGFloat)velocity options:(UIviewAnimationOptions)options
animations:^() (animations)
completion:^(BOOL finished) (completion)]

It’s quite a long signature to digest. Take this as an object attached to a spring at one end. And we move that object. We can control the spring strength, velocity and other parameters. This can be used for rotation, scale and transformation, anything that a standard animation can be used for.

Instead of just animating a view to some point on the screen, this new spring-based animation makes transitions lively. It enables a view to bounce as it approaches its targeted position.

Lets take a look at parameters:

Damping:

It’s a float between 0 and 1. It denotes how strong the spring is. If we set this value to 1 our object will no oscillate at all. It will slow down until reaching the target value. Other way round if we set this value to 0, our object will oscillate infinitely.

SpringVelocity:

This is the magic parameter that makes some really cool stuff possible. As mentioned in the header comment, a value of 1.0 is defined as traveling the total animation distance in one second. If you give it a negative number then your animation will start by “popping” in the opposite direction before springing back.

Options:

A mask of options indicating how you want to perform the animations. For a list of available options, see http://goo.gl/2McElE

Apple encourages us to create user interfaces that feel real. Spring animations give a realistic touch to animations but ultimate goal is to create interfaces, which react to touch, gestures, motion and orientation. In order to create truly realistic animations before the release of iOS 7, it was necessary to have a deep understanding of math, physics and other sciences. To overcome this Apple introduced UIKit Dynamics.

UIKit Dynamics is a complete physics engine integrated into UIKit. Its the new and easiest way to animate user interface with some really good effects. It allows us to add different types of behaviors to UIKit elements. An underlying two-dimensional physics engine powers them, Interesting part is that it does not require knowledge of the physics implementation to create some really nice effects. We only need to add the behaviors and the rest is taken care by the engine.

Only a few steps are required to give you app nice effects:

1.  Create a UIDynamicAnimator
2.  Create one or more UIDynamicBehaviour
3.  Add this behavior to UIDynamicAnimator
4.  Enjoy

Dynamic behaviors can be subclassed. You can implement your own behaviors. And they are composable; you can add more than one behavior is a single custom behavior class.

Simple example can be:

self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[self.movingUIElement]];

[self.animator addBehavior:gravityBehavior];

UICollisionBehavior* collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[self.movingUIElement]];

collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;

[self.animator addBehavior:collisionBehavior];

drop

To see more behaviors and details about UIKit Dynamics see: http://goo.gl/kK4uIW

The article is contributed by Shujaat Hussain – Lead iOS App Development at TechArete.

iPhone_Forms

Best Practices For Placing Labels In iOS Forms

Labels placed inside form fields are widely used in mobile apps. The primary use of these labels is to display the field context. However, Inline labeling is also, at times, used for efficient onscreen space management.

Inline labeling is an optimum web development practice. The placeholders are always beneficial for the end-user and UI/UX developers to assess the need for a certain field in a mobile app form. These labels come in handy when the mobile app has fewer forms such as login and search. The usage of these inline labels allows the users to identify the purpose of the form and the input types that are acceptable.

Top Align the labels

In case labels are left aligned in a field, there is a chance that lesser space will be available to display the user input. At times when inputs are expectedly large, the best practice is to top-align the label in order to create more space for user input. With more input details available to a user in a field, it will be lesser prone to errors. The only drawback of this practice is large vertical space occupancy. With top –aligned labels and placeholders, users might need to scroll more in an app.

Break forms into multiple screens

Another optimal practice while using inline labels within mobile app is to break the forms down into multiple screens. This practice is valid for apps that require more user information. Classically, a form will have all the fields on a single screen. However, the display restrictions of a mobile app constraints the amount of data that can be displayed on a single screen. Slicing the form on multiple screens and drafting it in a wizard-mode is definitely helpful for app users.

Use Pickers for known input

When designing an app, it is necessary for the developer to get acquainted with “pickers” – choice in a form. The “pickers” technique in mobile apps help users to quickly identify a value the form requires. Some examples of pickers are states, pre-set app values etc. In case your targeted audience requires access to larger data, then using tables is recommended instead of “picker” technique.

Appropriate Keyboard

Normally, all smart phones now come without a physical keyboard. And while developing an app, it is recommended to echo keyboard function as soon as there is a form that requires input. The recommended practice is to call an appropriate keyboard whenever there is need. For instance, if the form input needs to be numerical, then only a numeric keyboard should be shown.

The bottom line in mobile app form design is to enrich the user experience with clutter removal and a simplistic interface. Most of the mobile apps require users to input values in a form, so the best practices for creating and developing these forms should be applied. The application of these practices helps you achieve better user satisfaction.

Shujaat is the custom iOS development lead at TechArete.

ibeacon technology

A Beginner’s Guide to iBeacons

Do you frequently forget your belongings and don’t know where you leave them? Consider your comfort level when you leave your laptop behind and get a notification on your iPhone saying, “You are forgetting something!” or if you ever wished to see your location on a map inside a shopping mall? Here comes our beloved iOS which can make your life a lot easier with its latest technology called ‘iBeacons’.

Beacons are a low-priced hardware equipment. They are adequately small to be attached to anything such as laptop bags or anything you don’t want to loose. It uses energy friendly, low-exhaustive Bluetooth connections to send out messages or to prompt straightforwardly to a tablet or to a smartphone. Even an iPhone/iPad can be turned into a Beacon device.

Technically speaking, iBeacons is an extension of location services on iOS. Previously the only way to determine entry/exit to a specific region was via geographical region monitoring but now Core Location has introduced a new phenomenon called “Beacon Region Monitoring”. Rather than being identified by fixed geographical coordinates, a beacon region is identified by the device’s proximity to Bluetooth low-energy beacons.

A beacon device advertises the combination of these values:

  • A proximity UUID (universally unique identifier), a 128-bit value that uniquely identifies one or more beacons as a certain type or from a certain organization
  • A major value, a 16-bit unsigned integer that can be used to group related beacons that have the same proximity UUID
  • A minor value, a 16-bit unsigned integer that differentiates beacons with the same proximity UUID and major value

An iOS device receiving a beacon signal can also approximate the distance from it. The distance between transmitting beacon device and receiving device is categorized into 3 distinct ranges:

  • Immediate Within a few centimeters
  • Near Within a couple of meters
  • Far Greater than 10 meters

Lets start with a simple app idea. If you ever visit an art gallery and move across the paintings and long to see more details about these art works. For that purpose, we can attach a beacon device to each of the paintings and provide an app to our visitors. The app will detect the signals from these beacon devices. When a beacon signal comes in a range of our iPhone/iPad, it will ask the cloud storage to provide information about this specific painting to which is beacon device is attached and display it to the user.

Creating a Beacon Region:

Lets create a beacon region we are looking for. Our app will discover many regions on its way but will notify us when it finds this one.

#define UUID @”ec127f90-d757-11e3-a1e4-1a514932ac01”

– (CLBeaconRegion *) beaconRegionWithUUID:(NSUUID *) UUID name: (NSString *) name

{
CLBeaconRegion *beaconRegion = [[CLBeaconRegion alloc]   initWithProximityUUID:UUID

major:item.majorValue

        minor:item.minorValue

        identifier:item.name];

        return beaconRegion;

}

Searching for Beacons:

 – (void ) startSearchingForBeacons

{

NSUUID *UUID = [[NSUUID alloc] initWithUUIDString:UUID]

NSString *identifier = @”Mona Lisa Painting”;

CLBeaconRegion *beaconRegion = [self beaconRegionWithUUID: UUID name: identifier];

[self.locationManager startMonitoringForRegion: beaconRegion];

[self.locationManager startRangingBeaconsInRegion:beaconRegion];

}

Implement these delegate methods inside your view controller:

(void)locationManager:(CLLocationManager *)manager monitoringDidFailForRegion:

(CLRegion *)region withError:(NSError *)error

{

NSLog(@”Failed monitoring region: %@”, error);

}

(void)locationManager:(CLLocationManager *)manager didFailWithError:(NSError *)error

{

NSLog(@”Location manager failed: %@”, error);

}

(void)locationManager:(CLLocationManager *)manager didRangeBeacons:(NSArray *)beacons inRegion:(CLBeaconRegion *)region

{

for(CLBeacon *beacon in beacons)

{

if (beacon.proximity == CLProximityNear)

{

[self fetchFromParse:[beacon.proximityUUID UUIDString]];

break;

} } }

didRangeBeacons:inRegion method is called when iOS finds any beacon device within the range. This method checks if the discovered beacon is ours, then fetch its data from Parse (Cloud Storage).

There is a good tutorial available about fetching data from Parse cloud, based on some parameter at: https://parse.com/docs/ios_guide

– (void) fetchFromParse : (NSString *) detectedUUID

{

PFQuery *query = [PFQuery queryWithClassName:@”Art_Information”];

[query whereKey:@”UUID” equalTo:[detectedUUID lowercaseString]];

[query findObjectsInBackgroundWithBlock:^(NSArray *objects, NSError *error)

{

if (!error)

{

if(objects.count > 0)

[self showDetailedInfo:[objects objectAtIndex:0]];

} }]; }

– (void) showDetailedInfo:(PFObject *) object

{

//show information to the user

}

sketch-wireframes-axure

Transition from Software Requirements to System Design

Requirement analysis is a crucial stage of the software development process. The high level requirements are examined and determined if they are clear, complete, and free of contradictions. It involves frequent communication with system users to establish specific feature expectations, resolution of conflict or ambiguity in requirements, as demanded by the various users or groups of users. It is important to understand the needs of the product owner at this stage.

Gathering the Requirements

There are various practices followed to gather the requirements, the most useful ones are listed as follows:

  • One-on-One Interviews

    The most common practice followed in requirement gathering is setting-up one-on-one meeting and ask them what they need. The interview should be open-ended and focus to uncover the requirements.

  • Group Interviews

    Group interviews are similar to one-on-one interviews except more than one person is being interviewed. Group interviews require formal preparation and results in more clarity of requirements. It takes lesser time from one-on-one interview to conclude the requirements.

  • Questionnaires

    Questionnaires are good tools to extract the requirements from stakeholders. This mostly works for the clients in remote location. The questionnaires also helps when we want to gather the requirements from a number of people.

Design Phase

The key factor in the success of the project is the smooth transition from the requirements to the design phase. A methodological approach described as follows can tie both the phases together. The resultant is a “User-Centric Design” which can benefit the process in decreased development cost, high quality user productivity, low training cost and better customer retention.

User-centered design (UCD) is an approach to design that grounds the process in information about the people who will use the productUsability Professionals Association

 

User-centered design is an approach for employing usability. It is a structured product development methodology that involves users through all stages of Web site development, in order to create a website that meets users’ needs-Usability.Gov

  • Personas for User roles 
    The personas are made on the basis of interviews, observations and research process. It serves as a guide to design process. A persona can be based on a real person or on a set of real people. An example of a User Persona is as follows:Sample_personas
Image Source: http://creatingclassics.blogspot.fr/2009/10/personas.html
 
 
  • User Scenarios
    User scenario is story on how the user will interact with the system – what they will do on the system, when and how they will do it. This is just like a story which describes who uses a system with a certain motivation and a specific goal in mind. Scenarios describe likely goal-driven interactions between types of users(personas) and the system. Scenarios depict likely objective driven interactions between types of users and the system.A good user scenario includes.

    1. Who is the focus audience of the website?
    2. Who is the user I’m designing for?
    3. What are the expectations and motivations of user?
    4. Aims to mirror the real context and usage.
    5. Why does this user come to my site?
  • Brainstorming 
    Brainstorming involves finding solution to a problem with individual or group of people. The session must:

    1. Define the topic or objective of the session.
    2. Identify the group of participants.
    3. Define the evaluation criteria and user goals.
    4. Assign who is responsible for what?
    5. Encourage wild ideas.
    6. Avoid off track discussion.
    7. List down the ideas given by the individuals.
  • User Stories 
    After user scenarios are finalized, the actions and events are separated in a sequence to create the outcome. The combination of sequences is called User Story and each sequence is called Story Point. e.g A CEO will click the button and all employees’ list is displayed. In this case CEO is a type of user, clicking the button is action and the list of employees displayed to him is an event. User stories are quick way to cater new requirement. There is no need to write much of details, just description of need is enough. The benefit of user story is that it is testable.

      1. Text should be minimal instead of huge descriptive texts.
      2. The soothing colors of text should be preferred over striking colors.
      3. Links should be properly differentiable among content.
      4. The text should be indented and properly formatted so users can easily read through articles.
      5. Proper line and characters spacing should be used.
  • Reading Pattern 
    No matter how many bells and whistles you’ve built into the design, the text matters and that alone makes a priority for any designer. The following are some of the easy rules:

      1. Define the topic or objective.
      2. Identify the group of participants.
      3. Define the evaluation criteria and user goals.
      4. Assign who is responsible for what?
      5. Encourage wild ideas.
      6. Avoid off track discussion.
      7. List down the ideas given by the individuals.
  • Evaluation and Prioritization 
    There are multiple evaluation processes followed to prioritize the ideas. The group can also define their custom process. You can set ratings for each idea and do consensus. The dot voting activity can be also done.

download

Image Source: http://www.gogamestorm.com/?cat=33&paged=2

  • Wireframes 
    Wireframe is a static drawing that illustrates the structure of an application or website. It is important intermediate step before the design of actual screens. It allows you to define the hierarchy of your design, and identify what functions are to associated, what needs to be highlighted, the main sections etc.

UXPin_DM1

Image Source: http://designmodo.com/wireframing-prototyping-mockuping/

  • Prototyping
    After the ideas are evaluated and finalized, prototyping is needed to communicate the idea to the end user. Prototypes are the interactive representation of the end product or an advance version of the wireframes. The creation of prototypes are time consuming but the prototypes is easily understandable by the end user and works better than the static wireframes. Clients get engaged earlier faster and at deeper level and better user experience decisions are made.

UXPin_DM2

Image Source: http://designmodo.com/wireframing-prototyping-mockuping/

  • Mockups 
    Mockups are colorful representation of wireframes / prototypes and are very similar to the original website or application. Mockups help in improving the design as we can have an idea of look and feel of the application. We can manipulate with types and colors. The mockups after being reviewed and finalized are used for design implementations.

UXPin_DM3

Image Source: http://designmodo.com/wireframing-prototyping-mockuping/

toptal-blog-image-1396377741412

Storyboards VS NIBs – How to decide?

Introduction

Storyboarding was first introduced in iOS 5 which saves a lot of time building user interfaces. It is a container for all scenes (View Controllers, Navigation Controllers, TabBar Controllers, etc). Storyboards are edited with Xcode’s Interface Builder, where we add objects to it and create outlets to link them in our code.

Pros and Cons

  • Storyboards are available for iOS 5 and above. If you want to submit an app compatible for versions prior iOS 5, you can’t do it mainly because you have to set your target to use storyboards.
  • Storyboards give us a complete look at the flow of our application that we can never get from individual nib files.
  • Using xibs we can enabled or disable Auto Layout on a per xib basis, allowing for a mix within our application, while Storyboards apply our choice to all views it contain.
  • Storyboards are nice for apps with a small to medium number of screens and relatively straightforward navigation between views.
  • Storyboards fail at runtime, not at compile time.
  • Storyboards make working in a team harder because we usually only have one huge storyboard file for a project. Having multiple developers making changes to one file can be a headache. The changes can be merged easily, but when a conflict occurs, it is hard to resolve it.

Deciding Factors

Apple recommends using storyboards in apps, however the choice is dependent on the following factors:

  • Personal preference
    Developers with years of experience in iOS tend to use NIB while the newbies prefer Storyboards. It is simply because the developers didn’t have much choice and as we know most of the software engineers start with something new.
  • Single VS Team Work
    If someone works alone, he/she will prefer to use programmatic UI for simple projects and NIBs for more complex ones. If it’s teamwork, people prefer to develop it with storyboards.
  • Backward Compatibility
    There are still many customers and clients using their old iPhones / iPads running on iOS 4.3 and older. This is one of the major reasons for using NIB. It also offers the possibility to expand the app to a greater audience.
Collaboratione Software

Maintaining Global Objects Using Singleton

While developing object oriented software applications in almost every language there is a need of maintaining global objects, sometimes to maintain the application configurations or database connections. In the paradigm of OOP, software developers normally pass objects reference to the other classes through arguments using method calls. There is a simple yet powerful technique of maintaining global objects by using “singleton” concept.

Singleton is a simple class with private constructor, its own static object (As its constructor is private the object can only declare inside the body of the class, that the reason the class is the custodian of its object in singleton) and a static method to get the object instance (or sometimes a static property for particular languages). The class structure is a follows:

// A Database Connection Singletonclass DBConnection

{

//Static Database connection object

private static DBConnection myConnection = null;

//Private Class Constructor

private DBConnection()
{
}

//Static method to get the object

public static DBConnection GetDBConnection()

{
if (myConnection == null)
myConnection = new DBConnection();
return myConnection;
}

//Static property to get the oject instance

public static DBConnection myProperty

{
get
{
if (myConnection == null)
myConnection = new DBConnection();
return myConnection;
}
}

//Other method calls

public void InitiateConnection()
{
Console.WriteLine(“Initiate Method Call”);
}
}

Singleton are easy to use yet not violating the object oriented programming rules. It can be implemented in any object oriented supporting language. It can be thread safe in case of multithreaded environment by simply adding a mutex lock while instantiating the class object.