Categories
Other

Privacy Policy

Last Updated, February 8, 2018

Idea Theorem (the “Company”) is committed to maintaining robust privacy protections for its users.  Our Privacy Policy is designed to help you understand how we collect, use and safeguard the information you provide to us and to assist you in making informed decisions when using our Service.  

For purposes of this Agreement, “Site” refers to the Company’s website, which can be accessed at www.ideatheorem.com.

“Service” refers to the Company’s services accessed via the Site, Idea Theorem is Toronto based digital agency which creates simple and usable products for web and mobile.

The terms “we,” “us,” and “our” refer to the Company. “You” refers to you, as a user of our Site.

By accessing our Site or our Service, you accept our Privacy Policy.

INFORMATION WE COLLECT

We collect “Non-Personal Information” and “Personal Information.” Non-Personal Information includes information that cannot be used to personally identify you, such as anonymous usage data, the general demographic information we may collect, referring/exit pages and URLs, platform types, preferences you submit and preferences that are generated based on the data you submit and the number of clicks. Personal Information includes your email, work email, phone number, mobile number, company name, which you submitted to us through the registration process at the Site or any site related to Idea Theorem.

1. Information collected via Technology

To activate the Service you do not need to submit any Personal Information other than your email address. To use the Service thereafter, you may need to submit further Personal Information which may include: list Personal Information collected. However, in an effort to improve the quality of the Service, we track information provided to us by your browser or by our software application when you view or use the Service, such as the website you came from (known as the “referring URL”), the type of browser you use, the device from which you connected to the Service, the time and date of access, and other information that does not personally identify you. We track this information using cookies, or small text files which include an anonymous unique identifier. Cookies are sent to a user’s browser from our servers and are stored on the user’s computer hard drive. Sending a cookie to a user’s browser enables us to collect Non-Personal information about that user and keep a record of the user’s preferences when utilizing our services, both on an individual and aggregate basis.

The Company may use both persistent and session cookies; persistent cookies remain on your computer after you close your session and until you delete them, while session cookies expire when you close your browser.

2. Information you provide us by registering for our product

In addition to the information provided automatically by your browser when you visit the Site, to become a subscriber to the Service/Site. By registering, you are authorizing us to collect, store and use your email address in accordance with this Privacy Policy.

HOW WE USE AND SHARE INFORMATION

Personal Information:

Except as otherwise stated in this Privacy Policy, we do not sell, trade, rent or otherwise share for marketing purposes your Personal Information with third parties without your consent. We do share Personal Information with vendors who are performing services for the Company, such as the servers for our email communications who are provided access to user’s email address for purposes of sending emails from us. Those vendors use your Personal Information only at our direction and in accordance with our Privacy Policy.

In general, the Personal Information you provide to us is used to help us communicate with you. For example, we use Personal Information to contact users in response to questions, solicit feedback from users, provide technical support, and inform users about promotional offers.

We may share Personal Information with outside parties if we have a good-faith belief that access, use, preservation or disclosure of the information is reasonably necessary to meet any applicable legal process or enforceable governmental request; to enforce applicable Terms of Service, including investigation of potential violations; address fraud, security or technical concerns; or to protect against harm to the rights, property, or safety of our users or the public as required or permitted by law.

Non-Personal Information

In general, we use Non-Personal Information to help us improve the Service and customize the user experience. We also aggregate Non-Personal Information in order to track trends and analyze use patterns on the Site. This Privacy Policy does not limit in any way our use or disclosure of Non-Personal Information and we reserve the right to use and disclose such Non-Personal Information to our partners, advertisers and other third parties at our discretion.

In the event we undergo a business transaction such as a merger, acquisition by another company, or sale of all or a portion of our assets, your Personal Information may be among the assets transferred. You acknowledge and consent that such transfers may occur and are permitted by this Privacy Policy and that any acquirer of our assets may continue to process your Personal Information as set forth in this Privacy Policy. If our information practices change at any time in the future, we will post the policy changes to the Site so that you may opt out of the new information practices. We suggest that you check the Site periodically if you are concerned about how your information is used.

HOW WE PROTECT INFORMATION

We implement security measures designed to protect your information from unauthorized access. Your account is protected by your account password and we urge you to take steps to keep your personal information safe by not disclosing your password and by logging out of your account after each use. We further protect your information from potential security breaches by implementing certain technological security measures including encryption, firewalls and secure socket layer technology. However, these measures do not guarantee that your information will not be accessed, disclosed, altered or destroyed by breach of such firewalls and secure server software. By using our Service, you acknowledge that you understand and agree to assume these risks.

YOUR RIGHTS REGARDING THE USE OF YOUR PERSONAL INFORMATION

You have the right at any time to prevent us from contacting you for marketing purposes.  When we send a promotional communication to a user, the user can opt out of further promotional communications by following the unsubscribe instructions provided in each promotional e-mail. You can also indicate that you do not wish to receive marketing communications from us. Please note that notwithstanding the promotional preferences you indicate by either unsubscribing or opting out in the [location of opt-out page] of the Site, we may continue to send you administrative emails including, for example, periodic updates to our Privacy Policy.

LINKS TO OTHER WEBSITES

As part of the Service, we may provide links to or compatibility with other websites or applications. However, we are not responsible for the privacy practices employed by those websites or the information or content they contain. This Privacy Policy applies solely to information collected by us through the Site and the Service. Therefore, this Privacy Policy does not apply to your use of a third party website accessed by selecting a link on our Site or via our Service. To the extent that you access or use the Service through or on another website or application, then the privacy policy of that other website or application will apply to your access or use of that site or application. We encourage our users to read the privacy statements of other websites before proceeding to use them.

CHANGES TO OUR PRIVACY POLICY

The Company reserves the right to change this policy and our Terms of Service at any time.  We will notify you of significant changes to our Privacy Policy by sending a notice to the primary email address specified in your account or by placing a prominent notice on our site. Significant changes will go into effect 30 days following such notification. Non-material changes or clarifications will take effect immediately. You should periodically check the Site and this privacy page for updates.

