Tag Archives: app design

mobile application testing

The Brief Guide to Testing Mobile Interfaces

Mobile technology and smart devices have already brought massive and significant changes in human behavior, communication, way of thinking and lifestyle. In fact, the boom of apps popularity can be seen in plenty of industries, among which we can easily sort out some noticeable ones such as Media (magazines and newspapers), Travel (maps), Medicine (patient records), Finance (apps for real-time trading), Education (translators and dictionaries) and Social (games and social media platforms). With steady and obvious progress of the sphere, mobile and web apps are definitely going to become more critical for personal, professional and business success and efficiency. So, creating and launching a new application, all sides of its production should test the solutions and environment and well as practical quality of design and development outcome. Extensive practice we have got here in Tubik Studio proves that this is the well-lit way to providing users with positive experience and helpful products.

 

Testing is vital for product quality

 

In our previous article, devoted to the full cycle of creating a mobile application, we have already mentioned the great part of testing in providing high quality products, able to solve problems and improve lives. As it was outlined in general terms, testing is one of the crucial phases of the entire app design and development process: it helps to reveal bugs before the app is brought out to actual users. Practice shows that in the majority of cases, users abandon the app if it has functionality problems, no matter how promising and engaging it seems. Vise versa, even the simplest apps can be successful for commerce, business, advertising and other aims if they work correctly and efficiently, according to target audience’s expectations and solving their problems.

 

Testing doesn’t mean that designers or developers do not provide the upper quality. To set the analogy, the fact that every book, magazine or newspaper issue goes through editor’s eye doesn’t say that journalists or writers are not talented and qualified. Different specialists have different goals and skills in the process to increase general productivity and efficiency, and it works the same way for design and development of mobile apps. Supposing that developers have done a great job and made no mistakes, the task of testing is not only finding errors. Quite the opposite, it helps to understand the quality of the app and find the way to improve via real interactions.

 

Peter Drucker once said “Quality in a service or product is not what you put into it. It is what the client or customer gets out of it.”  In the majority of cases, if users see that anything in the app is broken or it constantly takes large amount of time to load preventing them from quick accomplishment of the task at hand, the risk is really high that they will bounce it and never come back. That’s why testing phase is the hidden hero of mobile app development.

 

Today we are going to concentrate more on perspective of testing mobile apps, as websites testing has its own specific features worth another article. So, let’s review the basic steps and aspects important for effective digital product testing.

 

mobile app testing

 

Start with the type of the app

 

Mobile app testing has plenty of challenges based on multiple factors: there are some compromise decisions testers or developers need to consider and choices they need to make on combinations of different techniques and methods to be used. One of the aspects to think over is the nature of the app itself directly influencing the process and limits of testing. In this perspective, the following basic categories of the apps should be mentioned.

 

Native apps. The apps of this sort are created specifically for one platform, aka operating system of device. They can take full advantage of all the device features such as the camera, the list of contacts, the flashlight, the accelerometer, the compass or others, and are installed via an app store (Google Play, Apple’s App Store, Microsoft store, etc.).

 

Mobile web apps. They are mobile-optimized websites that look and feel like native apps, still they are run by a web browser.

 

Hybrid apps. This type representatives provide the mix of native apps and web apps. Like native apps, they are installed through app stores and can take advantage of the numerous features available on device. As well as web apps, they rely on HTML being rendered in a web browser.

 

Toonie Alarm UI design

 

The type of the app under construction directly influences all creative stages from UX wireframing to final check of all the code. Different operational systems set their own guidelines and recommendations on design solutions and performance, development tools and restrictions.  Neglecting those limitations and rules can bring to fail of submitting the app to open use and turn all the creative process into wasted time and effort.

 

Plan the testing levels

 

Starting actual work over the app, creative and production team needs to consider a testing plan combining different testing levels. Testing is not the process taken as one single stage or action: it is spreaded via different stages. Schematically, this process can develop in vertical and horizontal directions. Vertical dimension is presented with testing levels and usually deals with going deeper to the code and functionality from separate units to whole app, its connection with the server if its needed, and its technical correspondence to the requirements. Horizontal dimension deals with different aspects of app performance and user experience.

 

Taking the testing levels to account, their basis is variety of tests grouped according to the stages when they are used in the development process, or by the level of specificity of the test. The main task of testing levels is to identify missing areas and prevent overlap and repetition between the development phases. Let’s briefly describe the various levels of testing.

 

Unit testing. This testing is commonly done by the developers to make sure that their code is working correctly: they test the sections of code like classes, functions, interfaces, etc.

 

Integration testing. Integration testing is done when particular units are integrated with each other, with the aim to test the behavior and functionality of each unit after integration. This testing level is usually carried out by a software testing engineer. There are a few types of integration testing such as big bang integration testing, top down and bottom up.

 

System testing. Here the name says everything: at this level all the components of the app are tested as a system in order to ensure that the product at the pre-launch stage meets the specified requirements. As the app is almost ready, it can be tested in the environments really close to the actual in which users will get their experience once it is deployed.

 

Acceptance testing. The main objective of this testing level is to evaluate whether the app system complies with the user requirements and whether everything is ready for release.

 

ios-developers-tubik-studio

 

Define the types of testing

 

All aspects of the app usage should be tested. Designers, developers and testers will need to check it across different devices as the points like screen resolution, processors, battery life and memory are different and can significantly affect on the efficiency and performance of the app, functionality, handling and loading time, as well as UX and UI solutions.

 

Among the variety of types, applied to test the mobile app at different stages of its creation, we should definitely mention the following list.

 

