Cross-Platform Design Strategy Tips in 2019

Cross-Platform Design Strategy Tips in 2019

Android and iOS users have been at odds for over a decade. Each platform carving out its path and even stepping on each other’s toes in the process. However, for many consumer app developers to pick a side would mean to ignore a large chunk of users. Android and iOS make up 97% of the mobile operating system market share with iOS dominating the profit share because of user’s high activity levels and Android dominates with 74% of the global total. So a cross-platform design strategy is needed to reach as many users as possible.

Design implementations can change from platform to platform. These differences in convention can affect the user’s ability to understand the UI or complete certain tasks. Platform-specific conventions are recommended, however, in cases where the design differences are minimal, adapting to the platform is optional. 

When I approach implementing a design I always look for components that may seem difficult. It gives me time to brainstorm an approach or raise any red flags that I may have. It’s always good to approach designers with other options that both fit that style and also make it much easier to develop. We wrote a blog post on design trends to take into consideration when building your strategy, which is another layer to the process. Larger changes like app navigation, or custom interactions may take further explaining to make others aware of the risks. These concerns from a developer are necessary to make for a smoother development cycle.

Cross-Platform Consistency 

When going the route of creating custom components so that each platform looks and feels the same way, understand there are things that you must be aware of. Although the design may stand out visually it is likely that users won’t understand how to interact with the UI and will likely give up in confusion. With that in mind consider the following: 

  • Custom components come at a high risk and a high cost. This requires more development work and further testing with a higher tendency to fail for users. For example using cards to approve and deny requests in a tinder/card deck style. Although it may sound and look cool however in combination with asynchronous tasks, creating, updating, deleting, card animations and transitions it can get a bit trick later on if not setup correctly. 
  • There may also be technical constraints for a platform that may result in an easier implementation of a component on one platform than the other. For example, creating a Floating Action Button may seem easy to add on Android but iOS may run into more problems regarding the FAB down the road.
  • Consistency is a key principle of UX Design so consider what may be familiar to the user. This may mean that you should tailor components to other apps the user may use on that platform.

Platform Specific Design

platform specific design

When taking a more platform specific approach to design it is recommended that you use iOS Human Interface Guidelines and Google Material Design native components. This way is one of the best approaches, especially coming from a development perspective. With fewer custom components it  will reduce the time it takes to development. Furthermore, users should be more familiar with native platform patterns and controls. However, strictly following these native guidelines can leave little room to create unique and innovative experiences.

These are Guidelines, not Hard Rules.

“It’s important to understand the idioms and behaviors of each platform before you start design and development. That way your users will be able to use and easily understand your app on the platform that is native to them, and you will have the most clear and true version of your product — no matter where it’s used.” Design from iOS to Android (and Back Again)

The key for platform specific design is that it is important to understand the actual platform itself in order to explain the reasoning behind any design decisions. Are we following the guidelines or are we doing this because we are concerned about users experience? 

 

When taking this approach you’ll run into native features that are relatively simply to do on one platform than the other. Navigation has always been pretty troubling in how many different configurations you can come up with. Android apps typically use the Navigation Drawer while iOS takes advantage of Bottom Tabs. However, Android does have support for Bottom Bar Navigation, this may conflict with Android’s on-screen navigation buttons. Gestures and interactions can also get tricky when trying to mimic 3d touch on Android and other native navigation gestures on iOS. In these cases take some time to decide what’s worth replicating and how to do it natively.

Moving from iOS to Android and back

In my experience, making the transition between developing for Android and then moving to iOS and back can be difficult, at first. When you begin to understand each platform’s tools and limitations you are able to separate concepts from implementation. You’ll see that many of these platforms have similar interactions and tools. With more updates to development tools, sdks and physical devices, what’s done on one platform can be replicated on the other (in most cases). 

Pro Tip: Forget About iOS When Working on Android

Apple has been known to be the standard for mobile design due to their commitment to UX and _ . Along with many 3rd party platform tools catering towards iOS, Android gets less attention and this is why we come across many Android apps that have been ported from iOS. However with many improvements to Material Design it would be in your best interest to understand both platform’s guidelines. Being built on a foundation of best practices in both traditional and web design, Material Design is informed by user experience research and cognitive science. These guidelines that were developed from these findings are intended to be universally applied across all platforms and devices.

In Conclusion

These are just my recommendations from the other side. Shouting from across the street to look out for oncoming traffic. There’s no one correct way to design for cross platform, although you’ll know where you stand from user’s reactions and feedback or lack thereof. Using these guidelines will of course lead you in the right direction however don’t be afraid to set your own path. All means of solving a problem are correct if they work.

