What is prototyping?

The term ‘prototype’ is applied the sample model of the product that enables to test it and see if the solutions and decisions made about the product are efficient and working. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to provide a designer, a customer, and a user with the opportunity to check the correctness and appropriateness of the design solutions.

The value of prototypes in the sphere of app and web design has rocketed for the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer, and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings, and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, the prototype will be the great help.

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective, Tubik Studio designers. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX – prototype – UI.

The prototypes on UI stage are created more for presentation of application general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solutions after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

What is the best prototyping tool?

Obviously “the best” is very subjective and too personal. If there were the ideal and perfect tool for anything, for instance, prototyping, people wouldn’t need to make a choice, but still, we have a wide field of options and that’s great.

The list of prototyping tools that designers use for different goals is quite broad. Usually, the choice of the tool and its correspondence depends both on the task and on the preferences of the designer assigned to accomplish it. Designers having tried multiple options mostly mention that various tools have their own benefits and pitfalls. Let’s take a look at the list of some tools enabling us to create interactive prototypes easily and efficiently present them to clients or use in teamwork. Most of them have already become recognized in the field. This is the first set which will be continued and reviewed in more detail in our next posts here.

InVision

UXPin

Framer

Adobe XD

Origami

Axure

Marvel

Mockplus

CanvasFlip

Designers of design agency Tubik, experienced in all diversity of design directions, answer the following way: the best prototyping tool is the one that improves the productivity of the particular design workflow as well as helps to provide efficient and user-friendly final product. Whatever you feel working this way is good for you. Still, even if you are experienced in using a particular prototyping software, trying new tools is a good way to open new horizons and find new ways to enhance creative processes.

One more thing to consider is that new not always means “inexperienced” – vice versa, it can mean “innovative”. So, when you are offered new features for already established flows or new tools with a fresh USP different from the competition, try them before thinking for too long. Modern prototyping tools are offering more and more options and features able to have positive impact on speed and quality of design and development process. Some well-established tools, like InVision, are regularly updated and add great deal of integrations into the software to make it easily combined with other digital products which is highly appreciated in particular for complex multilayered projects. The others add new useful functionality to already expected features, like for example usability analysis as in CanvasFlip, QR-code simplifying the process like Mockplus and so on and so forth.

For those, who want to get dip into the theme of prototyping in UX design and communicate with their mates in the field, we would recommend to take a look to the prototyping community Prototypr which curates and shares the latest updates on the variety of prototyping tools and unites designers actively applying prototyping to create positive and problem-solving UX.

Also, it is advisable to revise the book by UXPin team called The Ultimate Guide to Prototyping in which the authors share the same position on the significance of prototyping in testing usability of design solutions: “Not only do prototypes help provide proof of concept, they, more importantly, expose any usability flaws behind the wireframes and mockups.”

Check out the next posts to see more detailed reviews for the features and functionality of specific tools. Good design day to everyone!

Not any part of the article is advertising, the post offers personal review and opinion of the writer.

Useful Articles

Here’s the set of articles on more aspects and best practices of user experience design.

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

Сообщение Prototyping User Experience. Tools to Try появились сначала на Design4Users.

No doubt, today there are many various publications and online resources providing helpful and informative support for designers and explaining the necessary terms. In our previous articles, we also get involved in this global process while describing practical cases of design. Today we would like to systematize some of the explanations here concentrating on UI/UX design issues enhancing usability and supporting the definitions with the links to the articles where we gave more details on the topic. So, let’s move on!

UX (User Experience)

It is the general attitude and emotional feedback that user has during different stages of using the product. In terms of digital products, such as websites or applications, UX is a comprehensive term involving all the possible stages of user engagement. UX is based on several key factors such as usability, utility, desirability, attractiveness, speed of work, etc. If all the logic and possible issues of product implementation in real life are analyzed and designed properly, it forms a positive user experience which means that users are able to satisfy their needs in a fast, easy, and pleasant way. Positive user experience is one of the strongest factors in retaining users.

UX Wireframing

It is the process of creating the general structure of the designed application or website. It’s usually accomplished via the set of schematic screens or pages of low or middle-level fidelity. The aim of this stage is to set a clear and orderly structure of all the layout, transitions, and interactions on the basis of the user’s problems and pains that the product is going to solve.

In one of our previous articles we provided a bit of metaphor on that. When we think about building a house, for example, we usually mean the process of the physical appearance of the construction rather than tons of projects, drawings, and calculations made on paper. And yes, physically it’s possible to build the house without any project as well as it’s possible to create the interface out of thin air. However, in this case, you shouldn’t be surprised if one day the house will crack and collapse without any visible reasons as well as the app looking amazing and stylish won’t bring you any loyal users. If you want to have a reliable house, a durable mechanism, a powerful application, or a highly-functional website, the recipe is the same – take your time for thorough planning and projecting. This is not going to waste your time, and vice versa, it will save the time you would otherwise have to spend on the redesign and attempts to find out why your product doesn’t work properly.

