Search Results

The presence of AI in UX design has been increasing and several innovative tools have emerged with the focus to help designers through their process. Lets start listing down some of the Top AI Tools for Designers to Explore in 2024. Many recognized design oriented companies like Adobe, Figma, Dovetail and User Testing are experimenting AI potential in their offerings. It is time that designers should start testing these features to get the best to help them improve their productivity and efficiency. Please note: These tools are not listed as per rankings and designers take up the opportunities to test all the tools to make them relevant to their context of work. List of AI Tools being reviewed: Adobe Sensei UX Pilot FigJam AI Dovetail AI User Testing AI Insights MidJourney Dice Khroma Fontjoy Ulzard Validator AI AutoDraw Topaz Labs Let's Enhance Vance AI Remove BG Hotpot AI Designs AI DALL-E2 Adobe Sensei Adobe Sensei is a huge offering with cuts through creativity, marketing, advertising, documents and many more. Adobe Sensei on the creativity side is an AI-powered platform that integrates with Adobe design tools. It offers the designers variety of tools to work based on their goals. Adobe Firefly is one of the potential superstar tool which is still in beta stage now. It offers features like auto-tagging images, content-aware fill, and automatic image adjustments. These capabilities streamline the design process and enhance productivity. Source: www.adobe.com/sensei.html UX Pilot This is a very potential tool that claims to have capabilities to support a designer from discovery to visual design process. It's especially powerful when analyzing insights and synthesizing them into actionable items. It seem to have the potential to support designing workshops which could be difficult and nerve wrecking for first-time facilitators. It helps setup research questions and extract the insights from the interview findings. Design, conduct workshops and analyse, ideate in short period of time. It also provides a capability to analyse requirements in word form and recommend color and style guides accordingly. The amazing thing is that the features could be utilised by installing simple figma plugins. Source: www.uxpilot.ai Plugin Source: www.figma.com/community/plugin/1224384489638070064 Interested? You can have a look at this good article by Adam Fard. Article: www.adamfard.com/blog/ai-ux-design FigJam AI FigJam AI is an innovative feature within FigJam. It helps teams and individuals organize, summarize, and generate content within their thinking process. FigJam AI helps you instantly visualize ideas, suggest best practices, and automate tedious tasks. Currently, in its open beta phase, it is accessible to users on any team or plan. Some of the features are generating boards and diagrams through template, sorting and summarizing sticky notes, Jambot, a useful ChatGPT-powered FigJam widget that the company rolled out recently adds benefit to the process like rewriting and summarizing the selected content to share in email. Source: www.figma.com/figjam/ai/ Dovetail AI Dovetail uses NaturalLanguage Understanding (NLU) to identify tone, sentiment, and even emojis in a chat. It automates the tedious tasks with powerful machine learning features built for uncovering insights faster. It make sense of large amounts of data with speed by automatically clustering your highlights by theme in canvas. It also auto-summarize key takeaways from interviews, feedback, and customer data on the fly. It has this capability to automatically identify positive and negative sentiment in your transcripts and notes. Source: www.dovetail.com/ai UserTesting AI Insights UserTestings tool powered by intelligence offers designers insights derived from user research and testing. By examining user feedback the AI can identify recurring themes, sentiments, and emerging trends enabling designers to make informed decisions. Some of the important features that have been highlighted are AI Insight summary, Friction detection, Sentiment analysis, Interactive Path Flows, Sentiment and Intent Path, Instant Insight, Keyword mapping, Click maps and Audience QA and performance management. Source: www.usertesting.com/platform/AI Midjourney Midjourney seems like a great tool to gather quick and unique visual inspiration based on prompts. It is one of the quickest ways to create high-quality design concepts in different domains. It is great for producing a dynamic range of images that might meet your needs. It also provides you opportunity to refine images until you're completely satisfied with the results. The designer need to refine their prompting skills to get the best output and there could be inconsistency in the output if not done precisely. Source: www.midjourney.com Dice This tools is in Alpha/Beta stage. Dice claim to be a groundbreaking AI-powered tool designed to revolutionize the inspiration & ideation process. A tool that could unblock you and give you a fresh perspective on a problem you’ve been mulling over for hours. Dice provides information enough to generate innovative and context driven UX/UI ideas based on your project’s unique needs, goals & constraints. It attempts to provide clear and actionable direction for design implementation. Assist in ideation and brainstorming process and save hours of staring at a blank canvas due to creative block. It leverages finely tuned Large Language Models (LLMs) like GPT to analyze and understand your project’s context, objectives and requirements, translating these inputs into a curated set of design concepts, insights, and inspiration in real-time. Source: www.dice.design Khroma This tool help designers to creates limitless color palettes. Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save. It creates an array of color palettes for you to discover, select, and keep. By drawing insights from a multitude of color combinations crafted by individuals online, Khroma presents an array of options suitable for a variety of applications. It ranges from fonts and seamless transitions to harmonious color schemes and even unique visuals. Source: www.khroma.co Fontjoy This piece of tool help generate font combinations with deep learning. Font pairing is a classic problem in the design world. Different fonts can be used to draw attention, lead the eye, or even form the foundations of a brand identity. Source: www.fontjoy.com Ulzard This tool is one of the world's first AI tool for UI design. It transform screenshots to designs, convert hand-drawn sketches to wireframes, generate UI designs with simple text. Uizard offers a drag-and-drop interface to create custom designs quickly and easily. The AI design software uses machine learning algorithms to create stunning digital assets like website designs, web apps, mock-ups, mobile apps, and more in a no-code framework with a simple text prompt. Some of the noted features that Ulzard provides are as follows: Uizard Autodesigner, which generate multi-screen mockups with simple text. Uizard Screenshot, allows you to upload screenshots and transform them into editable mockups with the power of AI. Uizard Wireframe, scan your hand-drawn wireframes and transforms your wireframe sketches into digital designs. It also offers the ability to generate attention heatmaps to predict the areas of a project where users focus their attention the most. Source: www.uizard.io/ai-design Validator AI A free AI Validator tool that allows users to enter their startup idea and receive objective feedback and criticism from AI. The tool provides detailed feedback on market opportunities, legal issues, potential clients and more. Users can also access articles, fast startup tips and contact the developer for 1 per 1 help. Source: www.validatorai.com AutoDraw AutoDraw is a experimental drawing tool from Google Creative Lab that suggests icons/designs based on your doodles. The platform uses machine learning algorithms to analyze your doodles and suggest icons that match your drawing. On AutoDraw, users can edit and resize the icons to fit their designs. The platform is ideal for designers who need to create design icons quickly. Source: www.experiments.withgoogle.com/autodraw Topaz Labs Topaz Labs is a AI editing tool names Topaz Image AI that enhances image and preserve as many image details as possible and sharpen detail for a clear and crisp photo. It eliminate noise and recover crisp detail in your images with this noise reduction tool. The Topaz Labs also has another offering called Topaz Video AI remarkable video upscaling, de-interlacing, and frame interpolation optimized for local production workflows. Source: www.topazlabs.com Let's Enhance Let's Enhance is an AI design tool to improve the quality of images. It offers a range of features, including upscaling and color correction. It is an excellent tool for graphic designers looking to enhance low-quality images or improve the resolution of images without compromising on quality. Its key features include its intuitive user interface, advanced AI algorithms for image enhancement, and batch processing for editing multiple images simultaneously. It also has a text-to-image generator which can be used to generate stunning visual art quickly. Source: www.letsenhance.io Vance AI Vance AI is a suite of AI-based tools for image editing and manipulation, including image enhancement, AI upscale of image, background removal, text recognition and image recolorizer. Source: www.vanceai.com Remove BG Remove BG is an AI-powered tool that helps remove backgrounds from images. It uses advanced algorithms to detect the subject in an image and remove the background automatically. It provides options to download image with transparent background, allows background replacement and supports various image formats. Source: www.remove.bg Hotpot AI Hotpot AI helps you create amazing graphics, pictures, and writing. AI tools like AI Art Generator spark creativity and automate drudgery while easy-to-edit templates empower anyone to create device mockups, social media posts, marketing images, app icons, and other work graphics. Hotpot offers AI Helpers and simple software for amazing graphics, images, and writing. Their services include AI copywriting, background removal, object removal, picture colorization, photo restoration, image upscaling, art personalization, app localization, and more.Their focus is to spark creativity and automate drudgery, helping you focus on impactful work and conquer mental blocks. Source: www.hotpot.ai Designs AI Designs AI is an AI platform that offers a suite of tools for creating graphic designs, videos, banners, mock-ups, and more. It uses advanced algorithms to analyze user preferences and generate personalized design recommendations as well as provide suggestions for improvement. The platform offers a variety of design templates to choose from. Users can customize colors, fonts, and layouts to create a unique design. It can also be used to create thousands of variations of a design. Its provides features like access to a design library with 170M premium stock images and 10K graphics, shapes, frames, add stickers. It export the final design in multiple dimensions. Easy project collaboration communicate and share projects with team members in real-time. Source: www.designs.ai DALL-E2 DALL-E2 is an AI system offered by OpenAI that can create realistic images and art from a description in natural language. This tool can create original, realistic images and art from a text description. It can combine concepts, attributes, and styles. In January 2021, OpenAI introduced DALL·E. One year later, our newest system, DALL·E 2, generates more realistic and accurate images with 4x greater resolution. It is still a research project that can easily revolutionize images by increasing their creativity through the diffusion model. For example, you can ask DALL-E to create an image of “a cat riding a skateboard” and then ask another user to create an image of “a dog wearing a hat.” DALL-E will then combine the two images into a single image. Source: www.openai.com/dall-e-2 Final Thoughts While reviewing some of the Top AI Tools for Designers to Explore in 2024, these tool has a lot of potential and we need to explore further to take our creativity to the next level and stay ahead of the curve in the fast-paced constantly changing design industry. During observations of various tools and their capabilities, it was clear that there are not many AI tools that focus on end-to-end products or design processes. They are more focused on specific design activities and it will be great to see in the coming days how it shapes up shortly. These AI capabilities are here to stay and will grow exponentially. It makes perfect sense for designers to not fear replacing them, but harness the power of AI to co-create through Human-AI partnership and build a better customer experience for the future. Worth a Look: Canva has listed some really nice AI tools and which are worth a look by clicking on the link below: Source: www.canva.com/your-apps Reference: This article has been inspired by Dhananjay Mukerji, Adam Fard and other referenced articles. Read more at: https://business.adobe.com/blog/basics/amplifying-human-creativity-with-artificial-intelligence https://uxplanet.org/ai-in-user-experience-ux-design-a-fresh-approach-c7c7956daad8 https://adamfard.com/blog/top-20-ai-tools-for-designers#:~:text=Uizard%20is%20an%20AI%2Dpowered%20prototyping%20tool%20that,to%20help%20users%20quickly%20create%20digital%20products. https://murf.ai/resources/ai-graphic-designing-tools/ https://intellipaat.com/blog/ai-tools-for-designers/ https://www.figma.com/blog/introducing-ai-to-figjam/ https://uxplanet.org/figjam-ai-ec4c58ff78bf Get the latest user experience news & articles. Subscribe with us

