Software Testing Overview

Types of Testing

Manual Testing

Human execution of test procedures without using test automation tools or programming languages.

Test Automation

A process of writing and executing a computer program to do testing.

Black Box testing

Testing done from user perspective (no access to source code used).

Gray Box Testing

Gray box testing is using structural, design, and/or environment information to expand or focus Black box testing and to enhance testing productivity by using appropriate methods and tools.

White box Testing

White box testing is done at the source code level. This testing is based on knowledge of the internal logic of an applications code.

Functional Testing

Functional testing is conducted to verify that functions of a system are working as specified. Typically functions are described in work products (requirements, specifications, etc.), but can be undocumented;

Non-Functional Testing

Non-Functional testing is conducted to test attributes of a component or system that do not relate to functionality: Reliability; Efficiency; Usability; Maintainability; Compatibility, etc.

Positive Testing

Aimed at showing that software handles properly situations in which user acts as expected (verification).

Negative Testing

Aimed at showing that software handles properly situations in which user acts not as user is supposed to act (invalid actions, inputs, settings.)

Boundary Testing

Boundary testing or a Boundary value analysis explores values near the limits of valid ranges. 100 < x < 200

Exploratory Testing

Exploratory testing is when the tester "explores" an application. No requirements. Tester, based on experience and creativity, learns things and generates new tests to run. Black box testing. Manual testing.

Ad hoc testing

Simplified form of Exploratory Testing where Planning, Executing and Learning are happening at the same time.

Unit Testing

White box testing of software components/modules. Executed by developers or whitebox testers.

Integration Testing

Integration testing is a phase in software testing in which individual software modules are combined and tested as a group.

System Testing

System testing is conducted on COMPLETE SYSTEM to evaluate it's compliance with the requirements. System testing is a black box testing.

End-to-end Testing

Test a complete application in closest to production environment (interacting with a database using network communications or interacting with other hardware applications or systems if appropriate, etc.).

User Acceptance Testing

UAT is the very last test executed by SMEs (subject matter experts) on behalf of the future users.

Release/Build Acceptance Testing

Test done on newly compiled build/release to make sure it's good enough to be accepted for testing, so the QA team can move from previous release to the new one.

Installation Testing

Installation testing verifies that the system is installed and set up correctly to work ia a specified software/hardware environment.

Compatibility Testing

Conducted on the application to evaluate its compatibility with the different OS, Hardware, Browsers, etc.

Browser Compatibility Testing

Making sure that web application looks, behaves, and responds the same way across different browsers.

Smoke Testing

Same as build acceptance testing. Superficial testing of main features to decide if the build is good enough to be send to QA.

Regression Testing

Partial retesting of a modified program to make sure that no new errors were introduced while making changes to the code (developing new or fixing existing one).

Alpha Testing

Alpha testing takes place at developers' site. Making sure the application has the right look and feel. Functionality is not expected to be fully in place.

Beta Testing

Beta testing takes place at customers' sites, and involves testing by a group of customers who use the system at their own locations and provide feedback, before the system is released to other customers.

Performance Testing

Determining how the system performs in terms of responsiveness and stability under a PARTICULAR workload.

Load Testing

Load testing is conducted to understand the behavior of the system under a specific expected load. Simplest form of performance testing.

Stress Testing

Stress testing is conducted to understand the behavior of the system under an extreme load.

Recoverability Testing

Recoverability testing is conducted to verify that if the system fails: How it will re-establish a specified level of performance? How it will recover directly affected data?

Usability Testing

Usability testing is used to evaluate product by testing it on users. Usability testing measures how easy it is to use specific object or set of objects.

Accessibility Testing

Accessibility testing is conducted to test the compliance with standards. Examples: World Web Consortium (W3C) - GUI; Americans with Disabilities Act of 1990; Wikipedia Accessibility; etc.

Security Testing

Security testing is conducted to test that: System data is protected; How system prevents the intrusion by hackers.

Localization Testing

Localization is the process of adapting internationalized software for a specific region or language by adding locale-specific components and translating text.

UX/UI Checklist

Elements

Elements are the fundamental building blocks of an interface.

Avatar 😁