CONTACT US

If you have any questions regarding this Privacy Policy or the practices of this Site, please contact us by sending an email to hello@ideatheorem.com.

Categories
Development

Angular Vs React Vs Vue

Deciding which front-end framework to use can be challenging when developing a project. A couple of years ago, React and Angular were the two main candidates when it comes to front-end development. However, over the last couple of years, Vue.js became a significant third player in the field. Each framework has its pros and cons that can assist or hinder your project. This blog will guide you to decide on the best framework for your project.

Popularity 

Based on the late 2018 chart, the number of jobs that demand a skill set of angular and react are roughly the same (with angular being slightly higher).

Vue is not as popular as React and Vue (only 20%).

Community is extremely important when it comes to these frameworks as it provides the users with various packages, extensions, and knowledge to make their work easier.

Table for Comparision of Angular, React, and Vue

The chart above shows that Vue has many watchers, stars, and forks compared to React and Angular. This shows that Vue is completely improved and developed by the open-source community.

The high number of contributors for React and Angular show that these two frameworks are actually mostly developed by the actual employees of Facebook (react) and Google (angular).

Migrations are major updates of the framework you use that can often mess up your code, causing you to rewrite or re-implement some functionalities of your work. For this reason, it is very important to know the update patterns of these frameworks. This will allow you to know when you should implement changes to keep things smooth and as compatible as possible.

Angular usually goes through major updates every six months. On top of this, there also is a period of another six months before any major APIs are deprecated. This gives its users about a year of time to prepare for the changes. However, these major updates can be a double-edged sword as a version difference can and most often will require its users to implement major changes to their code.

React highly values stability which is why many big companies such as Twitter and Airbnb rely on it. In addition, React efficiently allows upgrades through versions.

Vue usually keeps things very similar between versions. For example, about 90% of the API is the same between Vue version 2 and Vue version 3.

Working with Vue Vs Angular Vs React

There are many factors that determine how good a framework is to work with.

Size and load times

Sizes between frameworks are not as important. However, it is good to note that Angular is the largest out of all three.

Components

It is important to note that all three frameworks are component-based.

Angular: Angular calls components as ‘directives’. Angular separates the UI part of components as attributes of HTML tags, and their behaviors in the form of javascript code.

React: React combines the UI and behavior of components. The same part of the code is responsible for creating a UI element and dictating its behavior.

Vue: Like React, behavior (javascript) and UI (HTML) are also a part of the components. Vue is also highly customizable, making it easy to integrate with other libraries such as Bootstrap.

Learning curve

Angular: Angular is hard to learn because Angular can be used as a complete solution. Angular also requires its user to learn TypeScript and concepts like MVC. Despite this, Angular can be a good starting point for fully understanding how the front end works.

React: React provides its users with many documentations that aid them in getting started with React. In addition, there are also plenty of sources on Stack Overflow that may help its users. Because of this, React is more accessible than other frameworks. However, learning React can still be challenging if its users must implement additional functionality.

Vue: Out of all three, Vue has the highest customizability, making it the easiest out of all three to learn. Vue also overlaps with Angular and React regarding core functionality, such as having a component-based structure. However, being highly customizable also makes it harder to debug and test.

Other Facts

React and Vue are technically not frameworks. From the MVC standpoint, these two only represent the View Layer.

Five Factors to Consider

There are multiple factors to consider when choosing which framework to use:

Speed: If you are interested in the speed and performance of the app, then go for native app development and the framework that supports it.

Multiplatform Apps: If you want the app to reach a wider audience, go for hybrid app development.

Ease of Development

App Features: these features include things like the professional look, good compatibility with the mobile devices, specific UI standards…etc.

Use of Hardware: Does your application depend on the hardware features such as GPS and camera of the device? You need to keep this in mind and select the framework accordingly.

Security: You need to know which framework provides the best security.

When it comes to speed, React is the fastest with its virtual DOM allowing a seamless performance and ensuring that even high-load applications have fast rendering.

For cross-platform app frameworks, React Native also should be mentioned. React Native is built on JavaScript and it allows for building mobile applications that work both on Android and IOS. (Although React Native is slightly different from React.js, they are similar enough to learn from one another in a very short period of time).

Regarding ease of development, as mentioned earlier, Vue takes first place with its high customizability and high similarly to React and Angular

When it comes to security, despite the fact that frontend frameworks have little to do with the actual security (as it is mostly done in the backend), Angular takes the spot. Angular is by far the most secure client-side web framework, offering highly secure features such as DOM sanitation.

Categories
User Experience

Top UI UX Agency of 2022

Design is all about making human connections and creating genuine relationships from seemingly impersonal platforms. Our goal at Idea Theorem has always been to bring our clients closer to their audience through creative and intuitive design.

Based in Toronto, Canada, we are proud to have ranked highly on Clutch as the Top UI UX Agency in Canada! Our Human Centered Design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand.  

Clutch is a third-party review and rating platform that conducts fact-finding research within the B2B industry. They employ a unique verification process to collect authenticated reviews to help them determine the best companies in every industry from all over the world.

For any company to join this prestigious leaders list, they need to earn several high-scoring reviews from their clients. We consider ourselves incredibly lucky to have the best partners in the world. Only with their help and support were we even considered for such an accolade. This award represents more than just the quality of our work but also the bond we’ve formed with our clients over the years.

Being recognized by Clutch as a leader shows our dedication to our customers and determination to go above and beyond!” – Vinit Mahendru, Client Relations Manager for Idea Theorem.”

Top UI UX Agency in Canada

Top UI UX Agencies in Canada

Client Reviews

As a high-performing agency on Clutch’s top UX listing, we have received a handful of excellent reviews, and we are excited to share some of the fantastic things clients have had to say about us!

Woodbine Entertainment Group

Client Review from Woodbine Racetrack

