Author: Idea Theorem

Top Development Agency in Canada 2023

Post author By Idea Theorem
Post date April 28, 2023
No Comments on Top Development Agency in Canada 2023

We are thrilled to announce that our team at Idea Theorem™ has been recognized as the top Native React Developers and Top Software Developers for Medical in Canada by Clutch.co. We take immense pride in the recognition and thank our clients and partners for their continued trust in our capabilities.

Idea Theorem™ offers various development services, including web and mobile app development, API integration, and quality assurance testing. Our development approach is built on a deep understanding of the latest trends and insights in the industry, combined with our team’s years of experience.

Our team of developers takes a holistic approach to development, considering every aspect of the project to ensure a seamless user experience (UX) and user interface (UI). We use agile methodologies and best practices to ensure our development work is efficient and effective.

Our development capabilities extend beyond just coding. We also specialize in API integration and third-party integrations to ensure our clients’ systems can seamlessly communicate with other platforms. Furthermore, our quality assurance testing ensures that every aspect of the product is thoroughly tested to guarantee its functionality and performance.

“We are incredibly grateful to our clients for their support and trust in our team. With this recognition from Clutch, we are more inspired than ever to continue shaping the digital future by delivering exceptional experiences through our work!”
Suhela Kapoor, Chief Experience Officer (CXO) at Idea Theorem™.

Reviews

Being a top-performing agency listed on Clutch’s top rankings, we have amassed several outstanding reviews, and we are thrilled to share some of the feedback provided by our clients.

Client Review from Life Labs

LifeLabs, Canada’s biggest lab provider, conducts 112 million lab tests annually for millions of Canadians. They revamped their myresults™ portal, accessed by 3 million Canadians, to offer an exceptional experience amid competition and healthcare startups.

Due to platform complexity, we collaborated with Life Labs’ product team on a modular launch plan. Our dedicated team created the myresults™ portal components following the accessibility standards WCGA 2.0 AAA. The components were built using the Angular JS framework and Telerik Kendo UI as the components library.

The components library included buttons, text fields, cards, charts, sliders, and more. To ensure the components are accessible for individuals with disabilities, our testing and development team used screen reader tools such as JAWS, NVDA, VoiceOver, and Talkback.

Our team meticulously developed the design system library using the same framework employed by Life Labs in building their platform, ensuring seamless integration and collaboration.

LifeLabs’ myresults™ portal, with new features like virtual healthcare, online booking, and health risk assessments, helped them lead the competition. Idea Theorem™ provided custom code, components, and AODA compliance for accessibility. The portal’s beta customers gave positive feedback on the unique experience, which increased the customer base.

Client Review from the City of Toronto

Toronto’s Community Centres are essential in promoting health and success for everyone. However, they are hindered by an outdated data infrastructure, relying on traditional paperwork that’s laborious and difficult to improve. The staff’s valuable time is spent filling out forms and filing them instead of focusing on more critical issues that align with their mission.

To address this problem, the entire system and process need redevelopment to enhance the experience of the staff and community they serve. The community can interact better with the centers by switching to an online database.

Idea Theorem™ developed a community center portal in phases to help streamline the center’s operations and make it more efficient.

The digital portal is expected to boost the productivity of community staff by up to 30%, enabling data-driven decision-making and improved program registration and member onboarding. Additionally, the analytics tools on the portal will enhance the accuracy of program funding applications.

Our team developed the platform from end to end, leveraging cutting-edge programming technologies to ensure top-notch performance and user experience. The portal was built using the MERN stack, which consists of MongoDB, Express, React, and Node.js.

The frontend application is developed using the ReactJS JavaScript library, a popular and efficient choice for building user interfaces. In addition, our team utilized Material UI for the components library to further enhance the front end, providing a consistent and modern appearance.

We employed Node.js and Express on the backend, a powerful combination that allowed us to create robust and scalable server-side functionality. Lastly, MongoDB was chosen as the database for its flexibility and seamless integration with the rest of the MERN stack components.

“Idea Theorem™ has created a visually appealing, user-friendly product designed specifically for our unique needs. As we use the system and discover necessary tweaks, Idea Theorem™ is fast to reply and adjust the program as needed. I look forward to the efficiency, better customer service, and administrative ease this will provide.”
Rebecca Keenan, Director of Human Resources, City of Toronto.

Featured Case Study – Lumin Ultra

Lumin Ultra, a leader in diagnostic testing, required a software solution for wastewater health treatment analysis. The aim was to create an easy-to-use platform to track and display local water treatment results, including detecting COVID-19, E-Coli, and other harmful substances.