How do designers fit into the AI revolution and do we have a future? The rise of artificial intelligence (AI) has brought about a growing fear that AI will steal people’s jobs or make them obsolete. But, I don’t believe that’s true. I don’t see AI as the enemy. Instead, AI is a tool that can be used to enhance the user experience (UX) in ways that were previously impossible.“First we shape our tools, thereafter they shape us.” This quote by Marshall McLuhan highlights the cyclical relationship between tools and their creators. In the context of AI and UX design, designers have the unique opportunity to harness the power of AI and shape it to their advantage. By using AI to enhance the user experience, designers can not only create innovative, cutting-edge designs but also influence the direction of the entire industry. “First we shape our tools, thereafter they shape us.” Marshall McLuhan As AI technology continues to advance (because it’s not going away folks), designers must take an active role in shaping it to meet the needs of users. Whether it’s through the use of chatbots, machine learning algorithms, or other AI-powered tools, designers have the ability to create experiences that are intuitive, responsive, personalized, and above all else solve the needs of people. It’s important to remember that as we shape our tools, they will also shape us right back. AI has the potential to greatly improve the user experience, but it also poses challenges and ethical considerations that must be addressed. As designers embrace AI, they must remain vigilant and ensure that their designs promote user privacy, security, autonomy, inclusiveness, and so much more. Working with AI As a Designer, I have been able to witness the transformative power of AI in my own work. AI has proven to be a valuable tool that has helped me overcome creative obstacles, saved me time, and improved the overall quality of my design process. One of the most notable benefits of AI in my work has been its ability to help me overcome writer’s block. AI-powered writing tools have provided me with new ideas, outlines, and inspiration— freeing me from the constraints of my own creativity. Another way AI has helped me in my work is by automating repetitive tasks. By leveraging AI, I have been able to focus on more strategic and creative tasks, rather than spending time on manual, time-consuming processes. This has allowed me to be more productive and efficient, freeing up more time for me to focus on the creative aspects of UX design. It is important to note that AI is only as good as the data it is trained on and that human intuition and creativity remain essential in UX design. Nevertheless, my experience with AI has been overwhelmingly positive. By embracing AI, I have been able to push the boundaries of my creativity and deliver designs that are more innovative and impactful. AI as a Tool AI has often been portrayed as a threat to jobs and human creativity, but this doesn’t have to be the case. AI is not a replacement for human intuition and creativity, but rather a tool that can be used to enhance them. Here are some ways you can use AI as a tool for UX Design: User research and testing: AI can assist UX designers in gathering and analyzing large amounts of user data. It can also help designers conduct user research and testing by automating tasks such as data collection, analysis, and reporting. Design idea generation: AI can be used to generate design ideas for inspiration. For example, AI can be used to create wireframes and prototypes or to generate visual designs based on user data for inspiration. Personalization: AI can be used to personalize the user experience. For example, AI can be used to adapt interfaces to the user’s preferences and habits, such as remembering their preferred font size or color scheme. Usability analysis: AI can be used to analyze user interactions with an interface and identify usability issues. For example, AI can track how users navigate an interface, how they interact with specific elements, and how they respond to different design elements. Predictive analytics: AI can be used to predict how users will interact with an interface, based on past user behavior and other data. This can help designers create more effective and efficient interfaces. Design automation: AI can be used to automate certain tasks, such as layout and typography, freeing up designers to focus on other tasks. User experience monitoring: AI can be used to monitor user experience in real-time and provide insights into user behavior. This can help designers make informed decisions about design changes and improvements. While AI can provide valuable insights and automate certain tasks, it can’t replace human empathy and emotional intelligence. Designers must find a balance between using AI to augment their skills and relying on their own instincts and creativity. It is essential to remember that AI is only as good as the data it’s trained on and that human intuition and creativity are still essential in UX design. As AI becomes more advanced and integrated into our lives, it will likely play an increasingly important role in the job market. Instead of stealing jobs, AI will create new ones. Designers who find a way to use AI effectively will be in high demand, as they will be able to offer innovative, efficient, and user-centered designs. The Impact of AI on UX Design The integration of AI into UX design has already had a profound impact on the industry. It can be through several many benefits and challenges. Here are a few that I’ve observed. Benefits: Improved User Experience: AI can make interfaces more intuitive, personal, and accessible. For example, AI can be used to personalize the user experience by adapting to the user’s preferences and habits. Time and Effort Saving: AI can automate repetitive tasks and help designers save time and effort. This allows designers to focus on more important and creative tasks. Enhanced Interactivity: AI can provide interactive features and dynamic content to enhance the user experience. Challenges: Accessibility Challenges: One of the biggest challenges is ensuring that AI-powered interfaces are accessible to people with disabilities. This requires designers to have a thorough understanding of accessibility requirements and to test interfaces for accessibility. Ethical and Unbiased Algorithms: Another challenge is ensuring that AI algorithms are ethical and unbiased. Designers must be aware of potential biases in the algorithms and take steps to mitigate them. Privacy Implications: Designers must also be aware of the privacy implications of AI-powered interfaces. AI algorithms often collect and process large amounts of personal data, which must be protected to maintain user privacy. Designers must carefully consider these benefits and challenges when using AI in their design work to ensure that the user experience is both effective and ethical. It’s also important to keep in mind that the field of AI and UX design is constantly evolving, so designers must stay up-to-date with the latest developments and trends. The Future of UX Design and AI The future of AI in UX design is promising, but also uncertain. Some potential applications of AI in UX design in the future include: Predictive Design: AI algorithms will be able to analyze large amounts of user data and predict how users will interact with a design, allowing designers to create more intuitive and user-friendly interfaces. Personalization at Scale: AI will enable designers to personalize interfaces on a large scale, providing users with unique and tailored experiences based on their preferences and habits. Design Automation: AI will automate more and more aspects of the design process, freeing up designers to focus on the parts that only humans can do while also reducing the time and effort required to create designs. Improved Accessibility: As AI technology advances, it will become easier for designers to create accessible interfaces for users with disabilities, making digital experiences more inclusive for everyone. Ethical Algorithms: Designers will need to ensure that AI algorithms are ethical and unbiased, avoiding discrimination and ensuring that everyone has equal access to digital experiences. Enhanced Collaboration: AI will facilitate collaboration between designers and other stakeholders, providing insights and suggestions to help teams make better decisions and create better designs. Augmented Reality: AI will play a key role in developing and enhancing augmented reality interfaces, allowing users to interact with digital content in new and innovative ways. While the future of AI in UX design is uncertain, it is clear that AI will play an increasingly important role in shaping the future of digital experiences. Designers who embrace AI and continuously adapt to its evolution will be best positioned to take advantage of its benefits and create innovative, intuitive, and accessible designs. Final Thoughts AI is not the enemy of UX design, but rather a new tool in our tool-belt that can be used to help us enhance the experience of people. As AI becomes more integrated into our lives, designers must find a way to use it effectively while also ensuring that AI-powered interfaces are accessible, ethical, and private. The future of UX design and AI is promising, but it will require designers to be proactive, adaptable, and continuously learning. By shaping AI and using it to enhance the user experience, designers have the power to shape the future of the industry and the entire world. Reference: This article has been written by Nate Schloesser and published in UX Magzine. Read more at: https://uxmag.com/articles/navigating-the-future-of-design-in-the-age-of-ai Get the latest user experience news & articles. Subscribe with us

Hitachi Automotive Systems Develops Stereo Camera Enabling Automatic Emergency Braking at Intersections. As automobiles continue to expand globally, there is a growing need for technologies that enhance driving safety, particularly at intersections. As of 2020, the NCAP (New Car Assessment Program) will include Automatic Emergency Braking (AEB) among the criteria in their leading automotive safety performance assessment. Sensor technologies with horizontal, wide angle view are necessary to detect pedestrians to avoid accidents when an automobile turns at an intersection. To achieve this, it is essential to continuously detect vehicles ahead, and also required are a CMOS (Complementary Metal Oxide Semiconductor) with consistently high pixilation, the camera sensor, or a combination of multiple sensors, including a radar which detects objects in the surrounding area or in the distance. With this newly developed stereo camera, Hitachi Automotive Systems has increased the range of detection by widening the horizontal range of the stereo camera relative to conventional stereo cameras, and has adopted a method to shift images detected by the left and right cameras. This delivers an angle of view three times wider compared to conventional stereo cameras, and enables Automatic Emergency Braking when turning at intersections while still maintaining the ACC (Adaptive Cruise Control) which employs compatible distant object detection without the need for a large increase in the number of sensor pixels compared to conventional stereo cameras. The technology to change detection methods in the center and periphery parts of the detection range was developed in collaboration with the Hitachi Ltd. R&D Group. Highly accurate detection and range estimation of pedestrians and cyclists improves safety at intersections while relying only upon the stereo camera, a minimal amount of components. This is achieved by seamlessly integrating a number of features including centralized binocular detection through binocular vision, three-dimensional object detection through time series image processing provided by monocular vision in the periphery, and storage of identification patterns using machine learning methods. In addition to developing technologies to enhance the stereo camera performance, Hitachi Group will continue to offer devices and solutions that contribute to the practical implementation of autonomous driving vehicles and the connected car. Reference: This article has been published in Hitachi website. Read more at: https://www.hitachi.com/New/cnews/month/2019/12/191225.html Get the latest user experience news & articles. Subscribe with us

