Optimal UX

Mobile application industry is booming and is one of the fastest growing industries. Mobiles are used everywhere by different users for pleasure, seeking information, to enhance productivity, etc. Be it games, shopping, videos, news, stock market updates, or education, the number of applications available is increasing at a phenomenal rate. There is an application for everything imaginable.

A long-lasting relationship depends on the quality of each encounter, which is also heavily influenced by how the application performs. The first impression is the last impression and plays a key role in mobile application development. An application that looks stunning but performs poorly can damage integrity. Users quickly notice software that is slow or likely to break and this impairs both usage and brand perception.

I will be talking with reference to HTML, but almost all the concepts I will discuss are universal and can also be used for native mobile application development. To understand how to optimise user experience in developing mobile application we have to look into different categories. To simplify, we divide these into different phases:

  1. Requirement phase
  2. Design phase

1. Requirement Phase

During the requirement phase, we have to not only gather requirements for the application but also to build upon a concept that is unique and better from the applications that are out in the market. We have to also ensure that the application is usable and could easily serve its purpose in the future.

One of the most important part of user experience is navigation. Having a navigation that intuitive and easily accessible is very important than just looking good. Mobile navigation combines the usability idea with the aesthetic one and delivers really spectacular results, making you want to use and appreciate a menu user interface, not just make it a means to an end. The following link gives some good example of mobile patterns.

Every product encounter affects the brand perception. Users are looking for the best tools to enhance their lives. The application should be the mirror to the brand to which the user will associate. It should reflect the story of the brand and should increase recognition, loyalty and satisfaction. Identifying which elements contribute most to the brand’s identity is essential.

During the decision-making stage, domain SMEs and UI designers should work together to finalise the application theme. Following tips will help you in designing the UI for your application:

  1. Design for mobile first: To design a good app, start from the bottom with the customer experience you want and build upwards. Design for handsets then enhance the UI to support tablets and then move to desktop or bigger screen devices.
  2. Identify the users: Modern mobile users generally tend to fall into one of two groups: hunters (who want to do a specific task) and gatherers (who just do casual browsing). As an example, enterprise clients are hunters. They want to do specific tasks which could help them improve their productivity, help them take specific decisions quickly and help in growing their business and consequently revenue. Efforts should be targeted at those products in the portfolio that matter most.
  3. Identify the core user stories: Application should be designed keeping in mind fulfilment of the user need. Generally, 80% of application users will use just 20% of its functionality. If your website or application is already online, use analytics to get customer interaction information to cut down the less used features and concentrate more on the rest 20% features.
  4. Use task-based design: Mobile users want to accomplish tasks, whether broad (like browsing news items) or specific (like checking flight times). Every function of your application should be geared towards helping them to both identify and then complete their task, and everything else should be discarded.
  5. Keep it simple: Application should be designed in a way that the user should not be told how to use the application. It should be automatically come to user’s mind how to operate and use different features in the application. Users don’t want to read the instruction manual. In the long run, the simpler the app, the better it will be. It will be easier and cheaper to support and update do what it is supposed to.
  6. Use platform UX: Use the native features provided by the mobile platform. Apple, Google and the rest of the manufacturers have invested billions ensuring that users know exactly what to expect when they press a button, swipe the screen or touch an icon. Developing custom interfaces which do not work in this way might make your branding team happy, but will confuse users, slow down adoption, and put a significant obstacle in the way of engagement. Read up on the platform guidelines to always make sure you’re using the correct UI element for the correct job, as well as following guidelines around things like minimum sizing for clickable buttons.
  7. Go back to the drawing board: Treat your application as a continuously evolving entity, using data from analytics, user feedback, and new technological breakthroughs to constantly reassess and improve the experience.

2. Design Phase

Design plays an important role in building lasting relationships with end users and thus, in supporting the brand’s promise. Making a technically challenging feature perform smoothly will give the product a unique selling point, one that will be difficult to imitate. Design choices affect features, content, interactivity, graphics and, therefore, performance. Achieving a high-performance experience is not just a coding exercise. It is a key design exercise.

There are factors that affect the Mobile UX development:

  1. Application
  2. Backend
  3. Mobile Device
  4. Network

Application and Backend are worked upon by design and development teams, while the other two Mobile Device and Network are constraints which these teams to keep in mind while UI development.

Teams have to decide on the features, contents, graphics, animations, algorithms of the application. They have to work with the databases, APIs, configuration of the backend. These decisions are constrained by the CPU, screen size, RAM, platform (android, iOS, BB, etc.) of the targeted mobile device and by the network with set coverage and standards like LTE, 3G or 2G.