That is the aim of the UX part of the design process. UX wireframing stage should be heavily based on user research, competition research, and analysis of all the data obtained. In the outcome, it creates a clear scheme whose complexity depends on the product functionality and reflects all the system of transitions and interactions as well as the placement of all the elements of the interface based on their optimal use flow. In some cases, wireframing done in pencil sketching or rough drafts is enough, although preferably it is accomplished with the special tools and software optimizing the design process and increasing performance.

Read more on this topic in our previous article

UI (User Interface)

User Interface is actually a finalized interactive field in which the user interacts with the product. It includes all the tools for increasing usability and satisfying target users’ needs and wishes. All the features of visual perception as well sound and tactile feelings influencing the product use and interaction with it should be analyzed and optimized here to the purpose of the app or a website is designed. For example, such aspects as color palette, types and fonts, shapes and forms, illustration and animation, and so on and so forth are able to affect the performance of the final product greatly in both positive and negative ways.

In general terms, the UX research and wireframing stage are about how the website or application works while UI is about how it looks. Both these stages include work on successful interactions, but UX deals more with logic, connections, and user behavior while the UI stage provides a visual representation of all the concepts. It means that ideally, the designer should first work on the UX part with a concentration on layout, making it more powerful, thought-out, clear, and easy to use. Without this vital work, you highly risk creating a pure mess out of the user interface.

After the UX part is tested by prototype, agreed upon and the concept of layout, transitions and features are accepted, the designer starts the UI design part. This is the time when the newborn heart and brain of your product are clothed with its skin and bones. Here the product gets its real color scheme, forms, and features of the layout details, styles, animated elements, and so on.

All the UI solutions directly influence the positive or negative user experience, so the processes of UX wireframing and UI design should mutually support each other and follow the same strategy otherwise the efficient solutions of one stage will not work in the other.

Here are some fresh UI design examples for different types of products from Tubik Studio portfolio on Dribbble:

Birds of Paradise Encyclopedia

Comics Shop Home Page 

Simple Blog App 

Read more on this topic in our previous article

Prototyping

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analog of the final product as they aren’t those. Their main aim is to enable a designer, a customer, and a user to check the correctness and appropriateness of the design solutions.

The value of prototypes in the sphere of app and web design has rocketed over the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer, and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings, and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, the prototype will be a great help.

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX – prototype – UI.

The prototypes in the UI stage are created more for the presentation of the application’s general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details in the final stage of UI in most cases is not as reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solutions after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

Read more on this topic in our previous article

Icon

An app or desktop icon is an image that has a kind of symbolic and metaphoric potential and becomes the element of navigation in the process of interaction. In deeper explanation, icon is the visual symbol representing some action, thing, person, real or virtual.

In many cases, icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage, therefore, making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.
Read more on this topic in our previous article

Microinteraction

Microinteraction is one particular case of a user’s interaction with the product to complete one particular task. For example, when you press the “like” button (anyhow it looks like) and see that your like has been counted (the number has changed, the button changed the color or became inactive, the copy on the button informed you that you have done the action, the copy under the button or other interactive element informs that you are in the list of those who liked, and so on), that is the case of microinteraction. When you fill in the proper text field with the search request and send it to the system, that is one more case. Microinteractions happen when we follow or unfollow someone on a social network, rate a blog post, or set the timer – hundreds of things we do, in most cases not willing to think over those simple steps too much. Microinteractions in most cases aren’t even consciously fixed by the user – and that is actually one of the important tasks for a designer to make them as natural, clear, and fast as possible.

BuonApp

Read more on this topic in our previous article

The first set of our design glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets. New definitions are coming soon!

Recommended Reading

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation Elements. Set 2

How Human Memory Works: Insights for UX Designers

Visual Hierarchy: How to Organize UI Content

Gestalt Theory for UX Designers: Principle of Similarity

Gestalt Theory for UX Design: Principle of Proximity

Small Item, Big Impact: Types and Functions of UI Icons

Copy Content in User Interfaces

Originally written for Tubik Blog
Welcome to see the designs by Tubik Studio on Dribbble and Behance

Сообщение UI/UX Design Glossary. Key Terms появились сначала на Design4Users.

In one of our previous articles, we have already mentioned the benefits of prototyping for designing a strong and positive user experience and reviewed one of the popular prototyping tools Pixate. Today we are going to continue this conversation by describing the other efficient software for prototyping called InVision.

General description of the tool

