Tag: ux

Bad UX. 7 actual designer’s
mistakes in 2020

Bad UX. 7 actual designer's mistakes in 2020

When you start in the web design and software industry, you might forget the end game. You are designing a product for the end-users who you don’t know. But it is important to look at your designs from the perspective of another potential visitor, or rather a stranger. This will help you see things that you might fail to see while creating the design. It will help you create a completely different approach that will be more focused on the end-user perspective. The mission of a web designer is to create an engaging experience that will help the target audience in getting what they are looking for. During this process, the designers mostly focus on aesthetics and they end up following a generalistic design trend or pattern. Once you get distracted by the common UX design trends, you are sure to make mistakes. The reason is, most of the common UX design trends are inappropriately deployed. 

When it comes to web designing, we do not want to learn things; we just want to do things. Most of the web designers focus on the visual appeal and they end up sacrificing usability. They presume that a “wow” moment is powerful enough to engage the user for a long time. As a UX designer, it is imperative to remember that if the users have a hard time understanding the UI, then the website will have a skyrocketing bounce rate. According to a quote made by Kate Runner, “ugly but useful trumps the pretty but pointless”, thus, the key is to create the right design that will have a balance so that it not only looks aesthetically pleasing but it also adds value. That being said let us have a look at the actual designers’ mistakes in 2020. 

1. Large, fixed headers – a strict no

The first mistake that most of the web designers make is creating large and fixed headers. More and more tall sticky headers are seen on websites. Navigation menus with a fixed position and “branding blocks” take up a lot of space. They stick to the top of the browser window and then block the content as it scrolls below them. There are some headers on the big-brand websites and those are more than 150 pixels in height. This is not necessary. The fixed elements like sticky headers will have real benefits, but web designers need to be careful while using them. 

If you have plans to opt for the sticky nav header, then it is better to test with few users. A common mistake is to go overboard with the sticky nav header with the content. With a fixed header, the browsing will be comfortable for the visitors. If you cannot find the right balance, it might result in leaving a small amount of room for the main content, thus, resulting in claustrophobic site experience. Sometimes with a simple workaround in CSS, you can make the sticky header a little bit more transparent. People will be able to see the content as they scroll and this makes the content area feel more substantial. 

There is no doubt that a lot of users will be checking the website through their mobile devices. Thus, instead of a fixed header, it is better to opt for responsive design techniques. It will help you in designing different solutions for different platforms. 

2. Get rid of the thin/light fonts

Bad UX. 7 actual designer's mistakes in 2020

At present, the light fonts are in trend in most of the websites and mobile applications. With advanced screen technology and enhanced rendering, a lot of designers are choosing light fonts. Yes, they are elegant, trendy and clean. But the thin typefaces will cause usability issues and hamper the UX. The end goal of all text present on a website is to be legible and the thin type will affect the readability. Not all visitors will check the website on a display where the light fonts will be prominently visible. Some light fonts are challenging to read on an iPhone or an iPad that comes with a retina display. 

Thin and light fonts indeed look trendy. But they should not only look good. The text should be legible as well. For the proper contrast and legibility, the designers need to focus on offering better combinations in design, size, weight, and color. It will be good if you can test the legibility of the fonts on different devices and screen sizes. Thin and light fonts might look good on expensive devices. But you need to remember that most of the end-users make use of standard monitors/devices that have substandard displays. Thus, the best practice is to check how the fonts look on major devices like laptops, desktops, iPhones and Android smartphones.

3. Scroll hijacking

Another trending factor in web designing is, “scroll hijacking”. The websites that use scroll hijacking will take control of the page scrolling feature (mostly with JavaScript). When people get into those websites, they cannot control the scroll functionality anymore. Thus, they are not able to predict the behavior of the website. This leads to frustration. It is a risky experiment that could hurt the website usability and induce “computer rage”. Yes, some websites can get away with scroll hijacking, but that doesn’t mean every website can. 

A lot of websites try to follow Apple’s concept of scroll hijacking, high-resolution images of different products and parallax effects. Remember that Apple has its target audience, a unique concept and exclusive content for the audience. Similarly, every website has got its unique target audience, its unique issues and they require tailored solutions that cater to those issues. While borrowing trendy UI patterns, the best idea is to create a prototype website or mobile application and test it on real-world users for avoiding any UX issues. A simple usability test will determine whether the implementation of a scroll hijack is feasible or not.

4. Do not opt for Carousels

Bad UX. 7 actual designer's mistakes in 2020

Carousels are a slideshow that offers a variety of rotating content. This is a very common feature on the web. Some of the smartphones offer carousels as well. Yes, they can be useful at times, but carousels have multiple usability issues. According to Nielsen Norman Group, a lot of people immediately scroll down the large images and miss the information. It negatively impacts the UX because visitors will not see the valuable content in the rotating slides.

If you want to implement carousels, then do not just use it for decoration. Most of the times there are no arrows for controlling the carousels. They come with slide indicator dots. Thus, they have low discoverability, low contrast and lack a “large-enough” tappable area. The small clickable targets lead to poor UX and a website visitor will quickly exit from the website. If done in the right way, a carousel can engage users because of the striking images. The thing is, you have to make the indicators prominent and create labels to signify what the images represent. Also, if the images can have clickable links instead of being there for pure decoration, then it will be more engaging.