A decision on each factor will affect the overall performance and in User Experience of the application. E.g. running a heavy animation transmitted via the slow network will reduce the performance.

During designing of application, give importance to several key points: performance, security, cost and persistence.

2.1 Performance

A well written native mobile application performs great on devices. But developing a native application for multiple platforms that doesn’t use device specific feature is time-consuming and costly. Hybrid application using HTML5, CSS3 and JS provides a good alternative for such applications. But these lack in performance. But this could be matched with native code by designing the application correctly. During the design phase, taking care of performance improvement strategy is very important.

Performance can categorise into:

  • Network
  • Compute
  • Render

2.1.1 Improving Network Performance

Network performance is mostly associated with the data speed that the network provider provides. Having an LTE or 3G plan is better than EDGE or 2G plans. To improve the network performance one should just upgrade the data plan. This is true in some cases but there is a lot to look into network performance.

Download speed is not the bottleneck. The main issue is network latency, device memory and CPU. Though it seems like an obvious factor, users on 3G and 4G connections are still disappointed with the experience of browsing the web on mobile devices or using HTML based hybrid mobile applications. Even if we have 1MB of data downloaded in 4 seconds, the website will take a longer time to load as phone needs to receive and process the code and images.

Much of the time is spent in processing HTTP requests and loading stylesheets, images and scripts. Blocking resources delay the page rendering and add to the user waiting time.

To reduce loading time and increase network performance:

  1. Reduce dependencies
  2. Reduce payload size

To reduce dependencies, there should be less number of external files used in the application. Below are the few tips which could be used to reduce dependencies:

  • Keep external stylesheets and java scripts to the minimum.
  • Use CSS to load the image.
  • Use CSS to create background images and patterns.
  • Keep minimum redirects.
  • Avoid inline frames.
  • Try and use font icons and image sprites.
  • Use Data URI and SVG images.
  • Use client-side storage instead of server round trips.
  • Use web storage in place of cookies.
  • Use WebSockets if possible in place of XHR.

To reduce payload size, the amount of data transferred over the network should be minimum. Here are few tips to achieve this:

  • Minify javascript files, stylesheets and HTML pages.
  • Use responsive images to fetch images for different screen size and resolution.
  • Use client-side caching.
  • Use selective encryption technique by encrypting only what is required to be secured.
  • Compression techniques like GZIP, 7ZIP, LZMA, LZ can be used to compress the text over the network.
  • Use CSS effects instead of requesting heavy sprite images.
  • Proper image compression format should be used to reduce the size of the image getting transmitted.
  • Avoid giving long key names in your JSON/XML web service response.

2.1.2 Improving Computing Performance

Once data is loaded on the device, it should be processed fast and the page should be visible to the user. As mobile devices have smaller CPU, memory and cache size. Most of the processing is used for processing javascript code. Focus should be on complexity, memory and code optimisation.

Follow the tips below to improve computing performance of the application:

  • Keep javascript to a minimum.
  • Minimize string manipulation.
  • Enable hardware acceleration to enhance the visual experience.
  • Use CSS transitions instead of Javascript animation.
  • Optimise javascript for better performance.
  • Avoid widgets.

2.1.3 Improving Rendering Performance

After data has been processed, it is converted to pixels on the device screen. This is called rendering. To show these pixels smoothly and quickly on the screen is very important. Any glitch in rendering is easily picked up by the user. This could degrade the overall experience of the application. Below are few ways in which you can improve your application’s rendering performance:

  • Use simple layouts.
  • Use optimised styles for different screen sizes.
  • Minimize paint area and complexity.
  • Minimize on-device resizing.
  • Enable hardware acceleration. But keep in mind not to overuse it.
  • Avoid unnecessary canvas state changes.
  • Render only the screen difference and not the whole screen.
  • Use multilayer canvas for complex scene.
  • Avoid floating point coordinates.
  • Optimise animations with ‘requestAnimationFrame’.
  • Avoid shadowBlur.

2.1.4 Perceived Performance

Perceived performance of an application is how an application appears to perform given tasks. It mainly applies to user acceptance aspects. In most of the cases increasing the actual performance increases the perceived performance. Sometimes, actual performance cannot be increased, so perceived performance should be improved to have a good user experience. To check for perceived performance, following checks should be done:

  • Are animations smooth or choppy?
  • Does video content look smooth or choppy?
  • Do audio clips play continuously, or do they pause and resume?
  • Does the window flicker or turn blank during long operations?
  • When you type, does the text input keep up or lag behind?
  • If you click, does something happen immediately, or is there a delay?
  • Does device gets heated up when the application runs?
  • On a laptop computer or mobile device, does the battery deplete quickly while running the application?
  • Do other applications respond poorly when the application is running?