Deloitte

Deloitte Review
Client Review from Deloitte

Fidelity National Financial Canada

Idea Theorem delivered a modern UI/UX design for our new SAAS platform. They were extremely professional in their dealing and understanding of our project needs and our team. The work was delivered on time and met and exceeded our quality standards. We will definitely be using Idea Theorem again

A huge thank you to all of our clients for helping us achieve this success – we can’t wait to hear more from you and expand our service offerings as we receive feedback through and grow with Clutch.co. Also, check out our work!

What’s Next

Idea Theorem™ is a Toronto-based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
Development

What You Need to Know About AODA Guidelines

The Accessibility for Ontarians with Disabilities Act was first enacted in 2005 when the Legislative Assembly of Ontario proposed a set of standards to be applied to all public establishments to make them more accessible to Ontarians with physical and mental disabilities.

The world has come a long way since then, and regulations are being improved and updated continuously, catching up with the new technologies that allow more measures to be taken. But, when it comes to web accessibility, this parallel race between technology and accessibility is even more apparent.

New standards have been added recently to the AODA guidelines, and there is a lot of talk surrounding the latest deadlines to which all businesses and organizations providing goods to the public must comply. So let’s find out more.

What Is WCAG 2.0 AA?

You will hear this acronym mentioned a lot in relation to AODA because it represents the basic set of guidelines it reinforces. The Web Content Accessibility Guidelines are issued by W3C (the World Wide Web Consortium) and represent the most prestigious international standard for the internet. 

Although it’s not the latest version of standards W3C has published, WCAG 2.0 AA represents the standards with which Ontarian companies and organizations had to comply with by 2021 as a part of AODA.

Who Should Comply with AODA 2021?

The deadlines for implementing steps of adopting the AODA regulations made many companies nervous. Many articles were published on the web warning of the shocking fines you would get for not complying on time, but the reality is not so dramatic.

While the deadlines and fines exist, you can work with the officials to extend them and expect a generally reasonable and supporting attitude. 

January 1st, 2021

This was the primary deadline of AODA and the main topic of conversation, but it’s not the ultimate deadline of the act. This was when the following institutions and organizations had to comply with the WCAG 2.0 AA standards:

  • The Government of Ontario and Legislative Assembly
  • Large organizations of 50 or more employees
  • All municipalities
  • Libraries
  • Educational institutions 

June 30, 2021

This deadline was for businesses and non-profit organizations of 20 or more people to file an accessibility report. However, the deadline was extended, and the possibility of being granted another extension is available if you proactively notify AODA about your delay.

Why AODA 2021 Important

First, ensuring access to people with disabilities to all web content is a social responsibility of every business or organization to ensure that every Ontarian has access to services, employment, programs, and spaces.

Second, you must also consider the consequences of ignoring these requirements, which include penalties and fines. But this subject should not be seen as an ultimatum as it’s portrayed in the media lately, but instead, as a measure taken against companies and organizations that fail to implement accessibility plans after being warned multiple times.

Common Accessibility Issues

If you are not sure where to start with the implementation of accessibility measures on your website or app, here are the most common issues faced on this subject:

  • Lacking alt-text on images

This is one of the most fundamental changes you will have to make on your website, in case it wasn’t already part of your standard procedure. Adding relevant alt-text to all the non-text elements on your website will make your site more accessible and help with SEO.

Make sure all your images are described concisely and relevant so that a visually-impaired person would know what they contain.

  • Missing semantic mark-ups

Use your content editor to properly mark the sequences in your text so that the content can be read with an easy understanding of its structure and hierarchy. The proper way to do that is to mark your titles and subtitles with the appropriate tags within your HTML code. 

  • Vague anchor text

Anchor texts are the words that lead the user to another link. If your anchor text is vague and depends on the context, it is not properly adapted for accessibility. Explain where the link leads and what that page is about.

  • Insufficient color contrast

The web design of your pages should not only be esthetically pleasing but functional and readable. The contract of the text against the background should be 4.5:1 for standard text and 3:1 for larger text, according to WCAG 2.1 requirements. Graphics should also have a contrast of at least 3:1. 

  • Using text as an image

Using text as an image is a common issue for the accessibility of content. Unless necessary (like displaying your company’s logo), avoid it and use text that can be read using assisting software.

  • Updating content dynamically

While dynamic content is very useful in creating an engaging and exciting user experience, it might be problematic if the content cannot be announced by assisting technologies.

Accessibility Tips 

As you can see, complying with the AODA guidelines for websites and apps is a complex project, and it should be done in time, removing the barriers for users with disabilities. 

You can first update your procedures and standards following the basic standards presented in the above sections and make it a habit. Then, if your website or app shows compliance in the most important fields, it will be an easier job to become fully compliant in time for the official deadlines. 

Be sure to know the AODA standards, and start by planning to become fully compliant with them. Then, by training all your staff to follow these standards and auditing your content regularly, you will get to the level of accessibility required by the Act.

Contact us to see how you can incorporate accessible design into your next project!

What’s Next

Idea Theorem™ is a Toronto-based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Research

A Guide to UX Competitors’ Analysis for User Research

What is the UX Competitors’ Analysis for User Research?

UX competitor analysis is a valuable user research method that focuses on understanding your products’ competitors, helping you better understand your market and goals. Idea Theorem™ has worked with many clients that required a UX competitor analysis to get actionable insights about their competitors’ strengths, weaknesses, and mistakes to avoid and know what they are doing right.

This article explores the benefits of the UX competitor analysis method for user research and how to conduct your research to help make your products’ user experience more effortless and enjoyable.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

Benefits of Competitive Analysis 

Again, UX competitors’ analysis evaluates your competitors’ marketing and product design strategies to identify strengths and weaknesses that you can utilize or avoid. Additional benefits include the following:

  1. Compare your product’s positioning, design, and solution (and more) against competitors. 
  2. Identify market gaps that your competitors aren’t targeting, such as a new feature. 
  3. Understand the strengths and weaknesses of your competitors. 
  4. Help you inform and make better design decisions. 