Visualizer
Show what the avatar looks like before posting or updating
Link to upload or select avatar
Accessible link for a user to select
Placeholder image
If a user hasn't uploaded or added an avatar yet there should be a placeholder e.g. a default icon, or the user's initials
Acceptable file types
Tell the user what file types are allowed (JPEG, PNG, SVG)
Status change updating avatar
This doesn't have to be apart of the avatar component (it can be a banner or toast for example), but it is possible to incorporate it
Alternatives
If a user doesn't want to upload an image, offer an illustrative alternative, as it's better than nothing and can still convey their personality
Editing uploaded avatar
Allow a user to crop and resize their avatar before saving it

Badge 📛

Detail
A badge can have a numeric value, or a basic shape
⭐️ A basic shape like a small circle is effective in conveying one update, while numeric value represents the amount of updates
Color
Badges can represent your standard states - error, success, warning
⭐️ Be consistent in the details - outlines, shadows, perspective, corners and colours
Offset position
A badge should sit outside it's relevant element to gain attention easier

Button 🖲️

Base style
Your default style, one of the following: fill, outline, underline
Shape
Visual properties of a button: padding, border, border radius, shadow
Variants
Each visual type to represent button structure e.g. primary and secondary buttons
Copy
Instructional text that details what will happen if you click the button
⭐️ Users should understand what will happen before clicking a button
States
How the button changes based on the interaction, examples below

Card 🃏

Style
Consider default background, border, shadow
Consistency
Ensure you have one base style for all cards
Spacing
A framework to sort your padding levels by
Responsiveness
Consider the structure of the content in all various screen sizes
⭐️ Adopt a 'top-down' approach on mobile to not overfill the rows
Content hierarchy
The primary action/s you want users to perform

Table 📏

Table header
The value of each column to provide structure for the row content
Row style
Borders and contrasting background colors can be explored to differentiate
Spacing
Define the consistent padding of each row and the header
Search
The ability to find a specific keyword or row
Actions
Performing a task based on the row and information seen e.g. view, edit, delete
Filter and sort
Allow users to customize what they want to see in the table and in which order
Responsiveness
Determine the structure on significantly smaller devices - whether the information collapses into an accordion for example
⭐️ Horizontal scrolling is an alternative to rethinking a new layout
Pagination
Breakpoints in the table for digesting information in parts

Icon 🌠

Responsiveness
The flexibility in detail of the icons at varying sizes
Style
The visual look of the icons
Color
Black and white, flat colors or gradients
Naming
In your design tool and as a file, clearly identify the object in the name

Text Field ⌨️

Input field
Interactive text field for user to enter their data into
Label
Stating what information the user is meant to provide
Placeholder text
Text inside the input field acting as an example of what you want the user to enter
Data format
Set text fields to allow the relevant text values e.g. numeric only for phone number
Illustration or icon
A visual cue can help break up a long list of text fields
Helper text
Elaborate on the title of the text field incase a user struggles to know what to enter

Toggle 🎛️

Context
Explaining what the toggle will do
⭐️ A toggle should always be turning a function on or off, not between two opposing versions of a function e.g. hot or cold
⭐️ Consider toggles for straightforward decisions that have low risk implications
Animation
A clear visual change of the toggle switching between different states
State
How the button changes based on the interaction, examples below

Loading ⏳

Visual indicator
A clear representation that content is loading or in progress of change
Text
Explaining the loading state
Time
Determine how long the time between two actions must be to require a loading component
Accessibility
Ensure your loading state can be clearly seen
Visuals
Entertain the user with an illustration during the loading state

Title
Clear, simple text explaining the action of the modal
Actionable item
A button or link to continue or close the event
Close action
A way to exit the modal
Responsiveness
Consider the size of the modal on different device sizes, and whether a modal is suitable on all
Background change behind modal
Darken, blur or lighten - change the background behind the modal to bring focus to it
Description
Incase they require more information to understand how to make their decision

Information
Keep content clear and concise
Contrast
The background should be different from the underlying content
Visibility
How a tooltip looks and shows
⭐️ A tooltip should activate on hover or select of an icon or text it is relevant to
⭐️ Only one tooltip should be visible at a time
⭐️ A tooltip should not cover the content it is relevant to
Dismiss action
Depending on how intrusive or extensive the tooltip is, a dismiss allows the user to feel more in control and allow the tooltip to feel more flexible and non-compulsory

