{"id":376222,"date":"2024-05-21T06:45:08","date_gmt":"2024-05-21T06:45:08","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=376222"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=376222","title":{"rendered":"<span>How to practice user empathy in UX design and make product more accessible<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>According to the Oxford Dictionary, empathy is \u201cthe ability to understand and share the feelings of another\u201d. In UX, there is a special term \u201cuser empathy\u201d. It refers to the ability of UX designers to fully understand what users need from a particular software product. Having user empathy and basing design solutions around users\u201d comfort is one of the most true indicators of a designer\u201ds professionalism. Without that, any product a designer works on has a high chance of turning out to be pointless. Apart from having empathy as a soft skill in general, there are several ways a designer can practice user empathy through different UX methods and techniques. In this article we would like to talk on how a UX designer can treat users with empathy and make the product more accessible for different groups of target audience. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ec0\/e9a\/155\/ec0e9a15564aa0901e3ffa301fcac284.jpeg\" width=\"999\" height=\"764\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ec0\/e9a\/155\/ec0e9a15564aa0901e3ffa301fcac284.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>First of all, let\u201ds discuss a few simple general steps that help to understand users\u201d needs better:<\/p>\n<ol>\n<li>\n<p><strong>Conducting UX research<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>User research is a basis for understanding users and what they need in a product. It\u201ds an essential part of design creation that should take part not only before the development process, but also during all its stages. The main goal of any research is not only getting dry facts like users\u201d average age or expected number of downloads, but first and foremost learning as much about users needs, expectations and preferences.<\/p>\n<ol start=\"2\">\n<li>\n<p><strong>Having conversations with users<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>User interviews are usually a part of UX research, but they deserve special mention since it\u201ds one of the most powerful tools to practice user empathy. Interviews can be of different types: for example, at the beginning of the design process you can ask users what they would like to see in a product, while when the product is already out it\u201ds time to talk about what users think about it and whether they find its UX satisfying or not. The main rule here is to be a good listener and take criticism calmly, without trying to impose your opinion on interviewees.<\/p>\n<ol start=\"3\">\n<li>\n<p><strong>Creating empathy maps<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Empathy maps are a way to visually structure information gained from UX research and interviews. Basic empathy maps should contain information of what users think, see, say, do and hear, but you can add more categories to broaden the spectrum. Such maps help UX researchers to present user portraits to the other members of the development team, since the obtained information is vital not only for UX design, but for other aspects of the product as well.<\/p>\n<ol start=\"4\">\n<li>\n<p><strong>Simulating user journey through the product<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Another empathy tool is journey maps: it\u201ds a technique when UX researchers go through the product by performing actions in an order a user would perform them to complete a certain task. Basically speaking, it\u201ds an act of putting yourself in users shoes and navigating the product from their perspective. This tool helps identify problematic parts of the UX that can potentially worsen real users&#8217; experience. <\/p>\n<ol start=\"5\">\n<li>\n<p><strong>Creating a fictional user character<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>This may seem a little strange at first, but creating a fictional user character is an effective technique called \u201cuser persona\u201d. The character is created based on information gained with user research. In simple words, it\u201ds the portrait of the product\u201ds average user that UX designers should always keep in mind while working on the design. Writing down the characteristics of such a user and always checking whether a new design idea would fit his requests is a good way to keep the product user\u2011oriented.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/776\/410\/ce6\/776410ce60bf86d7959622a08f6ac19b.jpg\" width=\"1000\" height=\"858\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/776\/410\/ce6\/776410ce60bf86d7959622a08f6ac19b.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>***<\/p>\n<p>The Internet has become an integral part of everybody\u201ds life since the early 2000\u201ds, and it\u201ds hard to imagine that anyone can experience difficulties with access to software products in the modern world, yet that\u201ds still a bitter reality. We\u201dre talking about people with various impairments\u00a0\u2014 whether it&#8217;s visual, cognitive, hearing or motor. Fortunately, a lot of apps and websites are now designed in correspondence with accessibility principles and guidelines, but many products are still built in a way that makes it barely usable for audiences with special needs. <\/p>\n<p>If you\u201dre designing any software platform right now, here are a few ways that can help you increase its accessibility with the help of UX:<\/p>\n<ol>\n<li>\n<p><strong>Follow accessibility guidelines<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>In order to make the product comfortable to use for people with special needs, its UX design should correspond to the accessibility guidelines. There are different guidelines for different platforms in different countries, so be sure to follow the ones that your audience relates to. You can also use special instruments and programs to evaluate the accessibility of your app or website.<\/p>\n<ol start=\"2\">\n<li>\n<p><strong>Make a diverse UX team work on a product<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>One of the most effective ways to make the UX design of a product more inclusive is to hire a diverse team of professionals. For example, no one understands how to make the app comfortable for users with hearing impairments better than a designer with the same condition. If the product is designed for international use, it\u201ds great if it\u201ds worked on by a multicultural team of designers, and so on. Of course having a diverse team is not always easy and affordable\u00a0\u2014 if you are working on the product alone or with a small team, be sure to conduct accessibility\u2011related surveys among your target audience.<\/p>\n<ol start=\"3\">\n<li>\n<p><strong>Font adjustments<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>The easiest way to make the text on screen more readable is to give users options to adjust fonts to their needs. Set the default font size at 12\u201316px as recommended by most guidelines and make it possible to enlarge it. Another great feature is several font designs and weights to choose from. There are lightweight and heavyweight fonts\u00a0\u2014 the first ones are thin, which look stylish, but are hardly readable for people with visual impairments, so the heavyweight option can provide them with much better user experience. <\/p>\n<ol start=\"4\">\n<li>\n<p><strong>Color\/Contrast adjustments<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>One more thing visually impaired users struggle with are soft colors, which often form modern apps\u201d palettes. That\u201ds why you should either always keep contrast between the elements and the background they\u201dre on, or make an option to enhance contrast manually. A great example of that is the dark\/light mode option, which allows users to read dark text on a white background and vice versa. <\/p>\n<ol start=\"5\">\n<li>\n<p><strong>Voice control options<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>The ability to use apps with the help of voice is an only option for blind people. The majority of modern smartphones have voice control options, but it\u201ds great to have in\u2011app voice features as well. For example, if your product contains articles or long pieces of text, you can integrate it with a screen reader tool that reads the content out loud. Another great option is a voice assistant that guides people through the product with voice prompts.<\/p>\n<ol start=\"6\">\n<li>\n<p><strong>Alt texts<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Alternative texts are texts that replace non\u2011text elements for users that struggle with perceiving them visually. Alt texts can be read by the above screen readers, allowing impaired people to learn the information from images, charts, labels and other visually represented content bits. They\u201dre also useful for a software product in general in cases when graphic elements don\u201dt load properly (poor internet connection, etc.)<\/p>\n<ol start=\"7\">\n<li>\n<p><strong>Monitor scale options<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Apart from font size adjustment options, equip your product with monitor scale options. In some cases making the text larger is not enough, since users might find it hard to visually perceive other parts of the product as well. The ability to enlarge the whole screen with all its elements provides much more accessibility for people with poor eyesight and reduces the number of errors when completing any tasks in the product. <\/p>\n<ol start=\"8\">\n<li>\n<p><strong>Correct responsiveness<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Poorly done responsive design can hit very hard on the product\u201ds accessibility. For example, if the mobile version of a website reorders elements on the screen and scatters the content, it can be very hard for people with impairments to find familiar elements and fully use the product. That\u201ds why accessible UX implies extra work on the responsive design, making sure the hierarchy of elements doesn\u201dt break when the product is used on any device and in any available form. <\/p>\n<ol start=\"9\">\n<li>\n<p><strong>Flash content warnings<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Any content that flashes can be potentially dangerous to users with particular physical, cognitive or mental disorders. That\u201ds why it\u201ds important to forerun such content with warnings or even avoid it entirely if it can be implemented in a non\u2011flashy way. If your product has a lot of bright animations, provide users with a switch\u2011off option or static alternatives (for example, replacing gifs with pictures). <\/p>\n<ol start=\"10\">\n<li>\n<p><strong>Always study feedback<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>The work on the product doesn\u201dt stop with its launching. You can still make the product more inclusive when it\u201ds already functioning, and the best way to do that is to always study the feedback. In their reviews users usually point out which features can be improved or included in a product to make it more inclusive, and your job is to listen and to bring it to life. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/9cb\/391\/da5\/9cb391da58cee7882257b2b54794b8ea.jpg\" width=\"1000\" height=\"743\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9cb\/391\/da5\/9cb391da58cee7882257b2b54794b8ea.jpg\" data-blurred=\"true\"\/><\/figure>\n<p><strong>Conclusion<\/strong><\/p>\n<p>As brands nowadays develop their products for a more global outreach, they start paying attention to a more accessible UX. Accessibility of a product means making the product comfortable to use for as many different types of people as possible. This does not only refer to users with various disabilities and special needs\u00a0\u2014 it also relates to people of different cultures, ethnicities and religions. The more inclusive and accessible the UX of your product is, the more audience you can attract and retain. To do this, you can apply different strategies in the process of UX design creation. <\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/814577\/\"> https:\/\/habr.com\/ru\/articles\/814577\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>According to the Oxford Dictionary, empathy is \u201cthe ability to understand and share the feelings of another\u201d. In UX, there is a special term \u201cuser empathy\u201d. It refers to the ability of UX designers to fully understand what users need from a particular software product. Having user empathy and basing design solutions around users\u201d comfort is one of the most true indicators of a designer\u201ds professionalism. Without that, any product a designer works on has a high chance of turning out to be pointless. Apart from having empathy as a soft skill in general, there are several ways a designer can practice user empathy through different UX methods and techniques. In this article we would like to talk on how a UX designer can treat users with empathy and make the product more accessible for different groups of target audience. <\/p>\n<figure class=\"full-width\"><\/figure>\n<p>First of all, let\u201ds discuss a few simple general steps that help to understand users\u201d needs better:<\/p>\n<ol>\n<li>\n<p><strong>Conducting UX research<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>User research is a basis for understanding users and what they need in a product. It\u201ds an essential part of design creation that should take part not only before the development process, but also during all its stages. The main goal of any research is not only getting dry facts like users\u201d average age or expected number of downloads, but first and foremost learning as much about users needs, expectations and preferences.<\/p>\n<ol start=\"2\">\n<li>\n<p><strong>Having conversations with users<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>User interviews are usually a part of UX research, but they deserve special mention since it\u201ds one of the most powerful tools to practice user empathy. Interviews can be of different types: for example, at the beginning of the design process you can ask users what they would like to see in a product, while when the product is already out it\u201ds time to talk about what users think about it and whether they find its UX satisfying or not. The main rule here is to be a good listener and take criticism calmly, without trying to impose your opinion on interviewees.<\/p>\n<ol start=\"3\">\n<li>\n<p><strong>Creating empathy maps<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Empathy maps are a way to visually structure information gained from UX research and interviews. Basic empathy maps should contain information of what users think, see, say, do and hear, but you can add more categories to broaden the spectrum. Such maps help UX researchers to present user portraits to the other members of the development team, since the obtained information is vital not only for UX design, but for other aspects of the product as well.<\/p>\n<ol start=\"4\">\n<li>\n<p><strong>Simulating user journey through the product<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Another empathy tool is journey maps: it\u201ds a technique when UX researchers go through the product by performing actions in an order a user would perform them to complete a certain task. Basically speaking, it\u201ds an act of putting yourself in users shoes and navigating the product from their perspective. This tool helps identify problematic parts of the UX that can potentially worsen real users&#8217; experience. <\/p>\n<ol start=\"5\">\n<li>\n<p><strong>Creating a fictional user character<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>This may seem a little strange at first, but creating a fictional user character is an effective technique called \u201cuser persona\u201d. The character is created based on information gained with user research. In simple words, it\u201ds the portrait of the product\u201ds average user that UX designers should always keep in mind while working on the design. Writing down the characteristics of such a user and always checking whether a new design idea would fit his requests is a good way to keep the product user\u2011oriented.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>***<\/p>\n<p>The Internet has become an integral part of everybody\u201ds life since the early 2000\u201ds, and it\u201ds hard to imagine that anyone can experience difficulties with access to software products in the modern world, yet that\u201ds still a bitter reality. We\u201dre talking about people with various impairments\u00a0\u2014 whether it&#8217;s visual, cognitive, hearing or motor. Fortunately, a lot of apps and websites are now designed in correspondence with accessibility principles and guidelines, but many products are still built in a way that makes it barely usable for audiences with special needs. <\/p>\n<p>If you\u201dre designing any software platform right now, here are a few ways that can help you increase its accessibility with the help of UX:<\/p>\n<ol>\n<li>\n<p><strong>Follow accessibility guidelines<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>In order to make the product comfortable to use for people with special needs, its UX design should correspond to the accessibility guidelines. There are different guidelines for different platforms in different countries, so be sure to follow the ones that your audience relates to. You can also use special instruments and programs to evaluate the accessibility of your app or website.<\/p>\n<ol start=\"2\">\n<li>\n<p><strong>Make a diverse UX team work on a product<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>One of the most effective ways to make the UX design of a product more inclusive is to hire a diverse team of professionals. For example, no one understands how to make the app comfortable for users with hearing impairments better than a designer with the same condition. If the product is designed for international use, it\u201ds great if it\u201ds worked on by a multicultural team of designers, and so on. Of course having a diverse team is not always easy and affordable\u00a0\u2014 if you are working on the product alone or with a small team, be sure to conduct accessibility\u2011related surveys among your target audience.<\/p>\n<ol start=\"3\">\n<li>\n<p><strong>Font adjustments<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>The easiest way to make the text on screen more readable is to give users options to adjust fonts to their needs. Set the default font size at 12\u201316px as recommended by most guidelines and make it possible to enlarge it. Another great feature is several font designs and weights to choose from. There are lightweight and heavyweight fonts\u00a0\u2014 the first ones are thin, which look stylish, but are hardly readable for people with visual impairments, so the heavyweight option can provide them with much better user experience. <\/p>\n<ol start=\"4\">\n<li>\n<p><strong>Color\/Contrast adjustments<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>One more thing visually impaired users struggle with are soft colors, which often form modern apps\u201d palettes. That\u201ds why you should either always keep contrast between the elements and the background they\u201dre on, or make an option to enhance contrast manually. A great example of that is the dark\/light mode option, which allows users to read dark text on a white background and vice versa. <\/p>\n<ol start=\"5\">\n<li>\n<p><strong>Voice control options<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>The ability to use apps with the help of voice is an only option for blind people. The majority of modern smartphones have voice control options, but it\u201ds great to have in\u2011app voice features as well. For example, if your product contains articles or long pieces of text, you can integrate it with a screen reader tool that reads the content out loud. Another great option is a voice assistant that guides people through the product with voice prompts.<\/p>\n<ol start=\"6\">\n<li>\n<p><strong>Alt texts<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Alternative texts are texts that replace non\u2011text elements for users that struggle with perceiving them visually. Alt texts can be read by the above screen readers, allowing impaired people to learn the information from images, charts, labels and other visually represented content bits. They\u201dre also useful for a software product in general in cases when graphic elements don\u201dt load properly (poor internet connection, etc.)<\/p>\n<ol start=\"7\">\n<li>\n<p><strong>Monitor scale options<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Apart from font size adjustment options, equip your product with monitor scale options. In some cases making the text larger is not enough, since users might find it hard to visually perceive other parts of the product as well. The ability to enlarge the whole screen with all its elements provides much more accessibility for people with poor eyesight and reduces the number of errors when completing any tasks in the product. <\/p>\n<ol start=\"8\">\n<li>\n<p><strong>Correct responsiveness<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Poorly done responsive design can hit very hard on the product\u201ds accessibility. For example, if the mobile version of a website reorders elements on the screen and scatters the content, it can be very hard for people with impairments to find familiar elements and fully use the product. That\u201ds why accessible UX implies extra work on the responsive design, making sure the hierarchy of elements doesn\u201dt break when the product is used on any device and in any available form. <\/p>\n<ol start=\"9\">\n<li>\n<p><strong>Flash content warnings<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>Any content that flashes can be potentially dangerous to users with particular physical, cognitive or mental disorders. That\u201ds why it\u201ds important to forerun such content with warnings or even avoid it entirely if it can be implemented in a non\u2011flashy way. If your product has a lot of bright animations, provide users with a switch\u2011off option or static alternatives (for example, replacing gifs with pictures). <\/p>\n<ol start=\"10\">\n<li>\n<p><strong>Always study feedback<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>The work on the product doesn\u201dt stop with its launching. You can still make the product more inclusive when it\u201ds already functioning, and the best way to do that is to always study the feedback. In their reviews users usually point out which features can be improved or included in a product to make it more inclusive, and your job is to listen and to bring it to life. <\/p>\n<figure class=\"full-width\"><\/figure>\n<p><strong>Conclusion<\/strong><\/p>\n<p>As brands nowadays develop their products for a more global outreach, they start paying attention to a more accessible UX. Accessibility of a product means making the product comfortable to use for as many different types of people as possible. This does not only refer to users with various disabilities and special needs\u00a0\u2014 it also relates to people of different cultures, ethnicities and religions. The more inclusive and accessible the UX of your product is, the more audience you can attract and retain. To do this, you can apply different strategies in the process of UX design creation. <\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/814577\/\"> https:\/\/habr.com\/ru\/articles\/814577\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-376222","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/376222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=376222"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/376222\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=376222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=376222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=376222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}