Tag Archives: app development

toonie alarm stickers ios tubik

IOS Tutorial: How to Add Your App Content to iMessenger.

Messengers have definitely become an integral part of everyday life for thousands of people: they are easy-to-use, quick and simple, and so helpful in exchanging information on the go and from anywhere you are. Moreover, with the rocketing progress of smartphone technologies, messengers are adding more and more functionality: right from the messenger you can send images and sometimes even files or documents, you can create group conversations, change the visual layout of the interface, classify your contacts etc. Recent years have also shown the instant wish people demonstrate in involving diverse graphics like emoji, stickers, animations, doodles and the like to make the chats brighter and to set the definite mood of communication.

 

One of the features, presented with iOS 10, became a great respond to this trend: Apple opened iMessenger to the third-party developers via the feature called iMessenger Apps. having created the apps for iOS, developers are now able to synchronize their content with iMessenger, be it a sticker, an audio file or even some interactive stuff. If the path has been overcome correctly, the content can be integrated right into the messenger.

 

Recently we have tested this feature in practice, having opened the sticker pack from Toonie Alarm directly to iMessenger, so today we offer our readers a brief tutorial on how to do it. Those, who will find this tutorial interesting and applicable in practice, presumably have the practice of work with Xcode and feel confident in coding UIKit-based iOS application.

 

toonie-sticker-screen

 

So, first of all, let’s mention once again that today we are working on the case when you have and iOS app, which is launched and operating, and its content (like images, photos, emoji, stickers, audio etc) can be potentially applicable to the process of communication via iMessage.

 

As we have dealt with stickers as a sort of shared content, a couple of words should be mentioned about the recommended format for the messages. For sticker packs, the file sizes recommended by Apple are:

  • Small: 100 x 100 pt @3x scale (300 x 300 pixel image)
  • Medium: 136 x 136 pt @3x scale (378 x 378 pixel image)
  • Large: 206 x 206 pt @3x scale (618 x 618 pixel image)

 

There are also the following limitations to the images used in the sticker packs:

  • Images can be no larger than 500 KB in file size.
  • Images can be no smaller than 100 x 100 pt (300 x 300 pixels).
  • Images can be no larger than 206 x 206 pt (618 x 618 pixels).
  • Image files must be PNG, APNG, JPEG, or GIF format; PNG for static stickers and APNG for animated ones are recommended because they handle scaling and transparent backgrounds much better than JPEG and GIF respectively.

 

If everything mentioned above is your case, then you have to start submitting the app content to iMessenger in the following way.

Add iMessage extension to your app

In project targets press «+» and select iMessage extension, as the screenshot shows:

 

imessage app ios extension

 

We will have an automatically generated MSMessagesAppViewController inheritor called MessagesViewController. It acts as the general view controller but is used to manage your Messages extensions.

 

When this controller loads, we should load stickers and present them in MSStickerBrowserViewController. The browser provides drag-and-drop functionality: the user can press and hold a sticker to peel it from the browser, then drag the sticker to any balloon in the transcript. The user can also tap stickers to add them to the Messages app’s input field.

 

The browser presents the stickers provided by its MSStickerBrowserViewController property. The data source can dynamically change the list of stickers at runtime. You can also customize the size of the stickers inside the browser.

 

[[MSStickerBrowserViewController alloc] initWithStickerSize: MSStickerSizeSmall];

 

sticker sizes apple ios

 

 

In the method createStickerBrowser, we create MSStickerBrowserViewController with small stickers and present it on our main view controller (MessagesViewController) as the child view controller. Data source for this browser is MessagesViewController

 

In the method loadStickers we load data(Stickers objects) from Core data and map it to MSSticker objects. To create MSSticker, you should describe the file URL with an appropriate image (LINK!), localized description limited to 150 characters, which will be used as an accessibility description of the sticker. Also, you can track errors which occur in SKSticker initialization via last output parameter — error.

 

As a browser data source,  MessagesViewController should implement MSStickerBrowserViewDataSource protocol which consists of two important methods. The first (numberOfStickerBrowserView) says how much stickers we should present and the second (stickerAtIndex) should return SKSticker for each index.

 

How to share data from the particular app with the extension?

 

In the case of Toonie Alarm, we had data in Core data database.

 

In the case of the same app group, create the app group in the Apple developer portal. If you need the detailed instruction on it, check it here.

 

