Tag Archives: app development

mobile application QA testing tubik studio

Precious Errors: Testing iOS Mobile Applications.

No doubt, mobile devices present an integral part of human life these days. Development of mobile applications demonstrates rocketing progress: they become a reliable helping hand for a person in the variety of life aspects, such as communication, business, entertainment and the like.

 

The simplicity of installing and usage is making mobile apps more and more popular and sets them apart from web applications. Still, it has to be noted that the former cannot fully replace the latter due to numerous reasons. Having discussed the issue with Tubik QA engineer Olga Krasnokutskaya, today we would like to review some benefits and features of testing iOS mobile apps.

 

testing

 

Types and features of testing mobile apps

 

No doubt, every case of creating a mobile application is a sort of unique story. It needs its own deep research and specific approach to design solutions and their realization in code. Still, there are some general schemes and methods that are applicable to most cases. Olga says that working on iOS apps she takes Mobile Testing Cheat Sheet as a basis and adapts it for every specific case. As we mentioned in the full guide to creating a mobile app, testing is one of the crucial phases: it helps to reveal bugs before the app is brought out to real users. Testing enables to understand the quality of the app and find the way to improve it via real interactions.

 

The main difference of a mobile application in comparison to a web app is the requirement of its installing on device which has a particular platform, OS version, screen size, and variety of functions the device is able to fulfill, such as making and receiving calls, texting, taking calls and doing loads of other operations simultaneously. Let’s review the types of testing deeper in detail.

 

Installation testing

This type of testing can be carried out both in simulators and real devices. However, here in Tubik testing on a variety of real devices is recommended as a more efficient method, because simulators do not reflect all the functionality of real devices and variety of possible users’ actions. For example, simulator in Xcode can give incorrect presentation of interface elements on the screen and doesn’t allow testing an accelerometer and a camera.

 

Updates testing

Testing doesn’t end when an app is launched and used by real users: it’s a never-ending journey. Another important type is testing updated versions of the app saving all the data.

 

For installation of the mobile app on the device, we use several services of app distribution such as HockeyApp, Fabric, TestFlight. Each of them has both benefits and drawbacks. For instance, Hockeyapp allows installation of different app versions, while Fabric provides installation of earlier versions of the app and then updating them with later versions saving the data. TestFlight is needed to release the app on AppStore and is convenient for testing new features as it uses production certificate which speeds up check of the new build and its release on AppStore.

 

mobile application testing

 

Compatibility testing

This type of testing enables to check if the unit of testing is correctly integrated on devices with different operation systems and on the screens of various resolutions. It’s also important to mention that, according to the latest requirements to app distribution via AppStore, any mobile app created for iPhones has to perform correctly on iPad.

 

Stress testing

One of the big advantages of the mobile application is the ability to use them “on the go”. However, this aspect determines constant change of the Internet source and signal — GPRS/3G/4G/WiFi; users can interact with the application in conditions of good or bad connection, repetitive disconnection, Plane mode. Incoming calls and messages, device locking, limited memory available, battery charge level or accidental taps – all those things can have a great influence on the app performance. Creative approaches to testing of this kind in maximum diversity of cases is highly recommended.

 

Functionality testing

This type checks the feasibility of functional requirements. Testing the functions of the app, it’s advisable for QA specialist to create test-cases or detailed check-lists. The documentation of this sort can be helpful for the team in defining possible “weak spots” even at the early stage when project requirements are analyzed.

 

Gesture testing

Gestures present the core distinctive feature of mobile apps in comparison with web apps. Naturally, this difference of interactions advances specific demands to designers, developers and QA engineers working over the product. Gesture testing checks the operability for the variety of gestures such as touch, swipe, tap, multi-touch, 3D-touch, turn, shake etc.

 

Multitasking testing

This sort of testing is aimed at correct app performance under conditions of several active apps on the background or when the tested app is minimized. Considering the specific nature and features of the device, the application should perform adequately in case of an incoming call or screen lock, without crashing or losing data.

 

Localization testing

