Name: Design Glossary — FlowMapp
Brand: FlowMapp
Availability: OnlineOnly

large_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

medium_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

small_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

thumbnail_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

5f3ab44f1e10243c3d918b06_ux_icon

is the process design teams use to create products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability and function.

5 listings

User Experience

large_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

medium_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

small_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

thumbnail_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

5f3ab4590345cd978afc3ea7_ui_icon

design is the process designers use to build interfaces in software or computerized devices, focusing on looks or style

2 listings

User Interface

large_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

medium_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

small_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

thumbnail_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

5f3ab42e8b2f9226d34dd2ff_cx_icon

focuses on usability of sites, user reviews, customer loyalty index

3 listings

Customer Experience

large_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

medium_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

small_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

thumbnail_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

5f3ab438c8fa4f256028f0c9_ixd_icon%20(1)

is based on animation inside interfaces: moving icons, menus, transitions, gifs. Motion designers work on IxD

Interaction design

large_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

medium_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

small_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

thumbnail_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

606716c8a9322fc8bd91a4ba_productivity_icon

are about small changes in how you work, raise your or your team's talent and find work-life balance

Productivity

large_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

medium_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

small_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

thumbnail_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

5f3ab4430dc3b215841f8cad_sd_icon

is the process of building relationships between an end client and a business to balance their needs

Service design

Design Glossary contains popular and useful terms commonly used by web design and UX professionals

large_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

medium_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

small_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

thumbnail_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

Design Glossary — FlowMapp

Method of UX-research that helps to explore users’ first impressions of design. In the process of testing a designer shows his project — commonly, one page — and then asks questions about the design

thumbnail_glossary snippet.png

glossary snippet.png

5 second test

Method of UX-research that helps to explore users’ first impressions of design. In the process of testing a designer shows his project — commonly, one page — and then asks questions about the design.&nbsp;&nbsp;The goal of the test is to understand what information users take away and make sure that this is what a designer wants to provide.

Why 5 Seconds

According to different research, users make decisions quickly. They need only a few seconds to decide whether they stay or leave the site. Users also usually spend no more than 15 seconds on one page. That means that your design should be quicker and deliver a message as fast as possible.

Five second test is perfect for analyzing the first impression, but after you will also need other tests to find out how people interact with your product

thumbnail_5 seconds test (1).jpg

5 seconds test (1).jpg

How to Run

To run the test you need to adapt your design for testing, prepare questions, find participants and after then interpret the results.&nbsp;<h4>Design</h4>You can not show a raw Figma file for participants as there are a lot of disturbing details. For testing you need a screenshot of the page, high-fidelity mockup or prototype of your page. The idea here is that your design should look like a real internet page. &nbsp;Make sure that it is comfortable for participants to examine the page. If possible, give them devices. This test can be easily run remotely on participants’ devices.&nbsp;<h4>Questions</h4>Questions depend also on your personal goals. For example, you have some doubts on the composition of the page and suppose that some of the elements are getting lost among details. In this case, you can ask whether a user remembers a particular element. &nbsp;Here are some questions you can ask at any 5 second test.&nbsp;<ol><li>What is this page about?</li><li>What is the purpose of the page?&nbsp;</li><li>What is your impression of design?</li><li>Would you like to spend more time on the page?</li><li>What are elements you can recall?</li><li>What is the main element you can recall?</li><li>For whom this page might be interesting?&nbsp;</li><li>What do you like best about the design?</li><li>What do you like least? &nbsp;</li></ol><h4>Participants</h4>You can find participants among members of your team or other divisions in your company. Random people are perfect for the test so you can find people among your friends and their friends. &nbsp;<h4>Results</h4>Analyzing test participants’ answers you can find out whether people catch or not important content of the page and it’s main purpose. You will be able to explore weak points of design and then eliminate them. &nbsp;To make analysis more simple you can also give participants a rating scale for every question. While interpreting answers you can find some patterns and group them to focus on main problems of the design.

Controversial

Five second test is appropriate when you need to explore first impressions. But when you need to figure out how people interact with your product, for example whether they are ready or not to give you their contacts or buy something, you need other methods of testing. &nbsp;For example, you can <a target="_blank" rel="noopener noreferrer" href="https://www.flowmapp.com/blog/glossary-term/surveys">conduct a survey</a> to receive a deeper feedback on content of the site or run a <a target="_blank" rel="noopener noreferrer" href="https://www.flowmapp.com/blog/glossary-term/tree-testing">tree testing</a> to evaluate its structure.

The category contains definitions of methods, allowing collecting users’ opinions and feelings about an existing product or a potential service.

User Feedback, User experience — FlowMapp

5f55ed58b1877a2189ff14b8_user_feedback_icon

5f2be2d4a2ded81999854b3f_user_feedback_icon-color