These checks can help us find if the perceived performance is up to mark or we require some optimisation to give the user a better experience engaging with the application.

There are many ways you can improve the perceived performance of the application. As discussed earlier, increasing the actual performance could increase the perceived performance. But sometimes actual performance cannot be improved further. Following are some tips which could improve the perceived performance of the application:

  • Use fasttap or fastclick for buttons: There is some delay of around 300ms in HTML applications on a touch of a button. To remove 300ms delay on button clicks and give the user a native-like feeling, google has come up with a solution of fastbuttons.
  • Use momentum scrolling: Use the following code snippet “-webkit-overflow-scrolling: touch;” to add smooth continuous scrolling similar to native instead of slow and lagging scroll.
  • Create an animation that performs: Use hardware accelerated animation via CSS in the application or using ‘requestAnimationFrame’.
  • Use natural gestures: Try and add natural gestures similar to those present in native APIs like Side-to-Side swiping, Pull-to-refresh, Long press, Pinch zoom, Lazy loading.

2.2 Security

The data on mobile devices is required to be secured especially in an enterprise application. Today it’s the most common way of information getting leaked outside the organisation. When it comes to security in native mobile application development, all platforms have their own APIs, as well as they, support third party APIs for encrypting the data to secure sensitive data. There are OS features which encrypt all the data on SD Cards and whole mobile device. But sometimes the user does not want to encrypt whole of his/her device. Many are not even aware of such feature available on the devices. Also while communicating with servers, data transfer needs to be secured.

Encrypting the data provides the user with a sense of security and this adds up to an improvement in user experience. There are many javascript cryptography libraries which can be used to encrypt the message and secure the data generated in the application. These use either symmetric or asymmetric technique of cryptography.

Symmetric cryptography: In this technique, the key is shared between the two parties — the side doing the encryption and the side decrypting the encrypted message. The key is shared between the two and same key is used for encrypting the message and fetching the message from decryption. This system is also known as “shared secret system” or “private key system”. E.g. AES, DES

Asymmetric cryptography: Here, each side has two set of keys — public key and private key. The public key is shared between the two sides but the private key is not to be shared. While doing encryption the message is encrypted using the recipient’s public key. For decryption, the private key of the recipient is used. This technique is computationally intensive and is generally used combined with symmetric cryptography. E.g. RSA, Diffie-Hellman.

For Mobile devices, symmetric cryptography is preferred due to smaller footprint and faster processing compared to asymmetric. There are many javascript libraries available. Here are few of them:

  • Crypto-JS: Collection of cryptographic algorithms implemented in Javascript. Algorithms like DES, Triple DES and latest AES along with Hasher algorithms like MD5, SHA-1,2,3 are all available. E.g.
  • Stanford Crypto Library: It uses the industry-standard AES algorithm at 128, 192 or 256 bits; the SHA256 hash function; the HMAC authentication code; the PBKDF2 password strengthener; and the CCM and OCB authenticated-encryption modes. Just as importantly, the default parameters are sensible: SJCL strengthens your passwords by a factor of 1000 and salts them to protect against rainbow tables, and it authenticates every message it sends to prevent it from being modified. E.g.

2.3 Cost Effective

An application with stunning animation and performance looks great. But if it is hard on your pocket even after it is free then that will hamper the user experience. Creating an application which is visually good and performs well will be costly in the making but it should not drain the user’s money while in use after the purchase. If there is too much data transferred or web service hits, it would affect the running cost of the application. The data rate for most of the mobile network providers is costly comparing to desktop broadband. While designing the application, this difference should be taken care of.

Cost can be kept under control by following the tips shared above for reducing the payload over the network. By reducing the payload over data transfers and a number of server round trips, the cost can be kept to a minimum. Compression, as mentioned above, can reduce the payload. There are different ways to compress data over the network. This could be classified mainly into text and image compression.

2.3.3 Compression

The text data in formatted form can take up a lot of memory and every bit of space in text transferred can be controlled simply by compressing the text. Similarly, images can take up huge memory. Using a proper compressing technique can shrink the images in memory and with a little trade-off in quality near perfect image replication can save a lot of cost at customer end.

There are two types of compression algorithms:

  1. Lossy compression
  2. Lossless compression

Lossy compression algorithms will modify the source stream such that you lose information that cannot be restored upon decompression. Most lossy algorithms in image compression take advantage of how the human visual system works, often removing information that we really can’t see, and in the process, saving bytes. For example, limiting the colours used in an image; fewer colours means there’s fewer data to run around.