5. Poorly designed CTA (call to action) buttons

A call to action button can make or break any conversions on the website. It is extremely crucial. A lot of designers make the mistake of not bothering about the CTA buttons. Thus, it doesn’t influence the user in taking the final action. Also, it is important to place the CTA buttons in a place where it is visible for the users. A properly designed call to action button will drive the visitors to perform the final purchase. Thus, a designer should not be reluctant about a well-designed call to action button.

6. Slow website load time

There is a difference between a “well-designed” website and an “optimally designed” website. A website might look beautiful but it doesn’t matter if it takes too long to load. If your website is taking more than 3 seconds to load then it is not optimally designed. Users these days are not patient enough to wait for more than 3 seconds for a website to load. According to Google, 53% of the visitors leave a website if it takes more than 3 seconds to load. Thus, make sure that too many design elements are not making the website slow.

7. No properly designed website for mobile

Nowadays it is very important to have a mobile-friendly website. People these days mostly use their mobiles to browse the internet. If your website is not customized to be mobile-friendly, then you are missing out on a majority of your target audience. To reap the benefits from the huge market of mobile users, it is imperative to offer a seamless end-user experience on mobile devices. 

Read more

6 Hacks for Creating a Flowchart
for Exceptional UX.

6 Hacks for Creating a Flowchart for Exceptional UX

If there’s one challenge every business faces, apart from customer acquisition, it’s creating user experiences (UX) that lead to purchases and customer retention. While there are many strategies you can use to achieve that, one of the most important is a simple two-word concept.

Flowchart.

Whether it’s a website or app, it takes good flowchart to create an exceptional UX. A UX that will keep users fulfilling the goal of your website (or app) and even coming back for more.

What is Flowchart?

In it’s simplest form, flowchart is a visualization of the journey a website or app user will have to take to complete a certain action. 

Flowchart example

A flowchart breaks the journey down into simple steps, allowing the design team to better reduce any friction the user may encounter at each step by creating the most efficient route to the finish line.

5 Effective Hacks to Creating a Good Flowchart.

Now that you understand what flowchart is and its importance, let’s quickly look at 5 hacks to creating a flowchart that results in exceptional UX.

1. Answer the Right Questions.

One of the first steps in designing an effective flowchart is to answer the right questions – questions that will help you create the perfect journey for users. Typical examples of questions you can ask include (but are not limited to):

  • What is the end goal?
  • How is the user supposed to accomplish it?
  • What elements can you include to give them the confidence to see the journey through?
  • What barriers need to be eliminated to reduce friction?

Answering these questions correctly will help you lay a perfect foundation for your flowchart. It will also help you discover unique approaches that you can take to differentiate yourself.

2. Understand All Your Entry Points. 

An entry point simply means the “doorway” to your website. Examples include:

  • Landing pages
  • Social media posts
  • Email
  • Search results on Google

Understanding these entry points is critical to designing a great flowchart. This is because each entry point essentially means starting the buyer journey from a different level. As such, in order to create fluid flowchart, you will have to understand every entry point and how to ensure that each user transitions into the customer journey smoothly.  

Another reason to consider entry points is that some users may be first-time visitors while others are recurring customers. You’ll have to create personalized journeys for each group to ensure that they have a smooth flowchart. Understanding the various entry points will help you do just that.

3. Create User Personas.

A user persona is simply a representation of the different types of users who use your platform. Understanding each persona that visits your website or app is crucial to understand what they are looking for and how they want to achieve it. This knowledge will help you understand the elements in your design that your users will find necessary and those that are redundant.

User Personas Example

While creating flowcharts for multiple personas may seem like a daunting task, it’s actually easy with our User Flow Tool. Creating flowcharts for each different persona will greatly improve your UX and, ultimately, increase conversions.

4. Minimize the Steps Users Have to Take.

No matter how beautiful your website design is or how irresistible your product may be, a flowchart with unnecessarily too many steps will discourage some users. This is why, when designing your flowchart, try as much as possible to keep the number of steps to a bare minimum.

Every step a customer has to take requires more effort, thereby increasing friction.

Two simple tips for cutting down the amount of work a user needs to do before reaching the finish line are:

  • Only ask for the most important information
  • Auto-populate as many fields as you possibly can

Reducing the number of steps required will ensure that users remain engaged throughout the process.

5. Incorporate Visual Feedback.

When people navigate through your system, one thing they’ll always look for is feedback. Each step on their journey must be accompanied by a visual (or audio for the visually impaired) response. Good examples of feedback that improves UX include:

  • Pop-ups. Affirm a user’s actions and encourage them to take the next step by using popups. These also work well in letting users know that their input has been recorded.
  • Progress bars. By letting users know how much they have progressed on their journey (and how much of the journey is left) is a great way to keep users engaged. It also encourages them to complete all the steps as they know exactly where they are on the journey.

Feedback is crucial to flowchart as it helps encourage users to take the next step. Without feedback, users may hesitate (this is a form of friction), repeat the same action (leading to frustration) or drop off altogether due to uncertainty.

6. Don’t Ignore Heuristics.

