June 24, 2017
Prototyping tools are essential tools for every UI and UX designer. After designing the interface for an app or website, designers can quickly create a mockup and validate their design using a prototyping tool. Uploading screens on this tool helps them create hotspots to link screens, assign interactions and check the overall flow of the product. Several prototyping tools are available online. Invision, Marvel, Proto.IO and Canvas Flip are some of the popular tools for such tasks.
Let us talk about Canvas Flip. It is not a regular prototyping tool. It comes bundled with useful analytical tools also which aid in designing a better user experience be it apps or websites. Despite its unique features Canvas Flip does come with a few shortcomings which we will be discussing ahead.
When we log into Canvas Flip, the interface is divided into 2 segments. The First segment is where screens are uploaded and gestures and transitions are assigned. This is where all the prototyping takes place.
“The first segment is where prototyping takes place”
Screens are uploaded and hotspots are created by dragging a wire onto the subsequent screen from the right half of the interface which displays the current active screen to left half of the interface which displays all the uploaded screens. Next we set transition and gestures. At this point users can also add a comment to the screen where required. These are useful in a multi-collaborative environment. Once all the screens have been linked and all transitions and gestures have been assigned, the preview button on the top right corner helps view the entire product and make changes if necessary.
“The second segment provides User Analytical Tools.”
These are Conversion Funnel, HeatMap, User Testing Videos.
1. Conversion Funnel — Conversion funnel is a cumulative step by step conversion analysis on the prototype. Each screen is mapped with total sessions and the number of drop-offs. This is key information as it lets know which screens are not quite working well. Based on this feedback, designer can iterate their designs fixing the issues.
2. Heat Map — This tool helps to identify which areas in a design are most engaging for a user and give deep insights into the most clicked/tapped parts of an interface.From red being the most interactive area to blue being the least, get the complete visual hierarchy of interactions the users performed.
3. User Testing Video — Records and replays every touchpoint of the user with the prototype. These videos help get into the user’s mind and see their perspective while using the product, how they move through pages and which are the areas that create a roadblock. This helps identify key problem areas in a design. Designers can then make any changes if necessary.
Now since we know the tool, we can discuss its shortfalls so we can suggest possible improvements.
First Segment
Creating Hotspots by linking screens with a wire across the screen is a poor and unconventional method of linking screens. There is too much cognitive load on the user. The left side of the screen shows the uploaded designed screens and the right side the current active screen. This kind of a setup forces too much information for the user to
absorb at once and moreover creates a mess of the entire interface. At this stage there are several steps to be completed by the user in order to just connect two screens. The user has to create an on screen hotspot, choose the subsequent screen and set transitions all at once. Imagine the chaotic interface and all these tasks to be done.
While working, the current active screen does not show the full screen. This makes it inconvenient for designers to work. An entire screen view makes it easy to view all assets and create hotspot wherever necessary.
A circle present on the right corner of all the screens is always visible. This circle tends to create confusion and makes it difficult to view all the assets in a screen.
When adding comments to a screen, there is no way to cancel a comment or go back.
Comments are important when we work in a collaborative team environment. However, having a troublesome experience of not being able to cancel the comments or go back makes the users not want to use such an important feature at all.
Second Segment
Moving on to the User Analytical Dashboard . This dashboard doesn’t really display information clearly. This is the most critical part of the User Analytical Tool yet fails to do justice. Also,There is a sudden appearance of a side menu bar. This disorients the user from the previous navigation structure followed.
The conversion funnel is a very useful tool, but fails to communicate with the users. This is the kind of information users rely on to validate the efficiency of their product.
Missing out on this key information is a big disadvantage.
The HeatMap section again fails to be useful providing less to no information regarding it. When there is no clarity it creates a heavy disconnect with the users.
We have identified a few core issues that should be improved to enhance Canvas Flip’s UX.
1. The visual language of the interface is not at par with other products currently available. This makes it rather unsuccessful in absorbing users and fails to acquire a place in the international market. Why would a user get pulled to such an interface?
2. The hierarchy in the application is not set, which makes it all the more difficult for a user to navigate through the application efficiently.
3. Canvas Flip’s user analytic tool is very powerful and no other product in the same segment feature it. However, here it fails to communicate and provide clear information making such a useful tool go to waste.
4. There are several contextual issues throughout the application which makes it difficult for the users to comprehend and carry out actions.
5. The overall interface of the Canvas Flip lacks the basic design principles due to its cluttered appearance and functionality.
To be able to cater to the design community who are well aware and sensitive to international design standards, Canvas Flip needs to be evolutionary, alleviated to a whole new level having a more enriched, vibrant and edgy visual language and holistic experience.
In Order to achieve this here are a few considerations that are critical in addressing the issues
Curb Distraction — An effective design allows people to focus on the task at hand without diverting their attention to less critical tasks. The idea of multitasking creates a confused state for the user.
Hierarchy — Building a hierarchy helps place related tasks within reach. The prioritization of information and functionality should be close to the real world scenarios. Don’t make the most commonly used items the furthest out of reach.
Context — When you communicate how everything interrelates people are much more likely to understand the importance of what they’re looking at. Ensure that the design is self-contained and doesn’t break people out of the experience except for when it’s entirely necessary to communicate purpose.
Consistency — In an effort to provide a quality experience to users, it’s necessary to be consistent in the design and content . Consistency implies stability and people always want to feel like they’re in good hands. A harmonious user experience separates an amateur from a professional.
Grouping — Related actions need to be grouped together. The user should not jump around the space to complete a given task. The design should be thoughtfully organized with related features and content areas appropriately kept together.
Less is More — It is important to make sure that everything in the design has a purpose. While some aspects are purely functional, others are purely aesthetic. Once the design is reduced to the necessary fundamentals people will find it much easier to draw themselves to the white space.
Creating a UI Framework in place helps establish key elements of the interface.
Addressing Core UX problems will help define a more refined structure to the application and create an efficient and easy workflow. With this users can easily navigate through and accomplish their tasks.
If we establish concrete and consistent UI elements with typography, visual language and color palette, it will help set a new visual Language for Canvas Flip in place. This will enhance their recall value and pull more user base.
Finally with new UI Elements and a proper information architecture in place, Canvas flip will have a defined design language. Having one design language through the product shows consistency which encourages users to engage with the product.
Matching the prior experience of users enables quick on-boarding. Also it helps them understand and get accustomed to the product easily.
By maintaining consistency throughout the product in terms of typography, UI Elements and color palette, users know what to expect and have a seamless experience. This encourages them to trust the product and explore it further.
The range of options available to a user at a single point should only be the essential ones. This helps users to stay in focus and complete the task at hand without confusion.
Users should not be bombarded with information. This put a cognitive load on them. Progressive disclosure of information helps them comprehend easily.
Errors cases should be taken into account. Can the user be limited to actions in order to prevent an error. If an error is made, how can the user recover from it. These important considerations help in improving the user experience of the product.
Affordances inform users of how to use a particular function. This helps them well understand the functioning of the product.
The hierarchy of the product should be very clear and apparent. This in turn maps a seamless flow of the product for the user.
Prototyping Tools should be very intuitive enabling users to quickly get onboard. This empowers them to quickly prototype by uploading screens and assigning interactions without any hindrance. Just remember great products render great experiences.
Written By
Keep on Reading
June 24, 2017
October 12, 2017
November 17, 2017
Connect with us to discuss your ideas for the next big product.
.svg)