A fresh interface tweak might change how users navigate the Play Store. Google keep modifying and tries to improve the Google Play Store design for better user experience. One of its latest endeavors is a notable one since Google is experimenting with a permanent search bar on the app's homepage. For frequent users of the Play Store, this will be a fresh deviation from the familiar. Spotted by AssembleDebug, who runs the Google Apps Flags & Leaks community on Telegram, the Play Store app has a hidden feature flag that anchors the search bar in place, indicating Google is at least testing the new functionality. The app currently hides the search bar area of the app when you scroll, which also includes access to the main settings menu and notifications area. With the flag enabled, the entire action bar area is pinned in place, regardless of which homepage tab you're viewing. This makes it much easier to access the menu for things like app updates and offers. What's intriguing is that, although this permanent search bar is in its experimental phase, rooted Android users can get a glimpse of it and enable the feature with the flag SearchHome__enable_search_home in the package com.google.android.finsky.stable. You'll need GappsMod, which is available on GitHub. If you'd like some more help, AssembleDebug has outlined a similar process on his blog, The SP Android. But why is Google making these experiments and changes? It's part of the tech giant's ongoing mission to refine the Android ecosystem, ensuring the Play Store remains user-friendly and efficient. This aligns with their recent introduction of the auto app archiving option, a feature that optimizes storage by automatically archiving apps that haven't been used for a while. This was initially only available to users with low storage, but now, it's available for everyone to toggle on and off, emphasizing Google's efforts to enhance user experience. We also saw the Play Store enable a darker dark mode just last week in a change that already appears to be live for most users. The updated background still utilizes Material You dynamic theming, which injects the dark gray background in most apps with a touch of color that complements your device wallpaper. The darker shade of gray should even help to save a bit of battery life on phones with AMOLED displays, as darker colors require the individual pixels of the screen to emit less light. Google's continuous tweaks, whether it's an ever-present search bar or a theme touch-up, demonstrate its commitment to refining the Play Store's interface. If this permanent search bar becomes a staple feature, it could mean quicker, more direct searches for users. As the Play Store continues its evolution, one thing remains certain, Google's dedication to enhancing its usability. And for those eager to get a taste of the future, the rooted Android community offers a gateway to what might soon become mainstream. Reference: This article has been written by Matthew Zucca and published in Android Police. Read more at: https://www.androidpolice.com/google-play-store-permanent-search-bar/ Get the latest user experience news & articles. Subscribe with us

CB Insights found in 100 failed startups that the number one cause of failure (42%) was ‘no market need’. So almost half of these startups spent time, effort and money building a product before they found out… they were wrong in their core assumption: users needed their product. So how do you ensure you do not fall into this trap? Follow the full MVP best practise. 1. Listen: customer discovery Is this worth working on, is There anyone out there who wants this? 2. Experiment: product discovery How can we make this work? Will people use our solution to solve their problem? 3. Execute: product delivery How can we build this efficiently? How can we ensure what we are building is of good enough quality? Feature Volume vs Feature Delight Jussi Pasanen’s MVP Pyramid Model. Contrast the 2 product pyramids below. Left we have “many features, none of them good”. On the right, we have the “fewer features, all of them delightful” approach. Minimum Viable Product vs Minimum Delightful Product Using a merely viable product is like visiting someone in an intensive care unit. They’re alive, but not fun to spend time with. The challenge with an MVP eg build only what you need -is that you may validate the product – but in a hyper competitive environment – thats not enough. Delightful products are products users fall in love with. They immediately become part of a persons life or work. When a product is delightful it just makes sense. The product is just intuitive and your experience is highly satisfying. Delightful products are adopted faster, get better word of mouth, and create higher satisfaction. Product Gestalt The definition of gestalt – the whole is more than the sum of its parts. The product gestalt is the “soul” of the user experience. A combination of user experience and functionality that makes the product ‘just work’. A gestalt is the part of a product that remains constant over time: The simple search box and results page on Google The friends list and news feed on Facebook A great gestalt is not as simple as accumulating the right features. Its the ‘secret sauce’ of the right elements working together in harmony. The end goal? Users stop thinking about the technology and simple achieve their goals. Making your product meaningful If a product isn’t meaningful for users, no amount of amazing design will make it successful. Foursquare is a good example of this. Foursquare was well-designed app and pioneered many of the gamification mechanisms we still use today. While they grew quickly, users eventually lost interest, because most didn’t see the purpose of the app. Foursquare wasn’t helping them move towards pleasure or away from pain in a meaningful way. Nir Eyal, author of the book Hooked: How to Build Habit-forming Products, states; a product should be designed to facilitate a users need but ultimately alleviate a symptom of a problem they have. The three elements required for any effective behaviour change are: motivation, triggers, and ability. In a marketing environment like a landing page, motivation can be seen as the emotional backdrop that creates the desire for the consumer to continue along the sales funnel. This page from Tiffany & Co embodies the emotion involved in a couple’s engagement, providing ample motivation for the user to click through and progress through the funnel: Incorporate these three things well into your product will create an optimal user experience. Deciphering a users motivation, their emotional state, and the behaviours they might exhibit that could point to a problem that needs solving are all important parts of design psychology and creating that illusive delightful user experience. Reference: This article has been written and published by Mark Proctor in his website. https://markproctor.net/3-stages-winning-mvp/?unapproved=2872&moderation-hash=4456dd1a21e9c19ddebef431a7857e24#comment-2872 Get the latest user experience news & articles. Subscribe with us

Thinkful conducted a webinar which is one of their most popular events and take your first steps in creating a design system — a key skill for UX/UI Design professionals everywhere. This webinar can be recommended for non-designers and new designers interested in understanding the value of design system in their work. The webinar included some of the information related to the: Introduction to Design System Notable Real-World Design Systems Figma Tips and Best Practices Creating Our Own System The session covered a very basic introduction of the design system and value of building design system while designing any digital product. "A design system is a complete set of standards intended to manage design at scale using reusable components and patterns" - NNGroup The design system is also called a single source of truth because "A design system is a collection of repeatable, reusable components and guidelines that explains how to use each of those components". The session covers the basics of atomic design which uses science as analogy to understand a design system. It begins with abstract to concrete from atoms, molecules, organisms, templates to pages. This concept was popularised by Brad Frost, who was known for one of the more famous descriptions of how a design system works. The presenter also talks about various design systems across the web and points towards Design System Repo. Basic skeleton structure is created by the presenter in the session by using Figma as prototyping tool along with applied examples. The presenter creates and provides example which includes colour, typography, buttons, logos, modals, forms, icons and about the Figma plugins for efficient output. What to look for: It was a good session for beginners or non-designers to attend. You can find the presentation file below. What not to look for: The attendee's will not get the in-depth knowledge of design system at the Intermediate or Expert level. Downloads: This presentation document was shared in the end of the session and all rights are with the respective owners. Have a look at the detailed document by Thinkful - UXUI Design Creating a Design System. An online education platform with career support to get our students new jobs and life long careers. Founded in 2012, 100% remote company with over 600 employees. Get the latest user experience news & articles. Subscribe with us