We built a complex technical backend system from scratch that captured data and turned it into tangible visualizations. Our solution allowed team members to access data remotely, and those testing in the field could easily input, adjust and visualize the testing results.

Our team created a user-friendly platform using NenxtJS that displays and tracks water treatment results to determine if samples contain harmful COVID-19, E-Coli, and other contaminants. We designed a complex technical backend system that tabulates data and converts it into tangible visualizations, allowing all team members to access and adjust testing results remotely.

Our expertise in UI/UX design and development enables us to provide solutions that not only improve the efficiency and effectiveness of operations but also have a significant impact on public health and safety. By partnering with LuminUltra, we were able to deliver a software solution that enables them to continue their mission of providing accurate and reliable biological diagnostic testing.

Conclusion

In closing, we sincerely thank our clients for their valuable contributions to our success. We eagerly anticipate receiving further feedback from you, which we will use to enhance our services and expand our offerings with Clutch.co as we evolve.

It’s an honor for us to have been acknowledged by Clutch as one of Canada’s finest Development agencies. We are determined to continue our mission of designing remarkable digital experiences that benefit businesses as we move forward toward shaping the digital future!

See our 2023 design awards here.

—

What’s Next

Idea Theorem™ is an award-winning design & development agency based in North America. Through our empathy-driven approach, we have crafted digital products that have positively impacted over 10 million users. Our mission is to shape the digital future by delivering exceptional experiences. Contact Us if you have any questions; we will gladly help you.

Tags Development

User Experience

Top UI UX Agency of 2023

Post author By Idea Theorem
Post date April 28, 2023

We are excited to share that our team has again been named one of Canada’s top UI/UX agencies by Clutch.co! This recognition is a testament to our unwavering commitment to providing high-quality design solutions to our clients.

At our agency, we are passionate about UI/UX design and its impact on a business’s success. Our team of experts works tirelessly to create user-friendly interfaces that look stunning and provide a seamless experience for the end users.

Here at Idea Theorem™, we integrate our passion for UI/UX design with insights acquired from years of professional practice in the industry. We stay current with the latest design trends and continuously seek new and innovative ways to create impactful design solutions for our clients.

Our capabilities extend beyond just UI/UX design. Our diverse range of services, which includes web and mobile app development, user interviews, testing, and more, enables us to offer comprehensive design solutions that cater to all our clients’ design requirements.

“We are incredibly grateful to our clients for their support and trust in our team. With this recognition from Clutch, we are more inspired than ever to continue shaping the digital future by delivering exceptional experiences through our designs!”
Suhela Kapoor, Chief Experience officer (CXO) for Idea Theorem™

Top UI UX Agency in Canada

Reviews

Being a top-performing agency listed on Clutch’s top UIUX ranking, we have amassed several outstanding reviews, and we are thrilled to share some of the feedback provided by our clients.

Client review from Woodbine Entertainment Group

Woodbine Entertainment Group, founded in 1881 as the Ontario Jockey Club, features Toronto’s sole casino, racetrack, and event venues like restaurants and bars with diverse atmospheres. The group desired a digital presence revamp to maintain its status as a top destination for all types of events.

We performed a UX Audit for Woodbine’s Host Your Event website and discovered several areas where the UX could improve, although the website was functioning correctly. The audit results surprised the Woodbine team, who used the recommendations to revamp the website.

We completely redesigned the website’s UX to make it easier to book venues and showcase hosting capabilities, leading to a significant increase in engagement (32% boost in time on site, 45% more page views, and a 16% increase in conversions).

“The team at Idea Theorem™ took the time to understand our business needs and challenges and ultimately produced an excellent solution. Their UX research and design is incredibly thorough, and it shows in the final product. We didn’t hesitate to begin another project with them once our first website build was complete.” –
Andrew Fuss, Senior Marketing Manager

Client Review from Green P Parking

Toronto aimed to revamp the UI and UX of their Toronto Green Parking Application to enhance customer experience. We conducted an app audit to improve usability, add new features, and align with the brand image to ensure a customer-centric message and pleasant UX.

Idea Theorem™ provided substantial value to the project and confirmed it was on the right track at a reduced cost. We collected qualitative and quantitative insights on the app’s UI, UX, and CX, identified user expectations, and optimized the app UI flows in the pre-development phase. Our changes resulted in a seamless, quick, and easy registration process, a well-received location feature, a simple Quick Park function, and a well-loved FAQ search feature.