When to Conduct a UX Competitive Analysis 

Consider conducting a UX competitive analysis during the user research phase (also known as the empathy phase™). The earlier you conduct a competitive analysis before designing your product, the better it is. It helps you understand what initiatives to take (such as the above examples about the benefits). 

However, UX competitive analysis is not a one-time process. Instead, companies should consider continuing their competitive research throughout their product development, as competitors can change their offerings or new competitors may emerge. Stay up-to-date within your market by taking advantage of the UX competitive analysis.

How to Conduct a Competitive Analysis

Identify your Competitors

The first step in the UX competitors’ analysis is identifying your competitors. Your competitors can be grouped into the following categories:

  1. Direct Competitors: Companies that solve the same problem as your product or service. Their value proposition is similar to yours, with the same target audience.
  2. Indirect Competitors: Companies with a similar value proposition but targeting a different target audience. Or it can be the same target audience but with a different value proposition.

Collect the Data 

After identifying your competitors, your next task is to collect data about them. Consider organizing your data into a spreadsheet (either Excel or Google Sheets) to make it more easily manageable. Part of the data collection includes:

  1. Basic information such as the company name, and URL (direct or indirect).
  2. Value proposition.
  3. Target audience (user demographics).
  4. The advantages of the product, such as useful key features or solutions to the product. 
  5. Design details that work or do not work. 
  6. The disadvantages of the product, such as usability issues, and missing features. Consider reading customer reviews to get that insight. 
  7. Identify the revenue streams (recurring revenue, transaction-based revenue, project revenue, or service revenue) and the marketing channels that they utilize. 
  8. Consider collecting the number of website visitors (even if these numbers are not accurate, you can still use those numbers as insights), app downloads, social media presence (followers, posts, etc.), and pricing. 
  9. Testing the companies’ products yourself. When testing, consider taking screenshots or screen recording your journeys.
  10. The visual design of their product.
  11. Checking their websites or app store page to see how they promote their products (marketing tactics).
  12. Wait and load times of their products or website.

Analyze the Data Collected 

After identifying your competitors and collecting all the information you can capture, your next step is to analyze that information. We recommend first to start scanning through all the information to answer the questions:

  1. Are there any market gaps that the identified competitors have not targeted?
  2. Are there any solutions that can be combined that are not done yet?
  3. What are the product strategies? What are the marketing strategies? Why are the other competitors behind those excelling companies? 
  4. Are there any problems you’ve identified that the competitors have not addressed? 
  5. Have you identified valuable insights that can be used on your targeted audience? 
  6. Are there any ideas or solutions that have not been done from the market?

Presenting your Data

Now that you have analyzed your information, your next task is to present your clients’ findings or business. When presenting your findings, include actionable insights so your clients or business can act on those insights

Presenting your findings can be delivered on a PowerPoint presentation. Do not add all your conclusions; instead, focus on the following areas:

  1. Key insights backed with evidence, avoiding general findings. 
  2. Provide actionable insights that will impact and transform the business.

Avoiding Common Pitfalls 

Although UX competitors’ analysis is beneficial, it may lead to your user research pitfalls if done incorrectly. Here are some key areas to avoid when conducting your research:

  1. Avoid copying one competitor. UX competitors’ analysis requires you to look at several competitors, not just one. By studying one competitor, you may potentially copy their entire product and market strategies. Also, you will miss opportunities to learn more from other competitors. 
  2. Avoid matching with competitors and duplicating existing solutions. Instead, focus on today’s user problems. 
  3. Avoid not researching your competitors. It’s understandable to avoid copying your competitors, but knowing their strengths and weaknesses is essential when building your product. So that you can be a master plan to position yourself in the market. 
  4. Avoid studying irrelevant products and websites. Do not study websites because they’re big players or because you like them. Focus on competitors that are the right inspiration for your research, identify the proper competitor, and read the section to avoid identifying your competitors.

Our Takeaways 

UX competitors’ analysis has been essential for our user research method. This method especially proves helpful when working with clients’ products that have not been on the market. Boost your brand awareness and product knowledge by conducting your own UX competitors’ analysis.

What’s Next

Idea Theorem is a Toronto-based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Experience

Things to Keep in Mind While Designing for Web Accessibility

Digital products are not experienced in the same way as physical products. For example, some users with disabilities might not be able to see or recognize colors or move the mouse. This is why it is necessary to keep accessibility in mind when designing digital products.

Web accessibility has become integral to developing websites, SaaS products, and mobile apps. While creating digital products, the designers need to ensure that each element is understandable by the users or by assistive technology like screen readers.

What is Web Accessibility?

Designing for web accessibility is the practice of designing for a wide range of people. This is for people who may have sensory, auditory, cognitive disabilities, and much more. 

To avoid having to re-design and implement accessible solutions at a later stage, (especially since websites will be required to be accessible in the near future), it is best to do it from the start—design with accessibility in mind right when you are at the stage of designing screens.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

Why Web Accessibility in your Design is Important?

Web accessibility is becoming an essential part of the design, ensuring that websites and applications are accessible for everyone, including users with disabilities. Good design does not just mean making something look good visually; it also needs to function well. For example, can a person who uses a screen-reader use your website as intended? If not, do you think that person would consider your site well-designed? As designers, we are responsible for creating usable digital work that provides a great experience. 

Not only people with permanent disabilities will benefit from your accessible design. It will also help those with temporary and situational conditions. Therefore, when you design for accessibility, you design for everyone.

How to apply web accessibility in your design? 

Accessibility Guidelines (WCAG) 2.1 site is a guide to WCAG 2.1, helping businesses to easily comprehend the guidelines and principles of WCAG 2.1. We will introduce some guidelines for meeting WCAG 2.1 regulations, which you can apply to future designs.

Color and Contrast