Sonja Sarah Porter has self researched in the topic of design and presented her understanding of what is design? She has explored various field and topics and wonderfully. The author believes that when you consider them together, a greater picture starts to form. You’ve got this. Your colleague just opened up for the ultimate discussion: “Can you explain this ‘design’ thing to me?” You’ve waited a long time for this moment, biting your tongue every time your whole field is reduced to “making it pretty”. After many years of study and hard work you know what this design thing is now, right? Yet the words escape you, and all those perfect quotes you found online just don’t seem to cut it. You may fall back to describing the value of design, but describing exactly what design is… that’s harder. There is an ancient Indian proverb about the blind men and the elephant. The men have never seen an elephant before, and when one is placed in front of them each starts experiencing a different part of the elephant… And so on and so forth. The proverb is often used to illustrate how good we are at claiming absolute truth based on our own limited experiences, while dismissing the truths of others. I find this idea of multiple truths interesting in the pursuit of defining something so complex as design. In researching for this article, I found a variety of approaches to describing design where the perspective, context, and the goals of the author vary. Many designers have attempted to describe design in a simple elevator pitch, yet these simple descriptions only describe a part of the beast. But consider them together, and a greater picture starts to form. The following are four of the many useful descriptions of design: 1. The design curriculum Perhaps the most straight-forward way of describing design would be the way it was described to the designer — through their education. Though design training varies, there are some common themes: Project-based learning Most design schools have a focus on learning design by doing design. It is a hands-on major where students learn by model projects requiring them frame the challenge, ideate and present designs, then receive and give feedback through “Critiques”. Methodology Techniques for generating and exploring numerous concepts, then methodically narrowing down to the best solution. Insight, research and co-creation Designers are taught that the answer always lies with the user. By learning interview techniques, co-creation, facilitation and mapping techniques, designers grow their empathy for users and train to move past their own assumptions and biases. Storytelling Humans respond best to stories — it is how we naturally process and store information. Designers learn to harness this both in text, user flows and to sell concepts. The building blocks of visual communication How can shape, line, color, and type affect how we receive and respond to a visual message? How can one lead the eye through a composition, or create different feelings through visual elements? Visualization With a foundation in aesthetics, designers practice to be able to quickly and efficiently turn complex ideas and problems into easy-to-understand visuals through simple sketches and diagrams. Prototyping Prototyping allows designers to test and iterate on concepts in a fast and cheap way. Even after formal education, designers are often still measured by these attributes. Want to understand a designer? Understand the little professor-voice in their head still nagging about these things. Oxman’s work with Bio-architecture is at the intersection of design, science, engineering and art, so for her the blurred boundaries of these disciplines has been especially enlightening. She describes how the fields bleed into and inform one another: “Science converts information into knowledge. Engineering converts knowledge into utility. Design converts utility into cultural behavior in context. Art takes that cultural behavior and questions our perception of the world.” — Neri Oxman In her team’s work, design is defined by the input it needs from neighboring disciplines, and the output it gives to others. Similarly, way back in 1965 designer Bruce Archer mused about a question that still confuses many today: what is the difference between art and design? Though they may seem similar, they are quite fundamentally different. Think about it… an architect preparing plans for a house — that is design. So is a typographer preparing a page for print. But what about a sculptor, shaping a figure out of clay? Is that design? Archer would argue no — an artist creates, they do not design. For an activity to qualify as “design” there are two requirements: A prior formulation of a prescription or model The hope or expectation of ultimate embodiment as an artifact So basically, according to Archer, design is about making plans for something you hope gets made in the future, while art creates the actual thing then and there. 3. The many facets of design Perhaps one of the greatest challenges in finding one definition of design is the sheer breadth and diversity of design activities, problems being solved, and outputs. At the broadest level, designers could be classified by the medium they work with: physical objects, digital interfaces, visual systems, environments, experiences, etc. While some designers aim to be generalists and deliver all types of design, some specialize. Others find a subset of design they love doing, but can do the rest as well. A multitude of titles have emerged to describe these profiles and the facets of design they work with, with mixed success. This variety can create confusion for their non-design counterparts, especially in trying to find the right designer(s) for their team. As visual communicators, describing this variety becomes a design problem. Many designers have attempted to describe these different types of designers by visualizing them on a spectrum to provide some clarity. Here are some examples from digital product design, one of many design disciplines: 4. Design is in the questions we ask Some would argue that there is one sure-fire way to find the designer on a team — the questions they ask. Your designer is probably the one asking questions like: Who is our target audience? What are they trying to achieve? How can I get their input? How do people react to, interact with, or use this? What doesn’t work right now? What are we trying to achieve? How does this help our users? What are we trying to communicate? Is there a way to do it faster, better or in a more unique way? How can I get input from subject-matter experts? What dependencies (other services, technical systems, laws and regulations, etc.) affect the experience? Questions are an interesting angle in defining design, as questions are a tangible output of the typical problems design aims to solve — not to mention the core values and philosophies of a designer. Yet they don’t require long training or special tools. They can be asked by anyone, not just the designer. So per this definition, design can still happen without it’s advocate, as long as questions like these are being asked. Interesting. And there you have it — four definitions, each shedding a bit of light on what this “design” thing is. What definition has helped you to build understanding and design maturity in your organization? Join the discussion by leaving a comment below 👇. Other noteworthy definitions: Koss Looijesteijn: A design is a plan to make something new for people, that they precieve as beneficial. Donald A. Schön: Design is a reflective conversation with the materials of a design solution. Scott Berkum: It’s the difference between your favorite and least favorite thing you use. Harold Nelson and Erik Stolterman: Design is its own culture of inquiry and action. Reference: This article has been published at: UX Collectives https://uxdesign.cc/four-definitions-of-design-9e107fb057c5 Get the latest user experience news & articles. Subscribe with us

This is an interesting write up by Kai Wong. He raises the questions about why personas still fail? and What does a successful persona look like? Kai talks about how important it is for the design teams to not just create personas in silo for their reference. But also to present the value that it brings for the business stakeholders. He raises an important point, in his own words:"If Personas don’t influence the rest of your stakeholder team, then it’ll be effective for however long you’re on the project and part of those meetings. And then it might be forgotten afterward." We should know everything about personas at this point: they’re a staple in every designer’s toolkit, and they’re taught it courses and boot camps alike. So why do personas still fail? Because we’re still not designing with our stakeholders in mind. And to explain this, let me ask one specific question: What does a successful persona do? Success and failure with personas The purpose of personas for designers is clear: it’s a tool designed to understand who the user is, based on research, that is supposed to guide them in making design decisions in the future. And you might be tempted to stop there. But have you asked what the purpose of personas is for stakeholders? After all, you’re not making design decisions in a vacuum. Stakeholders are paying for user research and development of these personas: are you simply just showcasing them in a single presentation and sticking them back into your workspace? This is, in large part, why personas fail in organizations: more often than not, personas are created in a silo, for designers only, while the organization sometimes grumbles about not really having a clear, simple, and concise picture of their customers. So let me ask again: What does a successful persona look like? I like what the Nielsen Norman Group says about this: Personas make users memorable for your product team. A successful persona can bring a snapshot of your user to your customers. More importantly, if they’re memorable, team members may start to refer to them in shorthand when making decisions, meaning that you’re aligning their thinking to be centered around the user. Kind of like User-Centered Design. So what’s the first step in actually making personas that users will remember? By making it realistic. The power of realism in personas It sounds strange, to think about realism. But realism is something that people often forget about when thinking about creating design artifacts like personas. I too have struggled with authenticity in a lot of my work. One of the worst design experiences was when someone laughed off the concept of personas. As a result, I have tried to make sure that everything has an authentic tone to it. And that’s one of the problems with personas. These things can easily laugh off if not careful: we’re essentially creating a fictitious user (albeit from user research) and then coming up with fictitious stories that are somehow influenced by your product. And that doesn’t encompass exactly why someone would use your product. Just because someone is a 46-year old who may want to buy shoes doesn’t necessarily mean they would even know how to figure out how to get to your site. This is why the Jobs to be done format for personas can be useful. The JTBD format asks the question: Why would someone ‘hire’ a product or service? Rather than abstract motivations (such as being motivated by hearing about this new site), putting things into this format allows a specific feature or functionality to be called out as a primary motivator. For example: “Sally, a 46-year-old mother to a child with health complications, wants to ‘hire’ the Apple Watch service because she can track heartbeats.” Highlighting a user by creating realistic scenarios helps to bring this in the right direction. But that’s not all. The importance of common ground and simple language A persona, like many other design artifacts, should be thought of as an anchor point. It is a shared document created by talking with stakeholders, users, and then brainstorming to create a realistic and relevant user. So why would you assume that other people within your organization wouldn’t find it useful? Creating personas and then never using them is one of the reasons why personas fail. Worse yet, it makes it harder to get buy-in for future iterations of personas, because they invested time and money in and got nothing out of it. So you want to make personas as accessible as possible to make sure that they’re used. I want to put, as a reminder, that UX Design is a new field, with the term being coined in the 1990s. Some people have never heard of personas, UX Design, or anything that you do. The goal should be that even if they don’t know anything about this technique if they were to pick one of these up, they could tell that it is a representation of a user. In short, this means that each category and wording should be able to be understood by someone who may only have a passing knowledge of the subject. Even if the persona is a targeted-scope UX persona, where it may be someone with specific expertise or knowledge, other members of the organization should be able to recognize what it is. And more importantly, what they should do with that. The importance of key takeaways Part of understanding how your organization would view this is showing easily understood key takeaways that people can use to take away from this. As a Designer, you may be in the thick of things: you’re building personas based on user research, which you’ll take to inform other design artifacts (like journey maps) or keep in mind as you’re designing prototypes. But if someone’s coming into looking at your personas as a way of reviewing what’s been done, are they going to know what to do with this thing? Not everybody knows why personas are useful. So if they see something like that, are they just going to nod their head, smile, and then promptly forget about it after a presentation? We as designers can do our part to educate stakeholders about personas. We can teach them about the importance of personas and UX Design. But I’ll talk about a scenario that you might encounter. Imagine you’ve given a presentation about your personas a couple of weeks ago, but in a meeting today, one of your stakeholders brings up a suggestion that runs against the persona that you researched. You just so happen to have the persona on you. What exactly would you want to point out in the meeting when you only have a few minutes? Is it immediately obvious to talk about? Or would you need to explain that it’s something that’s not on the persona, but when you came across this in research, you saw it? The second is an okay example if you’re part of that team. But what if you’re not at that meeting? If Personas don’t influence the rest of your stakeholder team, then it’ll be effective for however long you’re on the project and part of those meetings. And then it might be forgotten afterward. It’s not all doom and gloom: personas, if properly implemented, can act as a proxy user in almost any meeting that you attend. While it’s no substitute for talking with actual users, having them be both memorable and present in these meetings is something that can change how your organization thinks about users. You just have to remember to design for them. Questions to ask when designing personas So here are some questions you might want to ask when thinking about your stakeholders: Is the persona easily summarized? If you took a random employee who works in the Collections department, for example, and showed them a persona of someone who would interact with Collections, are they going to understand what this is? Some ways to make it easier to summarize include easy to digest primary motivations, problems phrased in ways the average user will understand, etc. Does the persona provide actionable insights? When you’re talking challenges, is the scope of the problem large or small? Something like “Is frustrated with having to re-type information.” Is easier for people to understand and take steps to address versus “Is frustrated with the process being tedious.” How does this align with stakeholder’s mental models? If someone’s had 20 years of experience working on a project, you don’t want to say that this persona knows users better than your stakeholder. So what are the similarities and differences with how your stakeholders think? Being able to say something like “While we are mostly aligned, there is this one aspect that you might not be aware of…” is likely to help. I write about UX, Healthcare, and Productivity regularly. Reference: Kai Wong also has a course which help you learn how to communicate as a UX Designer, check out his online course here. For the published article on medium please click on below link: https://medium.com/…/the-most-important-user-you-forget-abo… Get the latest user experience news & articles. Subscribe with us