Before 0.13, 1.34, 21.2165, 21.999, 12.123

After 0,1,21,22,12

After a lossy compressor, a lossless variant is applied, that is, the data, once uncompressed, is restored to its exact state, before compression. These are typical compression algorithms that allow the source stream to be recovered directly without any loss of precision or information.

In Images, popular lossless codecs include LZ77, RLE, and Arithmetic encoding. Lossless compression algorithms often squeeze out the last percentages of data from your content to reduce your data sizes.

Before aaaaazzzzcccdddddddjjjffffaaaaabb

After a5z4c2d7j3f4a5bb Image compression

To compress an image there are typically three decisions that go into the choice of an image format for a developer.

  1. Does it need transparency?
  2. Does it need animation?
  3. Does it need high-quality data?

The following table can help understand the different image formats available for compression for HTML5:

From the above table, we can see WebP is best suited for all operations. But at the moment it is not supported on all browsers.

There are devices with multiple screen sizes and resolution. To support these, a strategy is required to manage image resizing.

  • Save images of different sizes and resolution and send an image with respect to screen size based on media query in CSS. But the drawback of using this is managing this exponential increase in the data set, and the additional logic to send the information to the intended users.
  • Save the image in 2X resolution, export it to a lossy format, choose a very low quality (resulting in high compression) option. The intention here is to choose a quality level such that the compressed larger image, is smaller than the compressed smaller image.at the client, set the image size required. The browser will downscale it to required size and in most of the case, we get a smaller size file. Text Compression

Compressing of text is slightly different from images. We cannot use lossy compression excessively as the data gone in compression cannot be recovered. This lost data might be important for the user.

There are two commonly use HTTP compression used in web:

  • DEFLATE: uses LZ77 and Huffman algorithms to compress data.
  • GZIP: internally uses DEFLATE along with blocking, filtering heuristics, a header and a checksum. Has better compression ratio compared to DEFLATE.

Other formats BZIP2 and LZMA are better offline and compression is more. BZIP2 uses Huffman Algorithm while LZMA is variant of LZ77 Algorithm. LZMA is popular for its processing speed and compression. Another library LZ-String has been made specific for mobile based applications.

Demo test page has been designed by the creator to test performance and compression of LZ-String and LZMA.

From the tests, one can design application to use LZ-String for data of shorter length less than 100,000 characters and above that LZMA can be used. This way an optimum level of compression can be achieved.




2.4 Persistence

Persistence plays an important role in improving the user experience. Instead of repeated server calls, static data should be saved locally. HTML5 provides APIs that Assist developers to store data similar to the native application. HTML5 web storage, a better local storage than cookies. Web Storage is more secure and faster. The data is not included with every server request but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance. There are two new objects for storing data on the client:

  • localStorage
  • sessionStorage

Both act in a similar way except for persistence. SessionStorage stores data for one session only while localStorage stores data with no expiration date. The localStorage object (similarly sessionStorage) has four primary method:

  • localStorage.clear()
  • localStorage.getItem( key )
  • localStorage.removeItem( key )
  • localStorage.setItem( key, value )

When dealing with the localStorage object, it is important to remember that, like cookies, you are dealing with string values. Both the key and the value arguments must be strings. And, while the browser might not throw an error if you pass in non-string values, you’ll quickly find that it is simply calling the toString() method implicitly.

Keeping the above-mentioned tips and following the best practices HTML5 based application can match the look and feel of a native application. A lot of libraries and frameworks have come up which gives HTML5 an added advantage over the native these days. Developers are taking advantage of these and are creating visually stunning applications with better performance than before.

The World Wide Web Consortium (W3C) recently returned to work on the HTML5 specification after years of absence. All the major mobile platforms, including Apple’s iOS, Google’s Android and Palm’s WebOS, use similar WebKit-based browsers, so technologies like HTML5 and CSS3 will continue to be improved and supported. Even Microsoft is coming to the plate with support for HTML5 forthcoming in MSIE 9. Though it may not become an official standard for a decade, it is increasingly being supported by the major browser vendors, and more sites and services, such as YouTube Mobile, Google Gmail, Scribd, and Apple’s iPhone and iPad are using HTML5 instead of plugins such as Adobe’s Flash. HTML5 is here to stay.

To deliver an application which keeps its user engaged, a better UI and a better application design is required. Each encounter with the application should work towards a long-lasting relationship. Mobile application is booming and there is a lot to grab from it.