Depending on how you use the color in your design, your design can be considered good or bad. Color usage affects not only users with color blindness or low vision but also others with varying vision common problems. For example, users may have difficulty reading the text if the background and text color do not have enough contrast.

Therefore, providing more than a minimum contrast between text and the background increases the readability of the reader. Furthermore, smaller text requires higher contrast than larger text. 

If you are unsure how to check the contrast on your design, there are a ton of contrast checkers in the form of plugins for Figma, Sketch, and web browsers. Use those plugins to check the contrast.

Things to keep in mind while designing for web accessibility

Checklist:

  • Text and images of text have a contrast ratio of at least 4.5:1
  • Large text (18 point text+) or 14 bold text has a contrast ratio of at least 3:1
  • Interactive elements provide at least 3:1 contrast in different states such as focus, hover, pressed, and disabled. 

Reference:

1.4.3 Contrast (Minimum) (WCAG 2.1 Level AA)

1.4.11 Non-text Contrast (WCAG 2.1 Level AA) 

Keyboard Accessible

Keyboard controls should be able to access all the contents on the page for users who are limited to using the keyboard only. Some users must rely on assistive technologies to navigate throughout the site. If some of the contents are not accessible using the keyboard, they will, unfortunately, miss the content they were looking for.

If you are unsure if your design meets all those requirements, try to use only your keyboard to navigate throughout the design. This way, you will be able to see whether it is accessible with a keyboard or not.

Checklist:

  • When the components received the focus state, other action doesn’t occur
  • Unless the user controls the focus state, they won’t go to the following elements automatically
  • Focus state is visually visible
  • All the elements are accessible with a keyboard only

Reference:

2.1.1 Keyboard (WCAG 2.1 Level A)

2.1.3 Keyboard (No Exception) (WCAG 2.1 Level AAA)

2.4.7: Focus Visible (WCAG 2.1 Level A)

Page Layout and structure

A straightforward layout and hierarchy allow users to gather the core information quickly at a glance. However, when you form the structure of the information on the page, you must remember to structure it logically. 

Users learn functionality while using the website and expect consistent functionality throughout the site. Also, for those with cognitive or learning disabilities or using a screen reader, the page layout and the organization of the contents must be well structured. To help them to understand the content, try to group associated items.

Checklist:

  • If you use the icon in more than one place, these two should have the same or similar functionality throughout the site
  • Navigation and the placing of the contents are consistent
  • Users can easily identify sections and groups of information.
  • Headings and labels provide the topic or purpose
  • All non-text components have an alternative text providing information

Reference:

3.2.3 Consistent Navigation (WCAG 2.1 Level AA)

3.2.4 Consistent Identification (WCAG 2.1 Level AA)

2.4.6 Headings and Labels (WCAG 2.1 Level AA)

Text Spacing

Giving more room for text spacing increases readability. Tracking is often measured as a percentage of font size and having 130% to 150% for tracking is optimal. To find the proper tracking, try different percentages and choose the one you think works best for you. 

Low vision users can read better and faster with increased line, letter, and paragraph spacing. To make your text more readable, these are the suggested text properties to apply: 

  •  Line height (line spacing) to at least 1.5 times the font size;
  •  Spacing the following paragraphs to be at least 2 times the font size;
  •  Letter spacing (tracking) to be at least 0.12 times the font size;
  •  Word spacing is to be at least 0.16 times the font size.

Checklist:

  • Your text doesn’t disappear or get cut off when adjustments to the text styles are applied
  • Text, images, and other content do not overlap with each other
  • All buttons, form fields, and other controls are usable and not broken
  • Avoid using a scrollbar when the text size is increased. It is best practice to show all of the text in a sentence. However, it is acceptable to have to scroll horizontally to get to different sections of a page

Reference:

1.4.12 Text Spacing (WCAG 2.1 Level AA)

Keep Color Blindness in Mind

According to Wikipedia, Color blindness (color vision deficiency) is the decreased ability to see color or differences in color. It can impair such tasks as selecting ripe fruit, clothing, and reading traffic lights, among other things. It affects approximately 1 in 12 men (8%) and 1 in 200 women worldwide. Therefore, designers must keep that in mind while designing digital products for the color-blind population.

There are different types of color blindness including:

  • Protanopia
  • Protanomaly
  • Deuteranopia
  • Deuteranomaly
  • Tritanopia (rare)
  • Tritanomaly (rare)
  • Cone Monochromacy (very rare)
  • Rod Monochromacy or Achromatopsia (extremely rare)

The designs should not be dependent on the colors to understand. A caption or description should follow any color-based component. Try adding a pattern, texture, or underline to help create a contrast between different components.”

 

What’s Next

Idea Theorem™ is a Toronto-based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Interface

A Guide to Design System

One of the challenges as your product scales is you work towards providing a standardized experience to your users. Your users start to expect specific ways that your product will behave even as you add new features to it.

To ensure a standardized experience is maintained even when you have multiple designers or developers working on the product, there needs to be a standard process and guidelines followed. If a new designer joins your team and needs to work on a new feature, they can quickly understand the standard procedure and system and start delivering the experience expected by your users.

This is where Design System comes in to help you build the guideline that can be followed by developers and designers when creating the product.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

One of the common misconceptions is that the:

  • The Design System is only for designers – the Style Guide
  • The Design System is only for developers – the Pattern Code Library

As we will learn in this post – a Design System is much more than that and plays a significant role in streamlining communication between developers and designers.

What is a Design System?

How can we deliver intuitive feelings and brand identity awareness to users throughout the product? Consistent and connecting elements help users understand and feel they are using the same brand.

The Design System is a unique guideline that follows the brand or company design style. Also, it sets minimum rules to maintain brand identity. It contains visual design elements and a pattern library that provides the standard of components that designers and developers use while they design and develop the product respectively.

The main goal of having the Design System is to increase the efficiency of the project, bring in standardization and maintain brand identity.

Why is the Design System important?