Usability testing. It is carried out from the early stages of app creation to verify if the app fulfills the established objectives and tasks getting a good response from users. The primary focus of this testing is on easy and quick use of an app, simple on-boarding and user’s satisfaction with the entire experience. For higher efficiency and productivity of general creative flow, this type of testing should start much earlier than any single line of code will be written, from the first schemes and transitions put into UX wireframes.

 

Installation testing. At the initial stage on installation, the app should add required software to the device automatically. And uninstalling, it should remove all the available content and databases from the device which are used by the app. So, this type of testing checks that the install/uninstall flow goes properly.

 

Functional testing. It is the most basic test for any app to ensure that it is working according to the defined requirements and there are no functions missed in the process of interaction. Functional testing mainly includes finding possible specific bugs of the device or navigation issues of the app. This type of testing should be done at the primary stages of development. In enables developers or testers to check and measure database or network queries with response times, crashes and memory issues.

 

Performance testing. Rather stressful part of any app testing is performance test revealing the omissions which left unnoticed during functional and user interface testing. This testing is required to be done on actual device only so it means the whole app is coded t this stage. This type covers client-side, server and network performance. For example, it checks the performance specifications and behavior of the app under certain conditions such as low battery, bad network coverage, low available memory and etc.

 

Interruption testing. An app may face various interruptions being in active mode, such as incoming calls or network coverage outage and recovery. This kind of testing shows what the app will do in this variety of cases. The common types of interruptions are:

 

  • Incoming and Outgoing calls, SMS or MMS and different notifications
  • Low memory warning
  • Cable insertion or removal
  • Network outage or recovery
  • Media Player on/off
  • The device power cycle, such as low battery notification.

 

Memory testing. This type checks that each app maintains optimized memory usage throughout surfing. As mobile devices have definite limits of available memory, this testing is crucial for the appropriate product functioning.

 

Security testing. It checks vulnerability of the app to hacking, authentication and authorization policies, data security, session management and other security standards. The fundamental objective of security testing is to ensure that the app data and networking security requirements are met according to standards.

 

Tubik Studio iOS development

 

Don’t forget to test design

 

One of the huge mistakes that could be done about testing it planning this part not earlier than the development stage starts. Obviously, the product getting live via code presents wider perspective of testing its actual functionality and performance. Still, we should remember that any digital product is not just code — it is the set on user interactions which should be thought-over and designed thoroughly with target audience in mind. Therefore, testing should take its first steps at the stage of wireframing to check if all the elements take their places, communicate to users, provide them with feedback from the system and what is more, achieve the goals and solve users’ pains.

 

Numerous prototyping tools enable to simplify and speed up the process of testing user interface so that developers obtained the verified version of design not taking major design alterations in the process of development. This is the efficient way to optimize the general creative flow and provide maximum efficient outcome at every stage. Prototyping gets testing sides, be it client, designer or even potential users, closer to real interaction with the concept of the future interface. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to check the correctness and appropriateness of the design solutions way before they will be transferred to developers.

 

The most effective point to involve prototyping for testing design is the step between UX wireframing and UI design.  The prototypes on UI stage can also be created for presentation of application general looks rather than for testing and improving its functional features. Still, it crucial that usability should be thoroughly checked first of all at the UX stage, otherwise it will be much harder to change inefficient solution after having accomplished a lot of work on UI and then development.

 

All the numerous aspects of design testing are definitely worth a separate article which will continue this topic in our blog very soon.

 

InVision for UI prototyping tubikstudio

 

Check the code thoroughly

 

When the design is transformed into code, the developers and testers need to make sure that all the quality and performance nuances are considered and included. Pointers in this area are testing on actual devices and simulators. Testing on devices is proceeded on the actual handset where app is installed, run and tested. Testing in simulator applies the software that can accurately imitate a mobile phone.

 

Simulator testing is useful at the primary stages of development as it allows quick and efficient checking the app, but it doesn’t fully measures performance and usability which should have their healthy doze of actual human testing. Still, automated testing got really popular now because it is effective, cheap and quite reliable. iOS Simulator as well as testing tools such as Appium, Frank, Calabash and others are available to support moving the app through the testing process and point out the issues requiring attention.

 

Continuous testing at all stages lays the strong foundation for keeping small bugs from becoming major issues later on. The final testing is conducted on actual devices so that crashes and hangings could be identified. Testing on device is obligatory for every app as it provides developers with actual data on the app behavior in different environments.

 

Test and measure after launch

 

Another mistake that should be avoided is stopping testing after the product is launched. Vise versa: testing will get even more diverse and comprehensive as it will inform the sides maintaining the app viability and efficiency about behavior, problems and preferences of real users. This information is the direct route to product improvements providing users the updates they really need and want.

 

testing digital product

 

Mobile technology is transforming the way of using devices. Smartphones and tablets of all kinds are rapidly becoming the valid method of interaction between consumers and businesses. People use mobile apps to connect socially, find information, order and track goods, book places and set appointments and do hundreds of other operations improving their lives regularly. It is important to build an app with all features and functionality that are required. Without effective testing plan, users are likely to come across unexpected bugs and errors. In the modern world with tough and growing competition in this field, the risk is high that they will quickly lose interest to the app while thoughtful testing and analysis is the solid way to avoid this risk.

 

Recommended reading

 

Diverse issues of applying testing at different stages of creating digital products have been an object of professionals’ attention lately. Here is the collection of recommended sources on further reading for those who would like to read more on the theme.

 

Testing Strategies and Tactics for Mobile Applications

 

Mobile: Native Apps, Web Apps, and Hybrid Apps

 

Beginner’s Guide to Mobile Application Testing

 

Mobile Testing: Complete Guide to Test your Mobile Apps

 

17 Strategies for End to End Mobile Testing on both iOS and Android

 

Levels Of Testing

 

Software Testing Levels

 


Welcome to read The Ultimate Guide to Creating a Mobile Application

ios development glossary