Search 🕵️‍♀️

Input field
A clear container for a user to start typing in
Label or placeholder text
Identify the purpose of the field is for them to search
⭐️ Use your placeholder text to suggest examples of what to search for
Quick links, autocomplete and suggestions
As the user is typing, offer available links and phrases based on what they have entered so far
Submit search button
A visible link to submit search and view results
Previous searches
Showing what a user has searched before can speed up their experience if they frequently search the same queries
Appropriate visibility
Search should be directly linked to what you are looking for, whether it's searching across the entire platform or in a specific area

Logo
Reinforce your brand at the top level on every page
Structure
Ensure your most important links are available at the high level, and links that are a level deeper are relevant and impactful to more niche users
⭐️ Consider only two levels of hierarchy to reduce complexity
⭐️ Ensure that each level of navigation has a different visual design to differentiate the levels clearer
Consistent location
Usually located at the top of the page as it is the most accessible, but it should always appear at the same location on every page
Visual contrast to rest of page
Make it clear for a user to easily see where they can visit other pages
⭐️ This can be made more noticeable with a visual change after scrolling on a page, such as a different background colour or shadow
Call to action/s
The primary action/s you want users to perform
Mobile responsiveness
Consider a design for the mobile version of the menu as the screen size difference is enormous and will definitely affect your layout
Icons next to link
A visual cue can help break up lines of text
Breadcrumbs
Showing the current level and hierarchy of sections above the current page

Radio 📻

Label
Text associated with the radio input
Grouping
There must be more than one radio option for the experience to work
⭐️ Utilise radio to surface all inputs options, only being able to select one
⭐️ Radios with short labels can be align horizontally, but should usually be aligned vertically
Default selection
Start with a radio option selected
⭐️ This doesn't always have to be the first option, it can be the more likely option based on previous research and experiences
Style
Make sure radio is unique and stands out from other input options
Clickability
Consider what is clickable to make the radio option active (text label, container)
States
Radio can be default, active and disabled (see examples below)

Checkbox ☑️

Label
Text associated with the checkbox
⭐️ Label should indicate that if checkbox is clicked, the label
Default selection
Whether the checkbox is selected or not
⭐️ An active checkbox by default depends on the purpose of the checkbox - it should come down to how much this conveniences the user
Style
Make sure checkbox is unique and stands out from other input options
Clickability
Consider what is clickable to make the checkbox active (text label, container)
⭐️ Clicking a checkbox shouldn't activate another element to appear, change or react - it confirms a change, it doesn't trigger it
States
Radio can be default, active and disabled (see examples below)

Tabs 🗂

Label
Name of tab
⭐️ Label should be logical enough for the user to predict what's in the tab
⭐️ Keep it short and sweet, 1-3 words
Pane
Where the content for the active tab is displayed
Usage
Tabs should be used as a sibling view to filter parent information
Style
How the active tab and inactive tabs differentiate visually
Structure
Parallel with each other, and spaced closely enough to appear connected
⭐️ Consider arrangement of tabs to be ordered by popularity or familiarity
⭐️ Each tab should behave the same in interaction
States
Tabs can be active and inactive

Toast 🍞

Copy
The text in the toast
⭐️ Copy should be clear and concise, focusing on a status or action
Placement
Toast should appear on the corners of the viewport, not as the focus
Usage
Toasts are triggered to appear after an action or event
Variants
Dictated by colour usually, variants affects the emotion of a message
⭐️ Example: A green toast informing success, red toast informing error
⭐️ If informing a status, don't rely on just color and leverage icons or the copy
Length of appearance
Toasts should be visible long enough to read but short enough to not obstruct other information for too long
⭐️ Read the text out loud slowly to gauge how much time is needed
Dismissable
Depending on the amount of content, a toast can be closed by a user (it should fade away shortly after appearing if it cannot be manually dismissed)

Flows

Flows are the experiences that happen across multiple actions.

Each checklist below gets you to consider the different states and scenarios when you take a user from A to B.