As the product grows, more designers and developers are added to the team. As every new hire comes, new ideas, patterns, and typography come into play. This can create chaos, but the system is in place to help stop that chaos and confusion. It brings consistency and increases the speed of product development.

A Design System can be beneficial for any organization, big or small. However, building a Design System takes time & effort, so here are some benefits:

Consistency

When multiple designers work together on the same project or if a new designer is onboarded in the middle of the project, they may struggle to maintain consistency in the design. Therefore, standardized design elements and UI components are created, which can be used consistently and repetitively across the platform.

Scalability

Having a Design System helps the product scale effectively. With elements already approved, it is easy for the product design and development team to create new features and expand.

Communication

The Design System acts as a single truth source that helps streamline communication between designers and developers.

Enhance User Experience

As an end-user of the product, the experience is very consistent throughout the product or products. As new features or products get launched, the user is already familiar with the product’s elements, patterns, and themes. This also helps reinforce the company’s brand – making it a double win!

What does a Design System Consist of?

Before creating the actual design system, designers should ask who will use it and how they will use it. Once they define the answer to those questions, they can start considering where to start for the design system and what to put in it.

Design Principle

Building solid design principles are the foundation for building a design system. It helps capture what good design means to the company and helps the team make meaningful decisions based on these principles.

Style Guide

Style Guide includes typography, icons, colors, spacing, illustrations, tone, and many more. Based on the style guide, users get a perspective of the brand. The Design System must define the standard on how to use each element. It should contain what to do and not do with elements and how to combine them so that designers can accurately deliver the desired product experience.

Accessibility Guidelines

The Design System should showcase the accessibility of the product. For example, it should be able to effectively define color contrast, keyboard focus and navigation, and screen readers. Learn more about accessibility guidelines here.

UI Kit

UI Kit consists of UI elements that are like LEGO blocks. They are built once and reused throughout the product by the designer to create their design. In the Design System, their functional behavior needs to be specified for the team to understand and use the elements effectively. In addition, they need to clearly state how the elements will look in different devices and screen sizes.

Master Control Library

Developers can use the UI Kit to add code and behavior to each UI element. This results in responsive and accessible code-based components which can be reusable throughout the platform. In addition, these components are tested for functionality and WCAG requirements(using a screen reader), bringing consistency and efficiency to the development team.

 

What’s Next

Idea Theorem™ is a Toronto-based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Research

How to Conduct Usability Testing During a Pandemic?

Before releasing a product, or even after its release, it is a good practice for businesses to evaluate their products’ usability and effectiveness of use through usability testing. Usability testing allows us to identify usability issues as it’s crucial because it equally impacts all users, regardless of their ability.

During the COVID-19 pandemic, the Idea Theorem™ worked with several companies to conduct remote usability testing to ensure that their product is usable and aligned with their expectations.

A remote moderated test is when a moderator provides the tester with tasks of testing a product, while in the comfort of their environment. In other words, the moderator and the testing are in the same virtual space, at the same time. As the tester works through the task, the moderator will observe and ask questions to understand their thought processes, and frustrations to gather more data.

In this article, we share how we conduct usability testing sessions during a pandemic to help you understand that you can also take the initiative to help your users thoroughly enjoy and be satisfied with your product.

Want to learn more about how to conduct usability testing during a pandemic?
Download the Whitepaper>>

Phase 1: Planning 

Define Goals and Objectives

Before gathering insight from the usability tests, the design team conducted several team meetings with the client to understand their business goals and the indicators of success that can be achieved from the usability tests. Often clients would specify specific flows or features in the product that needs to be tested. If not, the design teams will work collaboratively to help clients identify areas of concern that should be addressed through usability testing.

Writing the Test Plan 

usability test plan

After discussing with the client, we focus on creating the usability test plan. The usability test plan is like a blueprint that contains information such as:

  • The Purpose of the Test: An overview of the purpose of the test, to inform both the team and future readings about the test that was conducted, who conducted and additional information.
  • The Methodology: A brief introduction to how the test was conducted.
  • User Profile:  An overview of the user profiles, that will be referred to help recruit the right testers.
  • Moderator Script: A script that a moderator consists of instructions, topics, and questions that will be utilized for all test sessions, to ensure that all tests are consistent.
  • Task Cases: Task cases are written based on what typical users might go through while using the product.  These tasks focus more on a user goal that has an endpoint, in which users are expected to complete.
  • Questions (Pre-Test, Post-Task, and Past Test Questions): An outline of open-ended questions that the moderator should refer to when asking questions to the testers.

Define Resources 

Finally, the design teams identify the resources and tools to utilize for usability testing. As mentioned previously, the design team used remote moderated testing during the COVID-19 pandemic. To conduct a successful remote test, we used the following tools:

  1. Lookback: A third-party virtual space that allows us to talk to users, see what they are doing and record their interactions with the product. Using these types of tools will enable us to interview testers anywhere and anytime.
  2. Zoom: A video conference call tool used to start and join video conferencing from any device (desktop and mobile). Participants can join a meeting from an invite, share their screen and mute themselves. Zoom calls provide participants with a waiting space if the moderator has not joined the meeting. Moderators can also record meetings.
  3. Gotomeeting: Similar to Zoom, this software allows participants to join video conferences on both desktop and mobile. Moderators can also record meetings.
  4. Google Meets: Google Meets is handy if you do not want your participants to download any software on their desktop, simply open the invitation link and join the video call. Although, Google Meets may not support video recording.

Gathering Participants 

After the clients provide details about their users’ profiles, we find participants using the following methods:

  1. The client provides a list of testers that can take part in the tests. Our team then directly contacts the testers on behalf of the client to set an appointment.
  2. The design team sets up ads (for example, Linkedin) to recruit participants.
  3. Gather testers from well-established multicultural and general population databases. These databases help us target and recruit highly specific testers.

Phase 2: Facilitation 

Usability Testing Sessions