IOS Glossary: Architecture, Patterns, Xcode.

As soon as you know the basics, you set the foundation for growth. It works the same way for any job and there is no any secret that many significant innovations are still grounded on diverse knowledge boosting potential and force of creativity. So, today let’s do our homework on the basics and add one more article to the set of professional glossary. Earlier we have already published the Glossary posts with key terms for the topics of UI/UX design and web design as well as business terms and abbreviations. This time the perspective will get changed a bit, featuring first set of terms in the theme of iOS development. Let’s get started briefly reviewing the basic notions common for the sphere of iOS development.

 

iOS

 

Basically, widely known iOS is the well-established abbreviation taking its roots from the phrase «iPhone Operating System» which was created originally for the system of mobile devices produced by Apple such as iPhone, iPad and iPodTouch and now also AppleTV. 

 

User interfaces created for iOS are made on the basis of direct manipulation involving multi-touch gestures. Interface control elements present variety of functions and forms including buttons, sliders, and switches. Gestures taking place in the process of interaction with such type of interface are also various, for instance, swipe, tap, pinch, and reverse pinch; what is more, they all have specific definitions in the context of the iOS operating system. Some iOS applications even use internal accelerometers which can react to the cases of shaking or rotating the device in three dimensions. Another typical feature is portrait and landscape mode switching.

 

From the standpoint of development, Apple gives steady preference to simple and durable things, and this concept is applied to their products, applications, tools and frameworks. It is expected that when iOS developer builds an app for iPhone, it will run on any other device with the iOS. This aspect of iOS development can save large amount of time for programmers as writing code, let’s say, for iPhone, developer uses the same programming language for all Apple’s computing devices. Said otherwise, application created for iPhone can later be even integrated into Mac.

 

In both UI/UX design and development for iOS, specialists making screens and writing code, apply their flight of creativity in terms of definite rules and guidelines to keep. The apps which don’t keep those guidelines risk failing to submit their app to Apple ecosystem of devices. Working over the digital products intended to be used in iOS, professionals need to know iOS Human Interface Guidelines and always keep and eye on updates and fresh recommendations. The set of guidelines for designers states: «As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you’ll need to meet high expectations for quality and functionality». Actually, the same position works the same way for developers who are offered samples, guidelines and support to find the optimal solutions for user-friendly and effective digital products.

 

ios-developers-tubik-studio

 

iOS architecture

 

As it was mentioned before, iOS allows users to interact with their devices and products using gestures such as swiping, tapping and pinching. These finger actions are typically performed on touch screen displays, which provide fast response and accept inputs from multiple fingers.

 

The iOS architecture can be pictured as four abstraction layers that define it:

 

Cocoa Touch. The layer containing variety of frameworks which define the appearance of the app. It also provides the basic app infrastructure and support for main technologies such as multitasking, touch-based input, push notifications, and many high-level system services.

 
Media. The layer with graphics, audio, and video technologies which developers use to implement multimedia experiences in the apps. The technologies in this layer make enable building apps that look and sound excellent.

 

Core Services. The layer that consists of essential system services for apps. Main services are the Core Foundation and Foundation frameworks, which define the basic types that all apps use. It also contains individual technologies to support features such as location, iCloud, social media, networking, etc.

 

Core OS. The layer including services such as the security, local authentication and core Bluetooth frameworks.

 

Apple recommends developers to write code to the highest applicable layer whenever possible, and only use the lower-level frameworks for features not exposed at higher levels.

 

Architecture design patterns

 

In software development, architecture design pattern is the matter of structure. It is not a finished architecture that can be transformed directly into code. Patterns are similar to the case of reliable practices that the developer can use to solve common problems building an application or system.

 

In general terms, architecture pattern in case of development could be described as reusable solution that could be repetitively applied for the issues that frequently rise within a particular context of development and engineering interactions. This sort of patterns take into account various limitations and restrictions including the problems of hardware performance, availability, environment of use and even particular business goals.

 

Among main architecture design patterns we could mention:

  • MVC (Model–view–controller)
  • MVP (Model–view–presenter)
  • MVVM (Model–view–view-model)
  • VIPER (View-interactor-presenter-entity-routing)

 

First three types of architecture design patterns assume putting the entities of the app into one of 3 categories:

 
Models – give the controller/ presenter/ view-model the data to populate view.
 
Views – display content and are populated by the controller/ presenter/ view-model. Each screen of the app is a ‘view’ which includes buttons, text, menus, fields and etc.
 
Controllers/ Presenters/ View-models – control behavior of the app. Apps are based on event-driven programming, controllers/ presenters/ view-models receive, process and return events.

 

Tubik Studio iOS development

 

To see how it works in practice, let’s take MVC pattern and describe it a bit more in detail. The model-view-controller (MVC) is an architecture design pattern that breaks code down into three parts: user interfaces (views), data (model), and the software that communicates between the two (controller). The building blocks of apps are objects — arrays of code organized with MVC pattern. Each screen of the app is a view: the data model controls the content it displays, and the controller manages communication between the view and the model. The model-view-controller is just one of the architecture design patterns developers use while building the app, still it is popular in development.

 

Xcode

 

Xcode is Apple’s integrated development environment (IDE) and it is the main tool for building iOS apps. iOS developers can work applying either Objective-C or Swift in fact using only Xcode. This software only runs on Macs and there are no official ways to launch it on a Windows or Linux PC.

 

Xcode has tons of features for iOS development, among which:

 

Interface Builder. It allows designing and testing user interface without writing a code. Interface Builder helps to prototype and then connect interface to the source within the Xcode editor.
 
Source Editor. It is a professional editor with code completion, code folding, syntax highlighting, and messages that display warning, errors, and other context-sensitive information.
 