Heuristics simply means the rule of thumbs in designing a user-friendly system. While it is tempting to be innovative and break the norm, sticking to flowchart and usability best practices is the surest way to provide users with an exceptional UX. A few heuristic factors to keep in mind as you design your flowchart include:

  • Error prevention. Eliminate error-prone conditions or provide users with a confirmation option before they go ahead with such a step.
  • Easy user control. Users need to feel in control all the time. And when they make a mistake, make it easy for them to go back to the previous step.
  • Consistency. Never use the same word or visual elements to mean 2 different things. The use of any one element should be consistent throughout.
  • Keep designs simple. A simple design or UI is the best gift you can give your users. This is because it will save them the time they’d otherwise spend trying to figure your system out.

When it comes to UX, you don’t need to reinvent the wheel. Stick to the best practices and you’re bound to make life easier for your users – thereby eliminating friction.

Bonus Flowchart Hacks for Exceptional UX.

Creating a flowchart that results in an exceptional UX takes a lot of strategic planning and combining of different elements.

  • Label all interactive elements clearly. UI elements such as links and buttons should be clearly labeled is such a way that users will know exactly what will happen when they interact with them.
  • Test your flowchart. Before launching, make sure everything flows smoothly by rigorously testing your flowchart. This will help save you and your users from some nasty surprises.
  • Keep users focused. Eliminate all distractions and unnecessary elements in your UI. Only use elements that will help the user achieve their goal and give them a great experience while doing so.

Giving users an experience to remember is critical in this day and age – after all, you’re not their only option. Because of this, do everything it takes to design an exceptional flowcharts that will help you nail your UX.

Creating Effective Flowcharts – The Key for Creating an Exceptional UX

With the competition to attract and retain customers becoming fiercer by the day, you have to pull all the stops to ensure your system succeeds in its purpose. To do that, you have to nail your flowchart as it determines the experience users will have. And as you well know, in today’s world UX is everything. Give users a great experience and you can bank on them being hooked. 

Author Bio:

Shahid Abbasi is a growth marketer and CRO specialist at Cruzine. He helps individuals and agencies in digital transformation by improving their products’ user experience, bringing them traffic, sales, and revenue growth. He blogs about SEO and content marketing and marketing on Marketer Search. Connect with him on Twitter @ShahidAbbasy.

Read more

Review. 5 Best Books for UX Designers in 2020

hero

“Design is the process of going from an existing condition to a preferred one,” remarked National Medal of Arts 2010 Award Winner, Milton Glaser.

At the close of the decade, I hope you had penned down as many new year- or new decade- resolutions as I had, and all the accompanying steps we would need to take to get there. A particularly helpful routine I make each year is to set out to complete a number of books that could best guide my goals for the year. In this article, I share five best books for UX designers, and aspiring designers, alike.

Don’t Make Me Think! A Common Sense Approach to Web Usability – Steve Krug 

Don’t Make Me Think! A Common Sense Approach to Web Usability emphasises the importance of technology that is intuitive. 

Steve Krug is a UX professional who provides consulting services and holds workshops to train individuals and corporates. In this bestseller, he writes about human-computer interaction. To Krug, technology serves to expedite or accomplish the necessary jobs as simply and effectively as possible. The key idea is that designs should be created with the aim of building an intuitive experience where users would not have to think about how the interface works. Good design is where users would naturally navigate around the web, and do not have to unnecessarily spend time figuring out where they could find the general functions. The considerations of the user experience are essential to ensure that features and functionalities do not necessitate a process too cumbersome or too complicated, that makes it no longer worthwhile.  

I also appreciate Krug’s concise writing that underscores his argument of the value of brevity. In 2020, with all its hustle and bustle, Don’t Make Me Think! reminds us of our world that would not stop talking, and the simplicity that users increasingly crave. 

The Best Interface Is No Interface: The Simple Path to Brilliant Technology – Golden Krishna

A senior UX designer at Zappos Labs, and formerly at Samsun Innovation Lab, Golden Krishna seeks to imagine, design, and build the future of technology. 

In his critique of the overwhelming usage of gadgets and screens becoming only more and more pronounced, Krishna lamented the current situation where six words, ‘There is an App for that’, have become the unsurprising response to any situation. 

For UX designers, Krishna brings to the table the importance of questioning the purpose behind the work that we do, homing in on the theme of usability. He takes considerations of user experience a step further by questioning if there is even a need for the gadget at all, in our screen-obsessed world. Krishna criticises the kneejerk response of ‘slapping an interface’ on any problem faced. In The Best Interface Is No Interface: The Simple Path to Brilliant Technology, Krishna argues for UX designers to consider strategic and thoughtful solutions. The course of action that would be most natural and straightforward should be taken into account. 

With the surging aversion to screens in this digital age, Krishna argues that the preferred solution could very well be screenless, rather than to mindlessly turn to the perceived panacea of the day: Apps.

SPRINT: How to Solve Big Problems and Test New Ideas in Just Five Days: Jake Knapp

A useful guide that draws out a clear (and speedy!) roadmap is Jake Knapp’s SPRINT: How to Solve Big Problems and Test New Ideas in Just Five Days