Ruiwen Tay writes about her practical experience of building a design system in 8 steps. Starting a design system in a start-up can be quite challenging and Ruiwen has articulated well in her article to provide some good insights with references for further readings. Highlights of the article: She and her team clearly defines design system - a repository of reusable components with clear usage guidelines, shared among designers and developers. Ruiwen describes her journey through 8 steps as follows: 1. Audit existing components 2. Research on other design systems 3. List out components 4. Plan a timeline 5. Research and discuss components 6. Create design symbols 7. “Design” design system 8. Implement design system She rightfully comments that "Building a design system is a never-ending challenge as they continue to update and adapt it in order to better suit their organisational needs. Interested? Read the full article below. Design systems are all the rage now and you’ve probably seen this term being thrown around ever so frequently. I was first introduced to the world of *design systems* when we started on our web design system back in January 2019. Working in 99.co with only one other product designer, we had limited resources to dedicate to starting a new project. Still, we deemed a design system important to eliminate existing design inconsistencies and improve future workflows for both designers and developers as the company scales up. That being said, there was a lot we had to work around and get our hands dirty in order to push it forward. Just so you know what you’re getting yourself into, I’ll define what we mean by a design system — a repository of reusable components with clear usage guidelines, shared among designers and developers. It should showcase all existing components with guidelines as to when and how to use each component including ready-to-use code. Our design system is still a work-in-progress but by documenting this journey, I hope to share our process as well as some useful tips and tools. :-) Steps Audit existing components Research on other design systems List out components Plan a timeline Research and discuss components Create design symbols “Design” design system Implement design system Step 1: Audit existing components In order to get a bird’s eye view of all the use cases we need to cater to, it is important to audit existing components in our product. Yes, every single component on every page. This is a crucial step albeit a tedious one. For this, we took screenshots and used Trello to organise them. Each list (top to bottom) represents a page on our website, e.g. Home page. Within each list, different sections of a page are captured as screenshots and organised into cards. Each card is tagged with labels (panel on the right) that represent each component present within the section of the page. The labels are colour coded based on the type of component, e.g. checkboxes, radio buttons etc are forms of data input, hence they are colour-coded green. By organising in this manner, we can easily search for specific pages or filter by components using the right panel and see all its current use cases across all pages. It also helps in identifying where there are design inconsistencies. Step 2: Research on other design systems Here are some of the design systems we used as a guide to shape what we wanted in our design system: Atlassian Ant Design IBM Zendesk Workday HubSpot Salesforce Shopify Bootstrap QuickBooks We wanted to take the best practices out of these great design systems and see how they organised and displayed their content. I’ll go through a couple of my personal favourites — Atlassian and Ant Design. Atlassian categorises their design system into Brand, Marketing and Product. As different aspects of design require different guidelines, catering to the requirements of each design aspect ensures that the design language across the entire company is kept consistent. For instance, Marketing may need more colours when designing beautiful collaterals, as compared to Product where we generally only need a fixed set of colours to showcase different component states. Atlassian also provides extremely clear guidelines for each component, from its different styles and variations to its use cases and best practices. Ant Design categorises their components into different sections such as Data Display, Data Input, Navigation etc. This really helps in organising and finding components. They display anchors on the top right corner so users know what to expect on each page without having to scroll all the way to the bottom. Every component style and variation is showcased upfront and each component is interactive. Code is displayed and there are quick actions for developers to copy code or open in various environments. KUDOS to a great user experience! Step 3: List out components After researching on other design systems, I circled back to list down patterns and components we would need based on our research and filter labels we had on Trello. This gives an overview of what needed to be reviewed so we can keep track and plan time accordingly. I organised components into the following sections based on their functions —Buttons, Data Input, Data Display, Feedback and Navigation. The list gets revised continuously and ticked off whenever we finish discussing a component. Step 4: Plan a timeline Next, we made a weekly timeline based on what needed to be done and by who. This helps to keep stakeholders and everyone involved in the design system updated on progress, as well as facilitate resource allocation. We planned out which components to discuss, starting with those that are most commonly used from the use cases on Trello. Patterns such as Typography, Colours and Layout were important to discuss first as they laid the foundations on which subsequent components would be based on. With limited time aside from our day to day responsibilities, we strove to have two to three design system discussions weekly, each session about two hours long. Of course, this is an ideal situation. There were often times both product designers were swamped with work and unable to take time out. On extremely rare occasions, we were able to dedicate more time to discussions and would try to make up for lost time. On top of weekly discussions, we also planned for the following steps — creating components as symbols on Sketch, designing pages for the design system, and for our frontend engineer to build these pages. We would update the timeline continuously week on week based on our progress. Step 5: Research and discuss components The end goal of the discussions was to design each component with its properties and states, as well as establish its usage guidelines. For each component discussion, we reviewed its use cases on Trello and researched on best practices. These include reading articles and looking at how other companies are using that component etc. Initially, we did our component research during the discussion session. But what we realised subsequently was that research did not require both designers to be present and it would be a better use of time to do research beforehand each in our own time in order to reserve the full session for discussion alone. We penned down our discussions on Google Docs in order to keep track of decisions as well as how we reached these decisions. This was really helpful at times when we had to revisit components that were discussed previously. Having these notes reminded us of past thought processes and decision making in order to better facilitate subsequent ones. Step 6: Create design symbols As the discussions progressed, we started building our styleguide. I created text and layer style libraries, and symbolised each component on Sketch while catering to its states and variations. Again, we combed through articles and looked at other UI design kits to compare naming conventions as well as how they created nested symbols etc. What I realised was that there really is no best way of organisation for everyone, just one that best fits our current workflow. Chances are that as tools get updated along the way, we will need to adjust our workflows accordingly to optimise the usage of these tools. An example will be the recent Sketch 60 update with the new Components Panel and Popover. The previous naming convention for our Style libraries had multiple layers segmented by size, weight, colour, alignment and line height. With the new Search (or more like Filter) function in the Popover, we had to scroll and click through multiple folders just to find a particular style. To cater to this new update, I flattened the naming structure such that we can now search either via [Size][Weight] to see all font colours with or without the default line height, or by [Colour] to see all fonts in this colour sorted by size and weight. Naming for our neutrals palette was also shortened from Dark, Mid and Light Neutrals to D, M and L Neutrals respectively, due to limited horizontal space within the popover especially when font sizes are large. Moving forward, I will expect more changes to come but overall our efficiency has definitely improved with these updates. Some useful articles: Unleashing The Full Potential Of Symbols In Sketch The Sketch Update We’ve All Been Waiting For Sketch 58 — Smart Layout! Using smart layout in Sketch Sketch 60 & New Components Panel — How to Use It? How to work with Styles & Symbols in Sketch Components Panel …and Sketch plugins: Find and Replace: Change text within layers and symbol overrides Shared Style Finder: Find instances of a shared layer or text style Sketch Runner: Perform quick Sketch actions quicker with your keyboard Symbol Organizer: Organise symbols alphabetically and into groups as determined by symbol names Step 7: “Design” design system As mentioned above, we wanted to incorporate best practices from other design systems into our design system. I designed mockups for each page after its components are symbolised, before passing it on to our frontend engineer to build these pages. We soon realised that this was not an ideal workflow. As much as we could customise the pages as we deemed fit, it was taking up resources that were already limited just to build these pages. Hence, we sought out tools that would help reduce the workload so resources could be better allocated to what is necessary, i.e. building components and implementing them across the product. It was crucial to find a tool that we can integrate into our existing workflow while features such as version control, branding customisation were also good to have. We found a table created by uxtools.co comparing across different design system tools and their capabilities. I tried out different design system tools such as brand.ai (now Invision DSM), Lingo and Zeroheight so we can make a decision on one that best suits our needs. While each tool had its merits, we settled on using Zeroheight. I created pages and sections within each page for different components and their variations. Usage guidelines are stated clearly for each use case and Sketch symbols from the styleguide are imported directly into Zeroheight via a plugin. Live component examples can be displayed to viewers using interactive HTML snippets and Storybook components. Developers can easily stay in sync with designs with their design token API as well. Step 8: Implement design system Communication with engineers, product managers and other stakeholders is important throughout the entire process, and especially this step. In order to implement the design system, we would need to build the new components, link them to Zeroheight and replace the existing old components in our product as well as design files. I checked with our data analyst for a breakdown of the most frequently visited pages. With these pages ranked by highest traffic, we decided on components to update across these pages in different phases. The initial plan was to take a couple of sprint points in each 2-week sprint for designers and engineers to work on the implementation. However as a start up, priority has to be given to doing feature work and we were unable to stick to the schedule as planned. Instead of taking time out to work on specific pages, we came to a compromise such that pages involved in the feature work we are working on will be designed and built with the new components. An additional tool we used to improve collaboration between designers and engineers in implementing the design system is Zeplin, with its Global Styleguides and Connected Components. We uploaded all new component symbols directly into our Styleguide as shown above, and developers were able to link their codebase and documentation sources (such as Storybook or Github) to these components. Once this was done, whenever a developer inspects a design on Zeplin, they would be able to see an overview on the component linked to our Styleguide and reuse the components. All in all, this is how we started our design system from scratch. There is still much work to be done, but slow progress is better than no progress at all. Building a design system is a never-ending challenge as we continue to update and adapt it in order to better suit our organisational needs. It might seem daunting at first but taking a small step at a time will make it a lot more achievable. Baby steps! Thank you for reading. If you‘ll like to chat more, feel free to reach out or leave a comment below! Reference: This article was published at uxdesign.cc: https://uxdesign.cc/ Get the latest user experience news & articles. Subscribe with us