Continuous Integration. It is a feature of OS X Server controlling server-side bots that continuously build, analyze, test, and even archive Xcode projects.
 
XCTest Framework. It assists to build unit tests that check iPhone, iPad, Apple Watch, Apple TV and Mac apps performance.
 
iOS Simulator. It allows prototyping and testing app during the development process. This testing tool simulates iOS, watchOS, and tvOS devices before testing the app on an actual device.

 

iOS programming languages

 

Two fundamental programming languages for iOS development are Objective-C and Swift. The benefits and drawbacks of each language were considered in our earlier post.

 

At the moment Objective-C is commonly described as the general-purpose, object-oriented programming language adding Smalltalk-style messaging to the C programming language. Before Swift came into play, Objective-C had been the main programming language used by developers for OS X and iOS operating systems, and their APIs. Swift, introduced at Apple’s 2014 WWDC, brought its own dose of revolution. In general description, Swift is a general-purpose, multi-paradigm, compiled programming language broadening the previous scope of operating systems as it was developed for iOS, OS X, watchOS, tvOS, and Linux. Swift was designed to enable work with Apple’s Cocoa and Cocoa Touch frameworks as well as the large body of Objective-C code already written for Apple products. 

 

Initially Swift was intended to be more resilient and safer than Objective-C, and also more concise and developer-friendly. It was built with the LLVM compiler framework including in Xcode 6 and using the Objective-C runtime library that enables C, Objective-C, C++ and Swift code to run within one program.  Therefore, it enhances broadening professional horizons for developers making their work more efficient. That was the milestone when developers started their discussion of what is better, tradition or innovation.

 

Since 2014, Swift language has been used by Xcode for coding more often than Objective-C. Objective-C is the initial programming language for building OS X and iOS software and in perspective of all the apps coded for iOS, it presents a superset of the C-programming language and provides object-oriented programming and dynamic runtime. Nowadays, Objective-C is a good fit for early iPhone and it is also effectively applicable for maintaining and updating the apps initially created in it. Swift in its turn is newer  and more flexible programming language for Apple devices that has the best features of C and Objective-C, without the constraints of C compatibility. It keeps step with modern hardware being faster in actual process of coding as well as shorter, more secure and easy-to-use. 

 

tubik ios development

 

Read more about the topic in our previous article 

 

Anyway, the choice of the programming language, framework, method, and tool for creating iOS apps should be based on the intention to provide the efficient product to both the client and the final user. 

 

This set of our glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets. If there are any specific terms you would like to see explained, described and illustrated, feel free to contact via direct message in our Facebook page or Twitter as well as our Quora representative. New definitions are coming soon!


Welcome to read the articles by Tubik Studio on web and app development

Welcome to read us on Quora

copywriting tips

Tips by Famous Writers for Good Copy Content

Creating high-quality content for the digital product is the issue of the same importance as thought-out design and careful bugless development. Copy is what makes design even more powerful breathing deeper life and sense into the webpage or app screen. Copy is information. And information, as it is known well, is the tool of incredible diversity and the key to many doors.

 

William G. Pollard once wrote: «Information is a source of learning. But unless it is organized, processed, and available to the right people in a format for decision making, it is a burden, not a benefit.» Working with copy content for digital products, writers get even closer to the issue, as the texts they usually write are aimed at supporting the goals set behind a particular product, mostly solving problems or improving lives. Good copy strengthens design significantly, poor copy is able to kill great design solutions and hours spent creating code for the app of website.

 

One of our previous articles here in Tubik Blog was devoted to the topic of copywriting for UI. Today we would like to continue this theme with the set of practical and useful tips on writing from famous and recognized authors. They performed successfully in different genres of literature, mostly fiction, still many tips they give generally about organization of writing process, creative approaches and self-critique are applicable and useful for copy content of all kinds. Let’s review the first set and chalk them up for creating high-quality and user-friendly copy.

 

copywriting for digital products

 

You can’t wait for inspiration. You have to go after it with a club. (Jack London)

 

In one of our articles with tips for designers we have already unveiled this aspect of creative job, and the ideas which were offered are also fair for writers, especially those, who are working within particular tasks and products rather than in free creative flow. Creative people often say that they cannot work without necessary inspiration: they are just waiting for the muse which will help them to find the best solution. Like it or hate it, but muse which doesn’t arrive on time is not the reasonable explanation of broken deadlines or inappropriate result. Therefore, if you want to have the serious name and get respected by the clients, if you set the goal to have constant flow of projects and earn more and more, find the ways to call your muse when you need it, not waiting when it wants to come. By the way, the process of research and writing drafts is one of great ways. Appetite comes with eating, muse comes with working.

 

Write drunk, edit sober. (Ernest Hemingway)

 

That is another absolute truth for writers of any kind. Certainly, drunk is not meant literally here, still any writer knows that feeling of being a bit besotted by the idea under writing. When you caught the necessary state and vibe, you often see and feel the whole piece of writing in your mind and will wish not to stop until the last line is dropped on paper or screen. That’s the stage of pure creativity and it would be a big mistake to interrupt it: don’t hesitate, get dip into the process and write until the last full stop is reached. Still never ever show the result to the public: always take time to review and edit with sober and concentrated mind. This will let you see the small mistakes, misprints, duplication, poorly structured sentences and phrases. This will enable you to provide your reader with high-quality well-structured copy, which is the highest form of respect. So, in other words, write with hot heart, but edit with cold head.

 

The first draft of everything is shit. (Ernest Hemingway)

 

One more rule by Hemingway clearly echoes the previous tip. Always take the draft as just a draft. Any piece of writing needs revision, not only in the aspect of minor errors or technical alterations, but also reviewing the text thoughtfully after the first wave of inspiration has washed away and common sense comes into play. Review allows enhancing the initial idea with analysis, enables to feel the integrity and unity of general performance, estimate the appropriateness of stylistic elements and hierarchy of the elements etc.

 

