Universal Design for Adaptive Web Applications presented by Dominira Saul

Summary

Highlights

• Dominira Saul emphasizes the need for Universal Design in adaptive web applications. 🌟
• Key concepts include understanding user needs, tasks, and context for effective application design. 📋
• The video explores the evolution of disability perspective—from individual-centric to a societal construct. 🤔
• Insights are shared on balancing the user and application interface through universal and inclusive design practices. 🔄
• Saul illustrates the importance of adaptive and responsive designs in contemporary web applications. 💻

Key Takeaways

• Universal Design aims to create applications that cater to all users by considering various users' needs and contexts. 🖥️
• The concept of disability has shifted from an individual's problem to a societal issue that needs addressing. 🌍
• Understanding and incorporating different user demographics is key in achieving truly Universal Design. 🌈
• Adaptive and responsive designs play a crucial role in ensuring applications work well on different devices. 📱
• Inclusivity in design goes beyond addressing disabilities and involves considering other societal marginalizations. 🌐

Overview

Chapters

• 00:00 - 01:00: Introduction and Background Dominara Saul introduces the topic of Universal Design for adaptive web applications. He expresses gratitude for the invitation by Asta and aims to make the session educational and informative. He provides some personal background information as an introduction.
• 01:00 - 06:00: Universal Design Concepts The chapter discusses the career and expertise of the co-founders of a consulting firm named 'Different,' which specializes in user experience (UX) and human-computer interaction. One of the co-founders shares their extensive background, including a Master's degree in User Interface Design from London Guildhall. With over 25 years of experience, they've witnessed significant developments in the UX field.
• 06:00 - 09:00: Understanding Disability The chapter titled 'Understanding Disability' discusses the development and changes in technology, particularly focusing on the rise of the internet and mobile applications as business tools over the past 15 years. It highlights the challenges faced due to these technological advancements and introduces the concept of 'Universal'.
• 09:00 - 15:00: Microsoft Inclusive Toolkit The chapter discusses the concept of designing adaptive web applications with a focus on Universal Design principles. It breaks down the concepts of Universal Design and adaptive web applications individually and eventually integrates them to highlight their interplay. The aim is to ensure inclusive and accessible interfaces in technology.
• 15:00 - 19:00: Universal vs. Inclusive Design The chapter introduces the concept of designing by considering all possible use cases, emphasizing its relevance in UX (User Experience) design, which primarily focuses on understanding the user. It mentions that usability is defined by ISO standards.
• 19:00 - 24:00: Marginalization in Design In the chapter titled 'Marginalization in Design,' the discussion begins with the concept of a specified user completing a task within a specific context. This involves considerations of effectiveness, efficiency, and satisfaction, emphasizing how these elements relate to design. The chapter references Bailey's Human Performance Model, developed by psychologist Robert Bailey, which explores human behavior by delineating it into three components. The idea is to underscore how understanding these components can mitigate marginalization in design processes by focusing on comprehensive user performance and interaction.
• 24:00 - 30:00: Principles of Universal Design The chapter discusses the core concept of usability as defined by ISO, which relies on understanding three key components: the human (user), the task or activity, and the context of use. The emphasis is on designing applications that effectively address these aspects to ensure usability and efficiency.
• 30:00 - 47:00: Adaptive vs. Responsive Design The chapter discusses the importance of understanding the needs of different types of users when designing web applications. It highlights the concept of Universal Design, which aims to cater to various types of people by accommodating their different needs. An example is given to illustrate the distinction between different user types, such as a business user versus a personal user, which suggests the necessity of adaptive or responsive design.
• 47:00 - 50:00: Conclusion "Conclusion" explores the diversity of users and the factors influencing their interaction with technology. It emphasizes that differences such as sight capabilities, technical knowledge, and experience levels result in varied user experiences. The chapter acknowledges that even when users perform the same tasks, their contexts can differ, impacting how they engage with the task.