This is an interesting article written by Pablo Stanley about seven easy-to implement guidelines to design a more accessible web. Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities. There’s a myth that making a website accessible is difficult and expensive, but it doesn’t have to. Designing a product from scratch that meets the requirements for accessibility doesn’t add extra features or content; therefore there shouldn’t be additional cost and effort. Fixing a site that is already inaccessible may require some effort, though. When I used to work at Carbon Health, we checked the accessibility of our site using the AXE Chrome Extension. We found 28 violations that we needed to solve on the home page alone. It sounded complicated, but we discovered that these problems were not that hard to correct; it was just a matter of investing time and research to solve them. We were able to get to zero errors in a couple of days. I want to share with you some of the simple steps we took so you can also make your sites more accessible. These principles focus on web and mobile accessibility. But before we get started, let’s talk about why that’s important. Why designing for accessibility? 🤔 As designers, we have the power and responsibility to make sure that everyone has access to what we create regardless of ability, context, or situation. The great thing about making our work accessible is that it brings a better experience to everyone. There are over 56 million people in the United States (nearly 1 in 5) and over 1 billion people worldwide who have a disability. In 2017, there were 814 website accessibility lawsuits filed in federal and state courts. These two pieces of data alone should convince us of the importance of designing for accessibility. There is also a strong business case for accessibility: studies show that accessible websites have better search results, they reach a bigger audience, they’re SEO friendly, have faster download times, they encourage good coding practices, and they always have better usability. These seven guidelines are relatively easy to implement and can help your products get closer to meet level AA of the Web Content Accessibility Guidelines (WCAG 2.0), and work on the most commonly used assistive technologies — including screen readers, screen magnifiers, and speech recognition tools. 1. Add enough color contrast 🖍 Color contrast is an often overlooked web accessibility problem. People who have low vision could find it difficult to read text from a background color if it has low contrast. In a fact sheet on visual impairment and blindness, the World Health Organization (WHO) estimates that there are 217 million who have moderate to severe vision impairment. So, it is critical to consider the sufficient contrast between text and backgrounds. According to the W3C, the contrast ratio between text and its background should be at least 4.5 to 1 (conformance level AA.) The ratios become more forgiving with larger and heavier fonts since they’re easier to read at lower contrast. If your type is at least 18 pt or 14 pt bold, the minimum contrast ratio drops to 3 to 1. Some tools will help you check this quickly. If you use a Mac, I recommend getting the Contrast app, with this tool you can instantly check contrast using a color picker. If you want to get a more detailed score, I recommend entering your color values onto the WebAIM color contrast checker. This tool will calculate the score for both regular and larger text sizes in different conformance levels (A, AA, AAA.) You can change the color values and see the results in real time. Source: WCAG Visual Contrast 2. Don’t use color alone to make critical information understandable 💈 When you’re communicating something important, showing an action, or prompting a response, don’t use color as the only visual cue. People with low visual acuity or color blindness will have a hard time understanding your content. Try to use an indicator other than color such as text labels or patterns. When showing errors on the screen, don’t rely on colored text alone, add an icon or include a title to the message. Consider adding a visual cue such as font weight or underline text style to linked text in a paragraph, so the links stand out. Elements with more complex information like charts and graphs can be especially hard to read when you only use color to distinguish the data. Use other visual aspects to communicate information like shape, labels, and size. You can also try incorporating patterns into your fills to make the differences more apparent. A great example of this guideline is Trello’s colorblind mode. When turned on, labels become more accessible by adding texture. A good trick is to print your graph in black and white and see if you can still understand everything in it. You can also use an app like Color Oracle, which shows you in real time what people with common color vision impairments see. These tips help you make sure that the information in your site is color-agnostic. Source: WCAG Visual Contrast Without Color 3. Design usable focus states 👀 Have you noticed the blue outlines that sometimes show up around links, inputs, and buttons? These outlines are called focus indicators. Browsers, by default, use a CSS pseudo class to show these outlines on elements when they’re selected. You might find these default focus indicators not very pretty and be tempted just to hide them. However, if you get rid of this default style, be sure to replace it with something else. Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating your site. These are used by people who are blind and require screen readers, individuals with limited mobility, individuals who have suffered injuries like carpal tunnel, and power users who prefer this type of navigation. Oh, and some of us use the keyboard as their primary way of navigating the web! The elements that should be focusable are links, form fields, widgets, buttons, and menu items. They need to have a focus indicator that makes them look different from the elements around them. You can design focus indicators that fit the style of your site and goes well with your brand. Create a state that is highly visible, with good contrast, so it stands out from the rest of the content. Source: W3C Focus Visible 4. Use labels or instructions with form fields and inputs ✏️ Using placeholder text as labels are one of the biggest mistakes when designing a form. We might be tempted to go with this trend when real estate is limited or want to make our design more simple and modern—don’t. Placeholder text is usually gray and has low contrast, so it’s hard to read. If you are like me, you usually forget what you’re even writing, so it’s hard to know what the fields are about once the label is gone. People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The elements are read for each form control. Any non-label text, as placeholder text, is usually skipped over. Always help people understand what they should do and write in a form. It’s best if labels don’t go away, even when the person is filling an input; people should never lose context with what they’re writing. When designers hide descriptions or directions in their forms, they’re sacrificing usability in favor of simplicity. This practice doesn’t mean that you have to clutter your design with unnecessary information, just make sure to provide essential cues. Too much instructional text can be just as much of a problem as too little. The goal is to confirm that the individual has enough information to complete their tasks without friction. Source: WebAIM Creating Accessible Forms 5. Write useful alternative text for your images and other non-text content 🖼 People with low vision often make use of screen readers to “hear” the web. These tools convert text to speech so that the person can hear the words on a site. There are two ways that you can present alternative text. Within the attribute of the image element. Within context or surroundings of the image itself. Try to describe what’s happening in the image, and how it matters to the story, rather than just saying something like “picture,” context is everything. If the image is purely decorative or if it creates redundancy because the surrounding context already explains the content. Then adding an empty attribute will make screen readers skip it. If you don’t write any alt text, some screen readers will read the file name to the individual. That’s the worst experience you can provide. Google is working on an image captioning AI that can describe photos with 94% accuracy. This model is open sourced and still in research — hopefully, we’ll start seeing it used in different products. In the meantime, we should manually provide text that describes the meaning and function of the images in our content. Source: W3C Using Alt Attributes 6. Use correct markup on your content 🏗 Headings mark where the content starts — they’re tags given to text to define its style and purpose. Headings also establish the hierarchy of the content of the page. Titles with big font sizes help a reader understand the order of the content better. Likewise, screen readers also use heading tags to read content. This way, people with low-vision get an overview of the page by reading each heading in a hierarchal flow. It’s important to use proper structural elements when you develop a site. HTML elements communicate to the browser what kind of content they contain and how the browser should render or treat that content. The components and structure of a page are what arranges an accessibility tree. This tree is what powers screen readers which are used by people who are blind so they can “listen” to a page. Not using markup correctly affects accessibility. Don’t use HTML tags for a style effect only. Screen readers navigate web pages by heading structure (true headers, not just text that is styled big and bold) hierarchically. The people that use your site can listen to a list of all of the headings, jump the content by types of titles, or navigate directly to top-level headings . Source: WebAIM Semantic Structure 7. Support keyboard navigation ⌨️ Keyboard accessibility is one of the most critical aspects of web accessibility. People with motor disabilities, blind people that rely on screen readers, people that don’t have precise muscle control, and even power users are dependent on a keyboard to navigate content. If you’re like me, you’ll typically use the Tab key on your keyboard to navigate through interactive elements on a web page: links, buttons, or input fields. The focus state that we discussed before provides a visual indicator of the component that is currently selected. As you navigate through a page, the order of the interactive elements is essential, and the navigation must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom — header, main navigation, content buttons and inputs, and finally the footer. A good practice is testing your site only using a keyboard. Use the Tab key to move through links and forms. Test using the Enter key to select an element. Verify that all the interactive components are predictable and in order. If you can navigate through all your site without a mouse, you’re in a good spot! Last, but not least. Be careful with the size of your navigation — this includes the number of links and the length of the text. Tabbing through long menus may be demanding for people with motor disabilities. And listening to lengthy links can be cumbersome for people that use screen readers—try to be concise. Providing ARIA landmarks or HTML5 structural elements like or will make navigation easier. Source: W3C Keyboard Beyond these guidelines 🙌🏾 These seven guidelines are a great start, and if you want to do more to make your product more accessible, I encourage you to Get an Accessibility Audit. Use an audit service to find out if your product works with assistive technologies and meets WCAG 2.0 level AA. Use the audit results to fix problems and do another test. Appoint an Auditor. You can appoint someone in your company to do recurrent accessibility audits. This could be someone in your QA team. If you don’t have someone with the experience, you can hire an external supplier. Make accessibility part of your design research. When doing research verify if your assumptions concerning accessibility were right and if there are any potential opportunities to improve. Recruiting people with disabilities requires a bit more work. Don’t hesitate to contact associations, and communities—people are willing to help. Conclusion 👏🏽 That’s it. Seven guidelines that will help you make your web design get closer to meet level AA of the Web Content Accessibility Guidelines. Designing for accessibility is something that I’m still trying to improve. I’m working on practicing what I preach. I used to think that it was too hard and not that important. I was mistaken. I invite you to consider these guidelines as part of your process and continue the conversation on why accessibility matters. As designers, it is our responsibility to champion accessibility. With it, we make technology usable to all people regardless of their abilities, economic situation, age, education, or geographic location. Design responsibly. Thank you. Reference: This article has been published in: UXDesign.cc Readings: WebAIM: Articles, resources, and training on web accessibility. 7 Things Every Designer Needs to Know about Accessibility from Salesforce. Great article with excellent points. UCLA Disabilities and Computing Program: Not the prettiest or most modern site but it’s full of vast resources. UX Myths: A great list of misconceptions on UX design debunked with research. Some of them relate to accessibility. Color Accessibility Workflows: Some neat examples to nail the colors in your design by Geri Coady . W3C: This is the bible of web accessibility guidelines — visiting it can be overwhelming. But once you understand its navigation, you’ll find excellent examples, tips, and resources. Useful tools 🔭 WebAIM Color Contrast Checker: Great contrast color checker that gives you results in real time for regular and large text. Inclusive Components: A pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it. Color Oracle: A free color blindness simulator for Windows, Mac, and Linux. It shows you in real time what people with common color vision impairments see. Vox Product Accessibility Guidelines: A comprehensive checklist for designers, engineers, and project managers. AXE Google Chrome Extension: Test any site for accessibility violations using the Chrome inspector. Contrast: A macOS app for quick access to WCAG color contrast ratios. Get the latest user experience news & articles. Subscribe with us

