Source: http://www.uxbooth.com/articles/designing-for-dyslexia-part-2/ Translate: Philipp Baranovskiy / http://philipp.ninja
March, 23 / 2015
#Designing for Dyslexia, Part 2 #Проектирование для дислексиков, часть вторая
Universal design strives to improve usability for both users with and without disabilities. In this, part 2 of Designing for Dyslexia, Andrew Zusman identifies how the principles of universal design can be applied to our work on the web.
Универсальность дизайн подразумевает одинаково качественный, продуманный и доступный способ взаимодействия людей с продуктом / интерфейсом / объектом в независимости от того, есть ли какие ограничения у них или нет. На этот раз мы поговорим о том, как принципы универсального дизайна могут быть применены к нашей работе в интернете.
Swimming pool ladders are physically difficult to use. They require strong arms and steady feet, and as a result, elderly swimmers and children need alternate exits. The design is therefore not universal, or not usable to all. A ramp gradually leading into the pool, on the other hand, would be considered a universal design for entry and exit. Ramps allow easier entry and exit for those swimmers as well as others who could use a ladder or stairs with no difficult. Additionally, a new, hesitant swimmer may feel more at ease wading slowly into the water rather than stepping down into the water. In other words, this design considers the widest possible user base.
Лестницы в бассейнах физически тяжело использовать. Они требуют от вас сильных рук и умения стойко стоять на ногах. Поэтому пожилым людям и детям нужны альтернативные способы выходить из бассейна. Такой подход нельзя назвать универсальным, — он не подходит для всех. А вот, к примеру, постепенно идущий под воду пандус — можно, так как неуверенно стоящие на ногах пловцы смогут без труда входить и выходить из бассейна, в то время как люди, которые могли воспользоваться лестницей также смогут воспользоваться пандусом такого типа. И это не говоря уже о том, что тот, кто только учится плавать или делает это не очень уверенно, может позволить себе неспеша спуститься в воду, а не шагать по лестнице, держась за перила как за последний шанс выжить. Иными словами, такой подход предполагает более широкий диапазон вариантов использования и, соотвественно, больший охват пользовательской аудитории.
There are seven guiding principles that can help designers to make choices that will fit a broader audience, and five of them are applicable to the world of web applications and sites, where most readers (and myself) design. In part one of this article, I demonstrated that dyslexic users have been largely unaddressed as a user base despite their large numbers. I outlined the problems that many dyslexic users have in using digital interfaces. In this article, I will explain how, like in the swimming pool, we can create interfaces that appeal to the widest possible audience and this will not only improve designs for dyslexics, but for everyone.
Существует 7 основных прицнипов, которые могут помочь сделать правильный выбор для получении более широкой аудитории и 5 из них применимы к сфере сайтов и веб-приложений, в которой заняты большинство читателей (и я). В первой части этой статьи я рассказал о том, что пользователи с дислексией зачастую не учитываются при проектировании интерфейса, несмотря на их достаточно большое количество. Я также описал проблемы, которые вследствие этого возникают. Теперь я расскажу о том, как создавать интерфейсы для максимально широкой аудитории, и о том, почему это будет не просто улучшением для дислексиков, а улучшением для всех.
##Universal design principles ##Принципы универсального дизайна
Universal design means creating a singular design that fits the widest possible audience. If a design is clear and usable enough for an eighty year old, it is likely that a twenty year old will be able to use it as well. The same principle applies for disabled users. If a design is usable and accessible enough for a user with motor difficulties, it is likely to be accessible for those without any barrier to motor skills. However, a design that is accessible is not necessarily universal. An accessible site is like a hearing aid: it won’t improve the hearing of a person without a hearing impairment; similarly, an accessible site will offer larger text options for people with poor sight, but it won’t improve the experience for a person with 20/20 vision. A universal design, however, will consider the entirety of experiences and offer a singular design that best fits everyone.
[ Здесь и далее слово “accessible” будет переведено как “доступный” , подразумевая такое свойство сайта, приложения, интерфейса или продукта, которое обуславливает максимально широкие возможности по использованию той функциональности, которая заложена создателями. ]
Универсальный дизайн значит создание единого продукта, который подойдет максимально широкой аудитории. Если тем, что Вы сделали, сможет разобраться как пользоваться 80-летний старик, то и 20-летний парень с большей долей вероятности тоже сумеет воспользоваться этим не хуже. Тот же подход применим и к инвалидам. Если сайтом, приложением, скамьей или плитой сможет воспользоваться человек с нарушениями опорно-двигательной системы, то и здоровый человек будет чувствовать себя уверенно. Однако, “доступный” дизайн не всегда “универсальный” дизайн. “Доступный” сайт как слуховой аппарат: он не позволит вам лучше слышать, при этом не посадив ваш слух. Похожим образом, сайт, который имеет опции для слабовидящих с увеличенным размером шрифта, не сможет стать более удобным для людей с нормальным зрением. Подход с точки зрения универсальности подразумевает техники, дающие преимущества для каждого.
North Carolina State University’s Center for Universal Design offers seven guiding principles for universal design, of which five are readily applicable for web and mobile.* Since these principles were initially intended for designing physical spaces, two of the principles (low physical effort and size and space for approach and use) are less connected to the digital experience. The five principles that can be used as general guidelines for digital design will help designers to create better experiences for not only dyslexic users, but for everyone. These principles are as follows:
Центр универсального дизайна университета Северной Каролины предлагает 7 основных подходов, 5 из которых применимы к веб- и мобильным приложениям. Посколько изначально они были предназначены для проектирования физического пространства, то 2 из них (“минимум физических усилий” и “размер и пространство для использования”) плохо применимы к цифровому миру. Остальные 5 помогут людям обеспечивать наибольшую функциональную доступность не только для людей с дислексией, но и для всех пользователей. А именно:
- Flexibility
- Simple and Intuitive
- Perceptible Information
- Tolerance for Error
- Equitable Use
- Гибкость
- Простота и понятность
- Воспринимаемость информации
- Допустимость пользовательской ошибки / "Защита от дурака"
- Доступная функциональность
##Flexibility ##Гибкость
Flexibility in universal design means offering multiple channels or pathways to reach the same goal. This is most easily identifiable in information hierarchies whereby the same information can be accessed via multiple user flows. The Internet Movie Database was cited often in my research as a website that offered a great experience for dyslexic users.
Гибкость в универсальном дизайне подразумевает возможность достижения одной и той же цели несколькими способами.
/* how to translate?
This is most easily identifiable in information hierarchies whereby the same information can be accessed via multiple user flows.
*/
По ходу моего исследования опрашиваемые очень часто упоминали IMDB как сайт, который сделан очень дружественно к людям с дислексией.
In Part One, I discussed how many different ways a deck of cards can be sorted and noted that a dyslexic user could see each card as unique rather than automatically grouping the cards. In the same way, just as a deck of cards, which can be categorized by color, suit, or number, IMDB’s information can be grouped and categorized in a variety of different ways. A user could search Tom Hanks, Woody, Pixar, or animated films from 1995 and still find the film “Toy Story”. Many UX designers and researchers use exercises such as card sorting to determine where a node of information is most likely to be found, but offering several pathways to the same node of information improves the site’s flexibility. This, in turn, improves the universality of a design.
В первой части статьи я рассказывал о том, что колода карт может быть отсортирована множеством разных способов и о том, что дислексики могут воспринимать все карты по отдельности и только потом группируя их как-либо. Точно также, как карты могут быть сгруппированы по цвету, масти или порядку, информация на IMDB может быть сгруппирована и категоризирована множеством разных способов. Пользователь может искать актера Тома Хэнкса, дятла Вуди, компанию Pixar или анимационные фильмы с 1995 года и одновременно Историю Игрушек. Множество UX специалистов и исследователей используют способы вроде примера с сортировкой карт чтобы определить, где и как люди будут искать информацию вероятне всего, тем не менее, предлагая различные способы доступа к одному и тому же разделу ресурса, тем самым повышая удобство и универсальность использования.
Many dyslexics explained to me that their minds “connected the dots” in a different way than their peers, so it stands to reason that sites that offer a variety of options for locating specific content will be well designed for dyslexic users. Since organizational skills were considered an advantage of dyslexia, creating varying patterns of organization in terms of navigation and findability will improve a design for not only dyslexics but for everyone.
Многие объясняли мне, что их мозг анализирует вещи иначе, чем у других. Поэтому сайты, предлагающие разные способы навигации по контенту удобны в использовании с точки зрения дислексии настолько же, насколько и и для других групп пользователей.
##Simple and Intuitive ##Простота и понятность
”The only intuitive interface is a nipple. After that it’s all learned.”
Though the origin of the quote is debated, the words “simple” and “intuitive” are ubiquitous when discussing design—and not just universal design, but all design. Our goal when creating “intuitive” designs is to create an interface that can be quickly learned. Since dyslexia is a learning disability, it’s even more important to create information hierarchies that are clear and based on convention.
"Единственный понятный интерфейс это сосок. Все остальное -- приобретенные навыки."
Хотя происхождение цитаты еще обсуждается, слова "простота" и "понятность" стали уже вездесущими в рамках темы дизайна интерфейсов. И не только универсального дизайна, а глобально. При создании "понятного" интерфейса наша цель создать его так, чтобы он мог быть выучен очень быстро. Поскольку дислексия, это, в широком плане, неспособность к обучения, то очень важно создавать информационные cтруктуры понятными и единообразными.
This gets to the purpose of hierarchies: they help show us what to do, so that we needn’t memorize the information. Ideally, an interface might be so simple that a first time user or a user with a poor memory could still move through the flow. In his famed “10 Heuristics for User Interface Design”, Jakob Nielson addresses one way to add this “simplicity.” He wrote that designs should, “minimize the user’s memory load by making objects, actions, and options visible.” Users have come to expect, for example, that a logo is a link to a website’s homepage. This goes beyond simple recall and moves into recognition—an action that requires minimal memory load.
Это подводит нас к целям, которыми перед такими инструментами стоят: они должны подсказывать нам, что делать, освобождая нас от необходимости запоминать информацию. Идеально, если интерфейс был бы настолько простым, чтобы даже пользователь с расстройством памяти мог спокойной перемещаться в потоке контента. В своей знаменитой работе "10 эвристических подходов в проектировании пользовательского интерфейсы / 10 Heuristics for User Interface Design" Якоб Нильсен / Jakob Nielson ссылается на один способ упрощения. Он писал, что дизайн должен минимизировать "загрузку памяти" человека делая функциональные объекты и опции видимыми. Пользователи могли заметить, к примеру, что логотип является ссылкой на главную страницу. Это выходит за рамки просто воспоминания и является в большей степени осознанностью такого поведения как явления. Это то действие, которое требует минимальной памяти.
Также на Хабре можно найти много переводов статей Нильсена.
Ссылка на поисковую выдачу: https://clck.ru/9afa3
Both http://www.npr.com and http://www.apartmenttherapy.com were cited by dyslexics in my study of sites they believed gave great experiences for dyslexics. In addition to the level of flexibility in finding information, both sites use clearly labelled layouts. The information is readily available and there is little to learn about how to use either site. Because of the clarity in labeling and creating different sections that follow a common formula, it is not difficult to find a specific news story on NPR, nor is it difficult to find an image gallery on Apartment Therapy.
Втечение моего исследования сайтов оба ресурса http://www.npr.com и http://www.apartmenttherapy.com были упомянуты опрошенными дислексиками как очень удобные для них сайты. В дополнение к высокой гибкости в поиске информации и навигации оба хорошо структурированы в плане разметки информации. Контент вполне читабелен и есть небольшое интро о том, как пользоваться сайтом. Из-за простой разметки и разделении контента по секциям, что следует общей формуле, не составляет труда ни найти конкретную новость на NRP, ни перейти в галерею фотографий на Apartment Therapy.
Additionally, information does not have to be in the form of text. For dyslexic users, seeing a product demo or having the option to interact with a product can help build trust.
Также, информация не должна быть только в форме текста. При работе с аудиторией, включающией людей с дислексией, возможность просмотра демонстрации продукта, к примеру, в виде изображения или возможность взаимодействия с продуктом поможет вам выстроить более доверительные отношения с ними как с потенциальными клиентами.
##Perceptible Information ##Уловимость информации
Perceptible information refers to information that can be easily and quickly understood and digested. Since Attention Deficit Disorder (ADD) and Attention Deficit and Hyperactivity Disorder (ADHD) both have a high comorbidity rate with dyslexia, digital products with a high degree of signal compared to noise are the most beneficial. Signal, in this case refers to the important message of the a site, for example a call to action, while noise would be other aspects of a page that draw attention away from the signal. One of the primary features that separated the highly successful Nest Thermostat from other thermostat competitors was its ability to show users exactly the information they needed without any distractions. In the same vein, messy airline boarding passes can be incredibly confusing even to people who aren’t dyslexic. The application FlightCard for iPhone was created to combat messy, unclear boarding passes and make flight information more perceptible. Improving the ratio of signal to noise in digital products will improve their usability not only for dyslexics and suffers of ADD and ADHD, but for everyone.
Уловимая информация это информация, которая может также легко быть найдена, как и быстро усвоена.
ADD/СДВ: Attention Deficit Disorder / Синдром дефицита внимания ADHD/СДВГ: Attention deficit hyperactivity disorder / Синдром дефицита внимания и гиперактивности
Общая статья в Википедии про СДВГ
Здесь и далее аббревиатура СДВГ будет использована для обоих типов расстройств, как и следует из ее расшифровки в русском языке.
Коморбидность -- по-простому, когда на фоне одной болезни появляются одна или несколько других.
В то время, как СДВГ имеет высокий процент коморбидности среди больных дислексией, цифровые продукты с высоким уровнем сигнала по сравнению с шумом являются наиболее выгодными. По "сигналом" в данном случае подразумевается главный посыл сайта, к примеру, призыв к действию, тогда как под "шумом" -- все остальное, что отвлекает от сигнала. Одно из главных преимуществ термостата Nest, которое выгодно отличает этот продукт от всех остальных, это возможность показывать пользователям именно ту информацию, которая им нужна безо всяких отвлекающих подробностей. По этой же причине отвратительные посадочные талоны большинства авиакомпаний могут быть запутанными даже для людей без дислексии. Приложение FlightCard for iPhone было создано чтобы сгруппировать разрозненную и неоднородную информация на авиабилетах в более усваиваемую форму. Повышение отношения сигналу по отношению к шуму в цифровых продуктах улучшает воспримчивость их информации для всех групп пользователей, а не только для людей с расстройствами.
Many landing pages have nailed the idea of perceptible information with single calls to action, clear, explanatory headlines, and images or films of their products. One way to consider how to make information more perceptible (as well as more simplistic), is to consider what I call the “foreign language test”. If this website were in a foreign language that the user did not understand, would he or she still be able to understand the basic tenants of the product? How clear would the calls to action be if they were written in a different language? Some information would obviously be “lost in translation,” but when considering both the signal-to-noise ratio and the clarity of the calls to action, this simple test can help to create designs that will improve usability.
Множество посадочных страниц используют простой рецепт уловимой информации, основанный на простых призывах к действию, понятных объясняющих заголовках и иллюстрациях продукта. Один из способов сделать информацию на странице еще более простой к восприятию: это то, что я называют "тест иностранного языка". Если бы сайт был на языке который пользователь не понимает, был бы он в состоянии понять, что вообще из себя представляет продукт? Насколько понятны были бы призывы к действиям, если бы они были написаны на другом языке? Некоторая информация, очевидно, может быть утеряна из-за перевода, но когда учитываешь оба параметра: отношение сигнала к шуму и понятность призывов к действиям, то этот простой тест может помочь улучшить юзабилити интерфейса.
In addition, there are many dyslexic-friendly fonts. One such font is Open Dyslexic.** These fonts are meant to improve readability for dyslexics. One way to create a more universal design and one that will be improve readability for dyslexics is to list a dyslexic font as the first font in a CSS document. Users who have dyslexia and have the font already will see a dyslexic-friendly font, while those without the font will view the website normally.
В дополнение могу сказать, что существует множество комфортных для дислексиков шрифтов. Один из них Open Dyslexic.** Эти шрифты призваны повысить читабельность текста. Один из способов сделать дизайн более универсальным это выставить шрифт для дислексиков первым в CSS документе. Пользователи с дислексией, у которых уже есть подобный шрифт, увидят адаптированный шрифт на странице, остальные же, кто врядли загружал себе подобный шрифт, увидят нормальную версию.
##Tolerance for Error ##Защита от дурака
Errors will occur for some users no matter how intuitive a design is created, so allowing errors to be reversed or minimized is a way of creating a more universal design. This is called “tolerance for error”. Understanding that users are prone to err will help create interfaces that do as much to abate error as possible. Dyslexics greatly benefit from spell check for obvious reasons. Much of my research was based on questionnaires made at Google Forms. User responses did not have spell check enabled automatically by Forms, and spelling mistakes were abundant. In fact, a few subjects were angry at me for not using spellcheck (this was not intentional, and successfully helped me visualize how dyslexia manifests). Dyslexics also pointed to Excel and other firms and field-based applications as a source of frustration, since these applications typically do not check spelling.
Пользователи будут вести себя не всегда так, как вы того задумывали в независимости от того, насколько интуитивен созданный вами дизайн. Поэтому учитывание возможности ошибок взаимодействия, технических ошибок, предоставление пользователю возможности вернуться туда, где он только что был, и в целом, минимизация отрицательных последствий нетипичного поведения — хороший способ сделать ваш продукт более комфортным в использовании. Это называется "Tolerance for error". "Защита от дурака" в народе по-русски. Понимание, что люди действительно пользуются вещами по-разному поможет создать интерфейс насколько стойкий к ошибкам, насколько это возможно (и это еще без учета стадии тестирования). Подверженных дислексии очень сильно выручают инструменты проверки орфографии по понятным причинам. Большая часть моего исследования была основана на вопросниках, составленных в Google Forms, где проверка правописания была выключена по-умолчанию. Орфографических ошибок было в достатке. В действительности, некоторые были даже на меня обозлены из-за этого, но это было локальным явлением территориально, поэтому это также помогло мне визуализировать картину того, как проявляется дислексия). Мне также указывали на Excel и другие приложение основанные на полях ввода, как источник разочарования, потому что они не поддерживают проверку орфографии простым способом.
However, not every error alert is a positive experience. One of the more complex and controversial aspects of error tolerance is the popup warning message. This is a point of contention in the UX community. On the one hand, a warning or confirmation message gives a user the opportunity to correct a possible error, but on the other hand it can be obtrusive and, in fact, the source of poor user experience rather than a way to improve an experience.
Так или иначе, не стоит считать, что каждое уведомление об ошибке — это правильный подход к делу. Один из самых сложных и спорных моментов защиты от дурака это всплывающее окно уведомления, он же попап, он же popup, он же pop up. Это, прямо таки скажем, точка раздора в UX сообществе. С одной стороны, окно уведомления или подтверждения позволяет пользователю скорректировать возможную ошибку, но с другой, оно может быть очень навязчивым и, по факту, также источником неудобного и некомфортного способа использования ресурса или приложения, а не методом улучшения.
There are plenty of examples of poor warning messages, (and since these are written messages they benefit many users, though not specifically dyslexic users), but one great example that can help everyone can be seen in Amazon’s purchase process. Once a purchase is made, a user can still cancel or change their order until it ships. The user thus has quite a while to make changes or cancel an order with no penalty or difficulty. Particularly for the dyslexics who told me they were scared to make purchases online for fear of making an incorrect order, this additional time to make changes can be the difference between a potential sale at an ecommerce site and an abandoned shopping cart.
Есть множество примеров уведомительных сообщений, которые ничем не помогают человеку (и видят их не только дислексики). А вот пример иного расклада дел: процесс покупки на Амазоне. После того, как заказ оформлен, пользователь все еще может отменить его или изменить содержание до формирования посылки. При этом выделяется достаточное количество времени на эти действия. Если говорить про дислексию, то время и возможность для проверки, отмены и внесения изменений в заказ — это то самое, что снимает ощущение тревожности у пользователя и составляет разницу между покупкой на сайте и брошенной корзиной.
Подобная возможность присутствует и в Gmail
##Equitable Use ##Доступная функциональность
Finally, equitable use means simply that something works for everyone. This is, in essence, the cornerstone of universal design. Rather than dividing people into categories or personas, “blind”, “dyslexic”, “ideal user”, “male”, “able bodied”, we should instead view them as users, customers, and most of all, as people. We cannot rely on simply making a version that will work for the blind and a different version for everyone else. Instead, the goal from the outset should be to create a design that is as inclusive as possible. It’s a far broader guideline than the others, perhaps because it is so simple and so clear. Equitable use of a product means respect for an audience.
Наконец, доступная функциональность это просто то, что работает для всех. Это, в некотором смысле, краеугольный камень универсального дизайна. Прежде, чем разделять потребителей на группы или персонажей — "слепой", "дислексик", "идеальный пользователь", "мужчина", "трудоспособный" — нам следует вместо этого посмотреть на них как на пользователей, как на клиентов и, прежде всего, как на людей. Мы не можем просто сделать отдельную версию для слепых и еще одну для всех остальных. С самого начала целью должно быть создание дизайна, в котором продумано так много мелких детайлей, кейсов и ситуаций, как это возможно. Это более широкое послание чем все остальные, возможно, потому что столь просто и понятное. Доступность использования продукта есть уважение своей аудитории.
##Designing for all ##Проектирование для каждого
Designing for dyslexia is a unique challenge. It requires empathy, understanding, and the will to make design decisions that may not be based around what the majority of us, as non-dyslexics, might find to be ideal. Rather than ask the question, “Which user is best?”, we should ask the question “How can we reach everyone?” I believe that the crux of the issue lies in desire for inclusion and the courage to design for people who are unlike ourselves. I have almost never designed a product that I have ended up actually using, so it would thus be unhelpful for me to design based on my own intuition rather than what I know about others. The more equitable the design, the higher the likelihood that it will be adopted.
Проектирование для людей с дислексией это уникальное испытание. Оно требует эмпатии и понимания, а также заставляет принимать проектные решения, которые могут быть основаны не на том, что большинство из нас, не дислексики, считает правильным. Вместо того, чтобы спрашивать "Какой пользователь лучше? Какого выбрать?" нам следует задавать вопрос "Как мы можем удовлетворить их всех?" Я верю, что суть вопроса в стремлении к всеохватности и смелости для проектирования для людей, которые не похожи на нас. Я почти никогда еще не создавал продукт, который бы я действительно использовал на момент завершения работ, поэтому было бы безполезно полагаться на свои собственные ощущения вместо знаний о других людях. Более доступный дизайн — выше вероятность того, что о будет принят.
Designing for dyslexia is a call to action for designers. Universal design gives us a starting point for creating equitable, meaningful designs. For dyslexics, who are often overlooked in the design process, a more universal design can be the difference between usable and unusable, a great experience and a frustrating one.
Проектирование для дислексиков это призыв к действию для дизайнеров. Универсальный дизайн дает нам фундамент для создания доступных и значимых вещей. В случае с дислексией, которая обычно упускается в дизайн процессе, универсальный дизайн может быть той разницей между используемым и неиспользуемым, хорошим впечатлением от работы с продуктом и отрицательным отношением по результату взаимодействия.
*Author’s Note: Because Universal Design was created for designing physical spaces, this approach is being adopted for web only now and is still somewhat in its infancy. The remaining two guidelines deal with designing for physical spaces and for physical manipulation. While I do believe there is a place for these two principles of universal design in design for web and mobile, they are outside the scope of an article that focuses primarily on cognition rather than physical ability or disability.
**Note: In full disclosure, Open Dyslexic was helpful in aiding me to find subjects to interview and also helped to publicize my questionnaire.
От автора: поскольку универсальный дизайн был создан для проектирования физических пространств, то он дошел до веба только сейчас и еще развивается. Оставшиеся 2 принципа описывают проектирование физических пространств и физических взаимодействий. Хотя я верю, что для этих 2-х принципов есть место в сфере мобильных и веб-приложений, они остались за рамками этой статьи, которая не фокусируется на физических способностях или неспособностях. Ресурс Open Dyslexic очень помог мне в нахождении тем для интервью и популяризации моей анкеты.