Universal Design for Adaptive Web Applications presented by Dominira Saul Transcription

• 00:00 - 00:30 hello my name is dominara Saul and I am going to be talking to you today about Universal Design for adaptive web applications I've been invited to speak to the class by Asta and then very happy to be here uh hopefully you find this educational and informative so before I jump into it I'll just give you a little bit of background about myself um yeah that's what I look like underneath all of this but I am one of
• 00:30 - 01:00 the co-founders of a consulting firm called different and we specialize in ux and human computer interaction and I've done this my whole career I've studied it I have a master's in user interface design from London Guild Hall and for the past 25 years or so I've been working in the ux field as a consultant in in various capacities so I've seen the rise in the uh the
• 01:00 - 01:30 propagation of responsive and adaptive web applications I've seen the rise of of the internet as a business tool I've seen the rise of mobile applications and their evolution over the past 15 years or so so there's a lot of things that we've had to contend with as the technology has changed and I'd like to talk to you a little bit about some of those things so the talk today is called Universal
• 01:30 - 02:00 Design for adaptive web applications the there's two parts to that title there's the Universal Design part and then there's the Adaptive web applications part and we're going to talk about both of those things kind of independently and then mix mix them together a little bit at the end so when we talk about Universal uh design we're talking about designing for
• 02:00 - 02:30 everyone we're talking about designing in such a way that it takes into account all of the different permutations of use which is an interesting thing from a ux standpoint because our whole focus in ux is in is on understanding the user so ux and usability um are based on a very fundamental principle the iso defines usability as a
• 02:30 - 03:00 specified user completing a specified task in a specified context of use with Effectiveness efficiency and satisfaction now this definition itself is based on something called Bailey's Human Performance model and Robert Bailey is a psychologist and he came up with his human performance model to basically explain behavior year and the human performance model basically states that anything that you do has three components that is the
• 03:00 - 03:30 actor in in this case the human there's the task or the activity and there is the context of use and and this is the core concept that the ISO definition of usability is built on if you understand the human you understand what they're trying to do and you understand the context in which you are in which it is being done then you can build a really good application that
• 03:30 - 04:00 satisfies people's needs for their context now I'll give you an example of of each of these things in terms of Universal Design we're designing for different types of people at least that's that's one of the arguments for Universal Design so you need to understand the different types of users that you might have for your web application it might be a difference between a business user or a personal user it
• 04:00 - 04:30 may be the difference between a sighted user or a blind user or it might be the difference between a user that has a lot of Tech savviness and background knowledge and a neophyte or a new user so there are different types of humans or people or users that that may be in this equation they might all be doing the same task task might be in a different context of use one might be sat in front of a
• 04:30 - 05:00 desktop computer with a full keyboard a trackpad or a mouse and a nice large monitor while another might be trying to do the same task on their mobile phone someone might be in a noisy environment versus a quiet environment an environment with lots of glare versus a well lit environment so the context can change it could be a physical context it could be a technological context it could even be a social context right
• 05:00 - 05:30 you wouldn't necessarily pull out your phone and start and start doing tasks in the middle of an opera performance or at a very expensive restaurant so even the social context can have an impact on how this task human context equation plays out so Robert Bailey wrote seminal article it's called Human Performance engineering and that was in
• 05:30 - 06:00 1989. so this this concept has been around and has been driving usability in ux for quite some time now when we talk about Universal Design a lot of the times we we talk about that in the uh in the frame of disability so making sure that all types of users users with varying levels and degrees uh
• 06:00 - 06:30 of ability can actually use the products the services that we design uh and that that we input to fully understand our responsibility as designers we need to acknowledge that our own understanding and definition of disability has changed and evolved over time back in 1980 the World Health Organization defined disability as a disability is any restriction or lack of ability in a
• 06:30 - 07:00 person's ability to perform an activity today in the World Health Organization defines disability as a complex phenomenon reflecting the interaction between the features of a person's body and the features of society notice the different wording and the different implication in the 80s
• 07:00 - 07:30 the who really had a definition of disability that focused on the person that the disability was something inherent in that person we've since updated our thinking to understand that disability is really a social construct somebody is only disabled because we have as a society decided that this is something that you should be able to do and you can't do it but as it's a
• 07:30 - 08:00 societal problem it is up to us as a society to deal with it and so in terms of disability the focus is less on trying to fix people and more on trying to fix the way that we we build our tools so this means looking at how we design buildings it means looking at how we design applications an example of that evolution in thinking uh when we're talking about Universal
• 08:00 - 08:30 Design is the Microsoft inclusive toolkit so here is an example from the Microsoft inclusive toolkit uh and it's just one example of how we can expand how we think about disability so uh traditionally we would think of disability as something permanent uh or maybe something temporary but disability can be permanent it could be temporary it could be situational and when we design with the Universal
• 08:30 - 09:00 Design approach then what we look to do is make sure that people across that Spectrum from permanent to situational can benefit from us as designers thinking about how best to solve problems so this example is is from touch there are other examples site hearing Mobility speech that are in the inclusive design toolkit somebody that has one arm they have a
• 09:00 - 09:30 disability that is permanent and so they may have they may have Prosthetics or they may have excessive technology to help them but their uh their lack of a limb is a permanent condition someone with a broken arm or a dislocated shoulder for example might have their arm in a sling and the effect is the same same thing with somebody that is holding
• 09:30 - 10:00 a baby uh when you're holding the baby you effectively only have one arm that's useful to you and so from permanent to Temporary to situational these are all uh instances where the user would be they permanent temporarily or situationally disabled would benefit from uh from Universal Design so
• 10:00 - 10:30 the title slide for the section said Universal versus inclusive and you may have heard these terms right on one hand Universal Design and on the other hand inclusive design and I just want to take a second to touch on what they are and why they are different a lot of the time when we focus on universal or inclusive design we talk about disability
• 10:30 - 11:00 but we really need to broaden our thinking both in terms of universal and inclusive design and consider all types of marginalization inclusive design is where we are singling out specific things that we want to solve for people and this is why uh Universal Design is arguably a better approach whereas Universal Design you're not looking at a specific thing that you're trying to solve for people you're trying to modify your design process
• 11:00 - 11:30 to take into account all types of challenges that all types of users might face regardless of which flavor you practice I would encourage you to expand your Thinking Beyond just disability if you truly want to be Universal in your design you have to consider other types of marginalization also things like race things like gender sexual orientation
• 11:30 - 12:00 socioeconomic status and there are many more all of these have the ability to affect the way that technology is used there are some quite famous examples that you can you can certainly Google around race and gender and I've had personal experience in those things also in one of the projects I worked on as an interaction designer we designed a
• 12:00 - 12:30 barcode scanner a physical device and everyone that designed it uh thought it was great uh and everyone that tested it thought it was great uh and we uh rolled it out into production and everyone that used it thought it was terrible well everyone on the design team was male everyone on the test team was male and had you know relatively big hands the majority of people that were using it in um in in real life were female and many
• 12:30 - 13:00 of them had smaller hands and so just not considering the gender differences in the user population resulted in a bad design in terms of uh in terms of race we see things today such as uh inherent biases being picked up in data sets that AI are being trained on we see things um one example that has happened to me that I find hilarious is uh sometimes if
• 13:00 - 13:30 you go into a restroom and you have the the sensors on the paper towel and the soap dispensers they don't pick up dark skin very well so you know you see people like me like this in the bathroom just kind of waving underneath trying to get uh trying to get the soap dispensers or the or the dryers to work but these are things that we have to consider in the design and if you're not looking at that full spectrum can you
• 13:30 - 14:00 say that you are being truly Universal in terms of Universal Design and expanding the way that we think about use I would encourage you to do a few simple things when you are designing number one if you're designing web apps specifically um look at how metadata can be used to enhance your design there are there's the visible layer as
• 14:00 - 14:30 you know the the user interface layer and there's a lot of things that we can do to tweak that layer in terms of making it easier to use for different types of people there are things that we can tweak in the mechanics so the interaction design there are things that we can tweak in the content such as the labeling and the nomenclature that we use all of these can be uh can be looked
• 14:30 - 15:00 at and addressed to be more accessible and more Universal but in terms of learning how to use metadata the metadata is the data about the data that is is generated and so a lot of the times metadata can also be leveraged to enhance the universality of your design familiarize yourself with the assistive technology that's out there as much as possible because a lot of the time we
• 15:00 - 15:30 will build certain accelerators into the apps and the browsers and the mobile devices that we use these days have a lot of those accelerators built in but that doesn't mean that people with special needs aren't going to use other types of assistive technology so when you design your applications make sure that they work with a wide variety of
• 15:30 - 16:00 assistive technology screen readers speech to text magnifiers [Music] Etc some of that might be built into the browser or into the hardware and some of it might be used in conjunction with the hardware going back to Bailey's Human Performance model understand the context of use the context in which the users are actually going to be using the applications that you build is going to be very important and like I said earlier context can mean a number of things it can be a
• 16:00 - 16:30 technological context it can be a social context Once Upon a Time my team and I we designed a piece of assistive technology uh for people that had low vision and it was a digital magnifier and in the user research that we did we found that there was a bit of a social stigma a bit of embarrassment for people that were low vision to have to pull out uh you know a
• 16:30 - 17:00 relatively large magnifying glass with a very strong light on it to look at things like menus in a dimly lit restaurant or to look at labels of food in a supermarket so the device that we designed we tried as much as possible to make it look just like a regular tablet like an iPad like a Galaxy tablet so that it didn't look that different that alien to uh to other
• 17:00 - 17:30 people so it was less embarrassing social context mattered uh to many of the people that we talked to in our research that leads me to the final Point know your users the worst thing when trying to design uh universally is to make assumptions about your users and the user populations that you're trying to design for don't assume go out and talk to them
• 17:30 - 18:00 put in the work do the research get people from different communities to come in and not only test your designs but to help you design them to to input into how the designs come together and that's the only way that you will truly get a feel for if you are truly being Universal so look at some of those different marginalized communities and include them in your design process
• 18:00 - 18:30 there are standard principles for Universal Design and I'll just go through some of them uh very quickly because you can look these up by yourself but I'll just touch on some of them these are the the principles that characterize Universal Design the first one is Equitable use so this really is just saying that there are all sorts of different types of people in the world and when you design you should try and
• 18:30 - 19:00 include as many of those different types of people as possible no matter how we Define them take some time and sit down and think about all of the different ways in which people are marginalized and whether or not the product or the service that you're designing contributes to that marginalization or helps solve that marginalization flexibility in use there's a lot of
• 19:00 - 19:30 different ways that people can use things and so what we try to do is build in flexibility of you so you can use it in a bunch of different ways and you'll see this built into many different technologies that you might use a simple example of this is your productivity software whether you're using word or whether you're using Google Pages
• 19:30 - 20:00 they both have flexibility built in you can go to the file menu and click it and drag down and choose your uh your action that way or you can go to the task Ribbon or you can use the keyboard shortcut or you can use the voice input so these are all different ways within the same application that you can accomplish the same thing so building in that flexibility of use
• 20:00 - 20:30 helps you be able to accommodate different abilities different preferences but also different contexts right so there is a context in which I will use speech to text and there is a context that I will use Swipe and there's a context that I will sit down and type out uh the the words that I'm trying to to use so even within the same user group or the same user you might find that flexibility is used in
• 20:30 - 21:00 different ways depending on the context being simple and intuitive in ux we have a saying and that's saying is that simple is hard so um it's easy to say build something simple or design something simple but um really simplistic design is hard to achieve because we have so many different controls and widgets and ways of doing things and so we really have to
• 21:00 - 21:30 think about the user flows we have to think about the language we have to think about the accelerators that we use and make sure that it is simple now intuitive is something different and that's a word that gets thrown around a lot just make it intuitive make it intuitive what intuitive means is that it works the way that you would expect it to work now for you to build something that works the way your end users expect it to work it means you
• 21:30 - 22:00 have to understand the way that your end users think about the ways that it should work we call this a mental model so in order to make something intuitive you actually have to understand your user's mental model and in order to do that again you're not going to guess you're not going to postulate you should really go and sit with them ask them observe them to see how they do the tasks that they
• 22:00 - 22:30 are trying to solve with the technology that you design perceptible information is another Hallmark we hide a lot of things for the sake of Simplicity which is the previous uh the the previous principle but hidden things are difficult to perceive what do I mean by hidden things anyone with an iPad an iPhone an Android phone will know that these capacitive
• 22:30 - 23:00 touch screens support gestures gestures are great and they're fantastic accelerators but how do you discover what the gestures are what does a four finger pinch or a four finger slide or a five finger pinch do there's no instruction manual that comes with the iPad you just have to discover it by yourself and most people discover those gestures by accident hidden or hard to see
• 23:00 - 23:30 controls are very difficult for some people because those controls are generally designed with a certain level of dexterity in mind and so those those controls shouldn't be your primary or your only way of completing tasks and this is what we mean by perceptual uh perceptible information all of the information is necessary for
• 23:30 - 24:00 someone to complete their task should be visible should be observable and should be discoverable tolerance for error um it's not a matter of if people make mistakes it's a matter of when they make mistakes and there's two ways to handle error one is to try and constrain the user for making errors right and we do that with things like Wizards that will step a user through a complex process
• 24:00 - 24:30 step by step so that they don't deviate and go off script and make errors the other way which is actually my preference because it still gives the user control and freedom is to make it easy to recover from those errors that they made so error messages back in my day when I was young were very cryptic you know error minus 11 okay well what's error minus 11. and every once in a while you'll still see that in in software where you have a really cryptic
• 24:30 - 25:00 error message a good error message tells a user what's wrong how to fix it and where to go to fix it so on one hand you can constrain people so they don't make mistakes on the other hand what what you can do is when they do make mistakes help them to recover from it low physical effort so basically we want to be as easy to use as straightforward as
• 25:00 - 25:30 possible so efficiency Comfort minimal fatigue right don't put the onus on the end user to work hard to get the result that they need the example here is is a physical one but in ux we have the concept of cognitive load and cognitive load speaks to the amount of information that somebody has to hold in their short-term memory in order to complete a
• 25:30 - 26:00 task that is also physical effort and so what we as designers want to do is have the system take on as much of the work as possible and take that off of the end user so accelerators the ability to undo pre-populating or default populating uh input Fields all of those types of things can lower the physical effort
• 26:00 - 26:30 that the user needs to do reducing repetition things like that size and space for approach and use so again in in the physical sense you want to make sure that if there is manipulation that that is being done to the product that you are designing that uh it fits in the context of the amount of space that the user has to physically
• 26:30 - 27:00 use the device this applies for web applications also um because sometimes we need to do certain types of gestures and you know if you're using your accelerometer for a mobile device or a tablet these types of things are useful to consider uh but also when you are using digital technology you are looking at things
• 27:00 - 27:30 like do you need uh sound input right um is that appropriate for the space that it's going to be used in if you're building something that's going to be used in a particularly noisy environment don't make it critical for the users to have to uh understand the sounds that are coming out of the device in order to complete their task so these are just a few of the uh the principles that you
• 27:30 - 28:00 can look at that you can focus on when you are looking to to design universally I just threw in a reference for you this is a book uh from O'Reilly media called Universal Design you may or may not be looking at it already in your course but if you haven't seen it you can actually go go online and read it on the O'Reilly learning platform you can sign up and
• 28:00 - 28:30 get a 10-day free trial and actually read the book absolutely free so the second part is adaptive versus responsive uh and uh they both describe similar things when we are designing adaptive uh applications that means that the the application will adapt to different sizes or different inputs uh from the
• 28:30 - 29:00 browser right and so as the browser screen gets bigger the content will flow and change so that it is appropriate for the type of screen that it is being shown on in terms of adaptive design you are you are actually looking at the type of screen so it detects the available space of the screen the physical screen so you could resize
• 29:00 - 29:30 the uh the windows and it wouldn't necessarily depending on how it's designed have an effect on the application responsive design specifically looks at um at break points in the window and essentially other CSS media queries I'll quickly show you a couple of examples so this is an example of adaptive Web Design This is Turkish
• 29:30 - 30:00 Airlines site and uh what is happening here is you'll see that some things they jump at different uh at different break points and with adaptive design basically what they're doing in this particular style is that they have multiple assets that will be loaded depending on the type of or the width of the screen that is detected
• 30:00 - 30:30 so the assets themselves are not fluid but they're loading multiple assets at a time in order to account for possible uh variations in width in the screen this is in contrast this is the web version of slack and the contrast here is that you will you will see things that will flow a little bit more smoothly you don't have that jump uh
• 30:30 - 31:00 because the elements are Dynamic right and so the elements themselves are going to change based on the width of the screen responsive design uses CSS media queries whereas adaptive design uh does not is one better than the other depends on who you ask or it depends on the situation that you are trying to uh to solve a problem for one of the things that they do have in
• 31:00 - 31:30 common is that whichever type you choose you should be designing the mobile version first so mobile first is a a well uh regarded uh best practice when it comes to responsive and adaptive design mobile first is a it makes it easier to do the desktop
• 31:30 - 32:00 design if you've done the mobile design first that's what that's what we mean when we say mobile first and there's a reason for that the desktop you have plenty of space right to to put all of your stuff uh and the desktop interface is very precise um see the cursor there moving around that cursor is able to hit one pixel an individual pixel if you need it to not so if you're using mobile we have our
• 32:00 - 32:30 you know fat little flesh cursors here and they're not very precise so if we design the desktop site first and we have something that's really beautiful and pretty and does everything that we want and then we have to do the mobile site uh or the mobile version of the app and we are trying to cram everything in that we had on the desktop site and it really doesn't work but if it works really well on a small scale it's much easier for
• 32:30 - 33:00 you to scale up to the desktop first so that's why we say mobile first um you'll want to make sure that you consider touch and gesture in your design um that is because like I said it is it is less precise than a cursor but also I mentioned before those uh those hidden uh or those small uh elements of the of the screen interaction you want to make sure that they are accounted for uh and they have
• 33:00 - 33:30 visible counterparts so consider what your gestures are going to be and make sure that that gestures are not the only way to get something done you want to ensure that your buttons and your targets are sufficiently large for touch interaction and also you want to consider the needs of all types of users so in terms of mobile first looking through the workflow trying to
• 33:30 - 34:00 anticipate the points of friction and understand where your users might run into trouble um be they uh really really experienced users or new users be they low vision users or sighted users um you know be they users with permanent temporary or situational disabilities all of those things come together to [Music]
• 34:00 - 34:30 um to really make better applications you as the Next Generation uh or the newest generation of application designers and developers are going to face the challenge of technology that is evolving at an amazing rate we see chat GTP and other types of AI and machine learning technology really taking Center
• 34:30 - 35:00 Stage over the last few months it is a different world that you are stepping into as new designers and developers than the one that I stepped into when I was new in the field and so these fundamentals are going to help you design products Design Services design applications that are really useful and usable for a broad variety of users