The main rule of writing is that if you do it with enough assurance and confidence, you’re allowed to do whatever you like… So write your story as it needs to be written. Write it honestly, and tell it as best you can. I’m not sure that there are any other rules. Not ones that matter. (Neil Gaiman)

 

It’s quite easy to imagine this state of things for fiction writers, who mostly choose the theme and genre by themselves, but there will be many people saying that it’s impossible for copywriters: they write what they are told to write. Still, in this sphere the impact of sincerity and creative passion hasn’t been cancelled. Certainly, a great professional master will create copy for sometimes highly diverse themes: the trick is that in most cases this amazing proficiency level will be supported with the writer’s natural diversity and curiosity as well as broad outlook. People, knowing a lot, with lively and constantly learning minds, are able to get sincerely inspired by various issues and tasks. The best bloggers and copywriters are the ones who write on topics they really believe in and have something to share about — in this case, they have that great courage to write honestly and feel what the readers need to get from them. Finding your themes and strengthening in them has a huge benefit of getting tasks and being paid for writing on topics you really feel yours.

 

design4users blog

 

Always carry a note-book. And I mean always. The short-term memory only retains information for three minutes; unless it is committed to paper you can lose an idea for ever. (Will Self)

 

Certainly, in present-day reality notebook can get transformed into a laptop, the tablet, the simple app for taking notes on the mobile phone — it doesn’t matter.  What does matter is being able to take a note any moment a fresh thought important to remember comes to mind. Sometimes it happens you come up with a brilliant solution or word combination, the brand name or great headline being far from your workplace and that is not the reason to lose it. As well as it doesn’t mean you should stop anything you’re doing if the good thought on work issues occurs to you suddenly. A small note, a couple of words taken down anywhere will really help. They will save the thought, will set the small tag to enable the writer pull it out and use at the moment when it’s convenient. Many writers know this small secret is an effective step to creative productivity.

 

Always be a poet, even in prose. (Charles Baudelaire)

 

The tip can seem a bit unrealistic for non-fiction writing. However, it definitely works. Words are the great tool transforming not only sense and information, but also voice, tone and mood. One of the big mistakes about copywriting is thinking that it doesn’t present such a wide field of expressiveness and imagery as writing fiction or big publicist works. Vise versa: in vast majority cases, copywriting requires high and intensive creative word processing as texts are mostly concise and restricted with many limitations and still they need to inform users, create necessary mood, transform information and often — persuade or touch some sensitive layers of perception. Lots of mechanisms and methods used by fiction writers and poets can be applied in copywriting: synonyms, idioms, metaphors and metonymies, alliterations and assonance, hyperbolas and litotes, anaphoras and epiphoras added thoughtfully and properly to the copy let it reveal new shades of the textual content. They can make the copy more creative, more vivid, more human-like and original. Furthermore, they enable the author to set the unique style of writing that will get recognizable, which is in particular need for those who create quite big texts for websites and blogs, advertising materials or presentations. Being a poet means adding an original creative spark to what is written.

 

copywriting tips

 

 

When you can’t create, you can work. (Henry Miller)

 

Copywriting is not only creativity. It is also analysis and learning, obtaining knowledge about object and spheres the copy is created about, researching and testing the created copy, editing and proof-reading. There is always plenty of work, even for the moments, when you do not feel yourself flying on the strong wings of inspiration. One more thing to mention: creativity gets stronger with practice. If your mood today is not creative, then set the practical tasks for yourself and make your skills better for the moment you muse comes to help you.

 

You can fix anything but a blank page. (Nora Roberts)

 

In creative work, sometimes the only thing which is needed is taking the first step. Have you ever experienced the moment at an exam or test when you see the task and feel the surge of panic: «I know nothing on that! That’s total failure! Nothing to say! No single word!» and then after a minute or two, getting calmer and colder, you bring out the best of your potential and give the good answer? Supposedly, many people went through that. And this is the part of creative routine, in particular working with copy, which can go through the variety of stages, from «I don’t know anything on this topic» to «There are tons of texts on that, how can I create something unique and original…». The secret is simple: start writing. Any result of the process will stimulate your creative force. Perhaps, you will create something horrible that will obviously need rewriting, and that will be the result also: you will know what is definitely inappropriate for this task and feel how to fix it. Just turn the key with the first line to start the ignition.

 

Writers do not merely reflect and interpret life, they inform and shape life. (E. B. White)

 

This is particularly true for copywriters. In most cases, they don’t have the luxury just to reflect the life as well as their own thoughts and feelings. Their key professional aim is to inform people, sometimes to educate and give instructions, guide and help, solve problems and persuade, to shape values and stimulate opinions. This is not the set of pathetic expressions, this is a real ground for the great responsibility a copywriter bears every day. Considering it and forming the professional approach with deep respect to the readers provides useful and thoughtful copy.

 

tubik studio free ebook design for business

 

Do not … address your readers as though they were gathered together in a stadium. When people read your copy, they are alone. Pretend you are writing to each of them a letter on behalf of your client. (David Ogilvy)

 

This secret from the guru of copywriting has survived through several epochs of information and technology revolutions without any slight change. Readers still are keen to read something which they feel helpful and sincere, which appeals to them and brings a pinch or loads of actual usefulness or enjoyment.  As well as they do feel hypocrisy and purely technical approach to creating texts.

 

On the average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar. (David Ogilvy)

 