Want to find out if your design strategy is working? 

Shae Hazelwood

Shae Hazelwood

Developer

Shae is a mobile developer with a passion for producing business-focused applications and strategy-based mobile development. What began with home-grown app prototypes has turned into a career at Shockoe focused on Titanium and Android development as well as considering market deployment practices. When he’s not deep in code, Shae spends his time playing video games and listening to Hip Hop.

Enhancing Your User’s Experience with ARKit

Enhancing Your User’s Experience with ARKit

Augmented Reality (AR) gives us the ability to enhance our world with a real-time overlay of sound, graphics or video. With the promises of Swift’s ARKit, developers have the opportunity to harness this great power and create projects where our only limitation is the imagination. We had the pleasure of utilizing augmented reality and specifically Apple’s ARKit in a recent application for an American furniture manufacturing company. This client wanted to step into this innovative space and turned to Shockoe to create a proof of concept that takes their existing system for documenting defects with a deck of cards and digitize it with an AR app to enhance this process. Let’s dive into more details on this exciting project.

The Client

Our client is a major manufacturer of quality kitchen and bath cabinets for the home with over 500 cabinet styles and a variety of designs, materials, and finishes. You can find these cabinets being sold through a nationwide network of homebuilders, independent dealers, and distributors. In the U.S., many of their products are found at Lowe’s and The Home Depot. So how can a corporation that boasts the embodiment of the marriage of technology, automation and American craftsmanship benefit from an AR experience?

The Ask 

Our team was tasked to create a digital field tool that can aid in the assessment and documentation of product defects using augmented reality and QMS standards. What were we working with? Well, interestingly enough, the current system for assessing a product defect was a deck of transparent cards that employees would hold up against a cabinet surface to mark the defect. These cards contained instructions and details that would allow an employee to properly mark a defect on the appropriate surface. Not only was this process inefficient, it was also ineffective and gave the chance to human error to the user experience. We had to make a change.

The Build

In order to encapsulate these deck of cards, we started with user testing to begin to understand the user mind. We first provided the user with options of cards to choose from in order to provide the appropriate marker for the defect. These options included species, finish and joint type which were used to drive the next list of defect options. Once each category had an option selected, the user was now able to document the defect. You can see examples of this in these screenshots.

AR-app-manufacturing-AR-assesement-screen

Based on the option selected, the user was given a different spec and AR type used to mark the defect. Specs ranged from 1/4” width x 8” length box to parallel lines .010” in width. Precision was key when marking these defects.

Using ARKit, we are able to create virtual objects with these exact specs to best represent the marker. One of the most important benefits of using AR is that it maintains proper scale from any perspective/distance (which is why we couldn’t simply put an overlay over a photo). This killer feature of AR makes it the right feature in this particular case. ARKit was the ideal technology to solve the client’s problem, and we happen to have the skills to do it.

Here is the code I used to map out these options.

func createBoxImage(length: Float, width: Float) -> VirtualObject {
		
	let position = SCNVector3(x: 0, y: 0, z: 0)
		
	let distanceY = self.get3DPositionInYFromPointForDistance(inches: width, fromPosition: position)
	let distanceX = self.get3DPositionInXFromPointForDistance(inches: length, fromPosition: position)
		
	let scnBox1 = SCNBox(width: distanceX, height: 0.001, length: distanceY, chamferRadius: 0)
		
	let rectangleMaterial = SCNMaterial()
	rectangleMaterial.diffuse.contents =  imageLiteral(resourceName: "focus_square.png")
	scnBox1.materials = [rectangleMaterial]
		
	return VirtualObject(geometry: scnBox1, modelName: "Box \(length) in x \(width) in")
}

 

With  ARKit, we had access to vertical planes allowing us to detect and place nodes on vertical surfaces. Once the vertical surface was detected, we prompted the user to tap and place the marker on the defect. The user also had the option to rotate or drag the marker appropriately once placed.

As the last step and to further enhance their experience and provide better documentation, we’ve added the ability to take photos of the defect as well as take notes about the current defect.

The Outcome

Using ARKit allowed us to provide multiple tools into one mobile app that are efficient and innovative. Users are able to access data easily in the field, improving training and speed of proficiency. By increasing speed, accuracy, and efficiency, all business units will be able to operate with more objective assessments of business KPIs. Augmented reality allows for the automatic surface detection and reliable and accurate scale that decreases the level of subjective user assessment. We’re excited to see the progress of this furniture manufacturing company and help clients with similar needs. Reach out to us if this sounds like the right solution to help your team or if you have your own idea of utilizing augmented reality for your app!