Invented by Jake Knapp at Google Ventures, the design sprint is a five-day process using design, prototypes, and user testing. While a mere five days seems a tall order, Knapp introduces the design sprint that combines key ideas from behaviour science, design thinking, business strategy, and business innovation to present a succinct Do-It-Yourself guide. The design sprint aims to solve even the big problems, and provides a strategy to test out new ideas, by building and refining the designer’s ideas. This formula saves the individual, whether from a start-up or at a large corporation, time and money as it encourages quick prototyping and user testing.   

For beginners seeking to understand the environment of UX design, or professionals discouraged by hurdles that seem too high or too frequent, Knapp discusses detailed steps to support you in this journey. Begin today!

The Non-Designer’s Design Book – Robin Williams

A writer, designer, and producer of over seventy books in the field of Information Technology, Robin Willians has taught thousands to better appreciate the digital world that we live in. 

Williams advocates the use of four – just four! – surprisingly simple principles for every aspiring designer to understand what makes a good design and typography.  Through this non-intimidating and easy to read guide, The Non-Designer’s Design Book offers fast and concise design help.

For those of us starting out new and preferring a step-by-step manual, Williams even includes quizzes, and projects for every layperson to try their hand at training their Designer Eye. Written without confusing jargon to cater for beginners, and with illustrations included, this book is an easy and enjoyable read.

Definitely a practical, handy, and humorous guide to have under every UX designers’ belt!

Inclusive Design for a Digital World: Designing with Accessibility in Mind (Design Thinking) – Regine M Gilbert

To close, a key consideration for every UX designer should be the value of inclusive design. Inclusivity should take pride of place in our rapidly changing environment. As former processes are revamped and digitised, it is important we honestly question the integrity of our products to ensure that the products we make do not intentionally or insidiously widen the enduring inequalities in society. Design is a double-edged sword! Careless design could segregate communities or reinforce existing segregations. 

UX professor and author Regine Gilbert brings to the fore the primary consideration of accessibility. She asserts that designers must have in mind as many different users as possible, such that the product is accessible. While the concept of accessibility was previously constrained to our physical landscape, Gilbert emphasises the need to carry this consideration to our increasingly digitised world. 

Specifically, Gilbert confronts numerous ways technology has now marginalised groups of the community. This ranges from the obvious cases of a lack of inclusivity or consideration such as tiny font that cannot be easily enlarged, to even the usage of emojis, that would prove difficult for the visually impaired. In Inclusive Design for a Digital World: Designing with Accessibility in Mind, she suggests step-by-step design solutions that could be taken to address the myriad of unintended backlash that has been created. 

As UX designers around the world continue to hone their creativity and expertise, let us not forget to also work on our sensitivity. In this world, there are many groups of people less privileged. As UX designers, we have the responsibility to take due diligence in creating inclusive design, and have the ability to influence the products we build.


With that, I share a personal reminder of the proverbial shoulder of giants, as poetically put by renowned scientist and astronomer, Isaac Newton:

“If I have seen farther than others, it is by standing upon the shoulders of giants.”

May these books provide insights and strategies to support you along your UX journey in 2020. 

Read more

User Flow based on Flowchart. Principles and tools

User Flow based on Flowchart. Principles and tools

Contents:

General specification of User Flow Diagram.

1.1. What is User Flow?
1.2. Flowchart, application in practice.
1.3. User Flow Diagram designing principles.
1.4. The diversity of User Flow Diagram usage.

Analysis of tools on a practical case.

2.1. Description of the case
2.2. Defining comparison criteria
2.3. Step-by-step tool comparison

What is User Flow?

User Flow is basically a version of a classic Flowchart that is adapted for modern tasks of any UX – specialist. The most popular definition of Flowchart is as follows:
A flowchart is the graphical or pictorial representation of an algorithm in the form of blocks (graphic symbols) that are interconnected with the help of transition lines (communicators), each of which corresponds to one step of the algorithm. For the convenience of reading the Flowchart, there is a description of the corresponding action inside the block or next to it.

Flowchart, application in practice

Flowcharts are applied in different fields of activity. For example, they are used in programming and process documentation for more than a decade. Like other diagrams, Flowcharts are used to visualize the processes in order to find out their non-obvious features and hidden flaws.

User Flow Diagram designing principles

Currently there are no particular set of rules regulating the work with the User Flow Diagram. However, the Diagram inherits key features of the Flowchart. Because of this, there is an unwritten rule in a professional environment – to use the principles of classic Flowchart designing when creating User Flow Diagrams. Flowchart, in its classic sense, is widely used nowadays, and the decades of diagram usage make it easy and understandable for everyone. Therefore, it is the one of the easiest ways to present your idea to a Client or developer.
The key principles of using the most popular Flowchart elements are given in the following table:

flowchart definition

The diversity of User Flow Diagram usage

Each new product begins with its conceptualization. Following this logic, the User Flow Diagram is the way to understand the product through the eyes of the user.
Despite the fact that User Flow is a tool the actions of which are not limited to the first stages of design-thinking, the User Flow methodology should be implemented in the project as soon as possible. Such advice is due to a rational desire to reduce development costs by identifying errors during design process. However, if for some reason the Diagram was not made at the very beginning, it still needs to be constructed. The diversity of User Flow allows you to implement the methodology at any stage of product development. No matter which stage of development you are at – the User Flow Diagram is still the easiest and cheapest way to identify errors in your project.