Submitting a form 📨

A form can help a user achieve anything from creating an account to subscribing to a newsletter. They are often the last step of a user's journey, so should be quick and easy to complete.

Steps:

Show button to submit
Below the form fields, a button to submit the information needs to be present.
You can change the copy to fit the form e.g. the button can say “Subscribe” if someone is providing their email address to receive emails.
Show loading state after submission
The user must see the form is in the process of being submitted.
Note: also make sure your hover state is considered before they press the button!
Show success message when it submits
The form was submitted! Let’s communicate that back to the user with a clear success message.
If it doesn't, show an error message
Sometimes, things don’t work out. If the form can’t submit, because of invalid information or another error, that also needs to be shown.
An error may occur because of the wrong information
If the criteria for a text field isn’t met, the form can fail to submit due to that error, and must be detailed.

Making a payment 💳

When paying for something online, two thoughts will come to mind for the user: is this safe, and is this clear? A well-designed payment experience covers these by communicating what's happening with a user's money, and that it's all happening securely.

Offer payment methods
Credit card is the most popular method and can be considered the default.
Other methods are welcome, but their success sits on a spectrum. Some can add friction for users, while others can add security and/or convenience.
Request card details
Show all relevant text fields to complete. Consider the size of these fields relative to the details entered.
Note: in a product where the user is revisiting and saved payment methods are available, consider a flow that allows the user to add/remove payment methods.
Submit payment with card details entered
It's also important to consider validation before a user submits their details.
Numbers can be mistyped, the card may have expired - so make sure these numerous error states are addressed.
Show payment processing
A payment may not be triggered instantly, taking a few seconds (or minutes). A loading page is crucial to calm the user’s nerves in regards to what’s happening to their money.
Confirmation payment processed successfully
It’s a success! Clearly indicate to the user that their payment was processed, and the funds was received.
Outline next steps
What now? Does the payment trigger something? If so, let the user know.
Example 1: a physical product has been purchased. Once the payment has processed, tell the user the order is in motion.
Example 2: a user signed up for a subscription. Offer a link to continue to the product to start using it.

Contacting support 🆘

If there's ever a problem, a user should know how to get help. Then when they try to get that help, they should know exactly what kind of communication they're receiving.

Show a link to contact support
This can be placed in a number of areas, such as:
- footer in a website
- settings in a mobile app
- a page experiencing an error
Use clear copy and easy to recognize visuals to highlight the link.
Show methods of contact
If you have one option, showcase it! If you have multiple options (chat, call, FAQ), list them out and represent each of their benefits.
Chat is great for a specific, complicated issue that needs an instant response. On the other hand, FAQ is great for standard questions that are easy to explain.
Represent how to communicate and what is expected
Once a method is chosen, make it clear on how the method will work.
Illustrate the response time, and what the user will need to provide to receive support.

Deleting account 🗑

Sometimes, it's just not meant to be - and that's okay. Users come and go, so it's important to recognize your solution is only for some and not for all.

For those who want to leave, make it as simple as possible. You can try to understand why they're leaving, but don't get too in the way.

Show a link to delete account
Don't make this difficult.
This link should be visible in the profile or settings of a product. It should also be available in the support area.
Politely ask for feedback
It helps to know why somebody is choosing to leave. But, it should not be pressured or forcefully asked.
Convey the request feedback to improve other people's experience and to also consider their personal reasons.
Explain what it means to delete the account before confirming
Be clear with what happens to the account and the information in it should a user close.
Is all the data permanently deleted? Can they come back and restore their account? Is the deletion immediate, or can they use their account until a certain date?
Confirm account has been deleted
Now that their account is deleted and it's finally complete, embrace that! Be comfortable acknowledging they have left. Do not show any passive aggressiveness.

Tracking progress 📈

Progress trackers are determinate indicators to represent where a user is in a journey. They inform the user what they have completed, where they are currently, and what's left to complete.