Shae Hazelwood

Shae Hazelwood

Developer

Shae is a mobile developer with a passion for producing business-focused applications and strategy-based mobile development. What began with home-grown app prototypes has turned into a career at Shockoe focused on Titanium and Android development as well as considering market deployment practices. When he’s not deep in code, Shae spends his time playing video games and listening to Hip Hop.

5 Ways an App can Increase Employee Productivity in Manufacturing

5 Ways an App can Increase Employee Productivity in Manufacturing

While we spend most of our efforts helping clients, there are times where we step back and reflect on the lessons we learn through these endeavors. I spent half of 2017 working with Crown, a leading innovator in world-class forklift and material-handling equipment. Through the course of this time, I personally saw changes confirming the app we were developing truly was a key factor in an increase in their employee productivity.

Through app usage, Crown developed a productivity mindset and removed organizational obstacles to their workforce productivity. The app gives employees the ability to work efficiently, keep their equipment operational, and ensure that tools or parts are readily available. Employees are now more productive because the former structures and processes, that consumed valuable time and prevented them from getting things done, have been replaced. Now, with higher labor throughput and with the same amount of relative work, they are more productive.

With these efforts in mind, I compiled the following five ways an app can increase a manufacturer’s employee productivity.

1. Reduce movement to optimize task efficiency
There are many factors that can contribute to unnecessary, time-consuming movement including ineffective floor layout; temporarily displacing material, information, tools, or people; and inefficient working methods. Movement can be reduced by strategically placing objects and information within an app, giving employees quick and easy access to this information. This can eliminate the need for time-consuming searches and demonstrations. For example, video of how to operate equipment can help employees better familiarize themselves with key information about the operations, which will empower them to make informed decisions that help improve their overall productivity.

2. Improve scheduling and plan for interruptions to reduce bottlenecksblog image - schedule effectively and plan for interruptions
Companies must act quickly when something goes wrong, or when their process must be put on hold momentarily because of a malfunct
ion, rejections, or any other changes that may occur. By having access to real-time information regarding employees, tools, and materials, adjustments and accommodations can be made for interruptions. Establishing the right system enables a company to determine the feasibility of scheduling requests, estimate the impact, and even minimize the impact it could have on production. 

3. Improve equipment reliability
Neglecting to maintain equipment, tools, or software puts the process at risk from unaccounted-for downtime. Furthermore, equipment that is poorly maintained or outdated will affect product quality. By taking a more strategic approach and analyzing performance data for key trends, potential issues can be anticipated and maintenance schedules created to extend the longevity of tools, equipment, and software. An app that displays these maintenance schedules gives employees quick access and keeps them informed on equipment status, enabling them to know which equipment needs repairs and which parts are needed for the equipment beforehand. As a result, there will be plans in place to help avoid disruptions to production due to unplanned downtime.

4. Optimize inventory levels to reduce shortages
It’s difficult to be productive when the proper tools to handle a task are unavailable. Companies need to account for and address short count, unexpected delays, and/or late deliveries. An app with this useful information allows accurate and timely visibility of inventory, keeps users informed on what’s running low, possible issues that might arise, and helps address these issues before they become problems that will affect production. In the cases where the shortages are unavoidable, having this system in place will enable users to account for them and even re-assign resources in the meantime.

5. Automate the processblog image - increase and optimize your inventory
The advancements in robotics, artificial intelligence, and machine learning has reached, or in some cases 
surpassed, humans in several different work activities. Having an automated process in production, or even part of an existing process can greatly improve the efficiency and productivity of the process. When the gathering and sending of information is automated, the possibility of human error is eliminated, which effectively prevents disruption to workforce productivity.

At Shockoe, we have been helping businesses increase their productivity by implementing these ideas. We even improved our own process by having systems in place to make our process more productive and efficient, so we can deliver an exceptional product to our clients. Our work with Crown has given us insight on how an application can improve a manufacturer’s productivity. By providing functionality like time tracking, inventory and equipment management, parts logs, order checklists, and more, we have successfully improved productivity for Crown’s workforce. Contact us to take the next step toward improving the quality of your company’s processes and productivity today.

Titanium: I Got 99 Problems and a Grid Ain’t 1

Titanium: I Got 99 Problems and a Grid Ain’t 1

A Grid View is pretty common in many applications nowadays, displaying images or a variety of image and text content to the user in repeated pattern cells in a vertical and horizontal layout. This component is highly favored over List Views and Table Views when wanting to compare similar data types as well as having a better visual comprehension that helps to distinguish the subsets of items.