“The Idea Theorem™ team worked efficiently to host focus group sessions and supported conducting a customer survey to gather and synthesize insights and recommendations in a digestible and insightful manner.”
Sasha Rana, Director of Customer Experience & Marketing

Client Review from IBM

IBM’s Co-Marketing program provides funding and resources to eligible Business Partners to drive marketplace demand. The program’s online portal, “IBM Partner World Co-Marketing,” offers tailored solutions and resource access for different partner users based on their specific needs and roles.

Idea Theorem™ was assigned the task of reimagining the user experience of their complex portal product, which involved multiple personas and workflows. The objective was to design a personalized user experience for each persona.

Idea Theorem™ designed a clean and intuitive user dashboard for IBM’s Co-Marketing Portal to assist Business Partners with marketing resources, assets, and funding to drive revenue and demand.

Our team created personalized user experiences for different job roles and personas by streamlining the process and design of the internal portal windows. As a result, the portal is now user-friendly and easy to navigate, regardless of the user’s needs and objectives.

Conclusion

In conclusion, we immensely thank our clients for contributing to our success. We are excited to receive more feedback from you and utilize it to improve our services and broaden our service options with Clutch.co as we continue to grow.

We are proud to be recognized as one of the top UI/UX agencies in Canada by Clutch. As we look toward the future, we remain committed to shaping the digital future by delivering exceptional experiences that help businesses succeed.

With our team’s passion, expertise, and dedication to innovation, we are excited to continue driving growth and success for our clients and contributing to the broader design community. Thank you for joining us on this journey, and we look forward to many more years of creating impactful designs and solutions together.

A huge thank you to 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

Tags Clutch, Idea Theorem Review, Top UX Agency, User Experience, UX Agency

Development

ChatGPT: The Lucky Charm for Developers

Post author By Idea Theorem
Post date March 17, 2023
No Comments on ChatGPT: The Lucky Charm for Developers

Developers know that writing code can be a time-consuming and sometimes frustrating task. But what if they could have a powerful tool to help you write better code faster? This is where ChatGPT comes in.

ChatGPT is a language model developed by OpenAI with many applications, including assisting developers in code completion, error detection, and more. Here are ten ways ChatGPT can help developers:

1. Code completion: ChatGPT can assist developers in code completion by predicting the following lines of code given some context. For example, if you’re writing a function that adds two numbers together, ChatGPT can predict the following line of code: the return statement.

python
def add(a, b): return a + b

2. Debugging: ChatGPT can help developers detect errors in code and suggest corrections. For example, ChatGPT can suggest the correct spelling if you misspell a variable name.

python
# Incorrect spelling of variable name value = 5 # ChatGPT suggests the correct spelling value = 5

3. Refactoring: ChatGPT can assist developers in refactoring code by suggesting ways to make it more efficient and readable. For example, if you have a nested loop that can be simplified, ChatGPT can suggest a more concise solution.

python
# Nested loop for i in range(10): for j in range(10): print(i * j) # ChatGPT suggests a more concise solution for i in range(100): print(i // 10 * i % 10)

4. Syntax Checking: ChatGPT can help developers check the syntax of their code and suggest corrections. For example, ChatGPT can suggest adding the missing symbol if you forget to close parentheses.

python
# Missing closing parentheses print(“Hello, World!” # ChatGPT suggests adding the missing symbol print(“Hello, World!”)

5. Autocomplete: ChatGPT can assist developers in autocompleting code by suggesting the names of variables, functions, and classes. For example, ChatGPT can suggest the full name if you start typing a function’s name.

python
# Typing the name of a function ma # ChatGPT suggests completing the function name max()

6. Documentation Generation: ChatGPT can help developers generate documentation for their code by suggesting comments and docstrings. For example, ChatGPT can suggest a docstring that describes its purpose if you write a function.

python
# Function without a docstring def add(a, b): return a + b # ChatGPT suggests a docstring for the function def add(a, b): “”” Adds two numbers together. Args: a (int): The first number. b (int): The second number. Returns: int: The sum of the two numbers. “”” return a + b

7. Code Optimization: ChatGPT can assist developers in optimizing their code by suggesting ways to make it more efficient. For example, if you have a loop that can be vectorized, ChatGPT can suggest using NumPy to do so.

python
# Loop that can be vectorized for i in range(len(x)): y[i] = x[i] ** 2 # ChatGPT suggests vectorizing the loop with NumPy import numpy as np y = np.square(x) “