Description of the case

In this section we will compare the performance of several tools that are used to design User Flow. But before we begin, you need to examine the case that will be used for comparison.

The diagram shows a scenario where the entry point is “the user who heard about the application from his friend, who has motivated him to install it”. As the diagram shows, he had downloaded a mobile application to his device and completed the registration, and then made the first purchase in an online store and arranged a delivery. Because of the diagram, we can easily trace and analyze the entire user route, evaluate the conditions the user is faced with and plan user’s decisions, in order to bring him to the final goal as quick and easy as possible, providing a good UX.

Defining comparison criteria

I used the diagram reviewed above to compare between four tools that are used to design the User Flow – FlowMapp, Whimsical, Miro and Lucidchart. From my point of view, the complexity of the considered diagram is optimal for the comparison, since the potential of its designing requires the UX-specialist to implement the User Flow. You can see the final outcome of each tool on the corresponding links: FlowMapp, Whimsical, Miro, Lucidchart.
The following comparison criteria were defined:
Dashboard, Workflow and Pricing. The criteria were not chosen randomly, each of them may be decisive in the matter of subscription. Dashboard is the foundation of convenient management of a large number of projects, and the basis of clear service navigation. Workflow should be thought out by the developers and provide a convenient model of user-service interaction. Pricing is the most ambiguous criterion, and we will do our best to choose the best service for each particular situation.

Top flowchart tools comparison

Dashboard

The logic of dashboard organization dashboards in the reviewed services can be divided into two types. Lucidchart and Whimsical display all the previously created diagrams in one window and provide an opportunity to create a new one by selecting its type in the top panel.

Whimsical dashboard
Lucidchart dashboard
Lucidchart dashboard

FlowMapp and Miro use a different model of organizing the diagrams you have created. The diagrams here are distributed by “Projects” in FlowMapp and “Board” in Miro.

Miro dashboard
Flowmapp dashboard
Flowmapp dashboard

It should be noted that it is also possible to group the created diagrams in Whimsical, further distributing them into groups, which is not possible in Lucidchart. Taking into account the fact that one Flowchart is often not enough within a project, the Lucidchart’s dashboard interface looks unreasoned, overloaded and may complicate the navigation process within long-term and extensive projects. Distribution by projects in FlowMapp, Miro and Whimsical, on the other hand, makes navigation quick and easy.

Workflow

Considering the workflow of a particular tool, it should be taken into account that many users are looking for a service to create a Flowchart as an alternative to Sketch or Figma, where it is difficult to edit a large diagram or there is no possibility to work as a team. If you ever tried to create a Flowchart in one of these tools, you must have noticed that these very popular graphic editors are not suitable for such a task. Most of the functionality of the above mentioned graphic editors is useless, and the format of free transformation of objects on artboard increases the amount of work, forcing you to concentrate on trivial things like lines alignment, elements dragging and form editing. Using Sketch or Figma, we are faced with the same problems when we also want to edit a diagram, which we have to do quite often.

Miro

This is a good tool that can help you solve a lot of problems, but, unfortunately, is not suitable for professional work with Flowchart. The main problem of Miro is the logic on which the UX tool is built. Miro is a “whiteboard” which has several templates, including Flowchart, on the basis of which the User Flow can be created. The whiteboard principle in its essence does not provide an alternative to overloaded graphics editors like Sketch and Figma, forcing the user to face the same problems like resizing, elements positioning. It causes endless cleaning up processes, contributes to procrastination, and takes a lot of time. Also, a large number of templates and functions may scare a new user, despite the generally modern UI.

Miro workflow
Miro workflow

Whimsical

This is a simplified RTB – just as much as needed. Despite the fact that Whimsical adopts the main disadvantage of RTB – the principle of constructing a diagram on the “whiteboard” basis, it is pleasant to see how they make a good product. Whimsical’s well-turned decision is that they disposed of all the useless functionality that the RTB is filled with, leaving only the essential functions. Useful functionality, hotkeys, and, without a doubt, a good UI make this tool suitable for professional usage. One of the drawbacks is the poor logic of connectors binding and their weak customization.

Whimsical workflow
Whimsical workflow

Lucidchart

Among the tools reviewed by this article, this one is the oldest. Having a huge experience, Lucidchart undoubtedly had the opportunity to make a good product, but, unfortunately, they did not take advantage of this opportunity. Lucidchart is hard to work with. It is very slow; the interface is overloaded in the best traditions of mid-2000s Microsoft Office suite. Among other things, there are no basic tools; even the element transformation tool is missing. And of course, as with all the services that are built on the basis of a “whiteboard” it is inconvenient to unite connectors, the customization is poor and there is also the lack of connecting elements. Lucidchart is unable to compete with non-professional tools like RTB, nor with the graphic editors mentioned earlier.

Lucidchart workflow
Lucidchart workflow

FlowMapp