However, when it comes to Titanium, they don’t have any reference to a Grid View. So what does that mean for our image-heavy applications that would like to display a list of images? You could use a list view if you are able to supply enough information that would allow the user to easily read and comprehend the list. But, if you have limited data or none at all it would be more visually appealing to display a Grid View. Which brings us back to the problem at hand, Titanium does not have any reference to a Grid View.

Let us explore our options:

Option 1:

If you know that your data won’t change you could just do some calculations to disperse your views across the screen in the XML. This would be good for navigation where each button would have separate functionality when clicked.

<Alloy>
    <Window layout="horizontal" horizontalWrap="true" backgroundColor="white">
        <Button width="50%" height="50%" title="TopLeft"/>
        <Button width="50%" height="50%" title="TopRight"/>
        <Button width="50%" height="50%" title="BottomLeft"/>
        <Button width="50%" height="50%" title="BottomRight"/>
    </Window>
</Alloy>

 

However, this may get a bit messy and annoying when you have to calculate for up to 20 or more views. Which brings us to

Option 2:

Let’s create a Grid View that has three columns and four rows.

// to fit in a 320-wide space 
var cellWidth = 92;
var cellHeight = 92;
var padding = 5; // padding between cells
var xGrid = 3; // how many cells wide
var yGrid = 4; // how many cells tall

/**
 * This will create a 3 x 4 gridview of 12 images
 * you can do some math to determine how many rows will be needed for your data set
 */

var tableData = [];

// array of team objects
var teams = [
    {name : 'Dragons', logo : '/images/dragon.png'}
    {name : 'Tigers', logo : '/images/tiger.png'},
    {name : 'Foxes', logo : '/images/fox.png'},
    {name : 'Dare Devils', logo : '/images/dare_devil.png'},
    {name : 'Cyclones', logo : '/images/cyclone.png'},
    {name : 'Majors', logo : '/images/major.png'},
    {name : 'Hawks', logo : '/images/hawk.png'},
    {name : 'Stallions', logo : '/images/stallion.png'}.
    {name : 'Knights', logo : '/images/knight.png'},
    {name : 'Pirates', logo : '/images/pirate.png'},
    {name : 'Crusaders', logo : '/images/crusader.png'},
    {name : 'Wolves', logo : '/images/wolf.png'},
];

var cellIndex = 0;

//

for (var y=0; y < yGrid; y++){

    var row = Ti.UI.createTableViewRow({
        className : "grid",
        layout : "horizontal",
        height : cellHeight + padding,
        selectedBackgroundColor : 'white'
    });

    for (var x=0; x < xGrid; x++){
        // the cell that will hold the logo and the team name
        var view = Ti.UI.createView({
            teamID : teams[cellIndex].name + cellIndex.toString()
            left : padding,
            right : padding,
            height : cellHeight,
            width : cellWidth
        });
        // image of the logo of the team
        var teamLogo = Ti.createImageView({
            image : teams[cellIndex].logo,
            teamID : teams[cellIndex].name + cellIndex.toString()
        })
        // label of the team's name
        var teamName = Ti.UI.createLabel({
            font : {
                fontSize:14,
                fontWeight:'bold'
            },
            text : teams[cellIndex].name,
            touchEnabled : false,
            teamID : teams[cellIndex].name + cellIndex.toString()
        });

        view.add(teamLogo);
        view.add(teamName);
        row.add(view);

        cellIndex++;
    }

    tableData.push(row);
}

var tableview = Ti.UI.createTableView({
    data : tableData
});


tableview.addEventListener("click", function(e){
    //teamId property set for each view will determine what view was clicked in the table
    if(e.source.teamID){
        Ti.API.info('Clicked: ' + e.source.teamID);
    }
});

This option gives us a very faux Grid View by using Table View as a crutch by populating each row with several cells. This is a good option and simply by doing some math to determine the number of rows you’d need for your data set you can make this very flexible to allow for an undetermined data length. However, a problem with this approach is that a user may notice that the entire row shows feedback for being selected. This can be avoided by substituting the Table view for a Scroll View and instead of using Table Rows, just use a View that spans the entire width and adds the cell View accordingly.

Option 3:

Simply use a module. There are several good modules out there that not only make it very easy to add a grid to your project but they also add a lot of extra cool features to the Grid View like TiCollectionView and TiFlexiGrid

There are plenty of other ways to create a Grid View that isn’t mentioned above. Titanium allows for an immense of other possibilities for creating a Grid View and the only thing that you need is imagination and some problem-solving skills. So even though Titanium lacks a simple way to incorporate a Grid View within your app, that does not mean you can’t Jimmy Rig your own.