Thank you.
Good morning, everyone. I'm Megan Hudak with the Human Center Design Center of Excellence.
And it's my pleasure to introduce our speaker for today's interactive cognitive load workshop.
Meet Robert Hunsaker, a senior UX designer with soft drums. Robert is passionate about enhancing cognitive accessibility and user experiences.
He has worked with industry leaders like Google, Microsoft, and Liberty Mutual, leaving a lasting impact by improving user interfaces and reducing launch times.
For new Google Cloud products by approximately 50%. Today, Robert, will guide us through the cognitive load workshop sharing practical insights on cognitive accessibility and its impact on user experience.
I have dropped the link to the whiteboard in the chat and I will continue to drop it in. Anyone needs to join late.
Okay.
So please welcome Robert Hunsaker.
Thank you so much. I have to apologize in advance. I'm getting over a call so my voice might be a little.
Up and down, but I will. I will just, just bear with me. Alright. Well, today I'm gonna be sharing like she said, cognitive load workshop.
So it's gonna be an interactive session. So as many people to contribute as possible. The better the experience will be.
So we're going to be talking through what cognitive load is. I myself am somebody who has some cognitive accessibility issues.
So this is very important to me and it's surprising the kinds of things that can affect people in their workflow.
Even those who don't have cognitive accessibility issues. So to, just quickly go through the right now I'm on this slide and at the bottom of each slide for easy navigation if you want to follow along with me I have a little next button that should take you to the next grouping that we're gonna be working on.
So I'm gonna do that now and it's in the bottom right. I don't know if you can.
See that but. To start with, we're gonna go through like an overload of overview of what cognitive load is.
So cognitive load is essentially the amount of mental processing power you need to perform a particular task. So you could, that could be with web applications that could be with any kind of process of information that you need to do such as filling out forms virtually or in person.
And this can include things like navigation. You know, content on a page, actions that you need to perform.
Where things are located, all that you need to perform, where things are located, all that kind of stuff that you have to perform, where things are located, all that kind of stuff that you have to retain and the process that you have to retain and the process that you're, you have to do to complete whatever action you're trying to accomplish.
And for users with disabilities, cognitive load can be, a lot higher due to the additional processing demands people have, based on their particular impairments.
And for some people, We should also keep in mind that there is something called comorbidity which means that they may have multiple things that interact with each other.
So we want to we want to keep a broad spectrum in mind when we're when we're thinking about these.
So instead of just like this is how folks with autism might see this. This is how folks with dyslexia might see this.
Think about how would somebody who has both of those, how might that interact with them? And then. If the cognitive load is too high, people tend not to process it at all, which means that they may not see.
See the information, they might get overwhelmed and not be able to parse or understand what they're looking at or they might just hit the escape button and go out and if you need them to finish what they're doing and they just can't then that's that's a loss that you don't necessarily need to have.
And this can lead users to making mistakes. This can lead to just long performance times. So we just wanna make sure that we're.
Addressing these cognitive load issues and understanding them. So we're gonna we're gonna be going through a few things.
But this is a huge topic. So I always encourage people to research and learn more as they go through.
So for our first part of the workshop, we're gonna be talking about cluttered user interfaces.
This is a very common thing, especially when we're transitioning from older systems. So. I'm gonna do a quick run through of for those who have never used this particular whiteboarding tool for each one of these.
Blocks that we have in red. I'm gonna go through what it is we're talking about and we're gonna try and put some examples of what people might have experienced that would be you know.
Satisfy this particular thing. To do so at the bottom of the screen you're gonna see a little pencil icon and a little thing that says sticky notes when you hover over.
So if you click and drag the sticky notes up, you can then type in whatever you want to type.
So I'll read them coded user interface here, and then feel free to add as we go.
So, cluttered user interface. One of the most common cognitive load issues that you're gonna have is a clutter user interface.
When there's too much information on the screen, it can be overwhelming, especially for users with cognitive disabilities.
Users may have difficulty finding what they need and or become frustrated and give up. This is very common with applications that use a lot of tables.
So if you have a lot on the screen, just crammed in there trying to get as much information as possible.
It can become too much. So, I'm gonna give us 2 min to go through and just pop in, a couple examples of cluttered interfaces that he've experienced and feel free to write how that might have affected you.
Okay.
We will go through how to solve for things. In a moment. Don't worry about. Going over the text we can reorganize later.
So just go ahead and feel free to put as many on here as you want. I'll play a little nice acoustic music for the background.
Okay.
Oop. Interesting. It should have been locked, but I will try and relocate.
There we go.
I will drag a couple of extra notes just in case. So anybody's having trouble getting some notes out here.
These are also resizable. So if you if you do find yourself running out of space, feel free.
Okay.
Okay. Okay.
Okay. Okay. Alright, we got about 8 s more.
Hello. Alright, I appreciate people for contributing. Feel free to finish up what you pricing. I will go through a couple of these.
That have been completed and we can talk through and move some of these over. So, first one we have here is, finding the share icon.
To send the product to a friend appears to be in multiple places. So yeah, sometimes that can be helpful, but sometimes that can make it harder to do and know which one is the correct one to do.
So, being thoughtful as to how we, how we lay things out and how we try and help the user.
And then we have time table for bus schedule or other transportation. I have seen quite a few of these that are overly complex.
Washington actually had a pretty good solution for this by introducing booklets for each one instead of just trying to squeeze everything onto one timetable.
And utilizing, the web to just focus on what particular, thing you're trying to find.
Alright, then we have the application's owner thinks the forms are uncluttered and easy to work with when in fact they include facets.
Ellipses and very odd workflows to keep the solution that you need. Interesting. That might be a good one to drag over.
It's over stimulating to me.
Okay, love more details on that one. Government paperwork specifically work visa-related form pages.
Okay. Product. Productivity app. Sometimes there are too many, options and it's overwhelming.
I will second this by saying there's also a lot of companies who aren't sure which have to use or they have people coming in who had success in one app and others come in another and they introduce multiples and then for those who aren't familiar with either one, which one do you pick?
And that can be just true of any kind of solution apps, not even just productivity apps.
Too many, too many things. When a website has too many tabs to sort through and the search function does not work properly, I think an easy to use website is Apple, for example.
Appreciate the example. Some traffic, signage especially when coupled with poor road design you can't paper over bad design with more information.
Yeah, I can second that. I'm sure we've all been in this scenario where we were even using navigation and still took the wrong exit because it was unclear what sign went with what road.
Very possible thing to happen. I've done it quite a few times. Did not know where to look when trying to figure out where to do certain self service options on my, bank website.
Can be hard to read or navigate on mobile devices when dealing with filling out too many input fields on a form.
And I'm gonna stop right about here. We have a lot of other good ones here.
So we can all kind of see that. Cluttered interfaces can affect everybody. It's not just people with cognitive accessibility issues.
Anything that makes your life a little harder to understand. Interestingly enough, sometimes, we don't, we don't necessarily, until we start using something, we don't understand, when, things change that we've made those changes for those cognitive accessibility issues.
And it's good to. Try things out when things have been simplified to see if it works for you and let people know.
But a lot of these can just simply be addressed by doing some tasks with some users, seeing if there's success rates, timing, how long it takes people to do things, that kind of thing.
All right, so I'm gonna go ahead and hit next to go to our next section. And we will be addressing some of this.
A little bit later. Let me move this out of the way, make a little easier read. All right, so we have complex navigation.
This is probably one of the most common things I've run into in my career is people making very, very complex navigation.
And navigation isn't just how you get, like at the top of the page you see navigation options or on the side, it's basically just any way you get through your page, your content, your workflow.
So that can be. Links that are meant to guide you through a workflow. It could be split navigation.
Features. It can be sub navigation. So any way to get around your site. Can add to this complexity.
So other common cognitive load issues is complexity. If the user has to navigate through several pages or menus to access the information it can make it Oh, even if you don't mind moving your cursor so people.
Thank you. Appreciate it. So it could be challenging for them to keep track of where they are in the application.
Complex navigation can also lead to a lot of redundancy. If related processes are separated for users with visual impairments or cognitive disabilities, this can even be more of a challenge.
So. What we mean by. Having complex navigation.
Related items. So if, if your user has a mental model that thinks that these things are similar, but maybe the people who design the site don't think of them as similar and they're in 2 different places that we've done our due diligence to understand that information architecture from the user's perspective.
Separating those out can really make a hard for people to remember where to go for things. And things that are very similar, that are being separated and aren't related to each other.
If they're in 2 different places and you have to kind of go back and forth that can make it harder to ever remember where to go.
So even if you do it on a daily basis, you might get confused as to where to go making it just take so much longer to do or even not be able to find things.
That's often when you find people doing workarounds by bookmarking different parts of the site that they use.
So if you've run into complex navigation, I want you to show some examples here.
I'm sure we have. So that again, that's not just the navigation at the top.
That's just getting through any kind of site that you need to do. All right, I'm gonna once again send in a timer.
2 min.
And feel free.
What people are. Brian knows I'm gonna go up here and clean this up a little bit.
Not sure what just happened.
Let me lock that. There we go. Sorry about that.
See.
Hmm.
Okay.
Okay. Yeah.
Okay.
Okay. Okay.
Okay. Okay. Okay. Okay.
Okay.
Alright.
Awesome. Alright, let's read through some of these.
Alright, and we have confluence. I'm not sure if everybody here uses conference, but, I'm very familiar with this.
I've actually had a quite a few conversations. Confluence is one of those tools that often or is meant to make it so you can kind of do things as you need to do things.
So when you start from a smaller place on some of these applications and you build up, you, you may not be thinking about how that will affect long-term navigation goals.
One thing that happened when I was working on MDP is somebody on CMS went through and reorganized everything on MDP is somebody on CMS went through and reorganized everything and it's somebody on CMS went through and reorganized everything and it really improved people's ability to use the site.
It's something, and it really improved people's ability to use the site. And it really improved people's ability to use the site.
Had something I would definitely recommend doing with these kind of applications like confluence or coda or notion is always think about your information architecture as you're expanding out and adding new things.
And then circling back every now and again, make sure that now that you've added more content, does it still work?
Then multi-level menu nested within menus, which requires 2 to 3 levels of drilling down.
So what I believe this is when you have those kind of child menus that you click on one thing and then you get a menu of like 5 other things and then in that you might have another menu.
So that, can be if not done really, really well, that can be very confusing for folks.
One way that people have addressed this is to switch to a mega menu. One, that can be very confusing for folks.
One, way that people have address this is to switch to a mega menu paradigm where you focus on user actions rather than just listing everything that's there because ideally what we're trying to do is satisfy the users goals and needs.
So instead of just creating a complete tree table in our navigation focusing on what does this user need to accomplish.
And those mega menus can be nice for doing that. I'm sure we've all been to some sites, especially real retail.
Big on those where they create this mega menu where they have like, hey, here's our sale items, here's our sweaters and things like that.
I group and organized so there's a lot of space and separation. And then we have sites that have multi-level menus that forget to make a mobile friendly version.
That's a good point. And, If you know people are gonna be using a mobile app, even if you don't, a lot of times that mobile friendly or mobile first approach can create solutions that are more cognitively accessible and can help you avoid some of these pitfalls.
And then, make me forget what I came to a page to do when there's too much information or too many notifications vying for my attention to social media like Facebook or Instagram.
That will be a good one for another one we have coming up here. And I'd say that that's a pretty good example of a cluttered.
Workspace. We use, 3 a discovery platforms and 4 related data gathering tools.
Microsoft does a good job with a simple initiative. If you can tell I'm dyslexic.
So, that one, initiation, there we go. But, then when you get to granular activities, we need to reference online manuals.
Case point FTK are worlds. To themselves, needing experience to get to them.
Yes. So the ideal place is we wanna understand what the user journeys are and understand what the user journeys are and match the navigation to those journeys.
And instead of having the user journeys are and match the navigation to those journeys. And instead of having the user try and learn how to use the navigation to those journeys.
And instead of having the user try and learn how to use the tool, the tool learns how I think that's a good example of that.
And then click cycles leading, you to the same page over and over. Even when you think you may be narrowing, in on some needed information.
So. Assuming I understand what this is is like you, you're part of a workflow.
You finish everything you see on the page and then you feel like you need to go to the next thing and you click back or you click to go to the next thing it just circles you back or you click to go the next thing, you finish that and then circles you back can cause confusion if you're trying to finish a workflow and it's not evident why you're back on this page.
So Being back on the same page, isn't necessarily bad as long as it's clear to the user why they're back on that page.
And it's not just there to be there. So a lot of times that can be a workflow issue and a navigation issue.
So making sure you call out why we're back here. And a lot of times you can avoid that kind of issue by using something called progressive disclosure.
So if you don't need to see something until it's relevant to a workflow. You can always add that when it gets back.
So when you do circle to that page, not only is there a new block of information to work through?
You can focus in on that new block information. So you may need it for reference all on the same page.
But you may not need to show it right away. Which can also reduce the clutter that you see on a page.
Is if you only see that you need it. Alright, breadcrumb trails that become very long and or whose labels are not representative.
That's a very good example. A lot of bread crumbs have moved to one of 2 paradigms to adjust for this, which is either having it so your center block is as you you limited to 3 or 4 depending on the type of site you have.
And if your mobile friendly, I would really caution. A different approach than either we're gonna talk through.
So this is just for websites. There's a mobile version where it's just a two-tier approach where you can go back.
But for the first one. You have an ellipses once you get past a certain threshold and when you click on that it brings down a menu that tracks all the different pages in the bread crumb.
So it keeps it simple so you can go back to the tier. But you can still see the breadcrumbs that you've had going through.
The other is almost, it's similar to how some pagination works. Is as you move through, you move that, that ellipses towards the beginning.
And every time you drill in, it's adding something more to the ellipses towards the beginning and every time you drill in it's adding something more to the ellipses.
So it depends on the mental model of the user which approach is going to be better. So if the user maybe only needs to constantly go back a step that second approach is better.
But if a user often might need to go to the beginning for a different workflow, then that first approach is better.
So make sure you understand what the user needs are. And offer alternatives that having to go through the breadcrumbs.
So if you make your other navigation very easy to accomplish where maybe you do use the mega menus and they don't even have to go back to the mega menus and they don't even have to go back to the beginning they can just go to the next thing in the line of activities they need to work on.
But those are 2 good examples that brightcrumbs can't solve. And then, navigation on mobile that does not match desktop had issues at an insurance website.
Where certain pages. We're not, not accessible on mobile because the navigation was different.
So. That. That is important. And the one thing I caution you on forcing the navigation be the same is make sure you test it.
Because the mental model of mobile users isn't always the same as the mental model of desktop users.
So having them the same may not always be to your benefit. But if you have users who switch between the 2 on a regular basis, having them the same might be of your benefit.
So I would always caution you to make sure you test with users. So if it then you'll find if it's problematic or not and Maybe the difference is that what are the approaches is wrong and it's not necessarily that it's different, but that the tactic we had for say desktop was too complicated and we need to simplify that.
It's not that they're different, but it's just that There's no commonality.
Alright, and then we have too many top level navigation choices, sometimes leading to scroll to see all.
Yes. I don't know how the age of a lot of people here, but if you remember way back in the day, we had super complex navigation websites and we always had to have a site map page where people could go and just see a complete list to be able to find some of the stuff they're doing because they just couldn't find it in the navigation and sometimes you'd have to.
Find it you know do a find on that page to find the exact thing you're doing luckily we don't live in that world.
And when we get to solving some of these, we might do a overall, solution for this, but good solutions around navigation might be thinking an overall solution for this but good solutions around navigation might be thinking of other things as navigation rather than just a menu at the top of the page.
And that's a lot of people trying and cram everything in there, but sometimes navigating for some users might be searching.
That's their their workflows. They need to find something specific. So making searching the primary way people navigate that website.
Google is a great example of that. So very important to understand the workflows of the users and pairing it to that.
In thinking of, okay, click throughs, progressive disclosure, having it so you have a child navigation within a group so if you think of how some social media sites, and within a group.
So, if you think of how some social media sites, tackle this is you have a different set of navigation within a group.
So, if you think of how some social media sites, tackle this is you have a different set of navigation when you're looking at everybody's profiles.
But when you get into a specific profile, you have a different set of navigation because your mental model is different when you're in that profile and you don't necessarily need to see both at the same time because the All right.
And then, and they give us instructions and I'm gonna go a little bit faster here because we are running short.
So I amigious instructions are. Basically, you're providing information to the user and how to perform it, but it's written in a way that's not necessarily easy to consume because people maybe are trying to put everything in there or they're trying to make it so you can pick and facilitate multiple scenarios.
Anything along those lines. And if your instructions aren't clear and simple, then they might as well not be there for a lot of users.
So, and biggest instructions can be just a blur at the top of the page. It can be the, as you move through particular step, base navigation for each step you might have that.
So it's it's not just being making sure you have them for both set of instructions because you if you put too much in there that can also create some bit of ambiguous because you might be trying to to solve for multiple things.
But, I'm gonna, I'm gonna go ahead and move on to the next one.
So we will do some examples here, but other examples might be. Having. Having a like an entire workflow instruction on the top of a page or even having a PDF of everything that you link to where it has everything and that might be too much for people because they're focused on this workflow and they have to read through everything.
It can be a little overwhelming and they are not sure what applies to their workflow. So making sure you're clear and concise.
Some people do onboarding programs where they focus on each element as it needs to go on as the user is interacting with it.
That puts up just for that piece. Sometimes just making sure that we've matched their workflow so clear to the UI that we don't necessarily even need instructions. So clear to the UI that we don't necessarily even need instructions.
So clear to the UI that we don't necessarily even need instructions. So clear to the UI that we don't necessarily even need instructions. Now you don't always need instructions.
And then All right, and then lastly, we have slow load times. So slowed load times, can impact users attention and memory.
So a lot of cognitive accessibility issues are around those particular things, whether it's autism, whether it's dyslexia, whether it's ADHD.
And if you can't maintain that focus or your load time goes so far that you might even lose track of where you were in the process.
Because you were waiting for something to load. And especially if you're working on something complex with lots of variables, you might have to go, oh man, I need to.
Go back and figure out where I was supposed to do here. In the real world terms, you can think of it.
I walked in the real world terms. You can think of it. I walked in here to get something.
But it took me so long to get here now. I forgot what I walked into this room for.
I think we've all experienced that before. It's the same thing and that can happen on a website and if it's if you have those load load times it's more inclined to happen.
So optimizing for those load times. And there's lots of ways you can do that. Again, going back to progressive disclosure.
Showing things only when you need them using pagination so you're you're keeping things small and that can also reduce the cluttered workspace having you know 5 items on a page 5 is a nice safe number people tend to try and do 10 or 20 but for most people if you have a lot of information doing 5 of them is where most people can get to before it starts getting overwhelming or too cluttered.
All right. So the, these particular issues, so, that are the result of what we were seeing before.
So we have decreased user satisfaction. We have increased user errors. This is probably the most common thing you're gonna see with cognitive accessibility issues.
Is people doing the wrong thing unintentionally. So, If you get a lot of help desk tickets, if you have people who have to go back and redo their work, the odds are you have some cognitive accessibility issues that's driving those up.
So, test find out where those are. And, try and address them as much as you can.
But those are the big, big indicators that there's some kind of cognitive accessibility issue.
And it doesn't just affect people with cognitive accessibilities. So, always, keep that in mind as you go through.
And then decrease user engagement. So for some of our particular products, we There's a requirement to engage.
But if you, you can even gauge like the reluctancy. So if people put off to the very end to do something, it's because it's a painful process and we've made it hard for them to want to get it done.
It's not just putting it on the user that that's how they work. A lot of times they, that's how they work.
A lot of times they, that's how they work because they feel the that's how they work because they feel the painful process.
If it's not a painful process and they can get that's how they work because they feel the painful process and they can get it out of the way and market is done it looks better for them and they tend to want to do that so just making sure that you track engagement not just whether or not they engage but how soon or how frequently they engage if they do more engagement sometimes they can get things done faster more efficiently
not miss things or miss things maybe have less errors so if you're if you're seeing those other things the engagement could be that it's feel free to, if you've experienced any of these, feel free to hit the little plus button on any one of these.
And and show that like I've experienced this this is not just a competitive accessibility thing.
Alright. And then for solving these particular issues, so simplifying the user interface. Obviously, if you have a cluttered user interface, you have cluttered navigation.
You, unnecessary complexity, simplify things. So simplifying things is using clear and concise language.
Simplifying things is reducing the amount of visual stuff on the page. So like people with ADHD, it's not just that things are complex but if there's just a lot so a good example of that is when you have so you have a table and you have a bunch of actions that need to be performed on each row.
And yet maybe 4 or 5 buttons or icons or something like that that just repeat all the way down.
That can be overwhelming for a lot of ADHD people or autistic people. And it's not that if you don't need to interact with it, all the time, you don't need to show it.
So simplifying that out, reducing that visual clutter. So some some applications have got around that by having it.
So if you interact with it, if you tap onto it or if you hover over it, then you see those actions that you perform or if you select a particular thing you'll see those actions or if you right click there's lots of different ways that it just depends on your workflow what you're doing.
So removing excess information. So we do want to have clear instructions. But is the is the is it a verbose instructions that are causing clarity issues.
So when you look at a lot of design systems, they'll say for action buttons, keep it as simple as possible, keep it as clear as possible.
So clarity doesn't mean saying having a sentence for that button saying this is exactly what you're about to do.
It's about maybe you have one or 2 words that are absolutely clear as to what you're doing.
And reducing that down. We if we have time we can circle back and do some specific examples for each one of these to solve for and then using clear and concise instructions again.
So making sure that it's in an easy to understand manner. So what's clear to one person that isn't always carried to another.
So I recommend testing with a variety of users. Because I've worked with folks that who weren't even doing instructions, but just the way they parsed information, but just the way they parsed information was so dramatically different than mine that I didn't understand what they were talking about the information was so dramatically different than mine that I didn't understand what they were talking about half the time.
I'm an avid reader. I have a high vocabulary, but just the way they put information together was so alien how I put information together that it was clear to them but not clear to me.
And then there you know that went the other way around too I've written stuff out quite often especially with my dyslexia or an ADHD that was not clear to other people.
So I tend to always have somebody else look at what I write. What I'm trying to effectively communicate information to users to make sure that it's clear to them, it clear to others.
And working cohesively as a group. So sometimes you can avoid these these clarity issues by just ideating on language together, making sure there's an expert in the room if possible on that's been trained on how to write this kind of stuff.
But yeah, again, not everybody processes information the same way, making sure that it's written as simple way, easy to digest.
And provide multiple simple navigation options. So instead of having one complex navigation option that is that drop-down that somebody was mentioning earlier where you have that tree style drop-down that you have to go like 5 levels deep.
Well, if you don't need all that to start with, you just get into the area that their workflow is appropriate.
That's a simple navigation. Maybe it's one click. Maybe it's 2 clicks.
And then when you're there. You provide those other options that are available because it's within the context of that workflow.
If you don't need that context, you don't need to show it at that point. So if you have multiple simple navigations or like I was saying with that social media approach where you have that breakdown as you as you get into this other group.
So I'm now in a profile, so now I'm seeing the navigation for the profile.
And then if I'm contact switching back to seeing the grouping of profiles I have different navigation because I don't need to see that other navigation if I'm.
Different context. And then use reusable concepts. This is probably the biggest thing I would say to take away from.
If you have 5 or 6 processes that are. Almost identical. If you have a different way to tackle that for each one of those, it's adding a tremendous amount to the to the users cognitive load because you're switching from process to process and now you have to relarn how to do something.
Even if there's a similar workflow. If you can figure out a way to build one thing that can satisfy these different items, it reduces the cognitive load dramatically.
So instead of having, okay, well, we have these exports over here. We have these uploads over here.
We have these things here. But Kind of fundamentally, we want to look at it say, okay, well, the actual process is very simple in terms of we're storing stuff.
Okay, well, we're storing stuff and we're visually showing you ways of interacting with that storage.
If you can simplify these different processes. Into one cohesive process. That is repeatable throughout where people don't have to relearn how to do it in each area dramatically increases.
And that can be true of the language as well. So, when you when you are planning things out here current workflow might say this is cancelled this is terminated this is delete or remove or archive but when you actually talk to the users maybe they think of all that is the same thing and they don't know which one to pick.
If you can reduce the complexity around that and just keep that all as one thing. Reduces cognitive load dramatically.
Just make sure that it's not going to miss anybody else's work. Flows out that they do so.
All right. Yep.
Yep. Yeah.
You were all over. Yes, apologies. We are almost out of time. So I just wanna last 5 min if anyone needs to take a break before our next session.
Okay.
We will also have a little bit of time for Q&A. So please share your comments by unmuting yourself or posting your questions to the chat for Robert.
Okay.