Determine your type of progress tracker
This tracker can be visible in many ways — a loading bar, a pie chart, numbered steps.
An experience with large sections would utilise numbered steps, or "milestones". One overall journey that has incremental steps would utilise a loading bar or pie chart better, perhaps with an overall percentage.
Create your states
A progress tracker with milestones needs to show 3 states:
- What's been completed
- What's currently being completed
- What hasn't been completed yet
Assemble your tracker
Final touches can include grouping your sections by milestone, and deciding how you want to label each milestone (by number or by title).

Resetting password 🤫

Every now and then, a user can't remember their password to log back in. Luckily, it's a straightforward process to change it.

It's important to make the experience feel straightforward, so the user feels like they've gotten back into their account as smooth as possible.

Place reset link close to password field
Style it as a link to show it is clickable
Ask for account details to verify
In this case it's usually the email address that's requested, because it can recognise your account and be the channel the link is securely sent to.
Show information has been sent
Based on the account information provided in Step 2, explain how they can continue.
If an email was provided, send an email for the next step. If a mobile number was provided, send a code or link to open.
The message sent explains next steps
This could be a link to a page that allows the user to reset their password.
It could also be a code for the user to provide on a page to verify their account, to then reset their password.
Reset the password!
Whether it's a verification code or a link to click behind an email address, the next page should be a clear text field to enter a new password.
Password successfully reset
After the password has been reset, indicate the successful and push their momentum to their initial intent: logging in.

Showing input error 🚨

Users mistype all the time - whether it's a finger slipping or rushing through letters, errors happen. So for an everyday occurrence, solving an error should be obvious and seamless.

Keep the input in default state
The text field should be checked for errors only after the information has been entered.
Allow user to enter information
Let the user type without interruptions and submit the information aka don't assess as changes are made.
Signal error after loss of focus
After the input has lost focus (user has clicked another element), the field should be assessed. Looks like we have an error here!
In this case, explain why the error happened, and what is required to resolve it. For accessibility, combine the text with a visual icon that indicates an error was found.
Return to default state upon reattempt
Once the user focuses on the field again, the error message should disappear. If there is an error again, the process will simply repeat until they are able to continue.

A reward for a user to earn a discount on their purchase, promo codes are a pre-requisite in any e-commerce website.

‍To avoid a confused customer, make sure they understand what is happening with their code - whether it works, expired or isn't applicable.

Make promo code input field visible
The cart or checkout are pages expected to have a promo code field. It should be in a place that can be seen when scanning towards the button to continue.
Promo code applied successfully
The change can be reflected using your success state colors (likely green) to indicate the code was applied.
In the example is two different options, divided by how much information you want to show. For both, hiding the input field altogether makes it clear only one code can be entered.
Reflect promo code effects
This can be shown with the promo code entry as a total amount, or be represented on In item-to-item basis.
It's important to also show or at least repeat the discount near the total at checkout.
Promo code error
The promo code may not be applicable, or entered incorrectly.
Remove promo code
In some cases, a user might not like the discount offered and prefer the original sale price of an item. Or, they found a better promo code to use.

Saving changes 💾

Users are constantly updating their details. They might be changing an email address, fixing a typo in their name, or updating their payment details. That's why it's important to confirm that a change has been saved, in the clearest way.

Show the action to save changes
An action should be visible as a source of confirming changes to be saved - this is usually a button.
Initially, the action can be disabled. It indicates no changes have been made, and there is nothing to save.
A common location for this action is in the navigation above the fold, so it's always visible over the content. Another option is after all the content that's editable.
State changes to active once a change is made
In the example, we've changed the email address, which means a change is waiting to be saved. Changing the state to active brings the action to the user's attention.
Action changes to loading state when pressed
Once the user
Now that the changes are being saved, you want to show that action is in progress.
You can do so with a loading spinner in the action, as the user's view will be on that element.
Notify changes have been saved
The page will reload or update, and this is the critical part. The user should now be informed that their changes have been saved.
They can now safely leave the page, knowing the details are locked in until they choose to change them again.

Canceling subscription 🛑

Similar to closing an account, a user can decide to end their experience and stop paying for your product. Just because they're leaving doesn't mean we can't give them a graceful exit. It's important to make a cancellation obvious to find and easy to travel through.