Add it to your app ID and use for application target and extension. (select in target -> capabilities -> app groups).

 

After this, you will have the shared container for the app and the extension. And SQLite database will have this path:

 

NSURL*storeURL = [[NSFileManagerdefaultManager>] containerURLForSecurityApplicationGroupIdentifier:@»your group id»];

  storeURL = [storeURL URLByAppendingPathComponent:@»Alarms.sqlite»];

 

If you use some UserDefaults, you will need the following code:

NSUserDefaults *mySharedDefaults = [[NSUserDefaults alloc] initWithSuiteName: @»your group id»];

 

In case you want to use some classes from the app in your extension, just select your target in File inspector.

 

toonie alarm stickers ios tubik

 

If you had an old app on App Store and now want to add iMessages extension and share some data from Core data store, you will need to move existing database to the shared container instead of creating the new one.

 

Due to these operations, Toonie Alarm users now can use all the stickers they win in the app for their chats in iMessenger, totally for free. For apps of this kind, which have original and bright graphic alarms, simplification in the process of adding content to the native messenger is definitely a user-friendly policy which both the developers and designers here set as their primary aim.

 

toonie alarm UI design

 

Recommended reading

 

If you want to get more insights into the theme, here is the list of recommended materials to review:

iOS Human Interface Guidelines: Messaging

Create an iMessage App in iOS 10

iOS Shared CoreData Storage for App Groups

App Extension Programming Guide

 


Welcome to set up Toonie Alarm via App Store

Welcome to read the case study about coding UI animation for Toonie Alarm

upper app UI design case study

Case Study: Upper App. Coding UI Animation.

No doubt, animation of interfaces still belongs to the most debatable issues between designers and developers. Animated UI elements often set the challenge to developers, so to enhance usability of an app or a website, the motion should be grounded on user research and add its two cents to the positive user experience. Developers in Tubik are open to this sort challenges: earlier we have already shown the case on coding motion for Toonie Alarm, this time we are continuing the theme with a practical case of developing animated interactions for Upper App.

 

Back to Basics: Core Animation and UIViewPropertyAnimator

 

Supporting designers and developers in creating attractive and functional interfaces for iOS apps, in 2006 Apple presented Core Animation, a system for animating views and UI elements of the app. Basically, it is a graphics compositing framework used by MacOS, iOS, watchOS, and tvOS to produce user interfaces with motion. It is not a replacement for the app views: instead, it is a technology that integrates with views to provide support for animating their content. However, the animation is not the only part of this framework: Core Animation presents the infrastructure for compositing and manipulating visual content. The framework uses GPU to accelerate rendering screen objects. Core Animation divides the visual content into individual objects that are called layers and arranges them in a tree hierarchy known as the layer tree.

 

The fundamental class that represents these layout objects is the CALayer class. It looks similar to UIViews implementation. The CALayer class manages image-based content and allows performing animations on that content. The main task of the layer is to manage the visual content but it also has visual attributes that can be set such as a background color, border, and shadow. In addition to managing visual content, the layer maintains information about the geometry of its content (such as position, size, and transform) used to present it on the screen. Modifying the properties of the layer is the way to initiate animations on the layer content or geometry. The app runs an animation. Layout, Display, Prepare and Commit phases are performed once before the animation starts. At this time the model layer is updated. The animation itself is rendered in a separate process on the render server using the presentation layer.

 

iOS animation

 

Nevertheless, whenever developers would like to interact with the animation (for example, pause or restart), it most likely leads to a huge piece of work. iOS open source community offers 3rd party (HTML, CSS, JavaScript) frameworks that can take care of this problem, like Pop, Interpolate and other.

 

iOS 10 provides a new way to animate that is UIViewPropertyAnimator. UIViewPropertyAnimator was presented in 2016 and it provides more extensive functionality on operations with animated interfaces. Vital to mention, it can be accessed only via iOS 10+ and tvOS 10+. The class allows developers to animate changes to views and dynamically modify the animations before they finish. This means programmers can stop (pause) in-progress animation, restart it at a later date if they wish and even dynamically modify the animated properties, for example, change the animation end-point to the top-right of the screen when it was previously the bottom-left. Developers can simply call the startAnimation() function on this instance to start the animation or animations. Anything that can be animated by the previous UIView API is eligible to be used in a UIViewPropertyAnimator instance. Here are its options:

 

  • Frame
  • Bounds
  • Center
  • Alpha
  • Background color
  • Transform (as long as it is a transformation in the 2D space, for 3D only with CoreAnimation)

 