The logic of FlowMapp operation is fundamentally different from all the tools analyzed above. Unlike other tools, FlowMapp has a number of restrictions. These restrictions are designed to help you focus on your creative work. On FlowMapp, elements and lines are automatically drawn and connected in the right places of the grid, providing you with a flawlessly clean scheme. FlowMapp has a very simple, effective and intuitive interface that provides the user with all the necessary information. The creation of elements does not force you to do anything unnecessary, due to the automatic positioning of blocks on the grid. If you hover the cursor over any empty space, you are immediately prompted to create a new element that you can easily move around the grid or transform. You can also customize connectors and linking elements with ease.

FlowMapp workflow
FlowMapp workflow

Pricing

Before you subscribe to one of the tools, it is vital to estimate the amount of work that needs to be done. If you need a Diagram in order to structure your idea, and plan to use it as some sort of alternative to Mind map, then you can use any service from this list. In this case, each service provides a Free-account that will allow you to create at least one project for free. Keep in mind, that Lucidchart has a limit on the number of elements created inside the Diagram.
If you need to create a full-fledged User Flow and you plan to continue working on it as a team or if you have to show it to the Client, and most importantly, if you want to transform it and approve edits, you should definitely look towards FlowMapp and Whimsical. The minimum subscription price for Whimsical is $12. Once purchased, you will be able to create Flowchart, Wireframe, Stickynotes, and Mind map. In the case of FlowMapp – only $12,75 for a Pro account. It is the minimum entry threshold that will provide you with a professional tool, the functions of which are not limited to Diagram creation. The FlowMapp will help you create a visual Sitemap, each page of which will have a chat, structure and description of the page. There is also the ability to attach files and links. All this combined allows you to structure communication with your team and the Client by context, as well as store the source code of the project in one place, eliminating the need to pay for a Dropbox or any other cloud storage.
The minimum subscription price for one people on team for Miro is 10$. A Lucidchart Pro account will cost you $11.95 per month.

In conclusion

Apparently, every good product started with the right approach to its design. Flowchart is a tool that had passed the test of time. The experience of using this tool for decade proves its effectiveness in designing new products and upgrading already existing ones. As seen from this article, there are a lot of modern tools that allow you to create Diagrams and work on them as a team. The usage of web-based tools that are meant to create a User Flow significantly reduces the amount of time spent on the Diagram creation; it also allows you to detect and eliminate possible errors in the process of design, and ultimately it helps to reduce the costs when it comes to product development and elaboration.

Read more

10 Steps That Will Improve The Structure of Your Website

10 Steps That Will Improve The Structure of Your Website

It is not enough to just create a website and have content on it. Its structure is another significant thing you have to take into account. It is the way that the various pages on your site link with each other. If your website has a well-designed structure, you will get better user experience, higher ranks on search engines, as well as better navigation. It is what will determine whether a visitor will want to explore deeper or abandon the page. Here are 10 steps that will improve the structure of your website and drive more traffic and conversions.

1. Understand your business

You might already think that you know all there is to know about your business. However, when consulting with your website designer to come up with a good structure for your business, you will have to identify some key elements of your business. For instance, the industry it is in, your competition, what you are offering, as well as how much you will be selling them. With this information, you will be able to determine what you need to do to make your website stand out from the rest.

2. Do some research on keywords

Now that you know what business you are in, your next step is to find out what keywords you will need to use to make your website easier to find on search engines. You will need to understand who your customers are, what they need, as well as what they want to achieve. Compile a list of phrases and words they can use to find your site. You will need to update your keywords regularly to ensure that your content remains relevant.

3. Conduct a competition analysis

Similar to keyword research, you will need to identify who your competitors are and what keywords they use to drive traffic to their site. Take the list of words you found and check which businesses are already ranking high on them. You can then include words that have low competition but can drive traffic to your site.

4. Determine the hierarchy of your content

Here is where the real website structuring begins. The human brain likes it when things are arranged logically and all pages balance with each other. Your site should have the main categories placed on top followed by their sub-categories. It will help with the creation of the pages’ URLs. However, do not create too many subcategories as it commonly happens in a health site and ensure that the numbers of subcategories are the same for all the main categories.

5. Menus should be visible

To make your website userfriendly, you will need to make it easy to navigate to different pages on the site. For this reason, the menu should be placed in a position where it is easy to locate. According to studies, 50% of users rely on the navigation menu to learn more about the site. Improve your visitor’s first impression by placing your menu front and center.

6. Improve the structure of your URLs

The URLs of the various pages on your site are usually displayed on search engines when people search for your content. Instead of using IDs such as letters or numbers that do not make sense to the visitor use words relating to the document. For instance, structure.com/about or structure.com/about/services.

7. Use HTML or CSS

Using HTML makes it easier for web crawlers to navigate your page. HTML is what provides the structure for websites while CSS is used to control the format, layout, and presentation of your site. If your navigation is not easy to access, web crawlers won’t find it and will result in a low rank.

8. Interlink your pages

Write many articles on those words you would like to rank for. You should then link these posts with each other. These links have three main benefits:

  • They make it easy for visitors to navigate the page
  • They establish a hierarchy of information in the site
  • Increased viewers for your sites’ pages

9. Boost Orphaned articles

These are the posts on your site that most of the others do not relate to. They are usually not easily found by visitors and search engines because they do not have many links from the other articles on the site. To identify them, sort all the articles on your site by the number of links. You can then increase the number of links to the articles to make them more visible.

10. Create your site map