The principles of visual hierarchy have set strong rules for writers, journalists and editors for many decades, being transformed and revised for copy content created for digital products. It’s vital to remember: the text on a webpage or screen should be easily scannable and skimmable. And the first thing scanned by users is headlines. They need as much (if not more!) attention as the rest of copy. No wonder: in most cases headline is a crucial element of making the decision, it stimulates the reader to spent more precious minutes on further reading and creates first vibes of tone and style.

 

tubik studio home page design

 

If you’re trying to persuade people to do something, or buy something, it seems to me you should use their language, the language they use every day, the language in which they think. (David Ogilvy)

 

Writing for readers, know your readers. Using inappropriate style and language is able to destroy the chances of creating the text that will get target readers interested and wishing to read more. Surely, that doesn’t mean going to oversimplification and making your copy primitive aka clear for everyone. It means keeping the balance and making the text you create natural, first of all for the core target audience. So, definition and research of target readers is the important part of copywriting routine, preferably on pre-writing stage of working out a particular task.

 

If you want to be a writer, you must do two things above all others: read a lot and write a lot. (Stephen King)

 

It’s not a secret that practice makes perfect. Reading a lot, you get passive practice; writing a lot you level up you active writing skills. Both are crucially important for broadening professional horizons and setting up creative sails for every wind.

 

tubik studio reading list design

 

Use the time of a total stranger in such a way that he or she will not feel the time was wasted. (Kurt Vonnegut)

 

People, reading the copy you write, trust you the most precious of their resources: their time. Consider that,  respect their time and effort, make use of that time and do it in smart and elegant way — your readers will be grateful and happy while you will get this respect back in professional recognition.

 


Welcome to read the article about copywriting for UI

Welcome to read the free e-book by Tubik team Design for Business

Toonie Alarm UI design

Case Study: Toonie Alarm. App UI Design.

Designing a product for everyday use, it is vital to ground it on the thorough market research, thought-out design presentation and deep analysis of the target audience. No wonder: the stuff like note-apps, alarms, to-do lists, calculators, calendars and the like surround users in their everyday life, help in common situations and sometimes add color to the routine. We have checked that well and now would like to present you the first case telling the design story of the brand new alarm app for iOS called Toonie Alarm which today is featured on Product Hunt and has reached top-5 in the category Tech in 4 hours after featuring.

 

Toonie Alarm UI design

 

Task:

 

Full-cycle UI/UX design for the simple and engaging alarm app for iPhones.

 

Process:

 

The design process for this case was different from typical ones in the studio as before it we had worked more on outsource projects which means that creating initial product concept and setting the task was done mainly by the client’s side. The process for Toonie Alarm took the other direction and gave us what it was set for: the feeling of full product creation process from the very first steps. We had to set the idea and test it competitive potential, establish its USP and marketing plan, branding and usability foundation and all the other stuff like this.

 

Initially the idea behind the app was to create a simple alarm clock with attractive design and consistent element of motivation and support for such a basic and often far-from-pleasant process as waking up. The basic brand image was set as fun, cute, bright and cheerful, and marketing research supported this concept with the analysis of competition and ideas on adding original features to the app.

 

User research and analysis enabled the team to form the USP for the product on the basis of the following set of key features:

  • All the features of the app free for everyone
  • Simple, clear and intuitive navigation
  • Bright and pretty interface
  • Huge set of beautiful stickers
  • Achievements and rewards for waking up
  • Eye-pleasing interactive animation
  • Animated time picker
  • Instant sharing achievement with friends.

 

Let’s look over the details of UI created by Tubik designers.

 

Cute Mascot

 

In one of our previous articles we have already mentioned the great role of mascots in branding and UI design. As for Toonie Alarm, the idea of applying the mascot was set almost instantly as mascot is not only a sort of communicator between interface and user, but also a great representative of the brand able to enhance its recognizability. Moreover, it has a great impact on easy establishing the voice and tone of the product, creating the feeling of natural communication and supporting the mood. That was the point when Toonie was born to be a funny cheerful bird, whose mission is to make the world  brighter and help users to interact with the alarm. It informs users about news, rewards, errors and just adds some fun and color to everyday life.

 

Toonie Alarm mascot design

 

toonie alarm mascot design

 

App Tutorial

 

App tutorial is an important part of the interface which helps users to get informed on the basic interactions. In Toonie Alarm it consists of three screens that tell the user about the functionality of the app. Small concise copy blocks are supported by smooth and pleasant animation of transitions to create the feeling of integrity and cheerful mascot featured as the consistent element and the center of the screen graphic composition.

 

Toonie Alarm Tutorial design

 

Home Screen

 

The home screen shows the alarms which user already set for particular time and days and the tab with funny stickers already collected for waking up. Active alarms toggles feature the animated sun. Left swipe opens active options for the particular alarm.

 

Toonie Alarm UI design

 

Stickers Screen

 

Various stickers become the reward for waking up at the particular period. Moreover, waking up several times at this time, users can level up their stickers and enrich their collection. All the stickers can be shared to social networks to mark users’ achievements.

 

toonie alarm stickers

 

Toonie alarm stickers screen

 

Time Picker

 

Another prominent feature of the app is the animated time picker. The app has simple navigation and nice motion makes it even more intuitive. Picking time for the alarm, users can enjoy animated march of night and day.

 

Toonie Alarm time picker screen

 

Animated Stickers

 

Animated stickers make interaction even more lively and enjoyable and also enhance user experience making the interface attractive and playful.

 

toonie alarm stickers

 

Logo Style

 

Logo design keeps style of lettering associated with fun and entertainment and creating harmonic link to the fonts typical for cute cartoons.

 

Toonie Alarm logo

 

Product Video

 

To catch more details and see the interactions with the app in real, welcome to review the video guide on Toonie Alarm.

 

 

You can also review the presentation of Toonie Alarm design on Behance or check full pack of the details via Toonie Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Toonie Alarm via App Store

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

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