8. Code Formatting: ChatGPT can help developers format their code according to a particular style guide or standard. For example, if you’re working with Python and want to follow the PEP8 style guide, ChatGPT can suggest formatting changes to ensure your code is consistent.

python
# Code that doesn’t follow PEP8 style guide my_var = 5 myDict = {‘key’: ‘value’} # ChatGPT suggests formatting changes to follow PEP8 my_var = 5 my_dict = {‘key’: ‘value’}

9. Code Testing: ChatGPT can assist developers in writing tests for their code by suggesting test cases and assertions. For example, ChatGPT can suggest test cases to ensure the function works correctly if you have a function that adds two numbers.

python
# Function to add two numbers def add(a, b): return a + b # ChatGPT suggests test cases for the function assert add(2, 3) == 5 assert add(0, 0) == 0

10. Code Review: ChatGPT can help developers review their code by suggesting improvements and catching potential errors. For example, if you’re working on a team and want to ensure that your code follows best practices, ChatGPT can suggest improvements to make it more efficient and readable.

python
# Code that can be improved def multiply(a, b): c = 0 for i in range(b): c += a return c # ChatGPT suggests improvements to make the code more efficient def multiply(a, b): return a * b

In conclusion, ChatGPT can be an incredibly useful tool for developers, assisting with code completion, error detection, refactoring, and more. By leveraging the power of this language model, developers can save time and improve the quality of their code.

However, remember that it is still not always 100% accurate, so contact a qualified developer if you are building a digital product or professional service.

—

What’s Next

Tags AI, Development

Mobile App Design User Experience User Interface User Research

Listening to the Voice of the Customer: Understanding Your Audience’s Needs and Expectations

Post author By Idea Theorem
Post date February 27, 2023
No Comments on Listening to the Voice of the Customer: Understanding Your Audience’s Needs and Expectations

Product design requires a deep understanding of the target audience’s needs and preferences to create solutions that meet their expectations. Product designers use various methodologies, such as stakeholder interviews and information gathering, to achieve this.

Stakeholder interviews are one-on-one conversations that provide detailed information about the product. The designer defines goals, identifies user insights and assumptions, and success metrics to drive design decisions. These metrics ensure the product meets the users’ needs.

Information gathering involves tools such as personas, customer journey maps, current landscape & competitor research, and review analytics. Personas represent real users within the target audience and reveal their motivations, needs, and pain points. Customer journey maps help to understand customers and propose solutions. The current landscape & competitor research involves analyzing existing platforms and competitor products. Review analytics involves analyzing user behavior and feedback to understand better how users interact with the platform.

The planning & strategizing session is the last step in the information-gathering process. In this session, the designers finalize the user research methodologies to ensure comprehensive customer feedback. This session helps ensure that the information gathered is comprehensive, relevant, and actionable. Using these techniques, product designers can create products that meet the users’ expectations and are designed with their needs in mind.

The planning and strategizing session in user research is a crucial step in which the client and researcher work together to prioritize the areas of user research, finalize the methodologies, and ensure the solutions cater to the target audience’s needs.

This session may include stakeholder interviews, data analysis, workshops, prioritization grids, “how might we” statements, and affinity mapping. The goal is to create comprehensive and relevant solutions for the target audience.

Focus Groups: The focus groups process of the project consists of three stages: recruitment & planning, focus group sessions, and evaluation. The recruitment & planning stage involves the development of a plan for the project, which includes the project scope, methodology, questionnaire, user groups, schedule, and location.

Participants are then recruited and screened based on the defined user group criteria. During the focus group sessions, participants are welcomed and introduced, the purpose of the meeting and ground rules are defined, specific topics are discussed, and participants can share their final thoughts. The moderator facilitates the discussion and thanks all participants when the focus group is complete.

Usability Testing: The usability testing process of the project consists of two stages: planning and recruiting & facilitation. In the planning stage, the study’s goals are defined, and tasks are written based on the goals, focusing on exploratory and specific tasks.

Metrics are defined to measure the improvement of the website’s usability, and a usability testing plan includes the study goals, participant profiles, moderator scripts, and metrics/questionnaires. In the recruiting and facilitation stage, the target audience’s demographic is understood, participants are recruited, and test sessions are conducted.

During the test sessions, the team introduces themselves, a pre-test questionnaire is completed, tasks are conducted, and post-task questions and a system usability scale are completed. An observer is involved in all test sessions to collect data and metrics, and video and audio recordings are made with participant approval. The team also collects data on usability issues and user experience barriers, and discussions are held with testers to gather further insights.