A site map is a hierarchical list of all the pages in your site. It helps both the users and the search engine to navigate the site. Most search engines use the site map to learn about the new pages on your site.

Conclusion

If you do not define the structure of your website, then it will only be a website full of articles and content that do not make sense to the user. It will be difficult for search engines to find the most important information you want to pass across and hence the ranking will below. Improve the structure of your website using the above 10 steps and you will make it not only userfriendly but also SEO friendly.

Author – Dylan Menders

Read more

5 User Experience Mistakes Made Accidentally by Every Designer

Websites, applications, and products should all be designed with the goal of being obvious, self-explanatory and self-evident to use. Users should not have to rely on complex instructions or manuals to use them, because odds are, they won’t read them. There are a lot of user experience (UX) mistakes out there these days which rely on instructions or aren’t user friendly. Below are the most common UX mistakes that designers make without realizing. 

1. Focusing on the concept instead of the user.

Conceptual models which designers come up with in their mind are fine, but when the designer gets focused on the model and ignores the usability of it, problems can arise. The mental model is how a user imagines that a product or service should be, so a good website can merge the designer (conceptual) model and the user (mental) model. 

When the conceptual model, which is the user interface does not meet the user’s expectations, the user experience will not be positive and the website will lose its customer. 

2. Focusing too much on eye-tracking data.

There is a common misconception that eye-tracking data will give designers specific information about where users are looking and for how long. Although there’s some good benefits to using eye-tracking data, the negatives far outweigh the benefits. As explained by design blogger Terry Cluft of Boomessays and Revieweal, “eye-tracking data will tell you what someone looked at, but you won’t know if they paid attention to it or just glanced at it. It also only measures central vision, dismissing the important peripheral vision.” 

Your design decisions shouldn’t rely completely on your eye-tracking data, and instead look into testing visual or auditory signals. 

3. Reconsider your use of pop-ups.

Marketers rely a lot on pop-ups because they’ve been shown to be a good lead generation tool. Some of the best ways of increasing subscriptions to blogs are through pop-ups, and the studies will back that. However, Google warned websites in 2016 that websites with pop-ups or other intrusive interstitials that are obscuring the content would see a drop in their search rankings. The following year, in 2017, Google decided to penalize all sites with pop-ups and email capture light-boxes. 

These are all measures to improve the experience of mobile search so users can more easily access content without interstitial interruptions. Google also made a distinction between good pop-ups and bad pop-ups. UX designer at State of writing and Essayroo Pamela Anker explains that “if it comes up immediately as soon as the user arrives on a page or the user is interacting with a page, and the pop-up hides the main content, or the interstitial pops up immediately before the user gets to the content, it will likely get penalized by Google.” 

On the other hand, if an interstitial is part of a legal obligation like age verification or cookie usage, or a login to content accessible through a paywall, as well as banners that don’t take up much screen space and can be dismissed easily, Google will allow those for the time being. Read more about the distinctions are design your pop-ups with that information in mind. 

4. Collecting feedback too early.

Another extremely common mistake is collecting feedback from your users too soon, because you might end up attracting more negative reviews. Ideally, wait a couple of days before emailing users if you want fair feedback. People like the time to think about something before deciding, and if you email them too quickly, they might get frustrated at being pressured to respond.  

5. Selecting the wrong users for user testing.

If you’re getting only certain users or ideal users to test your website or app, you’re going about it the wrong way. You should only be testing certain users if your product targets only that group of people. However, for any other situation, you need to design your website in such a way that the least tech-savvy person can use it. You don’t need experts to test your website; instead, look for a user that matches your target audience. 

These mistakes all point to the same conclusion: products and websites should be easy for the client to use. They should be obvious, self-explanatory and self-evident. 

Authors BIO

Ellie Coverdale is a marketing and design blogger at Big Assignments and Top Canadian Writers. She is involved in user experience and user interface projects and developing new strategies for online businesses. She is also a teacher for writing skills at Student Writing Services.

Read more

Personas in the User Flow. Developing the Right User Experience

Personas in the User Flow Developing

No matter what niche your business belongs to, you likely need to know the same thing that all the other businessmen think about: what do your customers want? We live in an era of strong competition when you need to not only provide good products or services but also a convenient overall experience. Analyzing numbers is an obvious method that not always brings good results. This method doesn’t allow you to detect particular customer needs. In addition, customer tastes change quickly so businesses need adaptive solutions. One of the most effective approaches is creating a user persona.

Users Personas, also known as marketing personas, are characters based on real user data that represent your customers and are aimed to help you understand them better. Creating user personas can help you improve UI and UX, detect customer pain points, develop your brand identity, adjust your writing voice, etc. For example, user personas can help you choose the right structure for your website, understanding what your visitors are interested in. User personas simplify the decision-making process and make it easier for businesses to determine the right course of action, compared to working with raw data.

A user persona reflects not a particular customer but a whole group of customers. Creating user personas is an approach that allows you to condense a lot of data into a single document which is easy to comprehend. User personas allow you to design the user experience precisely, creating a user flow based on your user persona’s preferences and personality traits.

Advantages of User Flow and User Personas for UX