Another aspect to be checked is localization, in particular the format of dates and time, translation, UI adaptation etc. What makes a real difference in comparison with testing this aspect for web applications is the screen size of a mobile device. On the one hand, the content in different languages should occupy the same place on the screen to save the style and visual consistency; on the other hand, it has to be adapted considering specific features of a particular country. For example, the content for the Arab countries has to be reflected in inversed manner and requires other size of buttons due to specific nature of their writing.

 

Usability testing

Mobile applications for iOS have to comply with iOS Human Interface Guidelines to get to the AppStore. Basically, it has to be convenient for the user to read and use the app using one hand which means that the content and fonts have to adapt to the screen size. It’s also important to check that users understand the warnings and notifications about errors.

 

Testing mobile applications is mostly handled in environments and conditions which are maximum close to real life, when there are several background active apps and actively used devices with variety of settings, apps and cash data. It’s also highly advisable to remember — or it’s even better to create a detailed check-list – about the system settings of the device used for this aim, to avoid some unwanted cases, like, for example, activation of saving mode right in the process of the test.

 

The time-consuming aspects of app testing are imitation of incoming calls and sms, inputting long texts, creating videos for bug-reports, handling tests on every kind of real device.

 

testing digital product

 

Tubik QA engineer Olga says that knowledge on the variety of test types, their benefits and pitfalls, tools and types of devices is an issue of great impact, still practice plays even bigger role for performing high-quality tests of mobile applications for iOS. It’s not reasonable to state that having a considerable experience in testing web applications, QA specialist will easily plan and accomplish mobile app testing. Certainly, there are basic methods and principles which mostly deal with functionality, still nothing can work better than practical experience, enabling tester to reveal more bugs in the process of mobile app development in the future. We have to remember that the price of the error found before the release is much lower for the client than the one found after launching the product. Another aspect to consider is that it’s impossible to reveal all the potential errors due to the massive amount of incoming data in terms of limited time. That is when theory becomes a great help for QA specialists because it lets them to reduce the number of test cases via using the established techniques and methods with saving the necessary test covering.


Welcome to read The Ultimate Guide to Creating a Mobile Application 

toonie alarm UI design

Case Study: Toonie. UI Animation Development.

In most cases, when users deal with animation in the interface, it takes short seconds and feels as natural as a breath. Being far from design and development routine, it’s almost impossible to imagine that these brief and simple interactions take long hours of thorough work presenting mix of science and art. 

 

In our previous articles we had numerous chances to show you diverse UI animations solving users’ problems and enhancing usability, still they were mostly presented in design perspective. Today’s  case study will set the link between design and development for iOS mobile applications: it will show you collaboration of UI designers, motion designers and iOS developers working over animation for Toonie Alarm. Previous case studies already let you see the creative process for user interface and mascot design, but this time you will come along step-by-step guide on how animation was created for the app. 

 

Time Picker animation

 

Time picker in the alarm application is actually the core part of interaction with the app and the primary element at which motion design and development play the vital role for establishing both usability and visual harmony. Let’s see how science, calculations and code are able to transform into beauty and style.

 

toonie alarm UI animation

 

All the content of animation is placed on custom subclass UIView, for this case we call it AnimatedDayView.

 

layers_scheme toonie-ui-animation

 

The bottom layer is Infinite UIScrollView (1 on the scheme above). It is the endless scroll view that includes the copies of the image below.

 

toonie scroll animation

 

There are numerous ways of realization for endless scroll. The main idea of replacement in scroll view is to recalculate the size of the scroll view and replace the invisible previous image showing the new one and adding the one for the future.

 

In the case of animated time picker for Toonie, we took the starting point as 6 AM, therefore the middle point is 6 PM and the ending point is 6 AM of the next day.

 

The next layer is Stars UIImageView (2). This UIImageView is added over the scroll view and goes round its centre; during this process the Alpha of the layer is changed. It means that in the daytime it is transparent while in the evening time it gradually appears.

 

stars_ui-view_scroll_animation

 