In this phase, the design team conducts usability testing sessions. The moderator and the tester will communicate with each other throughout the test. The moderator will guide the testers through the purpose of the test, the task cases, and the questions. Remote and in-person usability testing differ in the following areas:

  • In-person, Moderated Testing: Tests where the moderator and the testers are in the same physical environment, face-to-face interaction. 
  • Remote, Moderated Testing: Tests where the moderator and the testers are in the same virtual environment, video call interaction. 

The benefit of remote moderated tests is that we can invite many observers to the tests to watch. Still, the tester will be unaware of the observers, making them feel less intimidated.

Analyzing Data

After the completion of the test sessions, the design team analyzes the results from the tests and draws conclusions (why do the issues exist?). For the task cases, we focus on the following:

  1. Effectiveness: How effectively the user successfully achieves each task.
  2. Efficiency: The average time it takes for participants to complete each task.
  3. Satisfaction: How satisfied the users were with the product.

We organize the task case data based on issues, actions, and comments per task. The usability issues are prioritized by ranking them based on impact (if solved) and the severity of the issue (critical, serious, or minor).

We show the highest priority issues first, including the evidence and presenting the solutions. In addition, we provided insights about common usability issues and a UX analysis from a UX perspective.

UX recommendations are created to solve the identified usability issues. We also provided UX best practices to leverage to enhance the user experience. Apart from the usability issues, we also present the positive findings from the test sessions.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

Phase 3: Final Report 

After the analysis of the data, a final report is created to present the results of the usability testing sessions. When writing the final report, we focus on writing the report in such a way that if it is shared with a person that does not know about the project, they can understand it quickly. The usability report provides details about the entire usability testing process such as:

  • The Purpose of the Test: An overview of the purpose of the test, to inform both the team and future readings about the test that was conducted, who conducted and additional information.  
  • The Methodology: A brief introduction to how the test was conducted.  
  • Recruited Testers: The names, occupations, ages, and contact information of all the recruited participants.
  • Overview of Task Cases: A list of all the task cases presented to the testers.
  • Task Case Results: Results of the task cases. This includes the number of errors, successes, or failures of the task per participant.
  • Tester Feedback: Feedback from the testers from the survey that was sent after the test session.
  • Identified Behaviour Issues: A prioritized list of behaviour issues based on severity.
  • Recommendations: A list of recommendations to solve usability issues.
  • Observations: A detailed overview of the observations from the test sessions. We keep this section detailed so the reader can refer to it whenever they review the results of the task cases.

What Went Well 

Working with a team of designers helps speed up time in preparing the reports and it’s beneficial when assisting in the testing sessions.

Sometimes as moderators we may miss key information to identify, but another designer can help keep you on track to ensure all testing sessions are consistent.

Using a third-party platform that specializes in remote testing is more effective than using standard virtual meeting spaces since the recording tools and webcam are implemented into the platform. In addition, these are more professional to use as it creates an introduction and a waiting space for the tester while the moderator sets up.

Things to Keep in Mind

Learning Curves

Leave some dedicated time to learn about the resources that you will be utilizing for the usability test. Talk with a customer representative to conduct a product demo and ask questions. You should be well aware of the constraints, shortcuts, and features of the resources to help you conduct test sessions with ease.

Help Testers Setup

Spend some time prior to the test session to help your testers set up the virtual space. Ideally, you do not want to use your test session time with the setup process. Otherwise, you can create a video tutorial on how to set up the virtual space and share it with your testers.

Product Demo 

Have your client walk you through the entire platform and spend some time yourself using the product itself. You want to know all the ins and outs of the product, nothing should surprise you as your testers interact with the product. Testers may ask about the product, and you should be ready to answer any questions.

Conduct a Mock Test

Conduct a mock test internally with your team, to ensure that the usability runs smoothly. Be aware of inconsistencies within the test, and make sure that the third-party platforms work well with your test.

Conclusion 

Overall, the remote moderated usability sessions were successful. Moving forward, we would continue to use remote moderated usability testing as part of our design process, along with in-person moderated usability testing. It is beneficial, especially when conducting usability tests outside of Canada.

You can also download the whitepaper here.

What’s Next

Idea Theorem™ is a Toronto-based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Research

Usability Testing Vs. User Testing – Why it is important?

In software and application development, there is often some confusion regarding usability testing vs. user testing. Unfortunately, even experienced product owners, VPs of Technology and CIOs, and developers often confuse these two concepts.

So, in this article, we’ll break down the difference between user testing and usability testing – and explain why each is important.

User Testing Is Need-Based: Does The User Need To Use My App?

As a concept, user testing is not related to user experience (UX). Although, of course, a great user experience should always be the goal. Still, user testing aims to test the usefulness of your app concept and whether anyone will actually use it.

Let’s say you wanted to create an app built to promote bicycle safety by using GPS, gyroscopes, and motion sensors on a smartphone to detect crashes or potential emergencies and send a message to an emergency contact if a sudden stop or collision is detected.

It would involve researching with potential app users, such as commuting cyclists or cycling enthusiasts, through focus groups, interviewing bicyclists to see if they would use this app, doing field studies to assess its effectiveness, and researching other apps be competitive in your space.

This process of user testing allows you to see if there is a large user base for your app – and if it solves a real-world problem, which is essential for the success of any software application.

Usability Testing Is ExperienceBased: Are Users Able To Use My App Effectively?

Based on the findings from user testing – you initiate the design process to build the UI of the App. Once a prototype is created, it’s time for usability testing. This is when you’ll start iterating upon your current app design to ensure that it’s intuitive, convenient, and easy to use for those who install it.

Let’s use our above example of a cycling safety app again. After your team has established a need and demand for this product, you’ll move into usability testing. You will observe people using your app and ask yourself questions like:

  • Is it easy to understand how to use the app?
  • Should it stop and start automatically or run in the background?
  • Are there additional features you could add? Would they add to the experience – or detract from it?
  • Can you streamline the design or interface?
  • Is it pleasant to interact with your app?
  • Is the app stable and usable across every intended device or range of devices?