5f2be2c8b6a2617cc44a8b63_user_feedback_icon

User Feedback

abstract_icon-89.svg

large_607721e3a896b14cd6c59d95_glossary snippet.png

medium_607721e3a896b14cd6c59d95_glossary snippet.png

small_607721e3a896b14cd6c59d95_glossary snippet.png

thumbnail_607721e3a896b14cd6c59d95_glossary snippet.png

607721e3a896b14cd6c59d95_glossary snippet.png

Collaborative Design

It is an approach that involves different team-centered practices for working on design. It includes collaborating nor just with other designers, but also with members of other teams — for example, developers and marketing specialists. &nbsp;Collaborative design is opposite to hero-based design, when all the work has to be done by one designer.&nbsp;&nbsp;This approach is helpful for generating ideas and creating more effective products.

Techniques

Sketching sessions can make your team more collaborative as all the members can share their ideas simultaneously. The key to success here is to define the goal of the session. For example, to design a homepage that drives customers to subscribe for your newsletter.&nbsp;&nbsp;&nbsp;It is not necessary to start with blank sheets or screens. It is okay to bring low-fidelity wireframes or some sketches as a starting point.&nbsp; &nbsp;Thanks to different tools, team sketching is available for remote teams.&nbsp;You can also provide some elements of design to involve in the session&nbsp; those members of the team who are not keen on sketching.

Team Sketching 

Charette is a short meeting where designers can share their ideas with members of the team to explore different design ideas and find the best solutions. &nbsp;This process includes 5 stages:&nbsp;1. Problem or goal definition.2. Individual idea generation.3. Presentation of ideas.4. Team idea generation. Can include team sketching.5. Collecting all the ideas for the next review. &nbsp;Time management is extremely important here. You should limit every stage and stick to the timing.

Design Charrette

Before presenting any design outside the team it is important to review it internally. This practice creates a safe environment for every member of the team as he or she feels that he is not alone. It is also helpful in improving design as an author of it gets good feedback from other designers he trusts. &nbsp;Team discussion is also extremely helpful before the presentation of a project to a client.&nbsp;

Internal Reviews

Testing with both designers and non-designers helps to identify some weak points of the design. This process can help a designer to look at his project from the perspective of the user. It is especially necessary when you work on a small project and can not afford testing outside the team.&nbsp;

Prototype Testing

Here in Flowmapp we like this practice. The idea is to share projects that you find interesting and inspiring. All the members of the team can do it any time on a special channel. The practice helps to generate ideas on different meetings, to get feedback on different projects and to create an informal atmosphere.

Sharing Inspiration

Useful Tools

Perfect Tool for collaborative work on design projects 

FlowMapp_logo.svg

Flowmapp 

logos for tools.svg

Sketch

Miro.svg

Miro

The category contains terminology related to the production process in UX. Knowing these terms facilitates understanding of UX working stages and form efficient workflow.

large_607721e3a896b14cd6c59d95_glossary%20snippet

medium_607721e3a896b14cd6c59d95_glossary%20snippet

small_607721e3a896b14cd6c59d95_glossary%20snippet

thumbnail_607721e3a896b14cd6c59d95_glossary%20snippet

607721e3a896b14cd6c59d95_glossary%20snippet

Production, User experience — FlowMapp

5f55ed1be321dd4cf19b1d3f_prodcuction_icon

5f2be321709b826dd2e34d13_prodcuction_icon-color

5f2be31dea957c4daa0f6dd7_prodcuction_icon

Production

abstract_icon-64.svg

CJM can help you to improve the customer experience without wasting a lot of time and effort

Customer Journey Map (CJM)

Customer Journey Map (CJM) is a step-by-step scenario of user interaction with a specific e-commerce site. The process described in the scenario is not linear. This means that it is extremely important for UI/UX designers to foresee all possible options for user actions so as not to lose him or her at any stage.&nbsp;&nbsp;CJM can help you to improve the customer experience without wasting a lot of time and effort.

5 Steps To Create a CJM

There is no single algorithm for building a customer journey map, but there are several preliminary procedures that will help you in this process.&nbsp;<h4>To draw up a portrait of the client</h4>What kind of people they are, where they live, what they are interested in. In general, you have to draw up separate maps for each type of client — after all, their scenarios can be very different.&nbsp;You can use personas here. Personas are typical users of your product with specific features. This approach is more effective than describing groups of potential clients as it helps designers to build empathy with end-users.&nbsp;&nbsp;<h4>To analyze sales funnel&nbsp;</h4>Here you need to figure out exactly which stages and in what sequence the user goes on the way to becoming a client: for example, searching for a product in search engines, going to a website, communicating with an online consultant, ordering, using a product. You also need to provide an approximate time frame for each of these stages.&nbsp;<h4>To define the user’s goals&nbsp;</h4>For example, for the search stage, it can be a search for an item in a given category with the lowest cost. This can also include questions that buyers ask themselves on each of them. This will give you a glimpse of your website's usability through the eyes of a real customer.&nbsp;<h4>To analyse sales channels</h4>This can be an offline point of sale, search results, an affiliate site, an influencer's blog, etc. It is also important to take into account such channels that marketers may not work on — for example, forums, publics on social networks. &nbsp;<h4>To identify barriers&nbsp;</h4>Finally, you will need to figure out the aspects that prevent users from moving to the next stage of the sales funnel. Standard options are a complicated registration procedure, unreasonably high or low cost of goods, incorrectly working search on the site.