Animation applied in user interfaces is the topic drawing high attention and provoking hot debates nowadays. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristic of modern apps and websites.

 

Why do users love motion so much? Mostly, because animation supports the essence of actual and real interaction, it creates the level of feelings and perception close to what people have when they are interacting with a physical object in real life. This sort of feeling can boost user experience rate of positiveness really high as the more natural user feels, the less effort is needed to deal with the app or a website and the more clear it is how it works. Certainly, it makes users satisfied. No secret, satisfaction and pleasure are among top things encouraging people to use the product again.

 

Like everything that is put into the interface and process of interaction with it, animation must be a functional element, not just a decor. Considering motion elements while planning user journey around the digital product, designer should deeply analyze its potential for increasing usability, utility and desirability of the product before making a decision to apply it in the layout or transitions. Animation in UI requires thoughtful approach and always needs to have a clear purpose set behind. Advantages and utility of using it in the interaction process have to be obvious and outweighing possible disadvantages. Animation should become icing on the cake, not a fly in the ointment.

 

Tubik Studio

 

Define the problem

 

One of the best approaches to make animation functional not only attractive is to reveal the problems that it potentially can solve. It can be done at all the stages of design process:

 

user research will let you know who the target users are, what’s their age, preferences, level of tech literacy, environments and conditions at which the product will be used, and plenty of other factors from the users’ side that can influence user experience;

 

marketing research will give the insights of existing products, their strong and weak sides as well as methods of forming user loyalty, which is the good basis for defining USP solving particular users’ problems as well as original ways of the product presentation and performance;

 

UX wireframing stage will enable to think over the logic of interaction, layout and transitions and get the first assumptions of the points which can be strengthened with animation;

 

prototyping stage will reveal new aspects of live interaction with the screens;

 

UI design stage will provide the complex of visual presentation for the product scheme and system setting a new perspective of applying animation into the app or website;

 

 user testing will show if the decisions made about animated elements were correct and their benefits really outweigh possible pitfalls.

 

tubik studio work

 

At every stage, if designer sets the goal to reveal possible big or small problems users can have, animation as well as any other design element can take the role of problem-solver for the case.

 

Let’s review some typical problems that can be solved by means of interface animation.

 

Problem: I want to know the action is done.

 

This is one of the problems that can be easily and quickly solved by animated details applied in UI. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform user in split seconds activating all the potential of fast visual perception.

 

switch animation tubik studio

Switch Control Animation

 

hamburger_menu tubik studio

Hamburger Menu Animation

 

hamburger button tubik studio

Hamburger button interaction

 

tubik studio button ui

Tab Bar interaction

 

add button animation

Add Button interaction

 

pageindicator tubik studio

Rubber Indicator

 

Problem: I want to know that action is in progress.

 

This is also a huge area of application for diverse motion design potential. When users interact with a digital product, they want to know what is going on at every single step. Making users wait in uncertainty is the risk of losing those users. Still, when users are informed, waiting can be not so annoying and stressful. So, this aspect should always be taken into account and there are many ways to support it via interface animation. This is the high time for pull-to-refresh indicators to come into play and show their best.

 

pull_to_refresh tubik studio

Pull To Refresh

 

preloader animation tubik studio

Preloader

 

pull to refresh animation tubik

Pull to refresh

 

pull-down animation tubik studio

Pull Down — Hourglass

 

tubik studio pull down

Pull Down — Space Ship

 

Problem: I can’t see the progress and don’t understand how long it will take.

 

Quite often it’s not enough just to let users know that the process is going on. They often want more: to see how fast it is progressing and how long it will take. Again, interface animation can be a great helper here. Load bars and progress bars, animated timelines and other dynamic elements can kill several birds with one stone:

 

— they inform user about the level of progress

 

— they can become the entertaining element blunting negative experience of waiting in the process of interaction

 

— designed and animated in an original way, they can become a viral feature which users will want to share with others and engage more users into action.

 

tubik studio motion design

GIF for the Timeline App

 

tubikstudio motion design

GIF of Dynamic Scroll

 

Problem: I don’t want to make my screen a mess.

 

That is really a vital thing to think over in the interface design. If the screen or page looks like mess overloaded with tons of data which is not clearly organized, it will require additional effort from the user to understand how it works and where the needed information can be found. The more effort, the higher chances are getting that users will go away in search of simpler solution. In vast majority of cases users wish to have apps and websites that will simplify and improve their life, perhaps even will do some job for them rather than will take additional effort and time on interaction. Animation can be a good way to enhance interaction with various data blocks and sections and make everything feel organized even in highly data-saturated and complex interfaces.

 

sport app motion ui tubik studio

GIF for Sport App

 

tubik studio motion design ui

Cards Animation

 

UI Design Interaction Tubik Studio

Boat Station App

 

tubikstudio blog app ui animation

Blog App

 

Problem: I want to see the key things first.

 

Visual hierarchy and clear navigation are always a great concern for designers creating interactive digital product. Users’ attention should be immediately drawn to the key element of interaction according to its goal and conditions. Animated interface elements present great supportive force for this aspect, enabling faster and more distinct visual marking of important elements in the layout.

 

tubik studio tapbar ui

Tapbar Interactions

 

tubik studio behance weather app

GIF for the Weather App

 

App screens by Tubik Studio

Resto App 

 

Problem: I want to feel the interaction natural.

 

This is the problem that most users will not be able to formulate, still it has a great influence on user experience. If users say something like «I’m not sure what’s wrong but there’s definitely a thing», try thinking over more natural interaction. Animation in the interface can create pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural.  Again, users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.

 

tubik studio_social_network

GIF For Social Network 

 

tubik_studio_book_swap

Book Swap App

 

Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu

 

