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

Alt-text is a text incarnation of the images on web pages. We need our images to be described in words

thumbnail_glossary snippet.png

glossary snippet.png

Alt-text

Alt-text is a text incarnation of the images on web pages. We need our images to be described in words. For engines, for people who want their page not to show images, to save data, for instance, and for people who have little or have no vision. So they are exceedingly important, and that is why these image descriptions must be clear, informative, and make sense.

<h2>Why We Need It</h2>When we run our web page, we must play by the rules. And one of them is alt descriptions or alt-text. We describe our images by words. These text alternatives are needed for search engines and users.&nbsp;<ul><li>Search engines Clear image descriptions will help engines to crawl the pages of your website and find needed information. The easier and the faster the process for engines, the closer to the top of rankings for you.&nbsp;</li><li>For users to save data When the image is placed on the page, it has the visual embodiment and its text alternative. So, if somehow the image can’t be loaded, we will see the text that describes it. The visual content has to have its non-visual alternative to build the page right. We can turn images off if we want, but its text alternative will inform us about images' existence.&nbsp;</li><li>For users with disabilities One of the main reasons for alt-texts is to give access to web content to people who can’t see or can’t see clearly. So assistive devices that they use can also read visual content and transfer it to the user.&nbsp;</li></ul>

Because you are already in that image field. So it is obvious. Like when you name your dog Betsy for instance, you don’t name her Betsy dog. Just Betsy.&nbsp;So your description, or your alt-text, of a dog image, for instance, will be ‘Black dog’, but not ‘The image of black dog’.

Don’t use the word ‘image’ in the description

Describe the image directly, if you see a tree decorated with blue lights, just write “Tree decorated with blue lights”. Don’t write “Tree” or “Tree decorated’ or “Blue lights and a tree”, etc.

Be clear, specific, and straightforward

But don’t lose your head trying to stuff your alt-text with all the possible keyword combinations. Include a few main keywords wisely.

Include keywords

Good alt-text is no more than 17-19 words.

Keep it short

When we talk about accessible web design, we want to mention this. Assistive devices will make a pause at the end of the alt-text, so the user can more easily understand the content.

Put a dot at the end of alt-text

Because they already include text in their visuals. So don’t repeat. For instance, Twitter text visuals don’t need it.

Text labels don’t need alt-text

What is important for a user, in this case, is the link text. Don’t add alt-text for its image, it will just overload the user with information.&nbsp;

Don’t place an alt-text for images in links

You have important pictures and images that improve and complement your text content, but you also have some additional images like dividers or brand icons. Just don’t describe them with text.

Don’t place an alt-text for additional images

Tips & Tricks 

Useful Tools

Illustrates a step-by-step way of a user from the very beginning to the very final interaction

5ef46931a352564686a1f651_userflow_icon.svg

Userflow

Online tool for creating interactive and visual sitemaps for planning and managing web development

5ef46931a35256a738a1f64f_sitemap_icon (1).svg

Sitemap by Flowmapp

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

DG abstract icons.svg

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

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

Perfect Tool for collaborative work on design projects 

FlowMapp_logo.svg

Flowmapp 

logos for tools.svg

Sketch

Miro.svg

Miro

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.

Design Glossary

Latest Terms

Alt-text

5 second test

Collaborative Design

Customer Journey Map (CJM)

Alt-text

5 second test

Collaborative Design

Customer Journey Map (CJM)

Editor’s Pick

UX Laws

Composition