User Interview: The project will undergo a three-stage user interview process to gather valuable and valid feedback from real users. The process begins with the planning stage, where the research goals and objectives are defined, and the target audience is identified.

The user interview plan is then written, including the study’s purpose, participant profiles, moderator script, and metrics/questionnaires to be used. The second stage is the recruitment and facilitation stage, where participants are recruited and screened using questionnaires.

During the one-on-one interview sessions, the facilitator and participant discuss the pre-interview questions, topic-specific questions, pain points and problems, user tasks and activities, opinions and attitudes, and post-interview questions. The facilitator is responsible for recording the data and providing video and audio recordings (with the participant’s approval).

Learn More About Our User Interview Process

Online Survey: The planning phase will involve preparing the prototype link for distribution to users, defining the topics and questions to be asked, dividing the questionnaire into categories if necessary, setting up the survey on an online tool, monitoring the survey feedback, and collecting data.

After collecting the survey results, the final deliverables will consist of analytical insights. These insights will be analyzed using quantitative and qualitative data to identify trends in customer perception, thoughts, and behaviors. The commonalities, themes, and ideas will be noted, and feedback will be grouped based on specific types of respondents and subgroups.

The final report will include the results from the survey and detail the significant findings, conclusions, and patterns, and provide actionable insights. The report will present both high-level findings and a detailed analysis.

Case Study: Johnson Insurance User Survey

Ethnographic Research: Ethnographic research is a type of qualitative research that aims to understand the culture and experiences of people. There are three main types of ethnographic research: Contextual Inquiry, Field Study, and Diary Study.

Contextual Inquiry is a semi-structured interview method where users are asked standard questions and then observed and questioned while they work in their environment.

Field study is conducted in the user’s context and location and provides insight into user processes, learning user vocabulary, and businesses’ interactions with customers.

A diary study collects qualitative data about user behaviors, activities, and experiences over time through a diary that the participants are asked to keep. This method helps gain a contextual understanding of user behaviors and experiences over time.

Eye Tracking Study: The planning phase for an eye-tracking study will involve setting up the eye-tracking cameras and determining the type of visualization needed for the study. The cameras will track the movement and position of the eyes using a special light to create a reflection in the participant’s eyes.

The cameras then capture those reflections and use the data to estimate the position and movement of the eyes. The resulting data will be projected onto the user interface, visualizing where the participants looked. The visualization types include gaze plots, gaze replays, and heatmaps, which can provide qualitative and quantitative insights into the participant’s gaze behavior.

Lastly, the analysis and report phase will review the recorded insights gathered from the user research sessions immediately after completion. These insights will be distilled into essential information and shared with stakeholders for reference.

The final report will summarize the significant findings and recommendations based on the research. The customer insights report will be broken into several sections, including an executive summary, study details, participant profiles, updated user personas, a customer journey, general findings, quantitative data, and recommendations.

The report will also include an appendix with the observer’s full notes and will be presented in two formats: a high-level summarized overview and a deep analysis report.

—

What’s Next

Tags UI Design, User Experience, User Experience design, user research, UX, UX Design

User Experience User Interface Web Design

6 UI / UX Trends We Are Loving Right Now

Post author By Idea Theorem
Post date February 14, 2023
No Comments on 6 UI / UX Trends We Are Loving Right Now

User interface (UI) and user experience (UX) design are two essential components of creating successful digital products. The way a user interacts with a website, app, or software is heavily influenced by the design choices made by UI/UX designers. As technology continues to evolve and consumers become increasingly demanding, it’s essential to stay up to date on the latest UI/UX design trends. This blog will explore the latest developments and trends in UI/UX design that we love and what they mean for designers and end-users. From the rise of dark mode to the growing importance of accessibility, this blog will provide a comprehensive overview of the current state of UI/UX design and where it’s headed in the future.

1. Dark Mode with Optional Light Mode

Dark mode is a popular trend in UI/UX design that has gained widespread adoption in recent years. It is a design feature that provides a darker, more muted color palette for the interface’s background, text, and other elements.

The dark background makes the interface more visually appealing and easier on the eyes, especially in low-light environments. Popular apps and websites like YouTube, Twitter, and Google Maps have widely embraced it.

Benefits of Dark Mode

A. Improved Visual Comfort

The most significant benefit of dark mode is that it improves visual comfort. The darker background reduces eye strain, especially when using devices at night. In a low-light environment, the dark background of dark mode reduces the amount of light emitted by the screen, making it easier on the eyes.