This sort of problem is also popular in interaction with web interfaces. Thought-out movement of layout elements while the webpage is scrolled can enhance user experience significantly and create the feeling of one integral smooth interaction rather than several separate parts or blocks of the page. All in all, it’s pleasant and engaging, and these emotions are a good factor of retaining users.

 

Landing Page Animation Tubik Studio

Landing page animation

 

landing page animation Tubik studio

Landing page animation

 

landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver

 

tubikstudio ui animation website design

Bjorn Website

 

 

Problem: The screen/page is boring.

 

Obviously, talking about interfaces, people often move functional side and usability to the foreground, as key or sometimes even the only aspect requiring consideration. And that’s right and logical, still it cannot null the fact that people are driven not only by logic. There are also such big factors as emotional and aesthetic satisfaction able to influence user experience greatly. Thoughtful balance of utility and usability on the one hand with emotions and aesthetics on the other can bring user-friendly product. And animation is a great booster in this perspective of interface design. It can mark out the beauty of colors and gradients, breath life into layout, make movements dynamic or vise versa smooth, strengthen the power of UI elements with motion and original transitions.

 

calendar-app animation tubik

Calendar App Animation

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

tubik studio application recipes and cooking

Recipes App

 

juicy player UI Tubik Studio

Juicy Player

 

So, definitely, animation in user interfaces has massive potential in solving diverse problems of interaction. Still, even the slightest piece of motion added into UI requires thoughtful approach analyzing not only advantages but also possible drawbacks. Animation should support the user, that is its main goal in the interface.

 

Tubik quote UI animation

 

Recommended reading

 

Diverse issues of applying animation in UI design have been an object of professionals’ attention for a considerable period. Here is the collection of articles for those who would like to read more on the topic.

 

Interface Animation. The Force of Motion.

 

Animated Interactions. Motion on Purpose.

 

UI Animation. Microinteraction for Macroresult.

 

UI in Action. 15 Animated Design Concepts of Mobile UI.

 

How to Use Animation to Improve UX

 

Functional Animation In UX Design: What Makes a Good Transition?

 

Experience Design Essentials: Animated Microinteractions In Mobile Apps

 

The ultimate guide to Web animation


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

Tubik Studio iOS development

Case Study: SqueezeOutSwitch. Animation in Code.

UI animation has been the subject of hot debates for a long time. Designers work over the sophisticated animations to make interfaces attractive, original and functional while developers often support the idea that slick and complex animation takes more effort in the process of development than necessary.

 

As you know from our previous posts devoted to the issues of interface animation, here in Tubik we support the position that wisely used animation is the powerful and multi-functional tool enhancing user experience. We checked that on numerous design projects of diverse purposes. Our complex motion design concepts have been used by developers who like challenges and want to present high-level skills in coding.

 

Broadening our professional horizons, we also started sharing our design concepts on GitHub, to show how design, even quite complex and specific, can be brought to life with code. Today we will look at more detail at SqueezeOut Switch animation of the interface interaction.

 

button animation tubik

 

The design concept Switch Control Animation was presented on Dribbble featuring animated switch control that can be used for accepting or declining the changes on any settings screen. The main motion design style the designer aimed at was adding some gum effect when the control is switched on and off. And this sort of design details can become a bit of challenge for developers.

 

The animation in code representation is made of two parts.

 

The first part works like that: when user makes a tap on the screen, the circle has to move to the opposite side until it is covered by the baffler. Then animation slightly slows down, the circle changes its appearance, goes up to final point and features bouncing. The baffler also shows the animated pulsing with the circle. The oscillations decay.

 

The second variant takes place when user tries to move the circle manually, like pressing it and pulls to the needed side and then can release. While the user pulls the circle, it changes its position within acceptable range, up to maximum stretching of the baffler. The baffler stretches only to one side in that case. If the user releases the circle not taking him to the middle of the switcher, it gets back to its initial position and pulses. The baffler will just get back to the initial point. If the user takes the circle further than the middle of the switch, it goes to the opposite side, both the circle and baffler pulsing, and the circle changing its image.

 

Animation of the circle movement doesn’t create any problems. This is the standard task which can be solved with UIView animation and CASpringAnimation. However, animation of the baffler is more challenging.

 

In case when animation is done with Core Animation, setting the initial and final path, then the arc performance is unpredictable. In addition, the form of animation can be inappropriate and the problems with color change can raise.

 

In animation, the change should be done discretely. When should it be done? If you do it in advance, then the good point is when path is at its initial stage, which means it features the straight line in the middle of switch. So, you have to create an array with the set of paths and colors and place it into CAKeyframeAnimation. The approach gives the working outcome, still the code will look messy and illegible. Moreover, the circle will need to be moved manually for synchronization.

 

In this case we can use CADisplayLink (timer of screen redrawing) and manipulate with presentationLayer (the copy of the layer which is visible on the screen at the moment). In the method launching CADisplayLink, we will change the path for the buffler. The points which form this path depend on the position of the circle in the switcher. The position of the circle is animated with UIView animation. Therefore, animation with UIView will smoothly change the bearings of the circle layer, while we are changing the path of the buffler on the basis of those bearings.

 

The path for the buffler feature two UIBeziePaths.

 

UI animation code

 

The first one goes from the point 1 to the middle of the circle edge at point 3. Control point for this curve is point 2, it proportionally depends on how far the circle moved out. The second line goes from point 3 to point 5 and its control point is point 4. In this way we can get the line of the buffler edge smoother.

 

The method of forming path for the particular extreme point

 

 

 

The method of animation on tap  

 

 

For reaction on pan we added UIPanGestureRecognizer. Here is the method that processes it

 

 

Welcome to review the GitHub source code for this animation. New cases are coming soon!


Welcome to see designs by Tubik Studio on Dribbble and Behance