InVision is the comprehensive prototyping software supporting the process of designing user interfaces for mobile applications and other sorts of digital interactive products. Now it is one of the major players on the market, perhaps due to constant improvement and extensions of the functionality that the company adds to the product as well as the strong informative support via its Blog which shares diverse cases and articles on design.

The basic idea behind InVision is fast and easy to create a live prototype from static images of any fidelity level. The tool provides the ability to upload wireframes that can be more or less detailed and with the functional facilities of the software they are automatically transformed into the prototype of the app. It is possible to follow the necessary transitions, test the buttons, analyze the layout in the mock-up of the device interface.

Working over numerous projects on UI/UX design for mobile applications here in Tubik, we are usually keen to try different tools and software to increase productivity and – what is more important – efficiency of design workflow and communication with the customers. These are the reasons why the InVision prototyping tool has become popular here in cases of app design. Being simple and clear in its interface, it doesn’t scare clients who can be easily involved in the process; in addition, it provides numerous functions enabling designers to make the process of testing design faster and easier in terms of productive teamwork.

Why should you try prototyping?

As we have already mentioned plenty of times in our earlier blog posts, prototyping is the essential stage of the design process when the user interface for a mobile application or a website is created. Based on our practical experience, we can definitely say that prototyping is the stage when testing can save time, effort, and money.

Let’s see, how the process is going on here in the studio. After setting clear objectives for the product, conducting user and market research, and defining and analyzing the target audience designer starts working on the initial UX design solutions. This is the time when the living organism of the future product gets into its skeleton and all the elements that have to be included started functioning as a united system. The designer thinks over all the layout, forms the group of screens, decides on their functionality and transitions, and thinks over the most efficient variants of placement for interactive elements and CTAs. The result of this process, based on a great deal of thinking and analysis, is initially given out as a system of UX wireframes. This is usually the set of screens done in a limited color palette and its main goal is to set all the logic and functionality of the future application. And this is the high time when the team involved in the design process could apply a prototype to make a full analysis of design solutions before starting the UI design stage.

A lively and clickable prototype tested in the mock-up of an actual device screen you design for is a great and fast way to reveal any sort of problems influencing the usability of the product. It lets all sides of the design process – designers, managers, QA testers, and clients – have actual experience of interaction with the future product, to ensure that there are no missing parts or unnecessary steps in the process, to test if all the elements are logical and placed right.

The great advantage of the InVision tool is that due to its functionality it’s now rather easy to apply the technology of prototyping, in fact, almost at all the stages of the design process as it is not time-consuming to upload the static images of the screens and form the prototype with them. That means that it’s possible to start effective testing from the very first groups of screens to see how they provide the logic of the layout and transitions.

Moreover, in the case of using the tool, it is also possible to test all the UI decisions in the clickable prototype and see them actively used. The designer can apply animation and simulate gestures using tools’ native functionality to make the prototype feel even more realistic and the experience very close to natural.

The power of collaboration

What we especially appreciate about InVision software here in Tubik Studio is its strong and constant support of efficient collaboration in the design process. Knowing that fast feedback from the client is a vital feature of the effective and productive design workflow, the creators of this tool made it convenient and clear not only for designers and project managers who are usually fast in dealing with different tools and soft but also for those customers who are not really avid software users and it takes some effort for them to deal with the new tool. InVision has good navigation and is user-friendly for different types of users.

The tool enables creators to get a clickable prototype and at the same time to communicate on every smallest part of it. That means clients are able to set their feedback not only to a particular screen but even to a particular element of the screen such as a button or toggle, shade or shape, piece of copy, or graphic icon – anything. It provides the functionality of multiple threads and therefore designers, managers, and clients can discuss particular elements quickly and set a more productive workflow together.

Additional features

Except for the general functionality of the prototyping process, some important additional features of the tool should be also mentioned:

• Easy and fast integration with other design tools for efficient work, such as Sketch or Photoshop, for example, from which the wireframes can be directly uploaded to InVision.
• Supporting cross-platform experience: the tool provides the ability to set sizes and resolutions of different devices you design for. This feature is highly applicable in the process of responsive design and mobile adaptations.
• Easy control and marking of project statuses for efficient project management.
• Functionality for creating and presenting mood boards, brand boards, galleries, and style guides.
• Tools for direct live communication right from the project account. Especially appreciated by the teams working remotely.
• Saving versions history to easily compare several versions of design solutions.
• Diverse functions and features for creating high-fidelity prototypes that can be used for user testing before the stage of development.

So, the software has shown itself as an important tool for improving teamwork and the process of testing design solutions as well as tight collaboration with the customers. Those positions are among the key points of an efficient design process providing thought-out, high-quality, and user-friendly designs.

Originally written for Tubik Blog

Сообщение Design Tool Review: InVision появились сначала на Design4Users.