UIViewPropertyAnimator gives programmatic control over the timing and execution of the animations. Let’s sum up what are the core differences of UIViewPropertyAnimator from CAAnimation:
 

1. After the creation of the UIViewPropertyAnimator object, the object of CAAnimation isn’t created for the layer;

2. After starting UIViewPropertyAnimator (by calling method startAnimation()) CAAnimation is created and added to the layer for animated UIView

3. Animation exists until it’s completed or deleted

 

The big advantage of  UIViewPropertyAnimator is that it’s new and has been created on the basis of modern requirements and needs, taking into account the specific features of Swift.

 

runningPropertyAnimator

 

The comment in the API informs that Apple Company pushes this class as the default for creating animations on UIView. At the moment, it is recommended for creating animations in UIKit and it’s going to replace the methods UIView.animate(withDuration:)

 

Practical cases

 

Here is a simple example of using UIViewPropertyAnimator in practical case:

 

ball UI animation

 

 

 

For comparison, here’s an example of code for the same animation, but accomplished with CoreAnimation framework:  

 

 

Now let’s look closer how animation was created with UIViewPropertyAnimator for Upper App application, a simple and elegant to-do list for iPhones: here we present the case of interactions with the menu.

 

Sample 1

 

upper app ui animation development

 

 

Sample 2

 upper app ui animation development  

 

 

UIViewPropertyAnimaton is really helpful in the process of iOS development: it simplifies the way for creating quite complex animations saving time and effort. Keep and eye on new posts: they will present fresh practical cases.


Welcome to download Upper App via App Store

Welcome to read more articles on iOS and web development

upper app UI design case study

Case Study: Upper App. UI Design for To-Do List.

Famous author and motivational speaker Zig Ziglar once said: «You were born to win, but to be a winner, you must plan to win, prepare to win, and expect to win.» Planning our day and managing our tasks is the significant job we have to do regularly and devotedly in case we seek for success. Tons of books, articles and interviews from successful and productive people generally send the global message: to be productive you have to plan your day and tasks distributing your time and effort wisely. 

 

Would you like to have a reliable helping hand in the process of planning your days and setting goals effectively and without any distractions? Welcome to try Upper, simple and elegant free application for iPhones, designed and developed by Tubik team. Today this motivating to-do list is featured and spinning up at Product Hunt, so we’ve also decided to unveil some details of design and functionality with our readers.

 

Upper App to-do list tubik

 

Task

 

Full-cycle UI/UX design for the simple and motivational productivity app for iPhones.

 

Process

 

Creating the to-do list application, Tubik team realized the high scale of competition in this sphere of utilities: that was a step into the red ocean. Still, as it usually happens in the fields covering wide and diverse target audience, a variety of the products is another user-friendly feature: it allows choosing the styles and features every particular user likes. Continuing the theme of personal productivity, which was started with our previous app Toonie Alarm, we’ve established the goal to present the app of totally different look and functionality deeply focused on personal and professional motivation.

 

 upper app UI design

 

In UX perspective, the app interface was concentrated on extremely simple interactions and intuitive navigation, while in UI design the core concerns gathered around high readability level and visual hierarchy that would allow users to use the app easily in any environment and on the go. In addition, working over the visual performance of the app user interface, Tubik designer Ernest Asanov made a general stylistic concept choice in favor of minimalist and elegant solutions.

 

Functionality

 

The basic idea set behind Upper was creating helpful to-do list, deeply concentrating user’s attention on the tasks and deadline. That’s why it doesn’t include complex functionality, distractions or decorations. It presents only the features and elements needed for time and task management.

 

Functions and features provide the following:

  • All the features of the app are free for everyone
  • Upper Streak Challenge motivate users to complete all the tasks for the day
  • Statistics of tasks completion
  • Simple and clear navigation
  • Easy adding, deleting and marking tasks
  • Eye-pleasing slight animation
  • Instant sharing achievements with friends

 

upper app UI design case study

 

Design and Layout

 