Show a link in account details
This doesn't have to be the first or most prominent link, but it should be clearly visible. If you're unsure about including it on the account page, it's suitable to place on the billing settings.
Confirm intent to cancel
Sometimes, a user miskicks. So it's okay to ask if they're sure they want to make this choice, and not just automatically canceling their subscription.
Request a reason for canceling (optional)
It can be helpful to receive feedback on why a user is canceling. Too expensive? Competitor preferred? Just don't need it anymore?
It's an easy way to start identifying the key factors affecting churn.
Confirm subscription has been cancelled
Now that it's canceled, make sure you tell the user when their subscription is active until.

Topics

Topics affect design on a global scale, in the context of a website or app.

Responsiveness 🎚

Users access products in all sorts of ways in all sorts of sizes that need to be catered for. Someone should be able to visit a page on a desktop monitor or mobile, and have an experience as similar as it can be.

This checklist ensures you're designing responsively responsibly.

Fluid layout
Your content must be visible and accessible on any device size
Breakpoints
Identify when to change your structure and how it will look
Typography
The size of your text on each device size
Change in selection area
The area for a user to select an element e.g. text field or button
Scalability
Minimizing content and adding to it at the right screen size
Vector files for images
An SVG allows any visual to be at 100% resolution at any size. One file fits all device sizes in being perfect in quality.

Typography 🔤

Text dictates several characteristics: tone, style, focus and structure. How you execute your typography is just as critical as your color palette, illustrations and overall design of the product.

Font pairings
How well your font choices work well together
Line alignment and length
The direction your text sits and how long it runs for
Scale and variation
How each text style differs in size
Contrast and style
Visibility and look of text
Spacing
The distance between your types of text
Switch to light mode
Some products may be just one or the other, but if you offer both then allow the user to make a seamless switch between the two

Dark mode 🌑

For a designer, dark mode is larger than just flicking a switch and inverting some colors. The accessibility options completely change and your shades for structure and layout need to be re-evaluated - just for starters.

Adaptable color palette
What your product looks like visually with a dark setting
⭐️ A grey for your darkest color is more flexible in shadows and contrast than black
⭐️ The lower the saturation, the more accessible a color will be
⭐️ Ensure dark palette for backgrounds must allow white to be accessible
Brand integrity
Maintain your visual tone and style
⭐️ Invert monotone visuals
⭐️ Incorporate colours from your brand that are also present in light mode
Elevation
A way to structure elements to establish heirarchy
⭐️ Use lightness over shadows to give focus to certain containers or elements
Switch to light mode
Some products may be just one or the other, but if you offer both then allow the user to make a seamless switch between the two.

Accessibility 🚹

The balance between what looks good and what looks accessible is ongoing in products. Sure, some text next to that button will take away its minimalism, but I can guarantee a lot more users will understand what it does more clearly.

Focusing on accessibility increases the opportunities for people to use your product, because it works for them specifically. And with enough effort, 'them' can be anyone.

Hierarchy
Structuring elements to represent intended flow of information
⭐️ Sizing can help establish the importance of information
⭐️ Information should start from relevance and influence and descend from there
Written and visual information
The combination of text and icons to communicate
⭐️ Consider whether a visual item can communicate its action without colour and/or text
Colors
How they inform decisions and contrast with each other
⭐️ Always check contrast accessibility, even if it looks good to you
Meta descriptions
Text description of what an image looks like
⭐️ Implement this for when images don't load, or on hover if it does load
Interactions
How elements change when hovered, clicked, or highlighted on
⭐️ A visual change (darker colour, shadow) is one way to show an interaction in motion
Device accessibility
The difference in size and structure of elements between device sizes

Colors 🎨

Colors represent your story in a product's interface. They inform the mind emotionally and intellectually on what's happening, and what decision to make next. In short, color is all about influence.

The color of a button influences how a user reacts to its intent. The color of a brand influences a user's choice to commit. The contrast, depth and saturation of color all influence how an element is communicated. A good experience lets color effectively influence.