This is the approximate time required to complete all stages of the journey&nbsp;

Time frames

This is a clear sequence of actions from your potential customers that help them achieve their final goal. For example, buy a vacuum cleaner. It is also important to consider the context and their intentions at each stage.

Scripts

These are specific manipulations that users perform within your website in order to achieve the final goal.

Touchpoints

These are the locations from where users come to your website.

Channels

4 CJM Components

Tool for improving user experience and planning user journeys

Flowchart.png

Flowchart by Flowmapp

Figma.svg

Figma

UX designing of a product can be centered to various starting points. Depending on business specific, one chooses best suiting to users’ needs and team capabilities.

Approach, User experience — FlowMapp

5f2a99ed2ffab0faffc6ca55_approach_icon

5f2be305b6a261c8534a8bac_approach_icon-color

5f2be30009c25853dd8249fa_approach_icon

Approach-UX

abstract_icon-50.svg

Notifications are system status messages which alert users about current events. We need them to inform the user or to encourage him or her to perform certain actions

Notifications

Notifications are system status messages which alert users about current events. We need them to inform the user or to encourage him or her to perform certain actions. &nbsp;Notifications can be different. From alerts, error messages, confirmations to announcements and acknowledgments. It can provide information to users, provoke them to perform actions or assist in performing tasks. They exist in different forms: persistent or non-persistent, pop-up, banner, dialog. &nbsp;No matter what purpose a notification serves, it shouldn’t be annoying.

Designing Great Notifications

<h4>1. Define Purpose</h4>If you can avoid notification, avoid it. Before designing any notification try to understand when and how it can help users.&nbsp;&nbsp;When it comes to apps, It is also important to explain to users why they need your notifications.

large_don't.jpg

medium_don't.jpg

small_don't.jpg

thumbnail_don't.jpg

don't.jpg

It is impossible to understand whether you want these alerts and sounds or not

large_do.jpg

medium_do.jpg

small_do.jpg

thumbnail_do.jpg

do.jpg

Much better. It is obvious when and why a user can receive these notifications

<h4>2. Pay attention to color and icons</h4>Basically, there are three attention levels of all the notifications: high, medium and low. High-attention notifications are errors, confirmations, exceptions. Medium are acknowledgements and warnings. Low-attention notifications are status indicators and success messages.&nbsp;Notifications of each level need their own design — iconography and colour. It is okay to make notifications different but in styleguide.&nbsp;<figure class="image"><img src="/uploads/2_3340972ca4.jpg" alt="Notifications rules"><figcaption>Here is an example of different design for different notifications. Colour and icons indicate the importance of message</figcaption></figure>&nbsp;<h4>3. Find the right placement</h4>It is better to avoid places where notification can ruin the interface. For example, messages can not hide navigation elements. It is better to place notifications at the corners, top and bottom of the whole design system.&nbsp;&nbsp;<h4>4. Check the UX copy</h4>It should be as simple as possible. Make sure that it is easy to read and comprehend. If you add actions, they should be obvious. More about cool UX Copy — <a target="_blank" rel="noopener noreferrer" href="https://www.flowmapp.com/blog/qa/how-to-craft-cool-ux-copy">here</a>: 8 tips that can help avoid common mistakes.

large_don't-1.jpg

medium_don't-1.jpg

small_don't-1.jpg

thumbnail_don't-1.jpg

don't-1.jpg

Not the best wording and it is hard to understand what OK means

large_do-1.jpg

medium_do-1.jpg

small_do-1.jpg

thumbnail_do-1.jpg

do-1.jpg

<h4>5. Let users get rid of notification</h4>And make this action as simple as possible. The close button is an obligatory element of any notifying message.&nbsp;You should also consider an option to mark notifications with Do not show again. It is important when it comes to informational banners.

Each of the members of the design team should use the same names for all spread UI elements and stay aware of their basic appearance. It facilitates work and cooperation with developers.

Design Glossary

Latest Terms

5 second test

Collaborative Design

Customer Journey Map (CJM)

Notifications

5 second test

Collaborative Design

Customer Journey Map (CJM)

Notifications

Editor’s Pick

UX Laws

Composition