B. Better Battery Life

Dark mode can also extend the battery life of your device. AMOLED displays, commonly used in smartphones, only light up the pixels needed to display content. With a dark background, fewer pixels need to be lit up, thus consuming less power and extending the device’s battery life.

C. Increased Contrast

Dark mode provides a high-contrast visual experience, making it easier for users to read and navigate interfaces. This is particularly helpful for users with color blindness or other visual impairments.

D. Aesthetically Pleasing

Dark mode provides a visually pleasing aesthetic that can make an interface look sleek and modern. The dark background contrasts bright, eye-catching colors, making them stand out even more.

Dark mode is a powerful tool for designers to create visually appealing and easy-to-use interfaces. It offers improved visual comfort, better battery life, increased contrast, and an aesthetically pleasing design. As dark mode becomes more widely adopted, designers need to consider incorporating it into their designs to meet the needs and preferences of users.

2. Voice – Activated User Interface

Voice-activated user interface (UI) is a technology that allows users to control digital devices and software using voice commands. With the rise of voice assistants such as Siri, Alexa, and Google Assistant, voice-activated UI has become a popular and convenient way for users to interact with technology.

Benefits of Voice-Activated UI

A. Convenience

Voice-activated UI is incredibly convenient, allowing users to perform actions and access information hands-free. This can be especially useful when driving, cooking, or doing other tasks that require both hands.

Voice-activated UI makes technology more accessible for users with disabilities, as it eliminates the need for manual input methods like typing or touch.

B. Improved User Experience

Voice-activated UI can improve the overall user experience by allowing users to interact with technology more naturally and intuitively. Users can ask for what they want rather than having to navigate complex menus and interfaces.

Challenges of Voice-Activated UI

A. Privacy Concerns

Privacy is a significant concern with voice-activated UI, as users are often required to share sensitive information, such as their location and personal preferences.

B. Accuracy

Voice recognition technology is not always 100% accurate, leading to frustration for users and negatively impacting the user experience.

C. Interoperability

Interoperability is also challenging with voice-activated UI, as different devices and software may not work together or recognize the same commands.

Voice-activated UI is a promising technology that offers many benefits but presents challenges. As technology continues to evolve, it will be necessary for designers to strike a balance between convenience, accessibility, privacy, and accuracy to create the best possible user experience.

3. VR & AR

Virtual Reality (VR) and Augmented Reality (AR) are emerging technologies that revolutionize how people interact with digital devices and content. These technologies offer users a new level of immersion and engagement, making them an exciting frontier for UI/UX design. In this blog, we’ll explore how VR and AR are shaping the future of UI/UX design and what designers need to consider when working with these technologies.

Virtual Reality (VR)

VR is a technology that creates a fully immersive digital environment where users can interact with virtual objects and spaces. VR is often used for gaming, education, and training, but it also has the potential to transform other industries, such as real estate, tourism, and healthcare. When designing for VR, designers must consider factors such as ergonomics, spatial awareness, and user comfort, as well as creating intuitive and seamless interactions that allow users to immerse themselves in the virtual environment fully.

Augmented Reality (AR)

AR is a technology that overlays digital information in the real world, allowing users to see and interact with virtual objects in the physical world. AR has many potential applications, including gaming, education, retail, and marketing. When designing for AR, designers must consider factors such as context, user location, and device capabilities and create interactions that feel natural and intuitive for users.

VR and AR are exciting new technologies that offer a wealth of possibilities for UI/UX design. Whether designing for VR or AR, designers must consider these technologies’ unique challenges and opportunities, such as ergonomics, spatial awareness, context, and user comfort. By understanding these considerations, designers can create experiences that are both immersive and intuitive, taking the future of UI/UX design to a whole new level.

4. Scrolly Telling

Scroll telling is a type of user interface (UI) and user experience (UX) design that utilizes scrolling as a primary method of navigation and storytelling. Scrolly telling allows users to interact with content dynamically and engagingly by allowing them to scroll through a series of related images, text, videos, or other media elements to learn more about a topic or story.

Scrolly telling is often used to present information more immersive and engagingly than traditional forms of storytelling, such as text-based articles or static infographics. By using scrolling to reveal information, scrolly telling can create a sense of progression and build suspense as users move through the content.

From a UX perspective, scrolly telling can help to simplify complex information by breaking it down into smaller, more manageable chunks that are easy to digest. It can also help to increase engagement and retention of information by using visuals, animations, and other interactive elements to bring the story to life.