Color psychology
How color can impact how people think, feel, and act
⭐️ Utilise the psychology e.g. destructive button is red, approved message is green
⭐️ Research the cultural differences in color, dependent on who your audience is
⭐️ Don't add colors just for appearance, they will always communicate something to the user
Branding values
How your brand colors incorporate into the experience
⭐️ Primary, secondary and tertiary brand colors can translate the hierarchy of actions
⭐️ Color can represent your brand's style: traditional or modern, fancy or grungy
UI states
Showing success, error and warning elements through color
⭐️ Don't rely on color only to convey state, combine it with information e.g. explain there is an error when an element's color changes to red
Contrast
How colors combine in a purposefully different way
⭐️ Change your design to grayscale to test contrast from hue and value intensity
Combinations
How colors work together as a palette

UX Writing ✏️

UX writing is not copywriting. It's not writing ads, marketing copy or what goes on the merch.

UX writing is interface copy. It's text that explains what features do, and tells a user what action will occur by interacting with that element.

Clear and concise
Say exactly what will happen, in as few words as possible
⭐️ Read your copy back and remove redundant words
⭐️ Don't invent new words for actions, keep it familiar
Useful
Take the user to an intentional direction
⭐️ A user should understand what an action is going to do before they interact with it
⭐️ Remove jargon that doesn't help the user
Tone
How your brand comes across through messaging
⭐️ Avoid humour, particularly sarcasm as a tone in general as you leave room for interpretation
Consistency
Wrap a certain action under one word e.g. don't interchange 'Next' and 'Continue' when moving screen to screen
⭐️ Consistency helps users notice a purposeful change in copy e.g. a number of 'Next' steps followed by a final 'Confirm' step tells them something different will happen next
Avoid dark patterns
This isn't your chance to be sarcastic or antagonise the user
⭐️If you have a preferred action for the user, change visual hierarchy - don't make the secondary option intentionally sound worse
⭐️ Don't hide relevant information or actions from the user out of concern it leads to churn

Brand

Outlining how your brand is executed goes far beyond naming the gradients and diagramming all the circles in your logo. There's storytelling, positioning and assembling what represents your product and the people behind it.

Logo 💠

Your logo identifies your business. It conveys the product, story and tone all in one. When you've created your logo, it's important to ensure its usability across all platforms and experiences.

Color variations
What colors (and grayscales) your logo can appear in
⭐️ Consider variations on light, dark and colored backgrounds for contrast
Usage
The do's and don'ts of how and where the logo can be applied e.g. on different platforms, clear space, variations
⭐️ Show visual examples of your logo usage
⭐️ Consider when the symbol is used versus the wordmark (or both combined!)
Responsiveness
The flexibility of the logo detail at varying sizes
Guidelines
Documentation outlining all of the above to cement the principles

Social media is a critical part of a company's online presence. So, it's important that the content shared throughout these platforms is consistently on brand.

Username
A unique identifier on a platform
⭐️ Be consistent to be found more easily across different social media platforms
Avatar
A profile picture for each social media platform
⭐️ Be consistent to stay recognizable across all platforms
Colors
Links and actions whose color can be customized
⭐️ Primary color is best to go with, unless it is inaccessible then choose alternative
Tone of voice
The character in your posts and messages on social media
Post guidelines
The do's and don'ts of what content you can post
Image guidelines
A background or cover image that typically sits on the profile
Type of content
Memes, user-generated, professional or behind the scenes

Typography 🔠

The majority of a user's interface is text, so it tends to make quite an impression. Whether it's expressive or informative, its intention should be to accurately represent the brand.

Weight
Whether the typeface/s are thin, regular, medium, bold or black
Leading / line spacing
The amount of vertical spacing between two lines of text
Kerning / letter spacing
The horizontal spacing between letters in text
Letter case
Whether the typeface is uppercase, lowercase, sentence case
⭐️ Consider where the text is applied and how the letter case appears in each instance
Hierarchy
The organization of typefaces to structure information
Usage
The do's and don'ts of how type is used e.g. what restrictions must apply, when to use which type where
⭐️ Visual examples of do's and don'ts help convey them clearer
Pairings
Related to hierarchy, and how your fonts combine and interact with each other
Guidelines
Documentation outlining all of the above to cement the principles

JavaScript Libraries

FM BetterForms - Quality Assurance

PreviousConnection Trouble Shooting Guide NextJavaScript Libraries

Last updated 8 days ago