Interactions: The basic functionality of the app is built around user’s ability to create the list of tasks which can be saved for the particular date and time, easily deleted or marked complete. In addition, Upper analyzes task completion progress and shows stats to keep users updated and motivated. The absence of distractions, simple screen design and thought-out typography make the content highly readable and allow using the app easily in any environment and on-the-go.

 

upper app UI design case study

 

Basic functional buttons are placed in the bottom of the screen, which supports usability for users with big devices. Different swipe gestures allow a user to mark the task complete or delete it from the list. Core information such as dates, the words for the closest days (tomorrow, today), the number of tasks and days in Upper Streak are presented in uppercase font, supporting both efficient visual hierarchy of the layout elements and the harmonic consistency in combination with the product brand name.

 

Upper App to-do list 7

 

Upper Streak: The original feature of Upper App is user motivation with special challenge of non-breaking plans and increasing productivity potential: the app motivates to complete all the planned tasks via Upper Streak Challenge. Streak is the period during which users don’t interrupt completing the tasks with Upper: it shows the achievement in being consistent and productive and encourages not to stop and break the progress. Seeing your determination, the app will challenge you with bigger number of tasks, so users are motivated to get organized and complete the plans with Upper without missing a day.

 

upper app UI design case study

 

Color and style: The app is designed in minimalist and elegant style of layout based deeply on quick functionality and intuitive navigation. What is more, users are provided with the variety of skins and can choose between dark, light and red skin depending on their personal taste and wishes. At the moment the app is presented in dark skin, but next update coming very soon will let users activate any of the three palettes.

 

upper app UI design case study

 

User-friendly navigation, supported with slight eye-pleasing animation, will help users to focus on their tasks.  No ads, no complications, no extra copy, interface motivating to create short concise notes for the tasks – nothing will distract from the goals. Application provides the simple calendar, allows saving notes conveniently, check stats and plan anything from everyday stuff to business objectives.

 

upper app UI design case study

 

To get more information on design and interactions, you can also review the full presentation of Upper App design or check full pack of the details via Upper Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Upper App via App Store

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

ios development interview

From QA to iOS Development: Life Story of the Career Switch.

Switching the career path and changing long-term ambitions is never an easy choice. Still, in many cases this step is feasible, living up the new hopes and professional growth. In the sphere of web/app design and development this sort of situation is, perhaps, even more common than in the others due to dynamic and rocketing progress of information and communication technology in the world. New professions and positions pop up like mushrooms after the rain, opening totally new perspectives and allowing professionals to set new ambitions.

 

Our today’s story is of this kind: Tubik iOS developer Maxim Pedko will share his experience of the career switch from QA engineering and project management to iOS development. Check out the interview and get inspired!

 

iOS developer tubik studio

 

How did you make the decision on your career choice?

 

Actually, I had quite extensive and various experience: before the first step in development, I worked as a QA engineer and project manager. Still, my big dream getting stronger and stronger was to create real products by myself. One day, working over current tasks, I realized that I have to change my life and try something new that will get me closer to my ambition. I had studied the basics of PHP, web development, CMS and it even let me earn something for a living, but didn’t give me real pleasure from my work. I developed simple plugins for CMS WordPress, but I didn’t feel it like the full-scale development as the plugins were focused mainly on correction of existing design according to client’s requirement, not more. That job wasn’t bad, it was just not the one for me as I didn’t get either aesthetic or professional inspiration.

 

Why did you choose Apple as the field for your career growth?

 

I deeply and sincerely fell for iPhones and other products by Apple after their first presentation. That distant day when Steve Jobs presented a new revolutionary buttonless mobile phone with beautiful photorealistic interface, called iPhone, they won me over with their design and usability. Since then, I have been a keen fan of Apple, although unfortunately I didn’t have a chance to get their devices for myself. Certainly, a lot of things have changed since the presentations of the first iPhone, iOS, iPad, yet I am still the supporter of this company products and philosophy.

 

Swift vs Objective-C. Why did you choose Swift?

 

Before I started programming for iOS devices, I had analyzed the well-known and established Objective-C and newer Swift. For me, the issues to consider were the following:

  • Swift is easier readable than Objective-C
  • Swift is easier maintained and supported
  • Swift requires less amount of code
  • Interactive coding is available at Swift Sandbox
  • Swift is the platform for the future, as Apple have outlined their intent of the full switch to this programming language.

 

ios development interview

 