However, scrolly telling also presents challenges, such as ensuring that the content is organized and presented logically, easy to follow, and that users can understand the connections between different pieces of information. Additionally, it is essential to consider the design of the scrollbar and other navigation elements to ensure that users can easily control their experience and understand where they are in the content.

Overall, scrolly telling can be an effective and engaging way to present information and tell stories. Still, it must be carefully designed to provide a high-quality user experience.

5. Motion Design

Motion design refers to animation and other dynamic visual effects in the user interface (UI) and user experience (UX) design. It involves the creation of visually engaging and interactive animations and transitions designed to improve the overall user experience and make interfaces more intuitive and easier to use.

Motion design can help users understand the relationships between different elements on a screen, provide interaction feedback, guide the user’s attention, and add a sense of personality and brand identity to an interface. By using motion, designers can create a more engaging and dynamic experience for users, making it easier for them to understand how to use an interface and navigate between different screens and sections of an app or website.

In terms of UX design, motion design is an important tool for improving the overall user experience by adding a layer of visual interest and interactivity to an interface. It can help to increase engagement, provide instant feedback to users, and make interfaces more intuitive and memorable.

However, it is essential to use motion design in a purposeful and meaningful way and to consider the user’s context and needs when incorporating animation into an interface. Additionally, it is vital to ensure that animations and transitions are optimized for performance and do not slow down the interface or distract the user.

Overall, motion design is an essential aspect of UI/UX design that can significantly enhance the user experience and make interfaces more engaging and memorable.

6. Accessible Design

While this is not a trend per se, it is always good to keep accessibility in mind. Accessibility refers to the practice of designing digital products and services that are usable by people with disabilities. This includes people with visual, auditory, motor, and cognitive disabilities. Accessible design is not just about compliance with accessibility standards and regulations but about creating inclusive and usable products for everyone.

Why is Accessible Design Important?

A. Inclusivity

Accessible design promotes inclusivity by ensuring that all users can access and use digital products and services regardless of ability. This means everyone has equal access to information and opportunities, regardless of their abilities.

B. Compliance with Regulations

In many countries, some laws and regulations require digital products and services to be accessible, such as the Americans with Disabilities Act (ADA) and the Web Content Accessibility Guidelines (WCAG). Failing to comply with these regulations can result in legal action and significant financial penalties.

C. Improved User Experience

Accessible design can also improve the user experience for everyone, not just users with disabilities. For example, using accessible design principles like clear and concise language, consistent navigation, and easy-to-use controls can make a website or app easier to use for everyone, not just people with disabilities.

What Designers Need to Consider for Accessible Design

A. Understand Accessibility Standards and Regulations

Designers should understand accessibility standards and regulations, such as the ADA and WCAG, to ensure that their products comply with these requirements.

B. Test with Real Users

Designers should test their products with real users, including those with disabilities, to get feedback on how the product can be improved for accessibility.

C. Use Accessible Design Principles

Designers should use accessible design principles, such as clear and concise language, consistent navigation, and easy-to-use controls, to create products that are usable by everyone.

D. Use Accessible Technologies

Designers should use accessible technologies, such as screen readers and keyboard navigation, to ensure that their products are usable by people with disabilities.

This product is highly accessible and user-friendly, allowing users to browse allergen-free offerings with a mouse or keyboard. The accessibility toggle allows customization of text, cursor size, and more. The product pages are simple, accessible, and include tappable elements, clear descriptions, and text-based nutrition facts.

Accessible design is an essential aspect of UI/UX design that ensures that digital products and services are usable by everyone, including people with disabilities. Designers must understand the importance of accessible design, comply with accessibility standards and regulations, and use accessible design principles and technologies to create inclusive and usable products. By doing so, designers can create digital products that are not only accessible but also provide a better user experience for everyone.

Final Thoughts

In conclusion, the UI/UX design world is constantly evolving, and these trends are just a glimpse of what’s to come. Dark mode, motion design, accessibility, VR and AR, voice-activated user interface, and scrolly telling are some of the many exciting trends shaping the future of UI/UX design.

These trends enhance the visual appeal of digital products and services and improve the user experience by making them more intuitive, accessible, and engaging. By keeping up with these trends, designers can create digital products that are aesthetically pleasing and offer a seamless and enjoyable user experience. The future of UI/UX design is exciting, and we can’t wait to see what’s next.

—

What’s Next