This is a very detailed article on website accessibility by Mark Holden. He starts with who needs accessible website and why accessible website are good for all of us. The author further provides details about laws of website accessibility and elaborates on how to make a website accessible. Mark further explains about each types of disabilities from visual, auditory, physical, and cognitive. He has provided detailed tips on each of the disabilities and provides information which could help anyone to build an accessibility compliant website. Interested? Keep reading :) Website accessibility means making your website easy for everybody to access, including users with disabilities or impairments of some type or other. The Internet is a non-physical space, so it should be equally accessible to all – but only if we all plan for accessibility. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee, inventor of the World Wide Web. Who Needs an Accessible Website? Think about some common issues with inaccessible websites. Have you ever visited a website with a tiny font that you can barely read, confusing pages where it’s not obvious what to do next, or small buttons that aren’t clearly defined? It probably left you feeling frustrated, to say the least. That’s what website accessibility comes to fix. Some common disabilities that are considered by website accessibility planners include: Blind visitors Users with poor or partial sight Deaf or hearing-impaired users Users with dyslexia who struggle to understand long texts Users with cognitive or neurological impairments Users with a physical disability Accessible Websites Are Good for Us All Accessible websites are not only for users with disabilities. They help everybody: Older internet users can struggle to click on small buttons on a website. Users who aren’t familiar with the internet find it difficult to understand where to click on a new tab. If you’re in a noisy train station and want to watch a video, but you forgot your headphones, you rely on the captions for the hearing-impaired. When using your tablet in the bright sunlight you need better contrast options that aid users with visual disabilities. You might need to use accessible website practices if you broke your arm and can’t use a mouse effectively, or you’re holding a baby with one hand and completing an important form online with the other. When you build an accessible website, you check a lot of other boxes at the same time. Mobile web design, usability, SEO, and optimal user experience all overlap with accessible design. Plus, if your website is easy to use, frustration-free, and open to users with disabilities, it’s going to be a lot more attractive to everyone who visits. Accessible websites usually have improved SEO results, greater reach, lower maintenance costs, and a higher level of corporate social responsibility. The Laws about Website Accessibility Although there are many benefits to accessible websites, it’s important to remember that they aren’t just optional. The United Nations Convention on the Rights of Persons with Disabilities defines access to information and communications technologies, which includes the internet, as a basic human right. Most countries, including the US, have laws that require websites to meet certain accessibility standards. The web’s governing body, the Worldwide Web Consortium (W3C) has published accessibility guidelines based on four pillars: Perceivable, meaning that users can perceive websites with their senses (mainly sight and hearing); Operable by mouse, keyboard and assistive device; Understandable without confusion; Robust so as to be accessible by a range of technologies new and old. In the US, government websites, educational organizations, and nonprofit groups are generally required to have accessible websites by Section 508 and 504 of the US Rehabilitation Act 1973. All websites have to comply with the requirements of the Americans with Disabilities Act (ADA) 1990, and Section 255 of the Communications Act which legislates that websites must be available equally to users with disabilities. Some organizations have been successfully prosecuted for not having accessible websites. They were punished with hefty fines and their reputation was affected by the process. In many cases where the law isn’t clear about accessibility requirements, businesses have chosen to do all they can to be accessible instead of risking falling foul of the law. Making your Website Accessible Certain accessibility fixes are relatively easy to implement on your site, like changing your background color to white or adding captions to your videos. Others are a lot more complex to solve and require programming skills, such as setting heading hierarchies. We outline some of the main solutions for website accessibility and give advice on how to achieve them. Accessibility for Users with Visual Disabilities The internet is very visual, so one of the main types of disability to plan for when building an accessible website is visual disabilities. These can include: Total or partial blindness Poor vision Color blindness Difficulty distinguishing colors and contrasts When you plan to accommodate users with visual disabilities, you’ll also be helping anyone who: Is visiting your website on a mobile or tablet with a smaller screen Has dyslexia and struggles to follow text instructions Is using their device in bright sunlight or trying to cope with a lot of glare on the screen Has epilepsy which can be triggered by flashing or blinking images How to Make Your Site More Accessible for Visitors with Visual Disabilities Accessible design includes: Content – The site must be easy to understand even when read aloud out of context by a screen reader tool. Formatting – Poorly formatted pages cannot be easily enlarged, navigated, or adjusted for better visibility. Design and layout – Many visitors with visual disabilities will find it hard to see contrasts or certain colors. Here are the first things to check on your website to make sure that it is accessible for visitors with visual impairments: Make sure that your titles describe the page clearly and are different from the titles of other pages so that blind users listening to an assistive screen reader can understand without the context of layout, and users with poor vision can get the information they need. Optimize your site for voice search SEO, to make sure visually-impaired visitors can find it easily on search engines. Check that there are alt image texts for every image. Alt image texts should briefly and clearly describe the image. For example, the alt image text for a search button should be “search” not “magnifying glass.” These can be read out by a screen reader. Ensure that all your text has a high contrast ratio, meaning that it contrasts sharply with the background such as black text on a white background or light text on a dark background. Bear in mind that some people such as dyslexics have trouble reading bright colors. It’s best to enable users to set their own colors for texts on your site. Blind and visually impaired users tend to use keyboard commands or voice commands instead of a mouse. They need buttons and drop-down lists which show which option is currently chosen. This could be by highlighting the current choice or adding a border. Your texts all need to be in a font that’s large enough to be easily read by your visitors. Fonts should also be clear and easy to read, without a lot of extra decoration. If you choose to use a smaller font, be sure that the page still renders correctly if your user decides to manually increase the font size. Don’t have any text, buttons, or images that flash or blink. This can trigger a seizure in epileptics, but it’s also very hard for users with poor vision to read and take in the information. Make wise color choices. Don’t choose anything too bright, which can dazzle and confuse the eyes, or too faint that can’t be easily seen. 8% of men and 0.5% of women have color blindness, so never use a color to define a button or an instructional field. Very large images can be confusing for many viewers, especially if they are viewing on a screen that isn’t large enough to show the entire image. They also take a long time to load or might be blocked from loading due to their size, so able users will be affected too. Make sure that every piece of video content has an audio alternative or a text transcript which can be accessed by a screen reader. Advanced Accessibility Tips for Users with Visual Impairments Many of the more advanced visual accessibility practices are better done by a programmer. Here are some advanced accessibility tips for developing for accessibility: Make sure that headings are clearly described in your HTML markup, so that screen readers can navigate between them. CSS coding and visual formatting effects often make it difficult or impossible for blind users to access the information in the text. It’s best to avoid CSS and to style clean, unfussy texts. Design your texts for easy enlargement. Use relative size values so that when a user makes their screen view bigger, the letters won’t overlap, remove spaces between lines, or cut off the ends of sentences in a way that requires horizontal scrolling. Avoid bitmap images of text which are difficult to enlarge. Enable users to navigate the website using voice input, voice to text and text to voice tools, screen readers, and other assistive technologies. Offer key information in audio form as well as visually. For example, permit users to hear captcha texts that screen for bots as an audio media as well as visually. Set text contrast and color choices to be adjustable so that each user can adjust their browser for the color and contrast that they find easiest to read. Provide descriptive labels for your links, so that a blind user who encounters a list of links on a page without any context knows where each link leads. Provide full keyboard support, including an intuitive and logical navigation structure and keyboard focus that highlights fields in a form and choices in a drop-down menu or list when using keyboard controls, not only with a mouse. Accessibility for People with Auditory Disabilities There are many ways that people with auditory disabilities struggle to use the internet. Website visitors with auditory disabilities include: People who are profoundly deaf with severe hearing loss in both ears People who are hard of hearing in one or both ears People who can hear sounds but not clearly enough to distinguish speech Some internet users who have auditory disabilities use sign language to communicate and can struggle to read text. This means that the language used on websites needs to be simple and easy to understand, with explanatory images alongside written instructions. When you accommodate users with auditory disabilities, you also make it easier for: Users in a noisy setting like a train station Users who wish to keep their activity private, like at work or when sharing a room Your own site to archive videos by content and subject matter How to Make your Site Accessible for Visitors with Auditory Disabilities To make websites accessible for visitors with auditory impairment, it’s necessary to begin by thinking about the content. Some deaf users primarily use sign language and need text instructions to be written in very simple terms. The formatting is another potential issue, including features like adjustable volume control. Finally, accessible design for deaf users should include the use of explanatory images, among other steps. To improve your site’s accessibility for visitors with auditory impairments, begin by looking at these issues: Explanatory images that accompany audio or written instructions, to accommodate deaf users who are more familiar with sign language than with the written word. Sign language instructions and comments Videos and other media that have captions should come with closed captions which are easy to turn on and off using keyboard commands, not just with a mouse. They should be available in a number of languages, and/or as an international sign language accompaniment. Make sure that there is nothing that is audio-only, such as beeps, error warning alarms, or audio prompts. All audio materials should have a written transcript that is clearly available on the same page as the audio file. No voice-only controls. Everything should be operable through keyboard controls as well as with the mouse. Advanced Accessibility Tips for Users with Auditory Impairments You’ll need the help of a programmer or some programming knowledge to incorporate these advanced accessibility features for hearing-impaired users: Make it easy for users to adjust the volume of an audio file separately to the volume level of the rest of the computer system. Ensure that all audio files are the highest quality possible, without background noises, buzz or other auditory distractions Implement adjustable captions that can be set to the right size, contrast, and color for each user’s preference Include easy-to-use controls to stop, pause and move backward within an audio or video file Add an audio description as well as a transcript. This tells deaf users about other interactions within the video or audio file, not only the words that were spoken. Accessibility for People with Physical Disabilities Internet users can have physical disabilities from a whole range of causes, but they tend to need the same set of solutions. Physical disabilities that affect internet use include: People with amputated limbs or fingers Users with arthritis, rheumatism or other conditions that cause pain in the joints Older users and people with conditions that cause trembling fingers Those who suffer from muscular dystrophy Users with reduced dexterity and poor hand-eye coordination Paraplegics or quadriplegics Internet users who have neurological disabilities or disorders often suffer from physical disabilities as a result. Designing a website that’s accessible for users with physical disabilities also assists users who are: Using keyboard controls instead of a mouse Struggling to click on the correct space on a page, such as when traveling on a bumpy train Unable to use two hands, such as a parent holding a baby while typing or someone with a broken arm Very slow at typing or navigating a webpage, and/or new to using the internet How to Make your Site Accessible for Visitors with Physical Disabilities When you design a site that’s accessible for users with physical disabilities, the first thing to consider is making it usable without a mouse. For users with physical disabilities and weaknesses, keyboard controls are much easier to use than a mouse. Some users might be using mouth or foot controls, which are difficult to direct accurately, or eye tracking software which cannot interact with every type of webpage. Here are some steps to take to make your website more accessible for users with physical disabilities: Create much larger buttons so that it is easier for users with trembling fingers or limited coordination to click within the button field. Allow plenty of time for tasks to be completed before letting a page “time out,” since users with physical disabilities may take longer to enter text, type, or click on a button. Make sure that all content is organized in a logical fashion, with clear and well-organized titles and headings, so that users using keyboard controls can navigate through the website in a logical sequence without becoming confused at the next option. Advanced Accessibility Tips for Users with Physical Disabilities Many more accessible features are open if you have a programmer who can change your backend coding: Make sure that your website fully supports keyboard controls. This should include different ways to highlight or indicate a choice in a drop-down menu or when completing a form. Format and enter content in a way that makes it accessible to assistive readers and other tools that are used by people with physical disabilities. Make sure that all commands can be activated using single keystrokes. Most users with physical disabilities can only type one key at a time. Build a website that can respond to touch-free controls, such as voice controls, foot controls, mouth controls, or eye movement trackers. Set up easy options for correcting errors and mistakes, since users with physical disabilities frequently hit the wrong key or enter the wrong text. Build mechanisms that allow users to skip page headers, navigation bars, and other design blocks without using a mouse. Accessibility for Users with Low Cognitive Ability Website users with low cognitive ability generally have a lower short-term memory, struggle to concentrate and are easily distracted. They can include: Individuals with developmental, learning, perceptual or intellectual disabilities Individuals with mental health issues Aging users suffering from early stages of dementia Users with ADD or ADHD, autism spectrum disorders Users with short-term memory loss and short attention spans People with mental health disorders such as anxiety or schizophrenia, which can cause difficulties in focusing on, processing and/or retaining information People with multiple sclerosis, especially during relapses When you design a website to be accessible for users with low cognitive ability, you also help users who: Are not native speakers of your language Have low literacy Are not used to using the internet Are suffering from the effects of aging How to Make your Site Accessible for Visitors with Low Cognitive Ability Designing a website that’s accessible for users with low cognitive ability begins with the content, which needs to be phrased in simple language, short phrases, and very direct instructions. Low cognitive ability does not always come hand in hand with low intelligence, so it’s important not to talk down to these users. Many of the accessibility needs of users with low cognitive ability overlap with those of users who have visual or auditory impairments, such as support for keyboard controls and assistive readers, consistent labeling and clear navigational design. Here are some important steps to take when designing for accessibility for users with low cognitive ability: Use simple, direct language that is not full of slang or confusing metaphors Include explanatory illustrations and images alongside the text (as for users with auditory impairments) Avoid using long, dense blocks of text that are unbroken by images or spacing. Short groups of text along with clear, instructional images are much easier to take in Don’t use text that flashes, blinks or scrolls across the page, because it takes longer for users to read and assimilate it and they’ll be held back by the visual distractions Advanced Accessibility Tips for Users with Low Cognitive Ability More accessibility features can be added by programmers. Advanced accessibility tips include: Allow enough time for slower readers to respond, complete forms or comment on a webpage before it times out Make sure that your website markup can be read by assistive screen devices for those who have trouble understanding written instructions Implement a logical, hierarchical navigation structure to make it easy for users to move between pages and sections Provide a search function and a hierarchical menu for easier navigation Be consistent in your web design, link placement, webpage structure and labeling protocols Make it easy for users to suppress confusing and distracting animations and audio on web browsers and media players. Make sure that media doesn’t start automatically on the opening of a webpage, and that it is easy to stop it when it does start. Avoid using visual page designs that can’t be easily adjusted with CSS or web browser controls. How to Check Your Website’s Accessibility If you’re not sure that your website meets general standards and guidelines for accessibility, there are plenty of tools and checkers that can help you to verify compliance and identify where you need to improve. First of all, you can run basic accessibility checks without downloading any tools, just by trying actions like resizing text, scanning titles and checking for alt image tags. You’ll find a selection of basic accessibility review actions on the W3C website, or you can use tools like User1st and AChecker for a quick review. It is faster and easier to run checks if you download evaluation tools. W3C recommends the Web Developer Toolbar for Chrome, Opera, and Firefox and the Web Accessibility Toolbar for Internet Explorer, which are all free extensions and available in a few languages. There are also many more free and paid evaluation tools out there to help you out. Some things to look out for when choosing a website accessibility checker include: Which languages it operates in Which set of standards it takes as guidelines What formats it checks Which type of tool it is – for web browsers, mobile or desktop apps, command tools, etc. How much it can check automatically Whether it provides reports, in-page feedback, transformations, and more Ultimately, there is no one tool that can check your website’s wraparound accessibility. You’ll need to combine a number of different tools so as to evaluate different aspects of your website. But even the largest toolkit of accessibility checkers can’t clear your website. It requires human oversight and someone to test out various aspects such as magnifying text, viewing pages using specific viewers and considering all the barriers that could face disabled users. Read about how over 95% of government websites exclude images of disabled people here! Conclusion Creating an accessible website takes a little more time and forethought, but it reaps many rewards. Apart from the need to comply with the laws and regulations in your country, an accessible website is easier to use for everyone, boosts your SEO, and helps all your visitors to have a smoother and more enjoyable experience on your site. It also opens your website up to the 15-20% of the population who have some type of disability. While some steps are more complicated and need the help of a developer, you can make your website accessible from day one with some simple and quick changes. An accessible website may involve more work, but there’s no question that it’s worth it, for everyone. Reference: Published at Website Planet please click on below link to read there: https://www.websiteplanet.com/blog/website-accessibility-made-easy-ultimate-guide/ Get the latest user experience news & articles. Subscribe with us