By iterating upon your design and getting feedback from real-life users, you’ll be able to answer these questions – and many more.

User Testing And Usability Testing Help Make Your App The Best It Can Be!

A successful app can’t just be streamlined, beautiful, and easy to use. It must also solve a need. Take Uber, for example. It is easy to use and convenient, but it also helps solve a slow, inconsistent taxi service that has plagued us for decades.

That’s why understanding the difference between the user and usability testing is so important. By building useful and beautiful apps through user testing and usability testing, you’ll be able to ensure that you lay the foundation for a successful app or piece of software.”

What’s Next

Idea Theorem™ is a Toronto-based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Experience

How Product Managers can drive business results through UX Design

A successful product should consist of user experience (UX) that meets the needs of the targeted users and ensures business goals are met. UX designers focus on aligning the product’s user experience and business goals, which is the key to the project’s success.

In this article, we’ll discuss how the UX design process can help improve the product’s development and explain the importance of product development’s key phases.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

Role of Product Managers

Product Managers are essential players in the development of the product. They are a bridge between different teams (including design, development, business, and marketing). They provide a delicate balance between different teams and focus on achieving business and user goals effectively through planning and management.

Product Managers define the goals and objectives of the product and how to achieve those. As a result, they know the product inside out and can effectively determine the type of users.

There are 2 ways Product Managers roll out their products:

  1. The product is directly released to the assumed users and gets feedback
  2. The product starts with an idea, get it user-tested and then works on creating the product.

Everyday UX for Product Managers

Product Managers need to know a lot about the product, which includes business and user objectives. For example, an app that provides healthcare advice to women. The product should understand women’s needs and health issues and provide the right solutions to their customers. The better the app can understand women’s health issues, the more users will use the app.

For Product Managers, UX has become an essential part of product development. They have to look from the user’s perspective if they want the product to be successful. If Product Managers understand the user needs and thinking, they will be able to solve the right problem, reduce the number of re-dos, and, worse, stop making the product fail. With a better understanding of the UX, Product Managers can help in:

  1. Growth of the product,
  2. User retention and engagement,
  3. Customer loyalty,
  4. Increase conversion rates,
  5. Save time and money.

What Does a UX Process Look Like?

When thinking about digital products or their features, Product Managers should understand the business objectives and be able to answer the below questions first:

  1. What problem are we solving?
  2. Who has this problem?
  3. What do we want to achieve?

Product managers and UX designers can create a uniquely user-friendly experience by answering these questions.

Following the UX design approach, it will help digital products reach their maximum potential. The UX design process can benefit all types of companies (big or small, corporate or startup) and at all stages of the product’s life cycle.

Different projects might require other processes, but overall below procedure is usually standard.

Human-centered design is the practice of implementing human perspectives throughout the design process. The UX design process begins with empathizing with the users before ideating solutions. Then, UX designers consider the needs of both the clients and build a successful product.

PHASE 1: EMPATHY PHASE

Step 1: Understanding Your Business Needs

Gathering information about the business and its needs can help UX designers to determine further steps. It can provide insights such as:

  • The issues and needs they identified.
  • Insights on what matters to them.
  • Their needs and wants from the project.

Identifying business needs helps define the project’s success, such as providing insights into the success metrics for the project. Stakeholder interviews and focus groups are research methods that help identify those insights.

Step 2: Understanding Your Users – What Users Need

This phase primarily focuses on user research to better understand the targeted users. Understanding the target users is crucial, as it helps develop solutions and design decisions. Your product will likely have users from various backgrounds, demographics, behaviors, needs, and pain points.

As a result, your product should ultimately accommodate those factors. Below are the tools that help UX designers to empathize with users’ needs and concerns.

Takeaway

The empathy design ensures that UX designers ideate solutions and unbiased decisions, focusing on designing a human-centered product. UX designers’ role is to provide creative and meaningful solutions for the users, which can be achievable by first understanding both the business goals and users’ perspectives.

PHASE 2: UX DESIGN PHASE

After establishing the business goals and user needs, user experience (UX) design is the next phase of the product’s design. UX design is not only about creating a product that is beautiful, streamlined, and easy to use. Instead, it takes a step further to design experiences to achieve specific goals with effectiveness and satisfaction. In addition, user experiences should also solve the issues identified in the empathy phase.

Iterative Process: This may require further iterations and refinements to the solutions before developing. Usually occurs after validating the solution in user testings.

Step 1: Ideating

Ideating means generating multiple ideas or concepts for the identified pain points. The ideation stage is an effective method that challenges UX designers to think outside the box and explore uncharted areas. The ideation stage is where innovative, groundbreaking, and creative solutions are created that can fill the missing element in the users’ experience.

Step 2: Rapid Prototyping

This step quickly creates visual representations of the functional elements and user experience flow through wireframing and wire flows.

Step 3: Feedback Session

Feedback sessions validate and prioritize the solution(s) to the intended users to ensure that users find it helpful and meaningful and solve their problems. If the solution(s) are not meeting users’ expectations, UX designers will return to ideation. Consider using user testing methods to gain feedback to conduct a successful feedback session.

PHASE 3: USER INTERFACE (UI) DESIGN PHASE

The final designs of the product are developed in a graphical layout. UI focuses on the look and feel, interactivity, and responsiveness. In addition, UI design helps guide users through their journey with the product using visual elements.

List of deliverables for UI Design Phase:

PHASE 4: USABILITY TESTING PHASE

The purpose of usability testing is to ensure that the targeted audience can use the product effectively. In addition, the goal is to ensure that the product is convenient, easy to use, and intuitive.

Conclusion

Now that you have a better grasp of common UX myths and misconceptions, you should know how user experience design is essential for achieving business and product goals — it’s not just about making things look good. To learn more about how UX design can help your product grow, download our Product Manager’s Guide To UX.

What’s Next

Idea Theorem™ is a Toronto-based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.