Tags UI Design, UI UX, User Experience, User Experience design, UX Design

Development Mobile App Design User Experience

Idea Theorem™ Expands Partner Network to Expedite Digital Transformation

Post author By Idea Theorem
Post date January 26, 2023
No Comments on Idea Theorem™ Expands Partner Network to Expedite Digital Transformation

Digital transformation is changing the technology landscape. Companies wishing to stay on top need to adopt new technologies and tools to reach customers where they are; online. Almost all industries are facing a rapid shift towards digitization, accelerated by the COVID-19 pandemic, but many need more expertise or workforce to get the job done effectively. Because of this, companies are seeking partners with more advanced technical skills and resources to help them achieve their goals.

Idea Theorem™ is proud to announce the expansion of their partner network, which now features strategic partnerships with both Microsoft and Salesforce. Idea Theorem™ is an award-winning Toronto-based UI UX design & development agency with several prominent clients in verticals finance, healthcare, and the public sector. These two new partnerships will allow for exclusive integrations into Microsoft and Salesforce products, accelerated digital growth, and an expanded client base.

“We are honoured to have the opportunity to become a part of the Microsoft and Salesforce partnership network. These partnerships are part of a company-wide strategic goal we had to accomplish this year, with digital transformation in mind.” Said Suhela Kapoor, Chief Experience Officer at Idea Theorem™. “We have already begun to work with several clients using the innovative tools and support provided by both Microsoft and Salesforce and are looking forward to working on more projects in this space.”

The Idea Theorem™ team is no stranger to Microsoft development projects, utilizing Azure cloud, Microsoft Dynamics 365, and Power BI in several recent projects. However, Microsoft Partners are granted exclusive opportunities to work with emerging technologies and specific integrations that allow Microsoft-based clients to utilize their vast app and program offerings. Idea Theorem™ supports Microsoft integrations and works with clients to build better Microsoft digital products.

Salesforce Partners are given the ability to develop and provide custom solutions and integrations within their expansive network of sales, marketing, and professional services products. Idea Theorem™ is now one of many innovators officially developing applications and digital products for Salesforce customers leveraging lighting design system.

Idea Theorem™ intends to continue growing its partnership network to provide their clients with the fastest delivery and most up-to-date solutions. With a strong focus on the delivery of Enterprise Solutions, Idea Theorem™ is setting itself up for further success in the Canadian technology market with our newly expanded partner network.

—

What’s Next

Tags Development, UI UX

Development

Angular Vs React Vs Vue

Post author By Idea Theorem
Post date March 4, 2022

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.

—

Tags Angular, Development, React, Vue

Development

What You Need to Know About AODA Guidelines

Post author By Idea Theorem
Post date January 24, 2022

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.

—

What’s Next

Tags Accessibility, AODA, Compliance

User Research

A Guide to UX Competitors’ Analysis for User Research

Post author By Idea Theorem
Post date January 25, 2021

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:

Compare your product’s positioning, design, and solution (and more) against competitors.
Identify market gaps that your competitors aren’t targeting, such as a new feature.
Understand the strengths and weaknesses of your competitors.
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:

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.
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:

Basic information such as the company name, and URL (direct or indirect).
Value proposition.
Target audience (user demographics).
The advantages of the product, such as useful key features or solutions to the product.
Design details that work or do not work.
The disadvantages of the product, such as usability issues, and missing features. Consider reading customer reviews to get that insight.
Identify the revenue streams (recurring revenue, transaction-based revenue, project revenue, or service revenue) and the marketing channels that they utilize.
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.
Testing the companies’ products yourself. When testing, consider taking screenshots or screen recording your journeys.
The visual design of their product.
Checking their websites or app store page to see how they promote their products (marketing tactics).
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:

Are there any market gaps that the identified competitors have not targeted?
Are there any solutions that can be combined that are not done yet?
What are the product strategies? What are the marketing strategies? Why are the other competitors behind those excelling companies?
Are there any problems you’ve identified that the competitors have not addressed?
Have you identified valuable insights that can be used on your targeted audience?
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:

Key insights backed with evidence, avoiding general findings.
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:

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.
Avoid matching with competitors and duplicating existing solutions. Instead, focus on today’s user problems.
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.
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.

Tags User Experience, User Experience design, user research, UX, UX Design

User Experience

Things to Keep in Mind While Designing for Web Accessibility

Post author By Idea Theorem
Post date November 27, 2020

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.

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

Tags Accessibility, UI, User Experience, User Interface, UX, UX Design, web accessibility