 So we have Kar-Wai Pun from Home Office Digital talking about opening up the petition to design and designing things. Yes. Hello everyone. I like Leona. I'm also going to be touching on accessibility in this case. These posters that I've designed called the do's and don'ts on designing for accessibility. And how by sharing them and keeping them open source they've led to some pretty exciting and unexpected things. So none of these posters would have been realized had it not been for this one visual that came to my head. Which was this. Which I'll explain in a bit. So right now I'm just going to give you a bit of background as to what I do and where I work as this helps shape the posters and how I've made them. So I'm an interaction designer at the Home Office which is a UK government department that's responsible for things like security, immigration and law enforcement. And while there are aspects of the Home Office that tend to be quite closed, locked down and confidential such as looking into tackling terrorism. What we do in my team which is digital data and technology is to work in transparent agile ways. We deliver services such as renewing your passport and applying for a visa. And the way we work involves lots of user research, prototyping services that could be tested with users, iterating on them based on feedback so that we could produce something that truly meets our user needs. And our ways of working are based on these design principles set forth by the government digital service or GDS. Which helps other government departments meet user needs and transform digital services. The two points that I'd like or the two principles that I'd like to highlight are number six which is this is for everyone. Because what we design needs to be something that everyone can use regardless of their ability or the type of technology. And the tenth makes things open, it makes things better. What we mean by that is to be able to share design, share code, share ideas, even share failures or mistakes because things get pointed out, suggestions get made and the thing that you're sharing gets improved. So what does this mean about the posters or what does it mean with regards to the posters? I'm part of an in-house accessibility or access needs team composed of about 14 user researchers and designers who focus on these broad areas. Autism in ADHD, motor disabilities, mental health, dyslexia, visual impairments and deafness and hard of hearing. And each member of our team is paired up in order to take on a broad condition and research it extensively. And that could be through conducting personal interviews with users, undergoing training. And our role is to pool our knowledge together so we can get a greater understanding as a whole, feedback into each other's knowledge on the respective conditions. As a team, we've done talks, we've participated in deaf awareness training and we've also had these breakout sessions during our away day, our home office away day. Where we've invited people to try out simulation tools like simulation goggles and simulation gloves to see what it feels like to be like certain users that have certain conditions in order to empathize and increase greater understanding of different users in our society. So my focus is on autism in ADHD with another colleague, Nick Weinman. And one of the things I've learned about autism was this. Can anyone tell me what this is? So it's raining cats and dogs. It's an old English phrase that indicates heavy rain, torrential downpours. But for someone with autism, this can be taken literally. And it's because of the careful attention detail of the structural language that makes it really hard to comprehend figurative, figures of speech and figurative language. So with this in mind, this visual became the basis of a poster I created called Designing for Users on the Autistic Spectrum. And the first guiding principle I've put on the poster was don't use figures of speech or idioms. Instead, write in plain language. It's clear and much more easier to understand. I then started to roll out a few more design principles that I've researched with regards to Designing for Users on the Spectrum. And I just want to highlight that good design principles apply to everyone. And it's just the aim of these posters is to highlight certain design principles that will impact certain users more than others. So it's promoting awareness of different users in our society and different conditions through good design practice. The autism poster became the catalyst for rolling out a series of other posters. I'm now going to go through some of the key elements in each of them which were provided to me by the rest of my access needs team who have done a lot of great research. Pretty much without their feedback and their insight and their knowledge, these posters wouldn't have happened at all. So just to go through some of them briefly. Designing for users as screen readers. Do structure content using HTML5. Make sure it's correctly marked up. Don't rely on making things big and bold to convey that it's something like a header because screen readers won't read that properly. Use a combination of color, shape, and text in order to convey that something is a button, for example, as opposed to just using color alone. Because some people may not be able to distinguish colors and worse still is if those colors tend to be quite similar in hues. Use images and diagrams to support text. This breaks up lots of heavy text and it improves cognition. And for some dyslexics, seeing a lot of text can cause what's known as like a blurry or swirly effect. The text moves. So design for keyboard or speech only use. Not everyone uses a mouse. Make sure that all functionality is available on a keyboard. And for those that do use a mouse, consider not making dynamic content that requires a lot of precise mouse movements. So for example, hiding things in sub menus and sub sub menus that have small click or hit areas. Use subtitles or transcripts for videos. This provides additional content or additional information as opposed to putting content in just audio or video only. So this is a set of posters that we have at the moment. Designing for users on the artistic spectrum, designing for users of screen readers, users with low vision, those with dyslexia, physical or motor disabilities, and those who are deaf or hard of hearing. So now I'm going to tell you about how sharing these posters with the community makes it better. I mean, it's at the heart of what we do at the home office. And it's one of the guiding design principles and why I'm here in this open source conference. So we shared this on the government accessibility blog. We've also shared this on Twitter and on GitHub. And we've had an amazing response. We've had a few write-ups and some great mentions from the community. One of the really great things that has come out of sharing the posters was that we've had some suggestions for creating new posters, such as this one from a user who would like to see a poster on designing for those who use voice recognition software. And then we've also had users, this user is on the spectrum, but she had suggested additional design principles that would apply not just to one poster but across several. And for her, it was to give users a chance to control the play of audio or video that's on a page as opposed to having it automatically play. Because for her, she was quite sensitive to sound. And there's nothing worse than clicking on an unsuspecting link and then having this sudden noise come at you. This is also a problem for someone using a screen reader because of the overlapping of sounds. And for someone with motor disabilities having to track down the source of the sound in order to stop it, especially if the controls are quite small and finicky or are hidden altogether. So one of the really great things that has come out as well from sharing was we've had questions about why certain design principles were certain ways. So this one was taken from the deaf and hard of hearing poster. We say don't use complicated words. But then the question is why? And this is where we need to iterate on these posters because we've provided guidance that was too broad but without proper context or additional explanations. So we say don't use complicated words, not that deaf users won't be able to understand complicated words. It's just that deaf users have different methods of communication and that could be lip reading or that could be signing. And when you lip read complicated words, I mean it's already a challenge enough as it is to be able to read someone's lips. And to read complicated words would be even more challenging. Also with signing, signing has its own structure and syntax that is very different from the spoken language. So it's just best to avoid using complicated language altogether and be able to sign with simple and more concise words. So we talk about accessibility in the posters, but what about making these posters accessible themselves? And what we found out was when I produced these posters, I produced them as PDFs. But we soon found out that these PDFs aren't properly tagged for screen readers to read. So this is something that we're currently working on. We're having one of our design interns, Megan, looking into tagging these properly. And she's been learning along the way because she's never come across a screen reader. She's attended usability sessions in order to gain better understanding of how screen readers work and how it applies to what she's trying to do. So another way of making these posters accessible is offering them up to be translated so they can be accessible in other languages. And so far, currently in our GitHub repo, we have five different translations and there's a sixth that's coming along. So we have translations in German, Spanish, French, Chinese, Dutch, and we're reviewing Turkish at the moment. So we've learned a lot of things as we've offered these up for translations. One of the things was that when I had initially created these posters, I've created them in Sketch, which is a Mac-based vector software. Not everyone has Sketch and not everyone uses a Mac. So we've reached out to the GitHub community to ask what was the best format to share these in so that anyone can use this and open it up in their respective graphic software. And we found that SVGs, scalable vector graphics, were probably the best bet. Some people can modify PDFs as well. So we've provided on our GitHub repo a Sketch file, PDFs, and SVGs. We've also learned that we needed to put a Creative Commons license logo because there were some people who felt a bit nervous about taking the posters and translating them, changing them if there were copyright issues. So we needed to make it clear where we stood and we actively encouraged people to translate these posters. So we've put this Creative Commons license logo on the footer and had asked everyone that if they wanted to translate the posters, they need to include this logo and have it attributed to the source, which is the home office. And then they are free to modify these. And it just gives people a peace of mind to be able to modify the posters and freely distribute them. We've also had some users that wanted to translate them. We had multiple users wanting to translate them in the same language. So what we did there was we encouraged the collaboration. Instead of individual users providing the same type of translations, we've had such a great success with it. We've had people being able to work based upon, you know, like there were some translations where it was, you know, do you use familial or formal phrasing? And it was just being able to have users collaborate on these translations, which makes them so great. And finally, I just want to share this really super handy Git browser site that was made by one of the designers in government digital service, Joe Landman. It's an alternative to accessing these posters on GitHub. What he's done was made it as a more visual way of being able to access them. And I'll show the links to where you can get these posters on our GitHub and on Git browser later on. So what's next? This is quite exciting. We have two of our design interns, Megan and Simon, looking to build these in HTML. And by building it in HTML, it will be made even more available for even a wider number of users. They're building it responsive in two ways. Responsive in terms of layouts so that users can view these posters in whatever device they like, mobile, tablet, desktop. But it's also responsive because they're taking in the feedback, the suggestions that we've had gathered from sharing these posters in the first place. And find ways of scaling these posters up so that you can add additional design principles. And they're looking into a view more link so you can provide additional context and additional information for some of these design principles so that they're not too broad and make you think like, well, why are you advising this for certain users and not others? They're also looking, the challenge that they have is looking at things like do they lay out the do's and don'ts side by side as it is in the posters? Or do they perhaps look at focusing on all the good design practices and those that are best to avoid? Do they make the do section a fixed header so as you scroll through, like say on a mobile, you can get all this great design principles and you don't have to be constantly reiterating, do this, do this, do this. So they have quite a few challenges and quite a few things to think about from a visual and also from a cognitive point of view. But they would love to hear from you, so if you have any questions, if you have any suggestions or feedback about how they can build this, please feel free to send them an email or just to say hi. And here are the links to the posters on GitHub and on Git browser. And for more information about what we do at the Home Office, this is an email to our Access Needs team to find out more about the different conditions that we're exploring. And I just want to conclude with this one tweet by a Twitter follower at uxforfiance who had printed these posters and shared them on his walls. And he said, here's your posters at work. Literally every day people stand there, read and discuss. It's just a start but a great one. So we all have to start somewhere. For me it was a visual idea that became the basis of a poster which then rolled out into a series of posters. And by sharing them with a community, with a wider community, we were able to receive lots of great feedback for iteration and we had requests to translate them internationally. We were surprised and touched that people around the world had wanted to translate these posters. And now we have this opportunity to scale this up even further by building this in code. And I just want to say that if it wasn't for sharing these posters and making them open, we would never have gotten these opportunities and this amazing feedback. And it would never have given me the opportunity to come to this great global conference and be able to speak to you all. Thank you. Yes. You said with them being translated to so many different languages, have you had any feedback on cultural differences? Because I know that some UI practices, UX practices are different for different cultures. Yes. So we did have questions about, you mean like cultural as with respects to... Colors. Nothing pertaining to right to left or left to right as of yet. But we have had, I think Belen had contributed to one of the posters where it was a Spanish poster and it was Latin America and Spain. And it was being able to talk about the different, I think there were different idioms. So instead of raining cats and dogs, it was a completely different figure of speech. So it was being able to work through what those differences may be and what can be a compromise. If there is a compromise, if not then it becomes something that I think the users can try to decide amongst themselves what to do next. I hope that answers your question. Yeah. How do you measure the complexity of your problem? How do I measure the complexity of... Words. Words. Good question. That's something that maybe the other, my other Access News team may be able to answer as well. Complexity as, oh sorry, complexity as for example, if you're using a lot of different words to describe something that may be able to be summed up in one word or two words. So not like using simple words to represent a multiple number of words perhaps. If you're not using jargon, if something is quite technical, if there's a way that you can use it in plain language. There is a readability scale. One of them is called Fleischkümmel, I think. If you look for readability at the EISH, E-I-D-M-A-N, there's a very complicated algorithm. Words, but if you throw the word in and say somebody of the age of X can read and understand this. I don't know. That's a regular question. Yeah. And so that's giving us readability based on age, which of course doesn't mean that every child or person aged X or Z can read. But it gives you a good understanding of the complexity or the readability of the word. And I just want to add, last point, I have a few sets of the posters with me. I know you can access them on GitHub and your browser. But if anyone is willing to volunteer a new translation that's not in our GitHub repo, please see me later on and I'll give you a free poster. So thank you.