This is a recent thought provoking paper that comes from Michael Meyer and "Father of User Experience" himself - Don Norman. They have written a guide for changing how designers are educated. Meyer and Norman are working with a group of senior designers at IBM Design, who come from a mixture of disciplines, different regions of the world, practitioners, and academics with the intend to implement the strategy outlines in the paper. As mentioned by Norman, this group of talented designers will help them create a body of approximately 100 people who will discuss and plan a platform for curricula. This is the right time to keep a watch on the update of the topic. Abstract from the paper: Designers are entrusted with increasingly complex and impactful challenges. However, the current system of design education does not always prepare students for these challenges. Designers are moving into new areas, many of which require management, social, technological, and political skills never before thought of as the responsibility of design. Not only has technology increased and changed dramatically in recent decades, but society has become more and more concerned with weighty global issues, such as hunger, health, education. Design skills for developing creative solutions to complex problems are becoming more and more essential. Businesses are starting to recognise that designers bring something special to the work—a rational belief based upon numerous studies that link business success to a design-driven approach. These are all powerful opportunities, yet we are not always training our students appropriately. When we examine what and how our system teaches young designers, we discover that the most valuable elements of the designer’s perspective and process are seldom taught. Instead, some designers grow beyond their education through their experience working in industry, essentially learning by accident. Many design programs still maintain an insular perspective and an inefficient mechanism of tacit knowledge transfer. So, what are we to do? Other learned professions such as medicine, law, and business provide excellent advice and guidance embedded within their own histories of professionalisation. In this article, we borrow from their experiences to recommend a course of action for design. It will not be easy: it will require a study group to make recommendations for a roster of design and educational practices that schools can use to build a curriculum that matches their goals and abilities. And then it will require a conscious effort to bootstrap the design profession toward both a robust practitioner community and an effective professoriate, capable together of fully realising the value of design in the 21st century. In this article, we lay out that path. Interested to read the full research paper? Click on the link below in reference section. Reference: For the full article please click on below link: In Science Direct. https://www.sciencedirect.com/science/article/pii/S2405872620300046 Get the latest user experience news & articles. Subscribe with us