Where does the way of iOS developer start?

 

To start developing iOS applications, first of all you need high motivation and wish to grow professionally. Without the great desire to self-develop and study the field in detail, it’s better not to start, moving yourself to the further search of the domain you are interested in. Starting the career in iOS development, you should be ready to some aspects that won’t let you do it from the very first day. For instance, you won’t be able to code iOS apps without a computer from Apple! You will need Xcode which works only on MacOS.

 

I have tried the software that is argued to enable developers to code for iOS on other operational systems: it took me ages to install it via virtual machines and tune the soft into more or less working condition, still it didn’t work efficiently and heavily overloaded the computer. There were even the moments when I got so frustrated that wanted to throw away my computer through the window and forget it as a nightmare. So, I had to accept the rules of the game that there’s no other way than coding for iOS on MacOS.

 

Another essential thing to mention is that to develop iOS apps you really need only Apple computer still it’s not required to buy all the existing devices like iPhones, iPads, Apple Watches etc. Xcode has simulators of all the devices with which the application will be potentially used so having developed the application for one of them, you can instantly test it on the simulator of the device.

 

ios development glossary

 

Anyway, if you have bought an Apple computer, set up Xcode and are ready to code iOS apps, you will need the reliable source of information, knowledge and practice in studying Swift. There are numerous materials on this topic shared via YouTube, such as video lessons and vlogs; also you will definitely find the text-based sources like blogs and forums for developers, but the most reliable, actual and truthful source of data for you is the official website for Apple developers.  Another useful resource is Swift website  presenting lots of tutorials and practice for studying Swift coding and I would also recommend the interactive course Developing iOS 9 Apps with Swift. No doubt, to keep up-to-date, iOS developer should never miss conferences and presentations  from Apple.

 

What are the other domains of knowledge needed in this sphere?

 

I have to admit that basic knowledge plays the vital role for professional growth in this field. Before you start to learn programming not being a native English speaker, you have to understand that without knowing English solidly you’ll get the experience when the best and the most reliable sources on not only iOS, but also programming in general are shut for you. That’s the reason to constantly improve and practice the language even if you think you know it well.

 

If you don’t own Apple computer working on MacOs, it’s not the reason to get in despair. You have to plan your steps and study everything that you will potentially need in the future. Before starting iOS development, I had studied operations in client-server applications, REST API, basics of OOP, databases, base operators, types of data, — everything that can be studied before starting real practice in coding on Swift.

 

Could you share your real experience that allows considering the possible risks?

 

As I’ve mentioned, to get real experience you will obviously need an Apple computer. If you don’t have it, try asking your friends or finding hubs where you’ll be able to try actual programming on Mac. It’s vital to understand if you really want to continue your professional way in the sphere as, you see, the start needs some basic capital, at least in the form of quite expensive hardware.

 

When you start getting real experience in development, don’t be afraid to start coding for real simple projects and get precious practice of both development and communication with customers. That’s important to make your name in this highly competitive sphere and open new perspectives for complex and interesting projects in the future.

 

If by any reason you are afraid of freelance platforms or frightened to be cheated, working over your own projects you should carefully plan the tasks and set the deadlines. There are many good sources where you can buy lessons or get them free, and there you are provided with the practical tasks which you are obliged to complete. You have to be persistent, try and study, be always open to new knowledge in development, — this is the only productive way to the day when you start creating efficiently working code.

 

As for me, to get the knowledge and practice of iOS development without having my own Apple computer, I did my best to get enrolled to Tubik Studio as an intern. To get more practice and have more hours of effective studying, I took the risky step having left my previous workplace and devoting the maximum of time to progress in what I saw my future. After two month the risk paid off: I got an offer of the full-time developer’s position in iOS department. Moreover, I’ve got the precious experience of working in team of professionals that opens the door to more complex, sophisticated and significant projects, shut for freelancers working solo.

 

tubik studio developers testing

 

And my message to those who start this way is the following: it’s not enough to buy the original computer, it’s not enough to narrowly focus on one aspect of the job without studying the others. It’s vital to realize that whatever is the sphere of development you see yourself in, you should get filled with new knowledge on a daily basis, and only persistence, hard work and self-education will bring you to being a productive and highly-skilled developer.


Welcome to read more articles on iOS and web 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 a 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 inverted manner and requires other sizes 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 a 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 a 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