Untitled

I’m sure you might have come across numerous articles on the web that talk about why we need adequate touch targets for each interactive element on any touch-based interface. (Especially mobiles which have a relatively smaller landscape.)

A ‘touch target’ refers to the area associated with an element that triggers the interaction when users tap on it. This area usually extends beyond the visual shape of an element when it isn’t an explicit part of its design.

Have a look at these two buttons, for instance; one is filled while the other is just textual.

Even though the button on the right does not have a visual shape like the other one, its touch target (although not explicitly visible) extends way beyond the text area.

Ideally , these touch targets should be at least 1cm x 1cm (or 38px x 38px) in size, as suggested by Nielsen Norman Group, to promote better capability for users.

Now, I’ve been an avid user of Instagram - which I’m sure you may know, has been one of the world’s most popular apps for quite a long time now - and lately, it struck me that most of the elements on its interface do not follow the common norms for touch targets.

Have a look at this shot, for instance.

Horizontal spacing

In the first highlight, you may notice that all the tags are very close by with hardly any horizontal space left in between. When tags are relatively long, they are much easier to tap on even if they are set close to each other.

Vertical spacing

This type of spacing is usually more concerning in the case of small screens, as no matter how big an element is horizontally, if it is stuffed tightly between two other interactive elements, it’ll be difficult to tap on it.

The same is happening with elements in the second highlight. The action to ‘view comments’ and the ‘profile names’ are very closely stacked.

Another example would be the location link just above the picture in the shot below.

Despite all the discrepancies in spacing, I do not remember a single instance wherein I tapped on an element which I wasn’t intending to tap on!

And I think most of you guys did not, either. Unusual, right? Considering how tight those elements are spatially.

This leads me to believe that the area that we cover when we tap is not that large, after all.

The bigger yellow circle has a dimension of 1cm X 1cm (or 36px X 36px), while the smaller oval (formed by tapping with the right thumb) is 24px (or 0.6cm) long and 15px (or 0.4cm) high - which is essentially how much area we cover while tapping - and it may even be smaller.

If we go by this logic, maybe we can mend our designs to fit more content in a relatively small landscape without sacrificing accessibility… or not? I’d love to know your thoughts on this.

No software is perfect, just like humans. But the pursuit of perfection is not futile.

If you look around the web you’ll find thousands, maybe millions of posts telling you how to code, improve performance & stability, scale, and secure your applications. What you might not find is a comprehensive guide that has all the aspects that are needed for a robust mobile application.

In this blog you’ll get to learn about the best practices from design pattern and server setup to coding and security.

Design

Designing is the most crucial stage in an applications development life cycle. Conversions rely heavily on designs and how they’re implemented. Here are some of the best practices that can make your app a usability treat.

Create efficient onboarding: The goal of onboarding is to show the value of your app to the user by demonstrating how they can achieve what they want in a quick and efficient way. If the user is having trouble within the first few screens, they’ll likely drop off without hesitation.

Improve usability: Help your users by telling them which icons can be selected, tapped, or swiped. Ensure that you remain consistent with gestures throughout the app to optimize usability, e.g., if swiping up deletes an item, make sure that the same is true for all screens within the app.

Prioritize actions: For each screen, there should be a primary action. This results in an easy-to-learn interface. You can show prioritization with contrasting colors, different fonts, or buttons.

Construct a navigation that’s easy and apparent: But, how do I do this? Here are a few points that we follow during our development :

Don’t hide it — the more obvious it is, the better. Never make a user hunt for it.

Deliver consistent navigation throughout the app. If you hide it on internal pages, you’ll only add confusion.

Indicate to users where they are by highlighting their location. This can be a problem for apps as users become “lost” and may abandon the task.

Utilize a standard navigation platform. For iOS, “Tab Bar” is a good option, while Android works well with “Navigation Drawer.” Stick to simple — it will help you more than spending time on clever.

Scalability

An app that isn’t designed and developed to seamlessly handle continuous growth will eventually end up being a failure. Hence here are some scalability best practices that ensure your app holds up as your business grows.

Choose the right architecture that way the app can grow organically with increasing traffic to the user base. Based on your needs you can go for MVVM, MVP or MVC pattern.

When it comes to the server side, it must use “Auto Scaling” so that the server can perform well when the user base grows.

Try going stateless: Keep APIs stateless. In each request, the client should provide all the information which would be required to fulfill that request. This might not be possible in all cases. Sometimes, we might have to query our database and other services. But try to follow as much as possible.

Security

We know that security is key to putting web/app users’ minds at ease as well as your own! There are six essential security elements that will protect users’ information. If one of these six elements is omitted, then the information is at risk.

Availability refers to how you’re able to access information or resources in a particular location as well as in the right format. When a system isn’t functioning properly, information and data availability is compromised and it will affect the users.

Utility isn’t always considered as a pillar in information security, but let’s say that you encrypt one copy of some important information and then the encryption key is accidentally deleted. The information would be available — it just wouldn’t be accessible or usable.

Integrity references methods of guaranteeing that the data is real, accurate, and protected from any changes from an unauthorized user.

Authenticity aka “authentication” makes certain that the user’s identity is validated.

Confidentiality allows authorized users to access sensitive and protected information. Sensitive information and data needs to be disclosed to only authorized users.

Nonrepudiation is a method of ensuring that message transmissions between parties have a digital signature and/or encryption. A data hash will help you acquire proof of authentic data and data origination.

Cloud and DevOps

Now that almost every app is on cloud with user bases exceeding millions on an average, it is business-critical to have a proper cloud infrastructure and DevOps in place. Here are some practices related to the same.

Create isolated environment with the help of VPC (virtual private cloud) and define subnet on GCP (Google Cloud Platform)            .

Using IAM(Identity and Access management) services is handy to provide role-based access to any external users.

For database services, we recommend using cloud SQL.

For some of our clients, we have used Kubernetes engine for container based hosting.

Use Continuous Integration (CI) and continuous Delivery/Deployment (CD) to make deployment strategy automatic.

Using GCP Firewall for server security.

Configure server environment with auto scaling.

For email servicing, being experienced in configuring G-Suite will help.  

Use multi-region, load balancer on GCP to route the traffic region wise.

Testing and Optimization

Testing is crucial for a successful project as it enables developers to reveal performance gaps at early stages preventing any development overheads. Based on the identified performance gaps the app can optimized for quality and stability.

Apply profiling tools for monitoring: Use tools like X-code profiler and Android profiler. With the help of profiling tools, you can detect the crashes and, thereby, get an alternate code against the same instantly.

Test the app on multiple devices in order to make sure it performs well on most popular devices.

Prepare for varying network speeds: A mobile user would mostly be using the app on the go, so make sure the app works well in case of switching from WIFI to mobile data or vice versa.

Optimize queries:

By optimizing queries, you can control output at the first end, which helps to prevent use of looping, reduce the number of statements, and the excessive use of other controls on the code end. This results in optimal performance for your site.

Optimizing will create database normalization rules.

Even though there is no word on Angular 10’s release and to be honest it’s too early to expect a release, the developers and community has blessed us with 6 RCs and a taste of what Angular 10 could become.

Angular 10 will be lighter in size than previous versions.

Developers will receive suggestions for components that are defined in the libraries, now that dependency information and ng-content selectors are added to metadata.

Type-checking performance improvements have been made to the compiler-cli.

In this update, any warnings with regards to unknown elements will be logged as errors. This ensures there is no unknown error that will keep developers awake at night.

To improve the performance of ngcc, developers can now immediately report a stale lock file. Also, a cached copy of a parsed tsconfig can be stored and is reusable in case tsconfig is the same.