A user flows is a visualization of steps users have to take to complete a certain action when using an app or website. You may design your user flow in different ways, depending on a specific task. The best approach is to create diagrams, connecting different elements logically. Here are a few good reasons to use user flows during the design process:

  • User flows can improve communication with clients and team members. A user flow is a good way of presenting information to people who are not designers, being able to discuss any important issues with the whole team.
  • User flows focus not on design details but on experience. You can evaluate the overall picture and create a comprehensive experience for users. User flows allow you to plan how your users will interact with the system and how it will react to their actions. You can also plan all the necessary decision points where your users have to make a choice.
  • One of the main advantages of user flows is that they simplify collaboration between designers, developers, and project managers. You can use user flows during workshops, quickly developing and testing different models.

User Personas can make your user flows even more effective because you don’t need to check each particular user’s analytics. A User Persona collects all the necessary information in one place and makes the data easier to process because it represents a character. If you want to figure out what are your customer’s preferences, the easiest way to find the answer is to imagine a person who will interact with your product.

A user Persona should have its name, personal motto, bio, demographics, personal traits, goals, motivations, frustrations, personality traits, and preferred brands or influencers. This way, you’ll be able to get a complete understanding of who your users are.

User Flow Tool

How to Design customer journey with the User Flow Tool

The simplest and the most effective way to create a user flow is to use the User Flow Tool. It allows you to create multiple user flows using an endless working space for your diagrams. You can share projects and collect feedback. In addition, you can export your user flows as a PDF, SVG, or an image.

One of the main advantages of diagrams created using the User Flow Tool is flexibility. You can determine the main goal and plan the route for your users depending on their response. Here’s an example of a user flow for a booking app. As you can see, this diagram allows you to plan every step depending on what your user is looking for and what they choose.

Once you’ve selected the main objective, identify the information that your visitors are looking for. What problem do they want to solve? Why do they need this information? What qualities of your product are most important to them? How can you help them take action? What are their doubts? Here’s where a user persona will provide you with the right answers.

After this, you can plan flow steps, leading your users to the right information at the right time. Focus on the most-wanted action and make sure to lead your users to it while keeping in mind their needs, preferences, and motivations.

Conclusion

User Flows are extremely effective when you need to design the right user experience. They allow you to see the overall picture, planning your users’ interactions with your website or app. However, to create a proper user flow, you should perfectly understand your users. Analyzing behavioral data on each particular user would be virtually impossible. Fortunately, you don’t need to do it because you can create a user persona that will include all the necessary information on your typical user, including their age, gender, motivations, goals, personality traits, etc. This way, you can plan a user flow with precision, clearly understanding what your users are looking for and creating a seamless user experience.

About the Author

Ester Brierley

Ester Brierley is an experienced QA engineer, balancing freelancing as a virtual assistant for College Writers. Also, she cooperates with different websites covering a broad range of digital topics as a seasoned content creator. Follow her on Twitter.

Read more

Flowchart in UX Research

UX Research

Development of empathic interface is a serious task that requires deliberate decisions from a Product Designer, which is why every stage of UX Research has great importance. In this article, we will analyze a tool that can help you at one of the first stages – Ideate.

Usually, when a designer develops an idea, it determines the development vector of an estimated product. A User Flow Tool can be a good helper at this stage. Origins of User Flow can be found in technical block diagrams describing algorithms and technical processes.

user flow example

At the moment, User Flow combines block diagrams and visual interface elements. These diagrams enable a designer to set a goal in advance, and test suggested user flows, defining key moments and determining issues at the Define Stage. An important advantage of User Flow Diagrams is its opportunity to reduce costs of a project, excluding a large number of UX mistakes even before prototyping of a tool, and simplicity of reading patterns allows to clearly demonstrate a Client or a Manager the importance of any solution.

To better understand the need for User Flow in your projects, click on the link to see a diagram.

When reading or creating such diagrams, don’t forget to follow basic principles which designers use in their User Flows:

  1. Limitations and Naming. A User Flow Name is a set goal of user flow; when creating a diagram, it’s important to set a user goal as accurately as possible to use it as a name of your diagram. It’s also important to plan the naming of each element of your User Flow. Deliberate and laconic names are one of the fundamental rules for creating a diagram that allows easily following the pattern making it convenient and logical.
  2. Standards. Even though current User Flows are not regulated, and there’s no a specific form for developing them, we followed a fundamental principle of standardized block diagrams while developing this diagram:

Each fan-out can only come from “diamonds.” A user can change the flow only by making its choice.

This diagram demonstrates User Flow in an application where a user can book an apartment directly from a property owner, a final goal of  which is to “Execute a booking request.”

UX Research

This small example allows us to measure the flexibility of the diagram. We reflected user flow to a specified objective and some flows that bring it back to the main route in situations when a user can’t respond positively.

Flexibility is a key element of User Flow. User Flow is not the system documentation and/or Use Case. All these factors provide such a broad diagram profile.

User Flow is an amazing tool, allowing to plan a variety of options for achieving a set goal of user flow that might help a designer and a team to prevent the possibility of costly mistakes at early stages of product development and make a well-considered and convenient project for an end user.

You can try to create a free User Flow Diagram at our platform. FlowMapp is an end-to-end solution for a designer, enabling a team to have full control of a project at each UX Research Stage.

Read more