The next layer is CALayer for the sun and the moon— SunMoonBackgroundLayer. It isn’t seen on the scheme as it has the same size as AnimatedDayView. It also rotates around its centre which is below the visible frame of the screen (5).

 

On the SunMoonBackgroundLayer, there are two more layers — for the moon (3) and the sun (4). The layer of the moon rotates to the same angle as SunMoonBackgroundLayer but in the opposite direction. The sun rotates to the higher number of radians.

 

The issue of great importance here was to thoroughly calculate at which number of degrees should each layer be rotated and how far should the scroll go on. The scroll presents the easiest part. The input variable is always time, that is the hour and minutes which user chose on UIDatePicker. With this data, it’s quite simple to calculate the scroll view shifting. Initially it will be zero, which in our case is equal to the time of 6 AM as we set above. Imagine that user has picked the time 9.10 AM. We can understand which number of pixel the view has to shift down or up when we calculate the difference of the time in minutes (190 minutes) and transforming them into pixels. All the scroll ground presents 24 hours, so its height presents 24 hours, therefore 1 minute=image_height/minutes_per_day (60*24). Knowing the value of 1 minute, it’s not difficult to calculate how many pixels are set into 190 minutes. The only thing left to do is to move the scroll on the required number of pixels, which can be also negative in cases when the new time is less than the previous setting.

 

The next important parameter is Alpha of the stars. It can be calculated with understanding at which particular place on the background image we are at the current position. It means that at 6 AM in the top part of the image the stars should have Alpha 0 value because the morning starts. And the stars are ignored, aka kept in Alpha 0, up to 6 PM, and then Alpha value should be gradually increasing so that at midnight Alpha reached 1. The calculation of dynamics and intensity here can be different depending on desired visual effect. The core thing is that we have the basic parameter which we can rely on: the current position on the background image. And it can be easily calculated knowing the time set by the user. With alteration of Alpha motion, attractive visual performance can be effectively reached.

 

To calculate the angle of rotation, we take 360 degrees for 24 hours. So, 0 degree = 6 AM. We calculate the difference in minutes, find the number of degrees per minute and set the degrees required for shifting.

 

Another element of animation is clouds. They appear due to NSTimer. It adds one of the graphic variants for clouds (the app uses three graphic versions) with random coordinate of Alpha (transparency) beyond the limits of the screen on the right side. After that animation of movement (changing the centre) starts from right to left. The timer is launched with the random interval.  After the animation is finished, the cloud is gone.

 

toonie alarm time picker

 

Sun switch

 

Another piece of animation that required attention and creativity was the switch on the Alarm Screen, the actual element of interaction showing that the alarm is set and active or not. Design solution supporting general visual performance of the app was to make the toggle look like the animated sun when alarm was in the active position.

 

toonie switch UI animation

 

Looking over the accomplishment of the presented motion via code, we see that this is the UIView which contains several layers.

 

toonie-ui-switch_animation

 

The first layer is the background of the hole in the switch (1) which has a rectangular shape. Above it, there is the circle — the toggle of the switch (2) which is the centre of the sun. It can move leftwards or rightwards. Another layer is the sun rays (3). They are set as the separate layer because they have the endless animation of rotation.

 

When the switch is off, the rays change their Alpha to 0 and animation stops. Over all the mentioned layers, the largest layer is placed which is the background of the switch (4). This is also the rectangular layer which has a mask CAShapeLayer drawn with two UIBezierPaths.

 

 

The mask cuts off the layer of the required shape and switch gets a look of the final view. For interactive controlling, two Gesture Recognizers are added: UITapGestureRecognizer for pushing and UIPanGestureRecognized for pulling the toggle.

 

This practical case shows that making animation which will realize its problem-solving potential looking attractive and natural is a demanding task requiring thoughtful approach and collaboration of designers and developers for users’ sake. If you want to test everything described above in real interaction, just set Toonie and see how it works. And don’t miss new cases telling more stories of creative process.


Welcome to set up Toonie Alarm via App Store

Welcome to read case studies about user interface design and mascot design for Toonie Alarm

Welcome to see the designs by Tubik Studio on Dribbble and Behance